[Frontend] HTML & CSS
Chapter #3 문서를 구조화하는 HTML
Section 1. HTML 개요 및 기본 태그
✴︎ HTML
: Markup Language로 웹 문서 작성, 태그를 사용해서 문서의 구조 등을 기술하는 언어
→ Markup Languge
: 마크업 태그들로 이루어져 있으며, HTML 문서는 HTML 태그로 작성
: 각각의 HTML 태그는 문서 내에서 다른 내용을 기술
: HTML 태그는 태그 이름을 Angle Bracket <,> 으로 둘러싸서 표현, 어느 태그에나 넣어서 사용할 수 있는 글로벌 속성이 있음
| 글로벌 속성 | 설명 |
| class | 태그에 적용할 스타일의 이름을 지정 |
| dir | 내용의 텍스트 방향을 지정 → 왼쪽 맞춤, 오른쪽 맞춤과 유사 |
| id | 태그에 유일한 ID를 부여, JavaScript 제어에서 주로 사용 |
| style | 인라인 스타일시트를 적용하기 위해 사용 |
: 태그
① <head> 태그
: html 문서에 대한 정보를 써놓은 곳
: metadata → 데이터를 설명하는 데이터
② <body> 태그
: html 문서의 본문의 시작과 종료를 알려줌
: 웹 브라우저의 화면에 보이는 내용은 이곳에서 작성
③ <p> 태그
: 문단과 문단 사이를 구분할 때 사용, html 문서에서는 특별한 지시를 해주지 않으면 문단 구분 X, 한 문장으로 취급
④ <br> 태그
: 줄 바꿈 태그
⑤ 글꼴 속성 태그 <i>, <b>
: 글자를 강조할 때 사용
: <i> → 글꼴 기울임
: <b> → 글꼴 진하게
⑥ <img> 태그
: 웹 페이지에 이미지를 삽입할 때 사용
: alt → "대신할 문자" : 이미지가 표시되지 못할 경우 대신 표시할 메시지 지정,
시각장애인 등 여러 소수자가 보조 기구를 사용해 웹을 받아들여야할 때 해당 문자로 알기 때문에 필수적으로 작성해야함
⑦ 리스트 태그와 <a> 태그
리스트 태그
: 목록을 만들 때 사용
: 순서 없는 리스트 → <ul>
: 순서 있는 리스트 → <ol>
: 목록의 내용인 아이템 → <li>
<a> 태그
하이버링크를 사용해서 이동할 페이지 또는 이동할 위치를 지정할 때 사용
⑧ 테이블 관련 태그
<table> 태그
: 표 작성 태그 → <tr> : 행 표시 / <td> : 열 표시
⑨ <div> 태그
: html 문서에서 영역 또는 구역 정의
: 문서를 구역 별로 나누거나, 스타일시트를 적용할 그룹 영역으로 사용 또는 문서 전체에 스타일시트 적용을 초기화 할 때 사용
Section 2. HTML5 문서 구조 및 주요 태그
✴︎ HTML 문서 구조
→ 시맨틱 태그 (Semantic Tag) : 의미적 태그, 태그명이 표현하는 데이터를 설명
Ex) <id>1234<id> : 1234라는 값이 ID 값이라는 것을 표현
✴︎시맨틱/구조적 태그(Element)
: 문서의 영역 구조를 표현 태그들
① <header> 태그 : 사이트의 소개나 내비게이션 등을 표시
② <nav> 태그 : 사이트의 내비게이션(메뉴) 항목을 표시
③<article> 태그 : 문서의 내용을 표시하는 태그 → 독립적인 콘텐츠 표시
④<section> 태그 : 문서의 내용을 표시하는 태그 → 주로, 문서의 영역적인 의미로 사용
⑤<aside> 태그 : 본문의 내용과는 독립적인 내용인 사이드바 콘텐츠를 표시
⑥<footer> 태그 : 사이트의 제작자, 주소, 저작권 정보 등을 주로 표시
⑦<figure> 태그 : 설명글을 붙일 대상 정의
⑧<figcaption> 태그 : <figure>태그로 정의한 대상에 설명글을 붙임
✴︎ 웹 폼 태그(Element) - 입력 폼을 구성하는 태그
: 사용자의 입력을 받기 위한 화면을 구성할 때 사용하는 태그들
: 입력란, 체크박스, 버튼, 콤보상자 등
: 주로 <form></form> 사이에 넣어서 사용자 입력화면을 구현
①<form> 태그
: 사용자 입력을 받기 위해서 사용
: 정의할 때 속성 사용 가능
②<input> 태그
: 웹 폼 태그들 중 가장 많이 사용
: 각종 버튼을 만들 때 사용
✴︎ 미디어/그래픽 태그(Element)
: 멀티미디어 재생 및 그래픽 영역 제공
• 미디어 태그 - 멀티미디어 재생
①<audio> 태그
: 오디오 파일을 재생할 때 사용
②<video> 태그
: 비디오 파일을 재생할 때 사용
③<embed> 태그
: 플래시 파일(.swf) 및 동영상파일(.mp4 등), html 파일, 이미지 파일 등을 플러그인 콘텐츠로써 화면에 표시
④<object> 태그
: 웹 페이지에서 일종의 내장 객체
: <embed> 태그가 표시가능한 것들 동일하게 표시하지만, 내장 플러그인을 쓸 때도 사용
⑤<iframe> 태그
: Youtube 동영상을 웹 페이지에 연결할 때 사용
•그래픽 태그 - 그래픽 영역 제공
①<canvas> 태그
: 게임을 만들 때 사용
: 모든 종류의 그래픽을 그릴 수 있는 영역을 제공
②<svg> 태그
: W3C의 권장 그래픽 형식
: 지도 등을 표시할 때 사용
: SVG 그래픽을 사용할 수 있는 영역(Container)을 제공
Chapter #4 태그를 표현하는 CSS와 Advanced CSS
Section 1. CSS 개요 및 CSS 기본 사용법
✴︎ CSS란?
: 캐스캐이딩 스타일시트 (Cascading Style Sheets)
: HTML 태그를 화면상에 어떻게 표현할지 설정
: 문서의 내용을 화면에 표시하는 방법인 디자인 설정
✴︎ CSS 사용 이유?
: 디자인, 레이아웃, 다양한 기기 및 화면 크기에 따른 디스플레이의 다양성 문제를 포함한 웹 페이지의 스타일을 정의할 때 사용
: 화면 크기에 자동으로 반응한 사이트(반응형 웹)을 만들 수 있음 → 사용하는 이유 중 하나
✴︎ CSS 기본 사용법
① CSS 작성 위치
방법 1. 스타일시트를 태그의 style 속성에 기술
방법 2. 스타일시트를 HTML 문서 내에 포함해서 작성
방법 3. 스타일시트를 별도의 파일로 작성 → 외부 스타일시트라고도 부름 (External Style Sheets)
② CSS 작성 규칙
• CSS 기본 규칙
: 규칙 집합은 실렉터와 선언 블록으로 구성
• 실렉터의 종류
: 스타일시트 실렉터(selector) → type selector & univeral selector를 포함
: 의사 엘리먼트 → 태그명 : hover ⇒ 마우스 포인터가 위치하는 경우 적용되는 스타일 기술