HTML
HTML은 Hyper Text Markup Langauage 로 웹 페이지의 뼈대를 잡는 문서이다.
웹 페이지의 제목, 본문, 요소 등을 정의하는 역할을 수행하며 트리구조의 태그들로 이루어져 있다.
여는 태그와 닫는 태그가 있으며 태그들 사이에 다른 태그를 끼워넣는 문법 구조를 갖고 있다.
HTML 문서들은 다음과 같은 뼈대 태그에 다른 태그를 삽입하도록 하고 있어, 현재의 모든 HTML 문서는 헤드 태그, 바디 태그로 구분된다.
<html> <head>.....</head> <body>.....</body> </html>```
크롬에서 개발자도구 => 요소 탭을 클릭하면 나오는 코드들이 현재 보고 있는 웹페이지의 HTML 문서에 해당한다.
대표적인 태그들
div 태그 vs span 태그
- 두 태그는 공간을 확보하는데 사용한다. 레이아웃을 지정할 때도 사용하며, 컨텐츠(글 또는 다른 컴포넌트)를 삽입할 때 틀로 사용된다.
- div 태그는 한줄을 차지한다. (인라인 레벨 요소)
- span 태그는 컨텐츠 크기만큼 공간을 차지한다. (블럭 레벨 요소)
img 태그
- 이미지를 삽입할 때 사용한다.
- img 태그는 src, alt 속성을 꼭 함께 사용한다.
- src 태그는 이미지에 대한 소스 주소, alt는 이미지가 안 나올때를 위한 대체 설명글
a 태그
- 링크를 걸때 사용한다.
- herf 속성과 곡 함께 사용되며, herf 속성은 링크 클릭 시 이동되는 주소를 값으로 갖는다.
ul, ol, li 태그
- 리스트 태그이다.
<ul>, <ol>은 부모 태그이고<li>는 자식 태그이다.<ul>은 순서가 없는 리스트,<ol>는 순서(번호)가 있는 리스트 이다.
input, textarea 태그
- 입력을 위한 태그이다.
- input 태그는 닫는 태그 없음
- input 태그는 type 속성에 어떤 값을 넣느냐에 따라(text, password, email, file 등) 텍스트 입력, 파일 입력 등 다양한 수행이 가능하다.
- textarea 태그는 텍스트 입력을 수행하며 두 줄 이상에 본문 글을 입력받을 때 사용한다.
- input 태그에는 type=checkbox, type=radio 등도 가능하다.
button 태그
- 버튼 생성
시맨틱 요소
시맨틱 요소라는 HTML 문서 내에서 특정 역할을 수행하는 태그는 아니지만, 설명적인 의미를 가진 요소를 의미한다. div 로 모든 것을 두지 않고 <article>, <footer>, <header> 등으로 태그를 구분하는 것처럼, 검색엔진이나 개발자에 입장에서 어떤 의미를 가진 요소라는 것을 설명할 수 있도록 쓰이는 태그를 말한다.
시맨틱 요소를 사용하는 이유
- 검색 엔진이 시멘틱 요소를 우선적으로 확인하여 결과를 보여준다.
- 개발자와 함께 작업 할 때 가독성을 높여 효율을 높힌다.
시맨틱 요소 종류
<article>: 독립적인 자체 포함 콘텐츠<aside>: 본문 외에 부가부분, 사이드바, 광고창 등<footer>: 웹페이지 가장 아랫부분, 라이선스, 주소, 연락처 등<header>: 웹페이지 가장 상단부분, 웹페이지의 제목<nav>: 네비게이션, 메뉴바에 해당<main>: 문서의 주된 콘텐츠
id, class 속성 추가하기
id : 고유한 이름을 붙일 때 -> div#writing-section
class : 반복되는 영영ㄱ을 유형별로 분류할 때 -> li.comment
- id는 케밥케이스(wr-section)로 네이밍, class는 캐멀케이스(createAt)로 네이밍한다.
FE 개발자 준비생 블로그 🪐