-
기초 HTML의 이해각종 학습 요약/Web 2022. 4. 27. 15:35
HTML 기초
html이란?
HyperText Markup Language의 약자. 즉, 하이퍼텍스트(웹문서)를 위한 구조화된(마크업) 언어.
기본 구조 형식
- 대개의 경우는 열고 닫는 태그(Tag), 표현하는 속성(Attribute), 담기는 내용(Content)으로 구성된다. 여는 태그부터 닫는 태그까지를 하나의 요소(Element)라고 한다.
- 중첩(ㅇㅁㅁㅇ)될 수 있다. 교차(ㅇㅁㅇㅁ)는 불가.
- 중첩된 경우, 바깥쪽의 요소는 '부모 노드(Parent node)', 내부의 노드는 자식 노드(Child node)라고 한다. 나란한 수준에 있는 노드는 '형제 노드(Sibling node)'라고 한다.
- 닫을 필요 없이 스스로 존재하는 태그들은 Empty Elements(또는 Self closing tag)라고 한다(예:
<br>). HTML5에 와서는 스스로 닫는 표현이 없어졌는데, 이전의 XHTML까지 호환하기 위해<br/>와 같은 표현을 사용해도 좋다(이런 표현이 있어서 Self closing tag라고 불렀던 것 같다).
기본 문법 예제
<html> <body> <p>Hello World!</p> <br> </body> </html>누구나 중학교쯤 배워본 기억이 있을 거라 생각하고 자세한 예제는 패스한다.
자주 사용하는 태그
요소들은 기본적으로 화면에 표시가 된다.
<a>: Anchor의 약자. 하이퍼링크 기능.<ul>, <ol>: list. Unordered list와 Ordered list. 숫자가 매겨진 리스트냐 아니냐 차이.<div>: 윈도우 한줄을 차지하는(block) 영역 태그.<span>: 컨텐츠만큼 차지하는(inline) 영역 태그.<img>: 이미지 태그.input, textarea, checkbox, button: 입력 인터랙션 요소들.
하지만 눈에 안 보이는 것들도 있다. 이것들은 의미론적(Symantic)으로 사용된다.<section>: 의미 단위의 영역 태그.<h1~6>: 헤드라인임을 표시하는 태그.<article>, <footer>등.
자주 사용되는 속성(Attribute)
속성은 대게 속성명과 속성값을 가진다. CSS, JS 요소와 결합하기 위해 굉장히 많이 사용되는 것 두 가지가 있다.
id: 본 페이지에 딱 하나만 존재할 수 있도록, 구분할 수 있는 이름을 값으로 갖는 속성. 중복 시 가장 위의 요소가 선택.class: 같은 값을 가지고 있으면 일괄적으로 Select할 수 있는 속성.name: 위의 두개에 비하면 가-끔 쓴다. input 등을 하나의 묶음으로 묶을 때 사용.
물론 이 밖에도 많은 속성들이 있다.
href: Hypertext-Refference의 약자. 주로 이동할 웹문서 레퍼런스를 값으로 갖는다.src: Source. 이미지 등의 자료 원 위치를 값으로 갖는다.
이밖에도 굉장히 많으니 필요에 따라 사용해보자!
'각종 학습 요약 > Web' 카테고리의 다른 글
flex layout에 대한 간단한 이해 (3) 2022.04.30 HTML Page Layout : Flexbox로 레이아웃 잡기 (2) 2022.04.28 HTML Page Layout : 화면을 나누는 방법 (0) 2022.04.28 기초 CSS의 이해 (6) 2022.04.27 웹 개요 - 웹 개발, 프론트엔드와 백엔드 (0) 2022.04.27 웹 개요 - 클라이언트와 서버 (2) 2022.04.26