dev/HTML + CSS

HTML - 기본 요소와 준비

꼿모 2023. 3. 2. 20:42

HTML의 구성 요소(Elements) 

 * 태그(Tag) 

- HTML을 구성하는 기본 단위로서 웹 문서에 정보를 정의해 주는 형식이다. 

- <> 시작 태그(여는 태그)와 </> 종료태그(닫는 태그)의 쌍으로 구성되어 있다. 

- 요소 안에 다른 요소가 들어갈 수 있다. 

<p>
 요소 안에 
 <strong> 다른 요소가 </strong> 들어갈 수 있다. 
</p>

<!-- 아래의 잘못된 예 -->
<p>
 요소 안에 
 <strong> 다른 요소가 이렇게 들어가면 안된다.
</p>
 </strong>

✏ 먼저 열린 태그를 큰 가방, 늦게 열린 태그를 작은 가방이라고 생각하자. 작은 가방(요소)을 큰 가방(요소) 안에 넣었다. 두 개의 가방 모두 닫아야 하는데 큰 가방을 먼저 닫아버리면 작은 가방은 닫을 수 없다. 해당 예시에서는 <p>가 큰 가방, <strong>이 작은 가방이다. 아래의 잘못된 예에서는 큰 가방인 <p>의 문을 먼저 닫았기 때문에 잘못 작성된 것이다. 

 

✏ HTML에서는 오류를 알려주지 않고 웹 브라우저가 임의로 결과를 보여주기 때문에 의도하지 않은 화면이 보여질 수 있다. 이런 상황을 방지하기 위해서 마크업 검사 습관을 들이자! 

마크업 검사 사이트 : [Markup Validation Service] https://validator.w3.org/

 

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

 

 

 * 빈 요소 / 셀프 크로징 (Self-closing) 

- </>(닫는 태그)가 없는 요소들을 뜻한다. 

  • <br/> : 텍스트 안에 줄 바꿈을 반영한다.
  • <hr/> : 수평 가로선을 삽입한다.  
  • <img/> : 이미지를 삽입하는 태그로 src 속성을 통해 경로를 지정한다. 
  • <input/> : 입력 형식을 구현하기 위해 사용된다.
  • <link/> : 해당 문서와 외부 소스의 관계를 명시한다. 

✏ 마크업 검사 시, HTML 속성값을 따옴표("") 없이 표기할 경우 후행 슬래시(/)로 인해 오류가 발생할 수 있다. 따옴표를 사용해 잘 작성했다면 경고창을 무시하고 진행하면 된다. 

 

 

 * 주석 

- <!-- 주석 --> 태그를 이용한다. 

- 프로그램 동작에 영향을 미치지 않는다. 

- 용도 

  • 태그의 시작과 끝을 알려준다. 닫는 태그가 없거나 컴포넌트 분할할 때 도움이 된다. 
  • 협업 시 코드 설명이나 업데이트 날짜를 표기할 수 있다. 
  • 비활성화 및 적용 기간이 아닐 때 임시 처리를 할 수 있다. 
<!-- 한 줄 주석 -->

<!-- 여러줄 
주석도 
이렇게 -->

✏ 주석으로도 중요 기밀 사항을 적는 것은 피하자! 

✏ 주석은 최소한으로, 시맨틱 태그와 직관적인 클래스명으로 코드만 봐도 이해가 되게끔 하는 게 제일 좋다.

But 주니어 때는 실수방지, 나와 팀원들을 위해 적당한 주석을 달자.

 

 

 * 부모, 자식, 형제, 자손 요소 

- 앞서 말했듯이 HTML의 요소들은 모두 하나 이상의 다른 요소를 포함할 수 있다. 상위 레벨의 포함하는 요소를 부모 요소, 하위 레벨의 포함되는 요소를 자식 요소라고 한다.  

출처 : 위니브

<div id="parent">
  <p>자식요소1</p>
  <p>자식요소2</p>
  <div>
    <p>자손요소</p>
  </div>
