HTML은 자바스크립트와 같은 프로그래밍 언어가 아니다.
HTML은 웹페이지의 뼈대를 구성하는 마크업 언어 이다.
이번 시간에는 HTML의 기본 구조와 문법,요소,시멘틱 요소 등 간단한 로그인 페이지를 만들면서 공부할 예정이다.
HTML 태그(Tags)
HTML 태그(Tags)는 부등호(<>) 모양의 특수문자가 태그 알파벳을 양 옆으로 감싸고 있다. 태그는 문서의 특정 영역이 정보로써 어떤 가치가 있음을 검색 엔진에 알려준다.
태그의 역할
태그의 역할은 태그 사이에 있는 데이터의 정보 중요도를 나타내는데 해당 데이터가 제목인지, 본문 단락인지, 이미지인지, 본문을 설명하는 부분인지 등을 구분하고있다.
열고 닫는 태그(Self Closing Tag)
열고 닫는 태그(Self Closing Tag)는 값(Values)을 앞 뒤에서 감싼다. 값의 앞에는 여는 태그, 값의 뒤에는 닫는 태그가 있다.
닫는 태그 앞에는 슬러쉬(/)기호를 삽입한다다.
HTML은 트리 구조라고 생각하면 되는데
신문 을 생각하면 윗단 제목 중간 하단 등 구역을 나눈다고 생각하면된다.
HTML의 레이아웃이다.
상단에 헤더 ,nav, 메인 footer 순으로 나눠져 있는 것을 볼 수있다.
여기에 각가의 레이아웃안에 태그들을 사용할수있고
위에 사진은 가장 많이 쓰이는 태그들을 한눈에 볼수있는 사진이다.
비교적 어렵지 않은 태그들로 vs code 코드에 직접 코딩하면서 배웠던 내용들을 복기 했다.
ID 와 Class 의 다른 점은?
class 속은 은 같은 유형으로 반복되는 태그들을 유형별로 분류 할때 쓰고
id 속성은 전체 페이지에서 단 하나의 요소에만 지정이 가능 하다 ( 즉 중복이 안됨)
class 속성은 id 속성과는 다르게 여러번 반복해서 사용이 가능하다.
시맨틱 요소란?
의미를 가진 요소를 사용하는 방식을 추구하는 것.
하나의 예를 들면 h1 을 예로 들었을 때 최상위 제목을 표현할 때 사용하는 요소인 h1 요소를 사용할 경우, 브라우저가 큰 폰트 사이즈를 적용할 뿐 아니라, 위아래로 간격을 주어 제목처럼 보이게 하는 효과가 있다.
시멘틱 요소를 사용해야 하는 이유?
몇가지의 이유가 있지만 검색엔진이 시멘틱 요소를 더 좋아하고 만약 내가 키워드를 입력하고 검색을 하면 각 웹페이지를 방문하여 그 키워드를 포함하고 있는지 확인결과를 보여주기 때문이다. 또 다른 이유는 여러 개발자가 같이 작업할때 div 요소를 탐색하는 것보다 코드 블록을 찾는 것이 훨신 간편하기 때문에
시멘틱 요쇼의 종류
article : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
aside : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소이다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용된다.
footer : 일반적으로 페이지나 해당 파트
의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용한다.
header : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어간다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있다.
nav : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용된다. 보통은 안에 ul을 넣어 목록 형태로 사용한다.
main : 문서의 주된 콘텐츠를 표시한다.
오늘 간단한 html의 구조와 요소 태그 등을 살펴보았고 마지막에는 복습 차원차 자기소개 페이지를 만들며 공부를 해보았다.
