dev course - DE/TIL
[데브코스] TIL 6일차
nani-jin
2024. 4. 1. 17:13
HTML/CSS 입문
- PART 01. 개요
- PART 02. HTML
- PART 03. CSS
- PART 04. 반응형
- PART 05. END
PART 01. 개요
HTML : 웹 브라우저가 이해할 수 있는 언어
CSS : 문서를 예쁘게 "꾸미는 언어"
JavaScript : 문서에 "기능"을 만들어주는 언어
PART 02. HTML
CH 01. HTML
- HTML 기본 문법 속성과 값
## 1. HTML 기본 문법
# 콘텐츠를 가지는 태그 : 열리는 태그(시작 태그), 닫히는 태그(종료 태그)
<div> 콘텐츠 </div>
# 콘텐츠를 가지지 않는 태그 : 단일 태그
<br />
## 2. 속성과 값
# 태그는 기본적으로 속성과 값을 가짐. + 콘텐츠
<div title="제목">Content</div>
<a href="https://naver.com">네이버 바로가기</a>
- HTML 기본 문서
<!DOCTYPE html>
<html lang="ko"> # HTML 문서 시작 선언 및 문서 기본 언어 설정
<head> # 문서에 필요한 정보가 기입되는 곳
<title>문서 제목</title> # 문서의 제목
</head>
<body> # 실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳
안녕하세요!
</body>
</html>
- 부모요소, 자식요소 (들여쓰기, 내어쓰기에 주의)
- 주석(Comment)
- 개발자가 코드 내 입력한 메모. 웹에서 확인 가능하니 중요한 보안 정보는 적지 말 것
<!-- 주석 내용 -->
CH 02. HEAD
- 사람의 눈에는 보이지 않는 "문서의 정보"가 담기는 영역
- <head>가 가질 수 있는 정보의 종류
- 타이틀
- 메타 데이터(인코딩 정보, 문서 설명, 문서 작성자)
- CSS, JavaScript
- <style>, <link>, <script>
- 문서 내용의 외형에 영향을 주는 태그들
## style 태그
<style>
body {
color: blue;
}
</style>
## link 태그
<link rel="stylesheet" href="style.css" />
## script 태그
# 1. 콘텐츠 방식
<script>
const hello = 'world';
console.log(hello);
</script>
# 2. 링크 방식
<script src="script.js"></script>
CH 03. BODY
- <body>
- 사람 눈에 실제로 보이는 콘텐츠 영역
- block(블록 레벨 요소)
- 블록의 크기와 내/외부에 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타냄
- 인라인 요소를 포함할 수 있으나, 인라인 요소에 포함될 수는 없음
- <div>, <article>, <section>, ...
- inline(인라인 레벨 요소)
- 블록 요소 내에 포함되는 요소
- 주로 문장, 단어 같은 작은 부분에 사용되며, 한 줄에 나열됨
- 좌/우에 여백을 넣는 것만 허용
- <span>, <a>, <strong>, ...
- inline-block
- 인라인 요소이나, 편의를 위해 css의 성질을 바꾼 것
- 글자처럼 취급되나, block 태그의 성질을 가지는 요소
- 크기와 내/외부 여백을 지정할 수 있음
CH 04. 레이아웃
*왜 레이아웃 태그를 알아야 할까?
태그를 의미 있게 사용하고, 의미를 잘 전달하기 위해. Semantic marker
- <div></div> 콘텐츠 분할 요소
- 가장 흔히 사용되는 레이아웃 태그로, 단순히 구역을 나누기 위한 태그
- 레이아웃 태그 #1 - header, footer, main
- <header> 블로그 글 제목, 작성일 등의 주요 정보를 담는 태그
- <footer> 페이지 바닥줄에 사용되며 저작권 정보, 연락처 등 부차적인 정보를 담는 태그
- <main> 페이지의 가장 큰 부분으로 사이트의 내용 즉, 주요 콘텐츠를 담는 태그(한 페이지에 한 번만 가능)
- 레이아웃 태그 #2 - section, article, aside
- <section> 콘텐츠의 구역을 나누는 태그로, 신문지에서 여러 기사가 각 구역에서 각자의 정보를 전달하는 의미와 비슷한 역할을 함
- <article> 블로그 포스트, 뉴스 기사와 같은 독립적인 문서의 역할을 하는 태그
- <aside> 문서의 주요 내용에 간접적인 정보를 전달하는 태그로, 쇼핑몰의 오른쪽에 따라다니는 "오늘 본 상품"같은 것으로 사용 가능
CH 05. 콘텐츠
- 제목 태그(h1 ~ h6)
- 문서의 구획 제목을 나타내는 태그로 Heading tag라고도 함. "구획의 순서"가 지켜져야함
- h1 : 페이지 내에 "한번만" 사용되어야함
- 문단 태그(p) - 레이아웃 아님
- 문서에서 하나의 문단을 나타내는 태그
- 제목 태그와 함께 사용되기도, 단독으로 사용되기도 함
- 서식 태그
(b, strong)
- 글씨의 두께를 조정하는 태그
- b : 의미를 가지지 않고 단순히 굵은 글씨
- strong : 굵은 글씨로 변경 후 "강조"의 의미 부여
(i, em)
- 글씨의 기울기를 조정하는 태그
- i : 기울임과 동시에 텍스트가 문단의 내용과 구분되어야 하는 경우 사용
- em : 기울임과 동시에 내용에 "강조"의 의미 부여
(u)
- 글씨에 밑줄을 넣고 주석이 있음을 나타내는 태그
- css로 스타일링해 빨간 밑줄을 넣어 "오타"를 나타내듯 사용할 수 있음
- 단순하게 "밑줄"만 긋는 용도로는 사용하면 안됨
(s, del)
- 글씨에 취소선 추가하는 태그
- s : 단순히 시각적인 취소선만 추가되고, 접근성 기기에 취소에 대한 안내는 하지 않음
- del : 문서에서 제거된 텍스트를 나타낼 수 있음. <ins> 태그를 함께 사용하면 제거된 텍스트 옆에 추가된 텍스트 표현 가능
- 링크 이동(a)
- 클릭하면 페이지를 이동할 수 있는 링크 요소를 만들 수 있음
- href 속성을 사용해 이동하고자 하는 파일 혹은 URL 작성
- target 속성을 사용해 이동해야 할 링크를 새 창(_blank), 현재창(_self) 등 원하는 타겟 지정 가능
<a href="https://programmers.co.kr" target="_blank">프로그래머스로 바로가기 (새 창)</a>
- 멀티미디어 - 외부 자원을 넣는 법
- <img> : 이미지 넣는 태그. "src" 속성 - 이미지 경로, "alt" - 이미지 로딩 문제 발생시 대체 텍스트
- <figure>, <figcaption> : 하나의 독립적인 콘텐츠를 <figure>로 분리하고, <figcaption> 안에 그에 대한 설명을 넣을 수 있는 태그
- <video> : 문서 내에 영상을 첨부할 수 있는 태그. "src" 속성 - 비디오 경로, "poster" - 비디오가 로드되기 전 포스터, <source> 여러 타입의 비디오 제공 가능
- <audio> : 문서 내에 소리를 첨부할 수 있는 태그. "src" 속성 - 소리 경로, "controls" 속성 - 재생/정지 버튼 등이 있는 컨트롤러를 띄울 수 있음, <source> 여러 타입의 비디오 제공 가능
- <svg> (Scalable Vector Graphics) : 그래픽으로 만들어진 이미지. 일반 이미지와 다르게 수학 공식을 사용해 그려지기 때문에, 해상도의 영향을 받지 않아 확대/축소가 자유로움. 주로 크기를 자주 바꾸는 작은 아이콘에서 많이 사용되며, <img> 태그처럼 svg 파일을 불러올 수도 있고 태그를 그대로 사용할 수도 있음. 코드로 이루어져 있기 때문에 스타일을 변경하거나 자바스크립트를 사용해 간단한 기능 추가 가능
- 리스트
- 정렬되지 않은 (순서가 없는) 목록, 정렬된 (순서가 있는) 목록, 설명 목록
- <ul>, <li> : 정렬되지 않은 목록 태그. <ul> 태그의 자식요소는 무조건 <li> 태그만. 하위 리스트는 <li> 안에 <ul>, <ol>태그를 사용
- <ol>, <li> : 정렬된 목록 태그. <ol> 태그의 자식요소는 무조건 <li> 태그만. 하위 리스트는 <li> 안에 <ol>, <ul> 사용
- <dl>, <dt>, <dd> : 설명 목록 태그. <dt> 태그에 사용된 단어 혹은 내용의 설명을 <dd> 태그에. 주로 용어사전이나 "키-값"이 있는 쌍의 목록을 나타낼 때 사용하며, <dt> 여러개 작성 후 <dd>로 한번에 설명 가능. 반대로, <dt> 하나에 여러개 <dd> 가능
- 표
- <th> : 열의 제목 태그. 셀 제목을 만들 수 있음
- <thead> : 제목 그룹 태그. 셀 제목의 행을 넣음으로써 그룹을 지을 수 있음
- <tbody> : 표 본문 요소 태그. 여러 셀의 행을 넣음으로써 본문 요소를 그룹 지음
- <tfoot> : 표 바닥글 요소 태그. HTML 4에선 <tbody> 앞에 작성되어야 하고, HTML 5에선 <thead>,<tbody>,<tfoot> 순으로 배치
- <caption> : 표가 가진 데이터에 대한 설명
- 아이프레임(외부 콘텐츠)
- 예를 들어, 유튜브 등 외부 콘텐츠를 불러 오는 것. 하지만 보안 때문에 모든 외부 콘텐츠를 다 불러올 수 있는 것은 아님
- 현재 문서 안에 다른 HTML 페이지를 삽입할 수 있는 태그
- "name" 속성을 지정하면, <a> 태그의 "target" 속성을 사용해 iframe에서 문서 또는 URL이 열리게 할 수 있음
CH 06. 양식 태그
- Form
- 정보를 제출하기 위한 태그
- 정보를 입력하고 선택할 수 있는 input, selectbox, textarea 등을 가질 수 있음
- 정보 제출을 위한 button을 가짐
- "action" 속성으로 정보가 제출되었을 때 페이지 이동 가능
- "method" 속성으로 정보가 제출될 때 처리 방식 결정 가능
GET - 검색 방식: 도메인에 붙음
POST- 로그인 같이 보안이 중요할 때 : 숨겨짐
- Label
- 입력란(input, selectbox, textarea)에 설명을 작성할 수 있는 태그
- "for" 속성으로 연결하고자 하는 태그에 "id"를 지정하고 label을 클릭하면 연결된 태그 선택됨
- label 태그 안에 input을 넣으면 자동으로 for → id 연결과 같은 처리를 해줌
- "id" 속성은 절대 값이 중복되선 안됨
<input>
- 사용자에게 데이터를 입력 받을 수 있는 대화형 태그
- "type" 속성 값에 따라 받을 수 있는 input 유형이 달라짐 (기본값 : text)
- "value" 속성을 사용해 기본 내용을 입력해둘 수 있음
- "name" 속성을 사용해 input 이름을 지정할 수 있음
- 자주 사용되는 input type(checkbox, radio, file, button, hidden)
<select>
- 옵션 메뉴를 제공하는 태그
- 첫 번째 옵션은 이름이 됨
- "value" 속성을 선언하지 않은 경우, <option> 태그의 콘텐츠가 기본값이 됨
- 흔히 셀렉트 박스라고 불리며, 첫번째 옵션이 버튼명이기 때문에 "placeholder" 속성 사용 불가
<textarea>
- 여러 줄을 입력할 수 있는 대화형 태그
- "cols", "rows" 속성으로 기본 너비와 높이 지정 가능
< 알아두면 좋은 속성>
1) readyonly : 읽기 전용
2) required : 필수 입력 사항. 이때, 필수 입력에 대한 안내 문구 및 행동은 브라우저가 자동으로 처리해줌
3) placeholder : input, textarea에 부가 설명을 입력해둘 수 있음. <select> 태그에선 사용할 수 없음
4) disabled : 요소가 비활성화되며, 정보 제출 시 값이 제출되지 않음
- <button>
- 클릭 가능한 버튼을 태그로 <form> 태그 내에 어디서든 사용 가능
- type="reset" 시, 버튼이 눌리면 입력한 양식 모두 reset
- type="submit" 시, form 양식 제출 가능. form 태그 내 기본 type은 "submit"
- <button> 태그 내 콘텐츠에 "태그"의 입력이 가능하나, 블록 레벨 태그는 사용하면 안됨
- "disabled" 속성을 가질 수 있음
CH 07. HTML 주의사항
- 대/소문자 주의. 대부분 다 소문자로 작성함
- 닫는 태그 생략 주의
- 개발은 영어로
- id는 중복 주의
- 계층 구조 유지
- 동일한 의미의 태그 중첩 금지
HTML 참고 사이트
- TCP School
- MDN
- W3School