고정 헤더 영역
상세 컨텐츠
본문
반응형
HTML : HyperText Markup Language
인류가 생산하는 거의 모든 디지털 정보가 담기는
가장 거대한 그릇인 웹 페이지를 만드는 프로그래밍(정확하게는 마크업) 언어
HTML은 퍼블릭 도메인 (저작권이 없다)
HTML의 중요성?
웹 페이지라는 정보를 담는 그릇에 정보를 보다 간결하고 정확하게 담기 위한 수단
접근성적인 측면에서도 웹 페이지를 작성할때 HTML을 정확히 알고 의미에 맞게 사용해야 함
TAG(태그) : HTML의 기본문법, 종류는 약 150개 이상
"HTML ~~ tag" 로 각 태그의 정의나 기능에 대하여 검색해 볼 수 있다
웹 페이지에서 통상적으로 약 32~33개의 태그가 사용됨 (2021년 기준, https://www.advancedwebranking.com/html/ 참조)
태그의 예시(HTML에서는 태그를 통해 각 기능을 구현함)
줄바꿈 태그 <br>과 <p>
<br> : 단순 줄바꿈
<p> : 단락을 나눌때 사용
태그의 속성(Attribute)
태그의 이름만으로는 정보가 부족할때 속성을 통해 의미를 부가하는 영역
ex)
| <img src="coding.com" width="100%"> |
위와 같은 코드에서 img부분은 태그, src와 width부분은 속성이다
img는 이미지를 표현하는 태그인데, 이미지의 주소와 이미지의 크기 등의 값이 필요하므로
해당 내용은 속성을 통하여 표현하게 되는 것.
부모/자식 관계와 리스트
리스트(목록) 활용을 위한 태그인 <ul>,<ol>,<li>을 통해 부모자식관계에 대해서 알아보고
각 태그에 대해서도 알아보도록 하자
ex)
| <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> |
- HTML
- CSS
- JavaScript
ex)
| <ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol> |
- HTML
- CSS
- JavaScript
위의 코드예제와 그 바로 아래는 각 출력 결과이다
목록태그(<li>)의 상위에는 <ul> 혹은 <ol>과 같은 부모태그가 반드시 존재해야 하고(그룹핑을 위함)
<ul>은 Unordered List를 <ol>은 Ordered List를 각각 의미한다.
<ul>은 순서가 없는 목차, <ol>은 순서가 필요한 목차를 만들 때 사용하는 태그이다
(<ol>의 속성 중 start는 순차를 시작하는 숫자를 정해줄 때 사용한다)
HTML 문서의 구조와 구조의 상위태그에 대해
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <p>This is my page</p> </body> </html> |
1. <!DOCTYPE html>
문서의 형식을 나타내는 부분, 문서의 유형을 정의하는 의례적인 선언문이다
2.<html></html>
HTML의 가장 상위에 있는 기본요소(태그)
웹 페이지의 시작과 끝을 알리는 요소이다
3. <head></head>
클라이언트(사용자)에게 보이지 않지만, HTML로 작성된 페이지의 metadata를 포함하는 요소
작성된 페이지를 브라우저 등에서 열람할때, 작성된 정보(<body> 부분)에 대한 설명을 포함하는 요소이다
4.<meta>
웹 페이지에 대한 metadata를 담고 있는 요소
<meta charset="utf-8">을 예로 들면, 작성된 html 페이지의 인코딩 설정을 utf-8로 지정한다는 뜻
5.<title></title>
페이지의 제목을 설정하는 요소 (브라우저 탭에 표시되는 제목)
페이지를 북마크 할때 설명하는 요소로도 사용됨
6.<body></body>
페이지 내에 표시되는 모든 컨텐츠를 담는 요소
텍스트, 이미지, 영상, 게임, 오디오 등등 다양한 컨텐츠를 담을 수 있음
반응형
'Studying (Review) > HTML' 카테고리의 다른 글
| [Restart 프론트엔드 스터디] #4. 웹페이지를 구성하는 기본 태그(출처: poiemaweb) (0) | 2022.08.14 |
|---|---|
| [Restart 프론트엔드 스터디] #3. 시맨틱 웹 (출처: poiemaweb) (0) | 2022.08.14 |
| [Restart 프론트엔드 스터디] #2. HTML5에 대하여 (출처: poimaweb) (0) | 2022.08.04 |
| [Restart 프론트엔드 스터디] #1. HTML의 정의와 역사, 기본구조 (0) | 2022.08.03 |
댓글 영역