💻 HTML, CSS, JS
웹페이지를 구성하는 언어는 크게 3가지로 나눌 수 있다.
1. HTML(구조)
- 웹페이지의 구조를 담당하고 문서의 틀을 만드는 마크업 언어
- 태그(tag)들의 집합, 트리 구조
2. CSS(스타일)
- 디자인 요소를 시각화 하는 스타일 시트 언어
3. JS(상호작용)
- 단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용 할 수 있게 해주는 프로그래밍 언어
💡 HTML에서 많이 쓰이는 태그
- div = 한줄을 차지한다.
- span = 컨텐츠 크기만큼만 공간 차지한다.
- img = 이미지 삽입을 위해 사용, 닫는태그가 없다.
- a = 하이퍼링크 / 삽입속성 : href
- ul & li = 리스트, ul 대신 ol 사용시 순서를 표시할 수 있다.
- input = 다양한 입력 폼, type속성 text, password, checkbox, radio 등
- textarea = 줄바꿈이 되는 입력 폼
- button = 버튼 생성
💡 시맨틱 웹
- 의미를 가진 요소(시맨틱 요소)를 사용하는 방식
- div요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 편리하다.
- 요소 안에 채워질 데이터 유형의 예측이 쉽다.
💡 시맨틱 요소 종류
article
- 독립적이고 자체 포함된 콘텐츠를 지정한다.
aside
- 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소.
- 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용
footer
- 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용
header
- 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치, 사이트의 제목이 보통 들어간다.
- 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있다.
nav
- 일반적으로 상단바 등 사이트를 안내하는 요소에 사용.
- 보통은 안에 ul태그를 넣어 목록 형태로 사용.
main
- 문서의 주된 콘텐츠를 표시
form
- 사용자가 입력한 값을 다른 페이지로 전송하는 역할
💡 id와 class의 차이
id : 고유한 이름을 붙일 때
class : 반복되는 영역을 유형별로 분류할 때
✍ 종합 퀴즈 오답
HTML의 정의와 가장 유사한 것을 고르세요.
나를 헤깔리게 만든 두개의 선택지
- HTML은 구조를 표현하기 위한 언어다.
- HTML은 웹 문서 표준을 서술하는 언어다.
처음에는 보자마자 당연히 1번이라고 생각하고 1번을 선택했다. 혹시 몰라서 바로 밑에 있는 2번 선택지를 보니 '웹 문서', '언어'라는 키워드들이 딱 있다. 'HTML은 웹 문서 언어가 맞는데?'라고 고민하다가 2번으로 바꿔서 제출했더니 오답으로 돌아왔다. 해설에는 웹 문서 표준을 서술하는 언어는 없다고 한다.
웹 문서와 언어만 보고 문제를 푼 사람의 최후...😢
다음에는 틀릴일이 없겠지.
정리노트