HTML/CSS - 네이버 부스트코스 강의 (1)

lisoh·2022년 3월 7일

CSS boostcourse html

GRJ_study

목록 보기

4/15

본 포스트는 네이버 부스트코스 HTML/CSS 강의를 수강하고 쓴 글입니다.

🎨 목차

HTML 이해하기
HTML 태그
콘텐츠모델, 시멘틱마크업, 블록 & 인라인
CSS 이해하기
단위, 배경, 박스모델
폰트, 텍스트
레이아웃
미디어쿼리

✅ 1. HTML 이해하기

HTML이란?

HTML은 프로그래밍 언어로 웹 페이지를 만들 때 사용됩니다.
웹 사이트들이 모두 HTML을 사용하여 만들어집니다.

HTML의 의미와 특징

HTML은 Hyper Text Markup Language의 줄임말입니다.
HyperText는 단순한 텍스트를 넘어서 웹 페이지의 특정 부분과 연결할 수 있는 기능을 가진 텍스트 즉, 링크를 의미합니다.
Markup Language는 프로그래밍 언어의 한 종류로 정보를 구조적,계층적으로 표현 가능하다는 특징이 있습니다.

HTML의 역사

HTML은 1990년대 영국의 물리학자 팀 버너스리가 제안하여 개발되었습니다.
초기 개발 목적은 연구소의 연구원들이 신속하게 정보와 문서를 공유하기 위해서였습니다.

핵심 키워드

태그 ( TAG )
시작 태그 ( 여는 태그 )
종료 태그 ( 닫는 태그 )
내용 ( Content )
요소 ( Element )

공백

HTML 공백은 일반 텍스트 공백과는 차이가 있습니다.
기본적으로 HTML은 두 칸 이상의 공백을 모두 무시합니다.
이러한 공백처리 방식에 대해서 css로 제어 할 수 있습니다. ->

주석

주석은 화면에 노출되지 않고 메모의 목적으로만 사용하는 것을 의미합니다.
HTML 파일 내에 주석으로 표시를 해주면 브라우저는 해당 부분을 인식하여 해석하지 않습니다.
주석의 시작은 표시로 종료합니다.

문서의 기본 구조

웹 페이지를 만들기 위한 가장 기본이 되는 정보는 HTML 문서 구조입니다.
HTML의 기본 구조는 웹 문서를 작성할 때 반드시 들어가야 하는 기본적인 내용으로 크게는 문서 타입 정의와 요소로 구분합니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>Hello, HTML</h1>
    </body>
</html>

문서 타입 정의

문서 타입 정의는 보통 DTD(doctype)라고 부릅니다.
이 문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문이며 반드시 문서 내 최상단에 선언되어야 합니다.

요소

문서 타입 선언 후에는 <html>태그가 나와야 하고, 자식으로는 <head>태그와 <body>태그가 있습니다.

<html> 태그의 lang 속성은 문서가 어느 언어로 작성되었는지를 의미합니다.
<head> 태그에 위치하는 태그들은 브라우저 화면에 표시되지 않습니다.
대신 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할을 합니다.
<meta> 태그의 charset 속성은 문자의 인코딩 방식을 지정합니다.
<body> 태그에는 실제 브라우저 화면에 나타나는 내용이 들어가며, 앞으로 우리가 다루는 태그들 대부분이 모두 여기에 해당이 됩니다.
위 코드는 가장 기본적인 문서 구조로, 보통은 이보다 더 많은 태그가 들어가게 됩니다.

➕ 1-1. HTML 이해하기 파트에서 태그 부분

태그란?

HTML은 태그들의 집합이며, 태그는 HTML에서 가장 중요하고 기본이 되는 규칙입니다.
태그는 '무언가를 표시하기 위한 꼬리표, 이름표'라는 의미가 있으며, HTML에서도 이와 비슷한 의미로 해석됩니다.

태그를 사용하는 방법

태그는 <, > 기호로 표현하며 <, > 기호 사이에 태그 이름이 들어갑니다.
대부분 태그는 시작 태그와 종료 태그로 이루어지며 종료 태그는 태그 이름 앞에 '/' 기호가 붙습니다.시작 태그와 종료 태그 사이에 실제 화면에 나타나는 내용이 위치하게 됩니다.

<h1>Hello, HTML</h1>

위는 태그의 가장 기본적인 예로, <h1>을 사용해 'Hello, HTML'을 출력하는 코드입니다.

요소란?
내용을 포함한 태그 전체를 요소(Element)라고 합니다.

속성을 사용하는 방법

