💡 목표
꼭 필요하고 자주쓰는 HTML/CSS 기본기(핵심 이론)을 마스터 한다.
✅ HTML이란?
HTML - Hypertext Markup Language 라는 의미를 가지고 있습니다.
웹 페이지를 표현하기 위해 사용하는 언어이며, 사용자가 볼 수 있는 웹 페이지 형태로 변환해줍니다.
- 웹 페이지는 문서(Document)입니다.
✅ HTML 문서의 구조
1️⃣ 계층적으로 작성 되어야 합니다.
부모가 있으면 자식이 있어야하고, 자식안에 자식이 있는 계층적 구조로 작성하여야 합니다.
2️⃣ 최상의 태그(root tag)는 <html> 이며, 그 아래는 head와body로 나뉩니다.
- head : 메타데이터(HTML 문서에 대한 정보성 데이터)를 포함하고 있습니다.
- body : 브라우저 화면에 표시될 실제 콘텐츠 입니다.
3️⃣ DOM
DOM은 Document Object Model의 약어 입니다.
- 객체로 문서 구조를 표현하는 방법 입니다.
- HTML, XML 문서에서 사용하는 개념 입니다.
- DOM은 문서를 트리(Tree)형태로 나타냅니다.
- 웹 브라우저는 DOM을 통해 객체(특정 요소)에 접근하여 자바스크립트, css를 적용합니다.
* DOM은 Tree 형태로 되어있기 때문에 특정 요소를 찾아 그 부분에 적용할 수 있습니다.
✅ Head 태그와 Body 태그
1️⃣ head
head 태그는 문서의 메타데이터를 포함합니다.
- 메타데이터 : 데이터를 설명하는 데이터
title: 페이지의 제목<meta charset="utf-8">: 여러가지 메타 정보<meta charset="utf-8">: 인코딩 설정<meta name="viewport">: 뷰포트 설정 (모바일,반응형)
<link>: favicon 적용, css 파일 연결 등<style>: CSS 작성 (권장하지 않습니다.)
2️⃣ body
브라우저에 표시될 실제 콘텐츠
✅ 블록요소와 인라인 요소
1️⃣ 블록요소
페이지의 구조적인 요소를 나타낼 때 사용됩니다.
- 블록 요소 다음에는 반드시 줄바꿈이 들어갑니다.
- 한 줄 전체를 차지합니다.
2️⃣ 인라인 요소
문장, 단어 등 작은 부분에 주로 사용합니다.
- 인라인 요소 다음에는 줄바꿈이 들어가지 않습니다.
- 콘텐츠 크기만큼의 공간만 차지합니다.
- 블록 요소 사이에 인라인 요소가 들어갈 수 있습니다.
- 인라인 요소 안에는 블록 요소가 들어갈 수 없습니다.(예외 : a태그)
- 인라인 요소 안에 인라인 요소는 들어갈 수 있습니다.
✅ 상대경로와 절대 경로
1️⃣ 상대경로
현재 작성중인 파일을 기준으로 상대적으로 표현한 경로 입니다.
| 표현 | 설명 |
|---|---|
| /(슬래쉬) | 디렉토리 구분 |
| .(점 하나) | 현재 디렉토리 |
| ..(점 두개) | 부모 디렉토리 |
2️⃣ 절대 경로
로컬 PC(내 PC)를 기준으로 한 경로입니다.
VS Code에서 파일 우클릭 > 경로 복사를 하면 절대 경로가 복사됩니다.
window 예시 : c:\User\image\image.jpg
Mac(linux) 예시 : /user/sunny/Decktop/image/image.jpg
✅ 전역 속성
모든 HTML 요소에서 공통적으로 사용할 수 있는 속성 입니다.
단, 일부 요소에는 적용되지 않는 경우도 있습니다.
| 속성 | 설명 |
|---|---|
| class | 해당 요소를 식별할 수 있는 식별자(중복 가능) |
| id | 해당 요소를 식별할 수 있는 식별자(중복 불가능) |
| style | css 적용 |
| hidden | 해당 요소를 숨김 |
| title | 마우스를 오래 올려 놓았을 때 뜨는 tooltip |
이벤트 핸들링 속성 : onclick, onmouseenter, onmouseleave
✅ 핵심 태그
1️⃣ Heading
heading 태그는 제목을 나타냅니다.
<h1>~<h6>까지 총 6개의 레벨로 구성되어 있습니다.- 레벨을 건니뛰지 않고 순차적으로 작성하는 것이 좋습니다.(웹 접근성)
- Heading 태그는 한 라인에 하나만 출력됩니다.
- 블록 레벨 요소이기 때문입니다.
2️⃣ P
하나의 문단을 나타내는 태그입니다.
- HTML에서는 공백, 줄바꿈은 아무리 많이 해도 하나의 공백으로 표현하기 때문에 사용합니다.
- 블록 레벨 요소이기 때문에 new line으로 시작합니다.
- 간격은 css에서 조절 가능합니다.
3️⃣ Text Formatting
인라인 태그를 활용하여 문단 안에서 텍스트 효과를 줄 수 있습니다.
| 태그 | 설명 |
|---|---|
구)<b> | 굵게(bold) |
구)<i> | 기울임(italic), 외국어, 구어체, 인용 구문 등 강조 |
신)<strong> | 굵게(bold), 중요하거나 긴급한 콘텐츠 강조 |
신)<em> | 기울임(Emphasized), i태그 보다 콘텐츠 강조 |
<mark> | 마킹(형광펜) |
<del> | 취소선 |
<sub> | 아래 첨자 |
<cup> | 위 첨자 |
4️⃣ 이미지 태그
<img>태그로 웹 페이지에 이미지를 삽입할 수 있습니다.
문법
<img src="" alt="">주요 속성
| 속성 | 설명 |
|---|---|
| src | 이미지 파일, 웹 주소 |
| alt | 이미지가 보여지지 않을 경우 사용자에게 이미지를 설명하는 글 |
| width,height | 이미지의 크기 지정 |
5️⃣ a
다른 웹 페이지로 이동할 수 있는 하이퍼링크를 만들 수 있는 태그 입니다.
문법
<a href="">주요 속성
| 속성 | 설명 |
|---|---|
| href(필수) | 이동할 링크의 주소 |
| title | 마우스를 hover했을 때 표시되는 추가적인 제목이나 설명 |
| target | 페이지를 열 방법 지정(현재 페이지, 새 탭, 새 창) |
6️⃣ List
목록을 나타내는 태그는
<ol>과<li>두가지 입니다.
<ol>- 순서가 있는 리스트입니다.
- 기본 스타일은 아라비아 숫자입니다. (css로 변경 가능)
<ul>- 순서가 없는 리스트입니다.
- 기본 스타일은 Bullet point(점)입니다. (css로 변경 가능)
문법
<ol>
<li></li>
</ol>
<ul>
<li></li>
</ul>7️⃣ Div & Span
레이아웃을 구성하기 위해 사용되는 태그입니다.
역할
- 눈에 보이는 변화는 없습니다.
- 영역을 나누기 위해 사용합니다.
- Container 역할을 합니다.
자주 쓰는 속성
class / id : css에서 선택자로 사용됩니다.
❓ div와 span의 차이점
- div는 블록 레벨 Container, spna은 인라인 container 입니다.
- div는 안에 다른 HTML 요소를 포함합니다.
- span은 문단의 일부 등 더 작은 부분을 포함합니다.
8️⃣ 시맨틱 태그
의미를 갖고 있는 요소를 나타냅니다.
❓ 시맨틱 태그를 사용하는 목적
1. 개발자에게 명확하게 해당 요소의 의미와 목적을 전달하기 위함입니다.
2. 검색 엔진 최적화
3. 웹 접근성
| 태그 | 설명 |
|---|---|
<header> | 소개, 제목, 로고등 |
<main> | 메인 콘텐츠 영역, 정체 문서에서 단 하나 |
<section> | 콘텐츠 영역, 일반적인 콘텐츠 구획, 여러개 가능 |
<article> | 독립적인 콘텐츠를 구분 |
<figure> | 비디오, 이미지, 코드 영역 |
<nav> | 네비게이션 영역, 링크, 메뉴 |
<aside> | 메인 콘텐츠 이외 사이드 콘텐츠, 별개 정보, 연관 정보 |
<footer> | 저작권, 계약 정보, 사이트맵, 연락처 등 |
9️⃣ form
웹 상에서 사용자의 입력을 받아, 클라이언트 서버로 정보를 제출하기 위한 요소 입니다.
주요 속성
- action : 폼 데이터를 보낼 URI 지정
- URI : 리소스의 위치를 식별하기 위한 문자열
- suvmit, button 등을 통해 사용자가 데이터를 제출하는 이벤트가 발생했을 때, 데이터를 어디로 보낼지 지정하는 속성
- method : GET, POST 등 양식을 제출할 때 사용할 HTTP 메소드
- GET : 그대로 드러나기 때문에 보안에 취약합니다.
- POST : 백엔드 개발자와 협의가 필요하나, 실무에서는 POST로 보내는 경우가 많습니다.
- id : form의 식별자
1️⃣ input
가장 대표적인 form 요소 입니다.
input은 인라인 요소 입니다.
주요 속성
- type : 속성 값에 따라 정해지며, 여러가지 종류를 입력 받을 수 있습니다.
- name : 데이터를 제출하기 위한 이름 지정
- value : input의 값 지정 (초기값이 있을 때 등 사용합니다.)
- placeholder : 값이 입력되기 전 사용자에게 힌트를 제공합니다.
2️⃣ type
| type | 설명 |
|---|---|
| text | 디폴트 값 |
| text와 동일하나, 이메일을 입력 받기 용이하게 되어있습니다. | |
| password | text와 유사하지만, 값이 마스킹되어 표시됩니다. |
<textarea> | 여러중의 text를 입력 받을 수 있는 태그입니다. |
3️⃣ button
버튼은 input type과
<button>두가지로 만들 수 있습니다.
❓ input과 button의 차이점
input은 일반 텍스트로만 표현이 가능하지만, button은 어떤 요소든 하위에 포함이 가능합니다.
또한 button태그로 마크업을 하게 되면 CSS로 버튼을 다양하게 스타일링 가능합니다.
주요 속성
| 속성 | 설명 |
|---|---|
| submit | 서버로 form 데이터를 제출 |
| reset | 모든 폼을 기본 값으로 바꿉니다. |
| button | 순수하게 클릭 이벤트를 받으며, 별도로 함수를 연결시켜주지 않으면 작동 안함 |
| name | 데이터를 제출하기 위한 이름 지정 |
| value | 초기값 |
4️⃣ label
<label>은 해당 input이 어떤 입력인지 설명해주는 역할을 합니다.
<input>은 항상<label>과 함께 사용하는 것이 좋습니다.
사용하는 이유
1. 접근성에 좋습니다.
2. checkbox나 radio 타입에서는 필수 입니다.
사용법
<input>의 id 속성 값 -<label>의 for 속성 값을 매핑 시킵니다.
5️⃣ checkbox
특정 값을 각각 선택하거나 선택 해제를 할 수 있는 네모 모양의 박스 입니다.
속성
| 속성 | 설명 |
|---|---|
| name | form 제출 시 표시되는 이름. 전달할 값의 이름 |
| value | 전달할 값. 체크 박스의 값을 나타내는 문자열. (사용자에게 노출X) |
| id | <label>의 for 속성과 연결 |
| checked | 디폴트로 체크 되어 있는지의 여부 |
6️⃣ radio
그룹 내 다수의 선택지 중 하나의 선택을 입력 받고자 할 때 사용합니다.
❓ 체크박스와 차이점
체크 박스는 여러개 선택을 허용할 때 사용합니다.
라디오 버튼은 여러 값에서 단 하나만 선택할 때 사용합니다.
속성
| 속성 | 설명 |
|---|---|
| name | form 제출 시 표시되는 이름. 하나의 그룹은 반드시 같은 name 지정해야함 |
| 1. name을 다르게 주면 별도의 그룹으로 인식됩니다. | |
| 2. 하나만 선택되어야 하는 상황에서 여러개가 선택되는 버그(오동작)이 발생할 수 있습니다. | |
| value | 전달할 값. 선택된 값을 나타내는 문자열 |
| 1. 사용자에게 노출되지 않지만, form 데이터를 받는 곳에서 데이터를 받아 처리할 때 name을 사용합니다. | |
| 2. 한 그룹내에서 유니크한 value를 가져야 합니다. | |
| 3. radio에서 value가 명시되지 않으면, 디폴트 value는 "on"으로 전송됩니다. | |
| id | <label>의 for 속성과 연결 |
| checked | 디폴트로 체크 되어 있는지의 여부 |
7️⃣ select box
드롭 다운 리스트를 생성하여 사용자가 하나를 선택할 수 있도록 합니다.
사용 방법
-
<select>태그로 감싼다.- name(필수) : 전달할 값의 이름
- id :
<label>의 for 속성과 연결 - form :
<form>의 id 속성과 연결
-
하위에
<option>으로 선택지를 하나씩 추가합니다.- value : 해당 선택지의 값을 나타내는 문자열
- selected : 해당 option이 초기에 선택되어 있도록 지정
