[Frontend] HTML & CSS

🖥️ Frontend_

[Frontend] HTML & CSS

CodeLoge 2025. 2. 20. 20:11

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 ⇒ 마우스 포인터가 위치하는 경우 적용되는 스타일 기술

'🖥️ Frontend_' 카테고리의 다른 글

[Frontend] Java Script & jQuery Library (1)	2025.02.23
[Frontend] Media Query & Bootstrap (0)	2025.02.22
[Frontend] CSS의 태그 속성 (0)	2025.02.21
[Frontend] HTML, CSS, JavaScript (수업 내용) (1)	2025.02.19
[Frontend] HTML5, CSS3 & JavaScript (0)	2025.02.19

현재글[Frontend] HTML & CSS

🌿 Joyfully Ever After

자바로 개발 세계에 발 담그고,
하나씩 만들어가고 있는
개발자 준비생 김동현입니다✈️

Social Links
💡 About Me
🐙 GitHub
🧠 Notion-Portfolio

Contact Info
📩 donghyun960115@naver.com
📲 010-6527-7090

CodePrep