속성은 이름과 값으로 이루어져 있습니다.
시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"으로 표현합니다.
속성값은 홑따옴표(')와 쌍따옴표(")로 감싸 표현합니다.

여러 속성을 사용하는 방법

의미와 용도에 따라 여러 속성이 존재하며 하나의 태그에 여러 속성을 선언할 수 있습니다.
여러 속성을 선언할 때는 공백으로 구분해서 사용합니다.

<h1 id="title" class="main">Hello, HTML</h1>

위는 <h1>에 id와 class 2개의 속성을 선언한 코드입니다.
속성의 선언 순서는 태그에 영향을 미치지 않으며 class를 id보다 먼저 선언해도 결과는 같습니다.

속성의 종류

속성은 종류에 따라 모든 태그에 사용할 수 있는 글로벌 속성과 특정 태그에서만 사용할 수 있는 속성으로 구분됩니다. 또한, 선택적으로 쓸 수 있는 속성과 특정 태그에서 필요한 필수 속성으로 구분됩니다.

위의 예시에서 쓰인 id와 class 속성은 글로벌 속성입니다.

태그의 중첩

태그의 중첩이란 태그 안에 또 다른 태그를 사용하는 것입니다.
태그는 중첩을 통해 부모 태그와 자식 태그의 관계가 만들어집니다.
이때 태그의 열리고 닫히는 시점이 중요합니다. ->먼저 열린 태그가 나중에 닫혀야 한다(부모태그)

빈 태그

태그의 중첩이 불가한 태그도 있습니다. 이런 태그를 빈 태그라고 합니다.

<br>
<img src="">
<input type="">

위는 빈 태그의 예시입니다.
빈 태그는 내용이 없어서 종료 태그가 필요하지 않습니다.

빈 태그의 특징

빈 태그는 내용만 비어있을 뿐 속성을 통해서 화면에 나타내거나 화면에 표시되지 않더라도 다른 용도로 사용되는 태그입니다.
빈 태그의 대표적인 경우는 브라우저가 직접 화면에 내용을 그려줘야 하는 경우입니다.
이런 태그는 브라우저가 내용을 대체한다고 하여 replacement 태그, 대체되는 태그라고 합니다.
빈 태그에 대체되는 태그만 있는 것은 아니며 실제로 화면에 출력될 내용이 없어 다른 용도로 쓰이는 태그도 존재합니다. <br>이 바로 이 경우입니다.

🔨 2. HTML 태그

1. 제목과 단락요소

Heading 태그 ( h1~h6 : 제목(heading) 태그는 문서 내에 제목을 표현할 때 사용하는 태그.
Paragraph 태그 ( p ) : 단락(paragraph) 태그는 paragraph를 줄여서 p로 씀.
Linebreak 태그 ( br ) : 개행을 위해 쓰이는 태그가 바로 <br>. (linebreak 를 줄여서 br 이라고.)

2. 텍스트를 꾸며주는 요소

<b> : bold 태그는 글자를 굵게 표현하는 태그
<i> : italic 태그는 글자를 기울여서 표현하는 태그
<u> : underline 태그는 글자의 밑줄을 표현하는 태그
<s> : strike 태그는 글자의 중간선을 표현하는 태그
위 태그들 중 <i>를 제외하고는 의미가 없는 표현용 태그이기 때문에 사용할 때 주의해야합니다.
<i> 태그는 특정 이유(기술적인 용어, 외국어 문구, 소설속 인물의 생각 등)로 다른 글자와 구분하기 위해 사용됩니다.

3. 앵커 요소
HTML에서 HT(Hyper Text)는 링크를 의미하는 것으로, 링크는 클릭하기만 하면 다른
페이지로 쉽게 이동을 할 수 있습니다.

a :
<a>(anchor 태그)는 a태그, 앵커, 링크 등 여러 이름으로 불립니다.
target 속성은 링크된 리소스를 어디에 표시할지를 나타내는 속성입니다.
속성값으로는 _self, _blank, _parent, _top이 있습니다.
_self는 현재 화면에 표시한다는 의미로, target 속성이 선언되지 않으면 기본적으로 self와 같이 동작합니다.
_blank는 새로운 창에 표시한다는 의미로 외부 페이지가 나타나게끔 하는 속성입니다.
_parent와 _top은 프레임이라는 특정 조건에서만 동작하는 속성으로,
최근에는 프레임을 잘 쓰지 않습니다.
<a>에는 이 외에도 많은 속성이 있습니다.
내부 링크 :
<a>를 통해 페이지 내부의 특정 요소로 초점을 이동할 수도 있는데, 이를 내부 링크라고 합니다.

내부 링크를 사용할 때는 href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id 속성값을 적으면 됩니다.

보통 화면 스크롤 하단에 위로 올라가기 버튼이나 top버튼이 이 링크로 만들어집니다.

4. 의미가 없는 컨테이너 요소
태그 자체에 아무 의미가 없으며, 단순히 요소들을 묶기 위해 사용되는 태그입니다.
스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 이런 의미 없는 요소들이 사용됩니다.
이런 의미 없는 태그의 사용빈도는 매우 높습니다.
그 이유는 html 태그들은 문서를 웹에 나타내기 위해 제작되어 기본적으로 문서에 최적화되어있는 의미를 지니는데,
현재 웹의 형태는 문서 형태에서 많이 벗어났기 때문입니다.
다행히 HTML 버전이 업그레이드되면서 웹에 알맞은 태그들이 많이 생겼습니다.

가장 대표적으로 많이 쓰이는 의미가 없는 태그는 <div>, <span>입니다.

div :
div(division) 태그는 블록 레벨 태그입니다.

블록 레벨 요소는 기본적으로 한 줄을 생성해서 내용을 표현합니다.
span :
반면, span 태그는 인라인 레벨 태그입니다.

인라인 레벨 요소들은 블록 레벨 요소의 한 줄 안에서 표현되는 요소들입니다.

리스트 요소

ul : ul(unordered list) 태그는 순서가 없는 리스트를 표현할 때 사용.

<ul>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타내서 사용
ol : ol(ordered list) 태그는 순서가 있는 리스트를 표현할 때 사용
이 순서는 서로 바뀌면 안 되기 때문에 순서가 있는 <ol>을 사용해야 합니다.
<ol>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타내서 사용
dl : dl(definition/description list) 태그는 용어와 그에 대한 정의를 표현할 때 사용합니다.
<dl>은 앞서 배운 <ul>, <ol>과는 구조가 조금 다릅니다.
<ul>, <ol>은 항목을 단순히 나열하는 구조지만,
<dl>은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조입니다.
용어 하나에 여러 정의가 들어갈 때, <dd>를 한 개 이상 쓰는 것이 가능

이미지 요소

img : <img>는 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그
alt : <img>의 필수 속성으로 이미지의 경로를 나타내는 속성 , src 속성과 더불어 반드시 들어가야 하는 속성
width/height : 이미지의 가로/세로 크기를 나타내는 속성입니다.
값의 단위는 필요하지 않으며, 값을 입력하면 자동으로 픽셀 단위로 계산됩니다.
src : 상대경로와 절대경로 -
상대경로는 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로이고,
절대경로는 실제 그 이미지가 위치한 곳의 전체 경로입니다.
상대 경로에서의 './'는 페이지가 있는 현재 폴더를 나타냅니다.

테이블 요소

표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있습니다.
표의 행(가로 방향)을 row, 열(세로 방향)을 column이라 합니다.

<table> : 표를 나타내는 태그
<tr> : 행을 나타내는 태그
<th> : 제목 셀을 나타내는 태그
<td> : 셀을 나타내는 태그

하나의 <table>은 하나 이상의 <tr>로 이루어져 있으며,

<tr>은 셀을 나타내는 <th>, <td>를 자식으로 가지게 됩니다.
표를 구성할 때는 위에서 밑으로, 좌측에서 우측으로 작성하면 됩니다.

표의 구조와 관련된 태그 (스크린 음성 리더기로 읽기 편하도록 밑의 태그 사용)

<caption>: 표의 제목을 나타내는 태그
<thead>: 제목 행을 그룹화하는 태그
<tfoot>: 바닥 행을 그룹화하는 태그
HTML5.1 ~ 현재(5.2): <tfoot>이 <tbody> 뒤에 위치해야 합니다.
<tbody>: 본문 행을 그룹화하는 태그

기타 테이블 관련 태그와 속성들

<colgroup> : 여러개의 column(열) 을 그룹화함. 속성 지정하기에 편리함.
<col>
scope 속성 : 제목, 소제목처럼 다른 글자보다 크게 만들 수 있음
header 속성

폼 요소
사용자로부터 데이터를 받아야 하는 경우 사용되는 요소들을 폼 요소라고 합니다.
<input>은 대표적인 폼 요소이며 내용이 없는 빈 요소로 type 속성을 통해 여러 종류의 입력 양식으로 나타나게 됩니다.

type = "text" : 주로 아이디, 이름, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용합니다.
type="text"에는 placeholder 속성이 존재합니다.
placeholder : 사용자가 입력하기 전 미리 화면에 노출하는 값으로, 입력하는 값의 양식을 표현할 수 있음
type = "password" : 암호와 같이 공개할 수 없는 내용을 입력할 때 사용
type = "radio" : 선택 버튼 / 라디오 버튼은 중복 선택이 불가능하며 하나의 항목만을 선택해야 합니다.
type = "checkbox" : 선택 버튼 / 중복 선택이 가능
type = "checked" : 값이 별도로 존재하지 않는 boolean 속성
type = "name" : 라디오 버튼과 체크박스를 그룹화시켜주는 속성
type = "file" : 파일을 서버에 올릴 때 사용
submit, reset, image, button 타입은 모두 클릭 가능한 버튼을 만듭니다.
submit : form의 값을 전송하는 버튼
reset : form의 값을 초기화하는 버튼
image : 이미지를 삽입할 수 있는 버튼 (submit과 동작이 동일함)
button : 아무 기능이 없는 버튼

이미지 버튼은 이미지 관련 속성인 src, alt 속성이 반드시 필요하며 width/height 속성을 적용할 수도 있습니다.

select : 몇 개의 선택지를 리스트 형태로 노출하고 그중 하나를 선택할 수 있게 하는 태그
<select>내부의 <option>으로 각 항목을 나타냅니다.
<option>의 속성으로는 selected가 있으며 이는 선택된 항목을 의미합니다.
textarea : 여러 줄의 텍스트를 입력할 때 사용 / 텍스트 상자의 크기를 조절하는 rows, cols 속성이 있음
button : 버튼을 만들 때 사용하며 submit, reset, button 3가지의 타입이 있습니다.
빈 태그가 아니며 내용을 안에 직접 넣을 수 있으므로 좀 더 자유로운 스타일 표현이 가능
label : form 요소의 이름과 form 요소를 명시적으로 연결시켜주기 위해 사용합니다.
모든 form 요소에 사용할 수 있습니다.
form 요소의 id 속성값과 <label>의 for 속성값을 같게 적어주어야 합니다.
fieldset : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
legend : 폼 요소의 제목으로 <fieldset> 내부에 작성
<legend>는 <fieldset>의 자식으로 반드시 최상단에 위치해야 합니다.
<fieldset>은 보통 form의 성격에 따라 구분합니다.
form : form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해주는 역할을 하는 태그
<form>에는 대표적인 2가지 속성이 있습니다.
- action: 데이터를 처리하기 위한 서버의 주소
- method: 데이터를 전송하는 방식을 지정
method 속성값에는 get/post 2가지 방식이 존재합니다.
get 방식은 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출됩니다.
반면, post 방식은 데이터가 전송될 때 데이터가 노출되지 않습니다.

🗃️ 3. 콘텐츠모델, 시멘틱마크업, 블록 & 인라인

1. 콘텐츠 모델

Content Models 의 7 분류

Metadata Content
Flow Content
Sectioning Content
Heading Content
Phrasing Content
Embedded Content
Interacitve Content

1. Metadata

" base,  link,  meta,  noscript,  script,  style,  title "

Metadata에는 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함됩니다.
메타 태그, 타이틀 태그, 스타일 태그, 링크 태그가 이에 해당하며 대부분 <head>내에 들어간다는 것이 특징입니다.

2. Flow

" a, abbr, address, map>area, article, aside, audio, b, bdo, blockquote, br, button,
canvas, cite, code, datalist, del, details, dfn, div, dl, em, embed,
fieldset, figure, footer, form, h1 ~ h6, header, hgroup, hr, i, iframe, img,
input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol,
output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong,
style[scoped], sub, sup, svg, table, textarea, time, ul, var, video, wbr "

Flow에는 문서의 자연스러운 흐름에 의해 배치되는 요소들이 포함됩니다.
Metadata에 해당하는 일부 태그들만 Flow에서 제외되며 요소 대부분이 Flow에 포함됩니다.

3. Sectioning

" article, aside, nav, section "

Sectioning에는 문서의 구조와 관련된 요소들이 포함됩니다.
HTML5에서 새로 생긴 <article>, <aside>, <nav>, <section> 등이 포함되며 이 태그들은 문서의 구조, 아웃라인에 영향을 주게 됩니다.

4. Heading

" h1, h2, h3, h4, h5, h6 "
Heading에는 각 section의 header를 정의하는 heading 태그가 포함됩니다.

5. Phrasing

"a, abbr, map>area, audio, b, bdo, br, button, canvas, cite, code, datalist, del, dfn, em, embed,
i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output,
progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time,
var, video, wbr"
Phrasing에는 문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소들이 포함됩니다.

6. Embedded

" audio,  canvas,  embed,  iframe,  img,  math,  object,  svg,  video "
Embedded에는 외부 콘텐츠를 표현하는 요소들이 포함되며 오디오나 비디오, 이미지 등 멀티미디어 관련 요소들이 이에 해당합니다.

7. Interactive
" a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu,
object[usemap], select, textarea, video[controls] "
Interactive에는 사용자와 상호작용을 하는 요소들이 포함되며 대표적으로 form 요소들이 이에 해당합니다.

2. 시멘틱 마크업

시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻합니다.
마크업 할 때는 의미에 맞는 태그, 요소를 사용하는 것이고 문서를 표현할 때는 구조화를 잘 해주는 것입니다.
정해진 약속대로 코드를 작성하게 되면 결국 기계뿐 아니라 사람도 이해하기 쉬운 코드가 됩니다.