</div>

✏ 이름에서도 느껴지듯이 가계도와 흡사한 구조를 가지고 있다. 자식요소1에게 자식요소2는 형제요소가 되는 것이다. 

 

 

 

 

HTML 문서 해부하기

 * Emmet 

  • HTML과 CSS의 빠른 작성을 위해 자동으로 완전한 HTML 코드를 생성시켜주는 에디터 확장기능이다. 
  • VSCode에서는 따로 설정할 필요 없이 바로 사용 가능하다.
  • 나는 스니펫(Snippet)으로 외부 스타일시트와 연결되는 <link>를 추가하여 설정했다. ( https://snippet-generator.app/ )
<!DOCTYPE html>
<html lang="ko-KR">
<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">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>

</body>
</html>

 

 

🔸 <!DOCTYPE html>

  • 이 문서는 HTML Living Standard로 작성된 문서라는 의미를 가진다.
  • 어떤 모드로 페이지를 렌더링 할지 결정하며 해당 태그 작성 시 완전 표준 모드로 렌더링 한다.
  • HTML 문서의 제일 처음에 선언한다. 

※ 미작성 시 하위 호환성 모드인 '쿼크 모드(Quirks mode)'로 렌더링 된다.

쿼크 모드에서는 브라우저마다 구현 방식이 조금씩 달라서 의도와 다르게 동작할 가능성이 있다.

 

 

🔸 <html lang="en">

  • <!DOCTYPE html>을 제외한 모든 내용들은 이 <html> 태그 내부에 작성해야 한다. 

 

 

🔸 <html lang="en">

  • 브라우저의 번역기와 스크린리더에 사용할 언어를 선택할 때 도움이 된다. 
언어 (소문자) 국가 (대문자)
ko (한국어) KR(대한민국), KP(북한)
zh (중국어) CN(중국), HK(홍콩), TW(대만)
ja (일본어)  
de (독일어)  
en (영어) US(미국), GB(영국), PH(필리핀) 

 

 

🔸 <head>

  • 검색엔진 및 기계가 식별할 수 있는 문서정보를 담는다. 
  • 사용자에게는 title, 파비콘, viewport 정보 등이 보이게 된다. 

※ 파비콘 : 웹 브라우저의 주소창에 표시되는 웹페이지를 대표하는 아이콘

 

 

🔸 <meta charset="utf-8"> 

  • 메타데이터란 어떤 목적을 위해 만들어진 데이터이다. (데이터에 관한 구조화된 데이터)
  • 검색엔진은 메타데이터를 살펴보고 페이지의 다양한 정보를 가져간다. 

 

 

🔸 <meta charset="utf-8">

  • 문자의 깨짐 오류 방지를 위해 코드 종류를 설정한다.
  • 전 세계 언어를 지원하도록 해주는 국제적인 코드 규약이다. 
  • 어떤 언어로 작성하더라도 웹페이지를 읽을 수 있다.

 

 

🔸 <meta http-equiv="X-UA-Compatible" content="IE=edge" >

    • 브라우저의 호환성을 위해 작성한다. 
    • IE(Internet Explorer)의 다양한 버전 탓에 같은 페이지도 다르게 보여지는 문제 해결을 위해 IE의 최신 표준 모드를 지원하겠다는 의미이다. 

※ 현재 IE(Internet Explorer)는 서비스 종료되었다. 개발자들이 무척 기뻐했다고 하시던데...

 

 

🔸 <meta name=”” content=””>

  • 모든 장치에서 웹 사이트가 잘 보이도록 viewport를 설정하는 태그이다. 
  • name과 content 특성을 함께 사용하면 문서의 메타데이터를 '이름 + 값'의 쌍으로 제공한다. 
  • name="" : 전체 페이지에 적용되는 문서 레벨 메타데이터이다. 어떤 형태의 정보(viewport, description, author,...)를 가졌는지에 영향을 받는다.
  • content="" : 실제 메타 데이터의 요소가 위치한다. 

 

 

🔸 viewport : 웹페이지가 사용자에게 보여지는 영역을 말한다. 

  • width : 뷰포트의 너비를 제어한다. 픽셀값으로 고정시킬 수도 있다. 
  • height : 뷰포트의 높이를 제어한다. 
  • initial-scale : 모바일에서 페이지가 처음 로드될 때 축소/확대 수준을 제어한다. (최소 0.1 / 기본 1 / 최대 10)
  • minimum-scale/maximum-scale : 축소/확대 허용 범위를 제어한다. 3보다 작은 값은 접근성에 맞지 않는다.
  • user-scalable=no : 사용자가 화면 크기를 제어하지 못하게 한다. 각기 다른 디바이스 크기와 노안, 저시력 등 다양한 상황을 고려해야 하므로 특수한 상황이 아니면 사용하지 않는 게 바람직하다. 해당 속성을 사용해도 접근성을 위해 무시하는 브라우저도 있다. 

 

 

🔸 <title></title> 

  • 브라우저의 제목 표시줄이나 페이지 탭에 보이게 할 문서 제목을 작성한다. 
  • 텍스트만 포함한다. 
  • 약 60자를 넘지 않아야 하며 더 길어지면 브라우저에 노출되는 제목이 축소되어 보일 수 있다. 

✏ 인터넷 사용자는 제목을 보고 탐색할 페이지를 선택한다. 따라서 페이지마다 적당하고 매력적인 제목을 설정하는 것도 중요하다. 대부분 웹 접근성 품질 인증을 받은 시청 홈페이지를 참고하여 공부하는 것도 좋을 듯!

 

 

🔸 <link rel="stylesheet" href="">

  • 현재 문서와 외부 리소스의 관계를 명시한다. 
  • 외부 스타일시트, 폰트, 파비콘을 연결할 때 사용한다. (CSS)
  • 빈 태그로 닫는 태그가 없으며 속성만을 포함한다. 
  • head 요소 내부에만 위치할 수 있다. 
  • rel=relations : 대상 파일의 속성을 나타낸다. 
  • href =hyper-references : 연결 시 참조할 파일의 위치를 나타낸다. 

 

 

🔸 <body></body>

  • 사용자에게 보여지는 영역이다.

✏ 개발자(바로 나)들이  본격적으로 작성할 영역이다!

 

 

 

 

📌 Snippet(스니펫) 

  • 코드의 일부분만 발췌한 것으로 재사용 가능한 소스 코드 조각을 자동완성으로 설정할 수 있다.
  • 자주 반복해서 사용하는 코드 조각을 정리해 놓고 편리하게 사용하면 된다.  
  • ${번호}를 추가하면 커서를 지정한 곳에 자동으로 위치시킬 수 있다. (아래 코드 참고)
  • https://snippet-generator.app/ 
 

snippet generator

Snippet generator for Visual Studio Code, Sublime Text and Atom. Enjoy :-)

snippet-generator.app

{"html": {
	"prefix": "!!",
	"body": [
		"<!DOCTYPE html>",
		"<html lang=\"ko-KR\">",
		"<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\">",
		"    <title>$1</title>",
		"",
		"    <!-- CSS -->",
		"    <link rel=\"stylesheet\" href=\"\">",
		"</head>",
		"<body>",
		"  $2",
		
		"  <!-- JavaScript -->",
		"  <script src=\"\"></script>",
		"</body>",
		"</html>"
	],
	"description": "html"
}}

✏ 같이 수업 듣는 동기분이 공유해 주신 스니펫 코드! 외부 CSS 링크와 스크립트까지 추가해 주셨다 💗

이거 복사해서 VSCode 설정 -> 사용자 코드 조각 -> html 검색 -> 붙여 넣기 -> 저장,,하면 완료! 미래의 나를 위해 기록ㅎ

 

 

 

 

 

 

 

 

 

 

 

 

잘못된 정보에 대한 피드백은 언제든지 환영 입니다 !