웹 언어의 구분
웹페이지는 크게 프론트엔드 영역과 백엔드 영역으로 구분된다. 사용자가 보는 화면(뷰)은 프론트엔드 영역이고, 서버와 데이터베이스를 연동하여 로그인, 회원가입, 검색 등의 기능을 구현하는 부분은 백엔드 영역이다. 프론트엔드에서 사용되는 언어는 HTML, CSS, javascript 이다. 그밖에 이를 조합하여 웹개발을 빠르고 쉽게 구현할 수 있도록 도와주는 프레임워크가 있다. 예를 들어 웹디자인을 쉽게 구현하도록 도와주는 Bootstrap, Material UI 등과 요즘 자주 사용되는 React, Vue.js 등이 있다. 백엔드에서 자주 사용되는 언어는 자바, Javascript, Python, PHP 등이 있다.
HTML 은 웹사이트의 내용을 작성한다. 예를 들어 메뉴나 로그인 폼과 같이 사용자에게 보여주는 컨텐츠이다. CSS 는 웹사이트의 스타일을 꾸며준다. 예를 들어 로그인 버튼을 오렌지 색상으로 보이게 하는 등 화면의 디자인을 담당한다. Javascript 는 웹사이트의 동적인 기능을 담당한다. 예를 들어 스크롤을 내리면 다음 페이지 목록을 보여주는 등 컨텐츠를 동적으로 보여줘야 할때 사용한다.
Frontend Developer Roadmap
Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development.
roadmap.sh
상황에 맞는 기술 스택 선택하기 (기술 스택 종류 + 기업들이 사용하는 기술 스택)
비즈니스 또는 스타트업을 위해서 소프트웨어를 개발할 때 여러 가지 고려사항이 있다. 돈은 물론이고 시간 등등 하지만 이번 포스팅에서 소개할 내용은 개인 혹은 팀의 상황에 맞는 기술 스택
wkdus0608.tistory.com
https://yozm.wishket.com/magazine/detail/1402/
IT기업에서 선호하는 개발자 기술 스택 TOP 20 분석 | 요즘IT
이번 글은 국내 IT 아웃소싱 1위 플랫폼 '위시켓'이 분석한 프리랜서 개발자 구인 해결 사례입니다. 지난해 기업들은 어떤 기술 스택을 보유한 프리랜서 개발자를 많이 찾았는지 데이터를 통해
yozm.wishket.com
https://www.codenary.co.kr/company/list?page=1
스타트업들의 기술 스택과 기술 블로그를 한눈에 살펴보세요 | 코드너리
네이버, 카카오, 토스, 당근마켓과 같이 요즘 핫한 스타트업은 어떤 기술 스택을 사용하고 있을까요? 코드너리에서 국내 100개가 넘는 스타트업의 기술 정보를 확인하세요.
www.codenary.co.kr
HTML & 마크업 언어
HTML 은 HyperText Markup Language 의 약자이다. HyperText 는 참조링크(Hyper Link)를 통해 한 문서에서 다른 문서로 즉시 이동할 수 있는 텍스트를 말한다. 쉽게 말하면 웹페이지(문서)에 있는 링크를 통해 다른 웹페이지로 곧바로 이동할 수 있다.
Markup 이란 태그(tag)라는 특별한 문자열을 이용하여 문서 및 데이터의 구조(제목, 목차, 문단, 링크 등)를 기술한다. 태그란 브라우저가 이해할 수 있는 특별한 문자열이다. 문서는 웹페이지를 가리키고 데이터는 웹페이지에 있는 컨텐츠(텍스트, 영상, 이미지 등)를 의미한다. 즉, 마크업 언어란 웹페이지에 들어가는 컨텐츠를 브라우저가 이해할 수 있는 태그(tag)로 표현하는 언어이다.
HTML 태그의 구조와 용어
<a href="https://www.naver.com">content</a>위의 전체 문장을 엘리먼트(element) 또는 요소라고 한다. <a href="https://www.naver.com"> 은 시작태그라고 한다. </a>는 종료태그라고 한다. 시작태그와 종료태그 사이에 있는 것을 컨텐츠라고 한다. href 는 속성이름(attribute name)이고, "https://www.naver.com"은 속성값(attribute value)라고 한다.
HTML 문서의 구조
웹페이지를 구성하는 태그(tag) 하나의 구조는 앞서 살표보았으니 웹페이지 전체의 구조도 살펴보자! 웹페이지는 크게 버전정보, 헤더, 본문으로 나뉜다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<title>웹페이지 제목</title>
</head>
<body>
<h1>문서의 구조</h1>
</body>
</html><!DOCTYPE html>은 웹페이지 문서의 버전정보이다. <head></head> 태그 안은 헤더 영역이다. <body></body>는 본문 영역이다. 헤더 영역에는 웹페이지 문서의 제목과 메타 정보가 있으며 브라우저 화면에는 보이지 않는다. 본문 영역은 컨텐츠를 담고 있으며 실제로 브라우저 화면에 보이는 부분이다.
DTD 선언
DTD는 Document Type Declaration 의 약자이다. Document 는 웹페이지 문서를 의미하므로 DTD는 결국 웹페이지 문서의 종류를 의미한다. 브라우저는 HTML 문서를 해석하여 웹페이지를 화면에 보여준다. 이때 브라우저가 올바르게 문서를 해석할 수 있도록 문서 종류를 브라우저에게 알려주는 역할을 한다. DTD 의 종류는 HTML4, XHTML, HTML5 가 있으며 종류에 따라 사용할 수 있는 태그의 종류나 문법이 다르다. 최근의 모든 웹페이지 문서는 HTML5로 작성하면 된다.
언어설정
<html lang="ko">해당 태그의 의미는 웹페이지 전체 문서의 주 언어를 한국어로 설정하겠다는 것이다. lang 속성의 값으로는 각 언어의 ISO 코드를 따른다. 본문의 주 언어는 위와 같이 작성하고 문서의 일부분이 다른 언어로 되어 있다면 해당 부분에도 언어설정을 따로 해주면 좋다.
<ul>
<li><span>안녕하세요</span></li>
<li><span lang="en">hello</span></li>
</ul>https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=innomindinc&logNo=220326631631
[HTML] HTML의 첫 시작! 휴먼랭귀지 <thml lang="ko"> / 메타데이터 <meat> / utf-8
안녕하세요! 두번째 포스팅이네요! 오늘도 역시 html의 기초에 대해 추가로 조금 더 설명한 후, ...
blog.naver.com
https://homzzang.com/b/html-156
홈짱닷컴
홈페이지 제작, 그누보드 강의, 웹코딩, HTML, CSS, JAVASCRIPT, JQUERY, PHP, SQL
homzzang.com
HTML에서 언어(lang)를 지정해주는 이유는 무엇일까요?
HTML 페이지 소스 코드에서 언어를 설정하는 이유는 다양합니다. 무엇보다도 이는 사용자에게 웹 페이지의 텍스트 콘텐츠를 정확하게 표시하기 위함입니다. 또한, HTML 코드에 명시된 언어는 검색
oneroomtable.tistory.com
문자 캐릭터셋
meta 태그의 charset 속성은 브라우저에게 해당 HTML 문서의 문자 인코딩 방식을 알려준다. HTML 문서를 작성할때 내가 작성하고 있는 코드는 특정 규칙에 의하여 인코딩된다.
인코딩이란 예를 들어 "자동차"를 브라우저가 이해할 수 있는 특수한 코드로 암호화하는 것이다. "자동차"는 브라우저가 이해하기 힘든 단어이므로 이를 347894등으로 변경하는 것이다. "자"는 "34" "동"은 "78" "차"는 "94" 라고 인코딩하는 것이다. 브라우저는 웹페이지를 화면에 보여줄때 해당 규칙을 이용하여 다시 디코딩한다. 즉, 반대로 "34"를 "자"로 "78"을 "동"으로 "94"를 "차"로 디코딩한다. 이는 예시이므로 실제로는 이렇게 동작하지는 않는다. 아무튼 인코딩 방식(규칙)은 여러가지가 있으며, HTML 문서에서는 주로 UTF-8을 사용한다. UTF-8은 유니코드라고 하며, 전세계의 모든 언어를 표현할 수 있는 인코딩 방식이다.
현재 내가 작성중인 HTML 문서의 인코딩 방식은 비주얼 스튜디오 편집기 우측 하단에서 확인할 수 있다. 그리고 브라우저가 문서를 해석하는 디코딩 방식은 HTML 문서에서 아래 코드로 확인할 수 있다.
<meta charset="UTF-8">
태그 작성규칙
HTML 태그는 소문자로 작성한다. 대문자로 작성해도 오류는 나지 않지만 코드를 해석하는 가독성이 떨어지고, 관례상 소문자로 작성하는 것이 좋다.
<P CLASS="DESC">문단</P>위 코드는 잘못된 방식이다.
<p class="desc">문단</p>이렇게 작성하는 것이 좋다.
태그들은 들여쓰기 하는 것이 좋다. 추후 설명하겠지만 태그 간에는 부모와 자식관계 또는 상하관계가 있으므로 이를 구분해주는 것이 가독성이 좋다. 들여쓰기는 탭(Tab) 키를 이용하면 된다.
<div>
<h1>제목</h1>
<p>설명</p>
</div>위 코드는 잘못된 방식이다.
<div>
<h1>제목</h1>
<p>설명</p>
</div>이렇게 작성하는 것이 좋다.
특수문자는 그대로 사용하기보다는 엔터티 코드를 사용하는 것이 좋다. 그대로 사용해도 별 문제가 없지만 올바른 방법은 아니다.
<p>Copyright © Company all rights reserved. </p>위 코드는 잘못된 방식이다.
<p>Copyright © Company all rights reserved. </p>이렇게 작성하는 것이 좋다.
Entity Code - A Clear and Quick Reference to HTML Entities Codes
About EntityCode The idea came from my constant need to add those hard to remember HTML entity codes, such as the copyright symbol ( © ), every time I’m developing a new website or writing a new article. Usually, I either open one of my previously done
entitycode.com
웹표준 마크업
웹표준 마크업이란 각 태그의 쓰임새에 맞게 태그를 선택하고, 각 태그의 특징에 맞게 부모 자식 관계를 정확히 기술하는 것이다. 또한 HTML, CSS, Javascript 를 태그에 섞어서 쓰지 않고 따로 분리하는 것이 좋다.
<p style="font-weight: bold" onclick="window.open('new.html', 'newwin', 'width'=400, height='500')"> open popup </p>p 태그에 style 이라는 속성으로 태그의 스타일을 설정하고, onclick 이라는 속성으로 특정한 동작을 수행하게 되어 있다. 즉, HTML, CSS, Javascript 가 섞여있다. 동일한 태그가 한군데가 아니라 수십군데 있다고 가정해보자. 그리고 해당 태그를 수정할 일이 있다고 한다면 수십군데에서 수정을 해야 한다. 즉, 유지보수가 힘든 사이트가 되는 것이다. HTML, CSS, Javascript 파일을 아래와 같이 분리하면 스타일을 수정할 일이 생겼을때 해당 스타일 파일에서만 수정하면 수십군데 위치한 해당코드의 스타일은 동시에 모두 수정된다.
<head>
<meta charset="UTF-8">
<title>HTML 구조</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<p class="open_new">open popup</p>
<script src="main.js"></script>
</body>index.html
.open_new{
font-weight: bold;
}main.css
document.addEventListener('DOMContentLoaded', function (){
document.querySelector('.open_new').addEventListener('click', function (){
window.open('new.html', 'newwin', width=400, height=500)
})
})main.js
유효성 검사
내가 작성한 HTML 문서가 W3C 국제 컨소시엄에서 정한 표준에 맞게 작성되었는지 검사해볼 수 있다.
The W3C Markup Validation Service
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
유효성 검사는 3가지 방법으로 할 수 있다.
Validate by URI 는 홈페이지 주소로 검사한다. Validate by File Upload 는 HTML 문서를 업로드하여 검사한다. Validate by Direct Input 은 HTML 문서를 복사붙여넣기하여 검사한다. 세번째 방법으로 아래의 코드를 복사붙여넣기하여 검사해보자!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
</head>
<body>
<h1>문서의 구조<h1>
</body>
</html>몇가지 에러와 경고가 뜬다. 아래와 같이 수정후 다시 검사해보자!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<title>타이틀</title>
</head>
<body>
<h1>문서의 구조</h1>
</body>
</html>h1 태그의 종료태그에 슬래쉬를 추가하였고 title 태그를 head 태그 안에 추가하였다.
'프론트엔드 > HTML & CSS 강의' 카테고리의 다른 글
| 6. 제목, 문단, 구분선, 정형화된 텍스트 (0) | 2023.06.08 |
|---|---|
| 5. HTML5 섹셔닝 (시맨틱 태그) (0) | 2023.06.07 |
| 4. div 요소로 작성하는 문서의 그룹화 (0) | 2023.06.07 |
| 3. 텍스트 정의 요소 (0) | 2023.06.05 |
| 2. 블록 및 인라인 레벨 요소 (0) | 2023.06.04 |