HTML
HTML(Hyper Text Markup Language)이란?
HTML은 집을 짓기 전 설계도에 따라 구조를 잡듯,
웹 페이지의 구조를 짜는 언어
HTML / CSS / Java Script 역할
HTML의 요소(Element)
display 속성이란?
inline속성은 text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다
block속성은 무조건 한줄을 점유하고 있고, 다음 태그는 무조건 줄바꿈이 적용
inline-block속성은inline과block속성의 특징을 둘다 갖는다
div
구분(division) 을 의미하는 태그로,
레이아웃을 마크업할 때 가장 많이 사용됨
display 속성이 block 인 특징을 가지고 있음
*HTML5 이후로는 시맨특 마크업을 위해 section 태그를 주로사용
p
문단(paragraph)을 의미하는 태그로 하나의 문단을 작성할때 사용
span
display 속성이 inline 인 특징을 가지고 있으며, 줄바꿈이 되지 않음
ul
순서 없는 목차를 정의할때 사용
ol
순서 있는 목차를 정의할때 사용
li
목록 나열할때 사용
단독으로 사용하지 않고, ol 혹은 ul 태그에 감싸서 사용
input
폼을 전송할때 사용
다양한 type 속성을 가지고 있음 checkbox radio text password
참조 블로그 - https://ofcourse.kr/html-course/HTML-%EC%9E%85%EB%AC%B8
#id (아이디) 와 .class(클래스)
id - 고유한 이름, 즉 단 한 번만 사용되어야 하는 경우에 사용
class - 반복적으로 사용되는 요소를 유형별로 분류할 때 사용
시맨틱 마크업
시맨틱(Semantic)이란?
"의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다
따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다
headaer & footer
헤더/푸터에 사용
main & section
메인 컨텐츠에사용
article
독립적인 컨텐츠에 사용
h1 ~ h6
제목에 사용
nav
내비게이션에 사용
시맨틱 마크업의 특징
- 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리하다
- 웹 접근성 측면에서, 시각장애가 있는 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있다
- 단순한
div,span으로 둘러싸인 요소들보다 코드를 볼 때 가독성이 좋다
참조 블로그 - https://doqtqu.tistory.com/319
리뷰
- html 은 이미 많이 접했던 영역이라 쉽게 생각하고 있었지만 다시한번 초심으로 돌아가는 시간이였던 것 같아 재밌는 시간이였다
