1. HTML 소개

1) HTML 이해하기

Hyper Text Makeup Language

Language: 웹 페이지를 만드는 프로그래밍 언어
Hyper Text: =링크. text를 초월하는.
Markup Language: 정보를 구조적으로 표현할 수 있는 언어
확장자 - html

(+) 90년대 초반에 영국의 물리학자 팀 버너스리가 제안하여 개발되었다. 처음에는 연구원들끼리 연구의 정보를 공유하기 위해 개발되었다.

2. HTML 문법

1) 태그(TAG)

태그(TAG)

HTML은 태그들의 집합이므로, 태그는 가장 중요하고 기본이 되는 규칙이다.
의미: 무언가를 표시하기위한 꼬리표, 이름표
우리가 태그를 이용하여 코드를 작성하면, 브라우저가 이를 인식하여 내용을 표현한다.
HTML뿐만 아니라 XML, SGML, XHTML와 같은 Markup Language에서도 사용된다.

태그 사용하는 방법

꺽쇠(<, >) 사이에 태그 이름(h1)을 작성한다.

<h1>Hello, HTML</h1>

시작태그와 달리 종료태그에는 '/'가 붙는다.

태그 사이에는 실제 브라우저 화면에 나타나는 내용이 위치한다.

요소(Element)

내용을 포함한 태그 전체 (!= 태그)

2) 속성(Attribute)

속성

태그에 추가로 정보를 제공하거나, 태그의 동작이나 표현을 제어할 수 있는 설정값

속성을 사용하는 방법

속성 = 이름 + 값

시작 태그 이름 뒤에 공백으로 구분 후, 공백없이 작성한다.
<태그이름 이름1="속성값2" 이름2="속성값2">
공백을 띄워 여러 개의 속성을 사용할 수 있다.
여러 속성을 선언하는 경우, 속성의 선언 순서는 태그에 영향을 미치지 않는다.

속성의 종류

글로벌 속성: 모든 태그에 사용할 수 있는 속성 (ex. id, class)
특정 속성: 특정 태그에서만 사용할 수 있는 속성
선택 속성: 선택적으로 쓸 수 있는 속성
필수 속성: 특정 태그에서 필요한 속성

3) 태그의 중첩

태그의 중첩

태그 안에 다른 태그를 선언할 수 있다.

하지만 태그를 중첩에서 사용 시 중첩되는 태그는 부모 태그를 벗어나서는 안된다.

(ex1. 잘못된 태그 선언)

<h1>Hello, <i>HTML</h1></i>

(ex2. 올바른 태그 선언)

<h1>Hello, <i>HTML</i></h1>

(+) 때에 따라 정해진 태그만 중첩할 수 있기도 하다(Ch.3 블록 vs 인라인 블록)

4) 빈 태그

빈 태그

시작 태그, 종료 태그, 내용이 없는 태그

1. 웹문서에 텍스트가 아닌 이미지나 비디오처럼 외부 리소스를 삽입하는 경우와 같이 브라우저가 직접 화면에 내용을 그려줘야 하는 경우(=replacement태그, 대체되는 태그)

2. 혹은 실제 화면에 출력될 내용이 없어 다른 용도로 쓰이기 위해 사용된다. (ex. <br>)

<br>: 실제로 화면에 출력될 내용이 없어 다른 용도로 쓰이는 태그
<img src=""> (src 속성을 통해 이미지 리소스의 경로를 전달)
<input type="">

5) 공백

기본적으로 HTML은 두 칸 이상의 공백(줄 포함)을 모두 무시한다.

6) 주석

HTML의 주석

: 화면에 노출되지 않고 메모의 목적으로만 사용하는 것.

사용자들이 아닌, 개발자들끼리 협업하기 위한 기능으로 사용된다.

7) 문서의 기본 구조

HTML의 기본 구조

웹 문서를 작성할 때 반드시 들어가야 하는 기본적이고도 필수적인 내용

DOCTYPE(문서 타입 정의)와 <html>요소로 구분한다.

DOTYPE

이 문서가 어떤 버전으로 작성되었는지 브라우저에게 알려주는 선언문
무조건 최상단에 위치해야 한다.
주로 html5를 사용한다.
DOCTYPE을 선언하지 않거나 잘못 선언하면 브라우저가 이 문서를 비표준 문서로 해석하기 때문에 반드시 규칙에 맞게 선언해야만 한다.

<html>

lang속성: 검색 엔진이나 브라우저들이 참고할 수 있도록, 이 해당 문서가 어느 언어로 작성되었는지 나타내주는 속성
<head>태그
- 브라우저 화면에 표시되지 않는다.
- 문서의 기본정보 설정이나, 외부 스타일 시트 파일 및 자바스크립트 파일을 연결하는 역할을 한다.
- <meta>, <link>, <style> ... 많은 태그들이 들어가게 된다.
- <meta charset속성
  - 문자의 인코딩 방식을 지정하는 속성
  - UTF-8이 가장 기본적인 방식이다.
- <title>: 문서의 제목, 즉 실제 브라우저 화면의 탭바에 노출되는 내용이 들어간다.
<body>태그
- 실제 브라우저화면에 나타나는 내용들이 들어가는 태그

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

DOCTYPE: html5로 작성되었음을 브라우저에게 알려주고 있다.

문서 타입 정의

<html> 요소

3. HTML 태그

1) HTML 태그 소개

현재 태그의 개수는 대략 100여개가 넘는다. 하지만 이 중에 대부분의 웹 페이지들은 실제 20~30개의 태그들만을 사용된다. 따라서 사용 빈도가 높은 태그들의 사용법만 익히면 된다.

HTML elements reference - HTML: HyperText Markup Language | MDN

This page lists all the HTML elements, which are created using tags. They are grouped by function to help you find what you have in mind easily. An alphabetical list of all elements is provided in the sidebar on every element's page as well as this one. E

developer.mozilla.org

2) 태그 종류

제목(Heading)

문서 내 제목을 표현할 때 사용된다.
<h1> ~ <h6>

단락(Paragraph)

본문에 해당하는 내용을 작성할 때 사용된다.
자연스럽게 개행이 된다.
<p>

개행(LineBreak)

<p>내부에서 개행을 하고 싶은 경우 사용한다.
html은 한 칸 이상의 공백 및 개행은 무시하기 때문에 개행을 하기 위해 자주 사용된다.

텍스트를 꾸며주는 요소

<b> : bold. 굵게

<i> : italic. 기울임

<u> : underline. 밑줄

~~<s>~~ : strike. 중간선

(+) 그 외 텍스트를 꾸며주는 태그들

HTML elements reference - HTML: HyperText Markup Language | MDN

developer.mozilla.org

앵커(Anchor)

링크를 생성하는 태그
<a> (=a태그, 앵커태그, 링크태그, ... )
href 속성을 필수로 가진다.

<a href="http://www.naver.com/" target="_blank">네이버</a>

href 속성

- 속성의 값: 링크가 목적지가 되는 url

target 속성

- 링크된 리소스를 어디에 표시할지를 나타낸다.

_self : 현재 화면에 표시한다. (default값)
_blank : 새로운 창에 표시한다. 외부 페이지가 나타나게끔 하는 속성이다.

내부링크

- <a>를 통해 페이지 내부의 특정 요소로 초점을 이동시킬 수 있다.

- 사용법: href 속성값에 #를 쓰고, 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id속성값을 작성한다.

<a href="#some-element-id">회사 소개로 이동하기</a>

... 중략.

<h1 id="some-element-id">회사 소개</h1>

<h1 id="top">개발</h1>
<p>1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다. 인콰이어는 CERN의 연구원들이 문서를 이용하고 공유하기 위한 체계였다. 1989년에 팀 버너스리는 인터넷 기반 하이퍼텍스트 체계를 제안하는 메모를 작성했다.[2] 버너스 리는 1990년 말에 HTML을 명시하고, 브라우저와 서버 소프트웨어를 작성했다. 그 해에 버너스리와 CERN 데이터 시스템 엔지니어 로버트 카일리아우와 함께 CERN측에 자금 지원을 요청하였지만, 이 프로젝트는 CERN으로부터 정식으로 채택 받지 못했다. 버너스리의 개인적인 기록[3] 에 1990년부터 "하이퍼텍스트가 사용되는 여러 분야의 일부"를 열거했고 백과사전을 그 목록의 첫 번째로 두었다.</p>
<p>이후 1994년 초 <a href="#top">HTML</a>과 HTML+ 초안은 만료되었고, IETF는 HTML 작업 그룹을 설립해 1995년에 HTML 2.0을 완성한다. 최초의 HTML의 규격은 미래에 수행될 HTML 표준을 기반으로 간주되는 경향이 있었다.[8]RFC 1996년에 HTML 2.0은 HTML과 HTML+ 초안의 아이디어가 포함됐다고 발표했다.[10] HTML 2.0 지정은 이전의 초안들로부터 새로운 버전을 구별하기 위해서였다.[11]</p>

컨테이너(Container)

- 의미없이 단순히 요소를 묶기 위해 사용되는 태그. 스타일을 주거나, 서버에 보내는 데이터를 담기 위한 용도로 사용되고, 사용빈도가 매우 높다.

그 이유는 html은 문서를 웹에 나타내기 위해 제작이 되었기 때문에 태그들은 기본적으로 문서에 최적화되어 있는 의미를 가지고 있기 때문이다.

<div>
- 블록 레벨 태그
<span>
- 인라인 레벨 태그

! 블록 레벨 태그 > 인라인 레벨 태그

    <div>
        <span>Lorem</span> ipsum dolor sit amet consectetur adipisicing elit. Consequuntur aspernatur deleniti molestias corporis saepe quas similique corrupti ut quasi! Eos, in? Laudantium laboriosam eum et voluptatibus explicabo? Voluptatibus, praesentium esse.
    </div>

리스트

일련의 항목들이 나열된 것

<ul>
- unordered list. 순서가 없는 리스트를 표현할 때 사용된다.
- <ul>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타내서 사용한다.

<ul> 
    <li> 콩나물</li> 
    <li> 파</li> 
    <li> 국  간장</li> 
</ul>

<ol>
- ordered list. 순서가 있는 리스트를 표현할 때 사용된다.
- <ol>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타내서 사용한다.

<ol>
    <li>냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml) 만든다.</li>
    <li>콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다.</li>
    <li>뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다.</li>
</ol>

<dl>
- definition/description list. 용어와 그에 대한 정의를 표현할 때 사용한다.
- 용어(<dt>)와 설명(<dd>)이 하나의 세트로 항목을 이루고, 하나 이상의 항목(<dd>)으로 리스트가 이루어지는 구조.

<dl>
    <dt>리플리 증후군</dt>
    <dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd>
    <dt>피그말리온 효과</dt>
    <dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
    <dt>언더독 효과</dt>
    <dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl>

(+) list태그의 중첩

! <ol>,<ul> 속에 <li>

! <dl> 속에 <dt>,<dd>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>월드컵 조 편성</h1>
    <ol>
        <li>
        A조 
            <ul>
                <li>러시아</li>
                <li>우루과이</li>
                <li>이집트</li>
                <li>사우디아라비아</li>
            </ul>
        </li>
        <li>
        B조
            <ul>
                <li>이란</li>
                <li>스페인</li>
                <li>포르투갈</li>
                <li>모로코</li>
            </ul>
        </li>
        <li>
        C조
            <ul>
                <li>프랑스</li>
                <li>덴마크</li>
                <li>호주</li>
                <li>페루</li>
            </ul>
        </li>
        <li>
        D조
            <ul>
                <li>크로아티아</li>
                <li>아르헨티나</li>
                <li>아이슬란드</li>
                <li>나이지리아</li>
            </ul>
        </li>
    </ol>
</body>
</html>

이미지

- 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그이다.

src 속성 : 이미지의 경로를 지정한다.
- 상대 경로 : 현재 웹 문서의 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로. 페이지에 따라 다른 주소를 갖는다.
  - ./ - 현재 폴더
  - ../ - 상위 폴더로 이동
  - folder_name/ - 하위 폴더로 이동
- 절대 경로 : 실제 그 이미지가 위치해 있는 곳의 전체 경로. 어느 페이지에서 가져오더라도 같은 주소를 갖는다.
  - C:/.../ or http:// ... - 경로 전체를 모두 작성해야 한다.
alt 속성 : 이미지의 대체 텍스트 (src속성의 이미지를 띄우지 못할 경우, 대체 텍스트를 띄운다)
width/ height : 이미지의 크기를 지정 (optional)

<img src="./images/pizza.png" alt="피자">

웹에서 자주 사용되는 이미지 포멧

GIF: 256색으로 제한적이지만, 용량이 작고 애니메이션과 투명 이미지가 가능하다.
JPG: 웹에서 가장 많이 사용되는 포맷. 높은 압축률과 자연스러운 색상 표현이 가능하여 용량이 적으나 투명을 지원하지 않는다.
PNG: jpg와 비교했을 때, 이미지 손실이 없고 투명과 반투명 모두 지원하나 용량이 좀더 크다.

테이블

가로방향(row) / 세로방향(column)

<table> : 표를 나타내는 태그
<tr> : 행(table-row)
<th> : bold한 데이터 셀(table-cell) / <td> : 데이터 셀(table-cell)
표의 구조와 관련된 태그
- <caption> : 표의 제목
- <thead> : 제목 행을 그룹화
- <tfoot> : 바닥 행을 그룹화
- <tbody> : 본문 행을 그룹화

! <table> ➖ <caption>,<thead>,<tfoot>,<tbody> ➖ <tr> ➖ <th>,<td>

(ex. 4x4일 경우, <table> {<tr> (<td></td>*4) </tr>} *4 </table>

    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
        </tr>
        <tr>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
        </tr>
    </table>

셀 병합

colspan: 셀을 가로방향으로 병합
rowspan: 셀을 세로방향으로 병합

(ex.2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        th, td{ border: 1px solid; width:50px; height:50px;}
    </style>
</head>
<body>
    <table>
        <caption>Monthly Savings</caption>
        <thead>
            <tr>
                <th>Month</th>
                <th>Savings</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Jaunary</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>February</td>
                <td rowspan="2">$180</td>
            </tr>
            <tr>
                <td>March</td>
            </tr>
            <tr>
                <td colspan="2">April</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Sum</td>
                <td>$180</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

(ex.3)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        th,td{border: 1px solid;}
    </style>
</head>
<body>
    <table>
        <caption>Specification Values</caption>
        <thead>
            <tr>
                <th rowspan="2">Grade.</th>
                <th rowspan="2">Point.</th>
                <th colspan="2">Strength.</th>
                <th rowspan="2">Percent.</th>
            </tr>
            <tr>
                <th>kg/mm</th>
                <th>lb/in</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Hard</td>
                <td>0.45</td>
                <td>56.2</td>
                <td>80,000</td>
                <td>20</td>
            </tr>
            <tr>
                <td>Medium</td>
                <td>0.45</td>
                <td>49.2</td>
                <td>70,000</td>
                <td>25</td>
            </tr>
            <tr>
                <td>Soft</td>
                <td>0.45</td>
                <td>42.2</td>
                <td>60,000</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

(+) 추가 태그들

<colgroup>: 열의 그룹을 정의
<col>: 열을 구분하는 역할을 하는 빈 요소 태그. 열 단위로 한꺼번에 스타일을 처리할 수 있다.
scope 속성: 행, 열, 헤더 셀의 범위를 지정하여 복잡한 테이블에서 헤더와 관련된 정보를 제공하기 위해 사용된다.
headers 속성: 기계가 표를 읽을 때 헤더 정보를 이용하여 하나로 묶을 수 있고, 접근성 측면에서 사용하면 좋은 속성이다.
vertical-align: 테이블 속 텍스트의 세로정렬 (가운데 정렬하고 싶다면, vertical-align:middle)

(+) <colgraoup> : 테이블의 각 열의 너비를 일정한 비율로 고정 가능

<table>태그 내에 <tr>태그 시작 전에 작성하고, 테이블에 있는 열의 개수만큼 <col style="">만들어 따옴표 속에 칸의 비율을 작성한다.

모든 수의 합이 100이 되면 계산하기 좋긴하나, 상황에 따라 조금씩 조절해줘도 된다.

<!-- 열이 3개 있는 경우 -->
<table>
    <colgroup>
    	<col style="width:10%">
        <col style="width:30%">
        <col style="width:30%">
    </colgroup>
    <tr>
    ...

[html] 을 이용해 테이블 비율 고정 하기

안녕하세요. 플입니다. 오늘은 테이블 칸의 비율을 고정해보겠습니다. 1. 기본 우선 비율을 고정하지 않았을 때 모습입니다. 비율을 정해두지 않는다고 테이블 태그가 큰 문제가 있는 것은 아

ssimplay.tistory.com

폼

- 서버에 데이터를 전달하기 위한 요소. 대표적으로 <input>이 있다.

input 요소

대표적인 폼 요소. 다양한 type 속성으로 여러 종류의 입력 양식으로 나타난다.

type: text, password, radio, checkbox, button, ...

: The Input (Form Input) element - HTML: HyperText Markup Language | MDN

The HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The element is one of the mo

developer.mozilla.org

type="text"

placeholder 속성: 사용자가 입력하기 전에 띄울 텍스트

type="password"

암호와 같이 공개할 수 없는 내용을 입력할 때 사용한다.
type="text"와 같게 나타나지만, 실제로 입력하면 값을 노출하지 않는다.

type="radio"

하나의 항목만 선택이 가능하다.
name 속성: 동일한 name 내에 하나의 항목만 선택 가능하다.
checked 속성: boolean. 사용자가 선택하지 않더라도 default값으로 설정할 값.

type="checkbox"

중복 선택이 가능하다.
name 속성: 실제 값을 구분하여 잘 전달하기 위해서 사용한다.
checked 속성: boolean. 사용자가 선택하지 않더라도 default값으로 설정할 값.

type="file"

내 컴퓨터에 있는 파일들을 서버에 올릴 때 사용하는 타입. (ex. 프로필 변경, 게시물 사진 첨부)

type="submit"

값이 서버로 전송된다.
<form action="/~.html">로 이동한다.
value 속성: 버튼 내 값을 변경할 수 있다.

type="reset"

값을 초기상태로 변경한다.
값이 서버에 전달되거나하는 동작은 하지 않는다.
value 속성: 버튼 내 값을 변경할 수 있다.

type="button"

아무 기능 없는 버튼
value 속성: 버튼 내 값을 변경할 수 있다.

type="image"

동작은 submit과 동일하지만, 버튼 모양에 이미지를 삽입할 수 있다.
src 속성, alt 속성이 필수이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/test.html">
        <h1>Form 관련 요소</h1>
        아이디: <input type="text" placeholder="영문으로만 써주세요."><br>
        비밀번호: <input type="password"><br>
        성별: 남<input type="radio" name="gender" checked>, 여 <input type="radio" name="gender"><br>
        취미: 영화감상<input type="checkbox" name="hobby">, 음악감상<input type="checkbox" name="hobby" checked>, 독서<input type="checkbox" name="hobby"><br>
        프로필 사진 업로드: <input type="file"><br>
        <input type="submit" value="전송"><br>
        <input type="reset" value="취소"><br>
        <input type="button" value="버튼"><br>
        <input type="image" src="./images/pizza-jpg.jpg" alt="pizza" width="100" height="">
    </form>
</body>
</html>

select 요소

=선택 목록 상자, 콤보 박스.

! select ➖ option

몇 개의 선택지를 리스트 형태로 노출하고, 그 중 하나를 선택하게 하는 태그.
multiple 속성: 다중 선택 가능하다.
selected 속성: default값 (=checked 속성)

사는 지역: <select name="" id="">
            <option value="">서울</option>
            <option value="">경기</option>
            <option value="">강원</option>
            <option value="">제주</option>
        </select>

textarea 요소

text와 달리, 여러 줄을 입력받아야 하는 경우
cols/rows 속성: 가로/세로크기를 단어수로 지정
placeholder 속성: 입력 전 띄우는 값

자기소개: <textarea name="" id="" cols="30" rows="5" placeholder="자기소개를 입력해주세요."></textarea><br>

button 요소

사용자가 클릭 가능한 버튼
vs <input type="submit | reset | button">
- 동일한 기능
- button 요소 안에 내용을 직접 넣을 수 있기 때문에 스타일적인 측면에서 더 자유롭다.

        <button>submit</button><br>
        <button>reset</button><br>

label 요소

폼 요소와 연결해주기 위한 요소.
웹 접근성 향상에 도움이 되므로 필수적으로 작성해야 한다.
사용법: 연결하려는 폼 요소의 id속성의 값과 해당 label 요소의 for 속성의 값을 동일하게 작성해야 한다.

        <label for="userid">아이디: </label>
        <input type="text" id="userid" placeholder="영문으로만 써주세요."><br>
        <label for="userpw">비밀번호: </label>
        <input type="password" id="userpw"><br>

'아이디: ' 를 클릭하면, input도 동시에 선택된다.

input type="radio", "checkbox"의 경우, input type하나 당 label하나가 매칭되어야 하므로 하나씩 각각 매칭해준다.

성별: <label for="male">남</label><input type="radio" id="male" name="gender" checked> , <label for="female">여</label><input type="radio" id="female" name="gender"><br>

fieldset, legend 요소

폼 요소들을 구조화하기 위해 사용한다.

<fieldset>: 폼 요소를 그룹화해 주는 태그
<legend>: fieldset 태그로 묶인 그룹의 이름을 지정해주는 태그

! fieldsest ➖ legend

(ex. 필수 / 선택 작성 요소로 그룹화하기)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/test.html">
        <h1>Form 관련 요소</h1>

        <fieldset>
            <legend>기본 정보</legend>
            <label for="userid">아이디: </label>
            <input type="text" id="userid" placeholder="영문으로만 써주세요."><br>
            <label for="userpw">비밀번호: </label>
            <input type="password" id="userpw"><br>
            성별: <label for="male">남</label><input type="radio" id="male" name="gender" checked> , <label for="female">여</label><input type="radio" id="female" name="gender"><br>
        </fieldset>

        <fieldset>
            <legend>부가 정보</legend>
            취미: 영화감상<input type="checkbox" name="hobby">, 음악감상<input type="checkbox" name="hobby" checked>, 독서<input type="checkbox" name="hobby"><br>
            프로필 사진 업로드: <input type="file"><br>
            사는 지역: <select name="" id="">
                <option value="">서울</option>
                <option value="">경기</option>
                <option value="">강원</option>
                <option value="">제주</option>
            </select><br><br><br><br><br>
            자기소개: <textarea name="" id="" cols="30" rows="5" placeholder="자기소개를 입력해주세요."></textarea><br>
            <input type="submit" value="전송"><br>
            <input type="reset" value="취소"><br>
            <input type="button" value="버튼"><br>
            <input type="image" src="./images/pizza-jpg.jpg" alt="pizza" width="100" height=""><br>
    
            <button>submit</button><br>
            <button>reset</button><br>

        </fieldset>
    </form>
</body>
</html>

form 요소

모든 form 요소들의 데이터들을 감싸주는 태그
form 요소들의 데이터를 묶어 실제 서버로 전송해주는 역할을 하는 중요한 태그이다.
action 속성: 폼데이터를 처리하기 위한 서버 주소. 값이 전송되면 이 속성값에 적혀있는 위치로 데이터를 전송한다.
method 속성: 값 전송 시 어떤 방식으로 전송할 것인지
- get: 작성한 값을 이동되는 url에 포함
- post: 작성한 값을 이동되는 url에 포함하지 않음 -> 민감한 정보 전달 시 사용 (ex)로그인

form 요소를 이용하면, 내가 원하는 값들만 서버로 데이터를 전송할 수 있다.

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

1. 콘텐츠 모델

html5 버전에서, html 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들을 그룹화시켜 놓은 것. (총 7개)

1) Metadata Content

콘텐츠의 style(표현), script(동작)을 설정하거나 다른 문서와의 관계 등의 정보를 포함하는 요소

대부분이 <head> 태그 내에 들어가는 태그들이다.

(ex. meta, title, style, script, ... 태그 등)

2) Flow Content

문서 내에 자연스러운 흐름에 의해 배치되는 요소

대부분의 요소들이 해당되고, 일부 메타 데이터 태그들만 빠진다.

3) Sectioning Content

문서의 구조와 관련된 요소. 아웃라인에 영향을 주는 태그들.

(ex. article, aside, nav, section ... 등)

4) Heading Content

섹션의 헤더를 정의하는 요소

(ex. h1, h2, h3, h4, h5, h6)

5) Phrasing Content

문서의 text 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소

(ex. br, i, a, ... )

6) Embedded Content

외부 컨텐츠를 표현하는 요소

(ex. audio, img, canvas, embed, iframe, img, math, video, ... )

7) Interactive Content

사용자와 상호작용하는 요소. form 요소들이 이에 해당한다.

(ex. img, input, label, menu, select, textarea, video, embed, ... )

2. 시멘틱 마크업

의미론적인 마크업

컴퓨터(브라우저)가 잘 이해할 수 있는 코드

- sementic: 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것

(ex. '문단을 작성할 때는 <p>태그를 사용하자!'고 사용자와 브라우저 사이에 약속을 만들어 서로 소통하는 것)

의미에 맞는 요소를 사용
문서의 구조화
인간과 기계 모두가 이해할 수 있는 것이 목표

    <b>굵은</b> vs <strong>중요한</strong><br>
    <i>기울어진</i> vs <em>강조하는</em><br>
    <u>밑줄친</u> vs <ins>새롭게 추가된</ins><br>
    <s>중간선이 있는</s> vs <del>삭제된</del>

위 코드는 각 요소가 같은 모습으로 표현되지만 그 의미는 같지 않다.

<b>는 의미 없이 단순히 텍스트를 굵게 표현하는 태그지만, <strong>은 중요하다는 의미를 지니기에 이 의미에 맞춰 브라우저에 의해 굵은 스타일로 표현된 것이다.

따라서 html을 작성할 때 의미에 맞는 태그를 사용하여 구조적으로 잘 짜여진 문서를 만드는 것이 중요하다.

=> 얼마나 시멘틱하게 코드를 잘 짜느냐!

3. HTML5 시멘틱 요소

<article> : 본문의 주 내용이 들어가는 공간임을 의미
<aside> : 내부에 위치한 내용 외에 사이드에 손재하는 내용임을 의미
<figcaption> : <figure> 태그의 캡션(설명)을 정의
<figure> : 그림이나 도표, 사진과 같은 독립적인 콘텐츠들을 명시
<footer> : 문서, 구역의 바닥 글을 정의
<header> : 소개 내용이나 목록과 같은 링크들의 묶음을 표시
<main> : 문서의 주요 내용을 지정할 때 사용. (단, 고유 내용만 지정가능함. 반복되는 내용의 포함은 불가함)
<mark>: 텍스트의 일부를 강조
<nav> : 문서 내 링크들의 집합. 내비게이션을 의미함
<section> : 문서의 구역을 정의
<time> : 특정 시간이나 날짜를 정의
<address> : 주소를 정의

Semantics - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

In programming, Semantics refers to the meaning of a piece of code — for example "what effect does running that line of JavaScript have?", or "what purpose or role does that HTML element have" (rather than "what does it look like?".) In JavaScript, consi

developer.mozilla.org

(+) HTML5에서 주로 사용되는 시맨틱 태그는 아래와 같다

<header> : 주로 웹 페이지의 로고 영역을 만들 때 사용된다.
<nav> : 웹 페이지의 메뉴를 만들 때 사용하는 태그. 일반적으로 내부에 순서가 없는 목록을 나타내는 <ul>태그와 목록요소를 나타내는 <li>태그를 많이 사용한다. (<ul>의 앞에 순서매김을 없애기 위해 list-style-type:none으로 지정한다)
<section> : 여러 중심 내용을 감싸는 공간
<article> : 글자가 가장 많이 들어가는 부분에 사용된다.
<aside> : 왼쪽/오른쪽에 부가적인 내용을 나타내는 영역. 퀵메뉴나 광고영역으로 많이 사용된다.
<footer> : 웹 페이지의 하단을 만들 떄 사용하는 태그. 주로 카피라이터 영역을 표현할 때 사용된다.

HTML5 06 시맨틱 태그 - 입력 양식 및 공간 분할

HTML5 06 시맨틱 태그 - 입력 양식 및 공간 분할 HTML5 시맨틱 태그(입력 양식) 1. 시맨틱 태그란? HTML5 시맨틱 태그의 입력양식 HTML5에서 시용하는 주요 시맨틱 태그로는 , , , , , 가 있습니다. 먼저 는

jeongchul.tistory.com

4. 블록 레벨, 인라인 레벨

콘텐츠 모델이라는 분류로 총 7개로 분류했으나, 이처럼 복잡하게 나누기 이전에 '1.블록레벨, 2.인라인레벨' 두 가지로 분류하였다.

블록 레벨

양 옆으로 다른 요소가 배치되지 않게 박스를 생성하여, 박스 위아래로 줄바꿈이 생김.

즉, 블록 레벨 요소는 모든 요소를 포함할 수 있다.

(ex. div, h1~h6, p, ul, li, table ... )

인라인 레벨

하나의 라인 안에서 자신의 내용만큼의 박스를 만드므로, 라인의 흐름을 끊지 않고 줄바꿈이 생기지 않음.

따라서 다른 인라인 요소들이 자리할 수 있다.

즉, 인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없다.

(ex. a, span, i, img, em, ... )

(+) HTML5 버전의 예외

1. <a>는 인라인 레벨 요소이지만 자손으로 블록 레벨 요소를 가질 수 있다.

2. <h1>~<h6>, <p>는 블록 레벨 요소이지만 내부로 Pharsing Content만 허용된다.

5. CSS 이해하기

1. CSS 소개

Cascading Style Sheets

Cascading: 연속적으로 계속되는.
Style Sheets: 스타일 규칙을 정의한다.
HTML을 꾸며주는 언어
html이 웹페이지의 정보를 표현한다면, CSS는 html을 보기 좋게 디자인하는 역할

HTML과 CSS는 독립된 다른 언어이지만, 마크업 문서 자체가 존재하지 않으면 CSS는 무용지물이다. 왜냐하면 CSS는 표현을 위한 언어이기 때문에 마크업 문서가 없다면 표현할 대상이 없기 때문이다. 따라서 CSS는 보통 마크업 언어인 HTML과 묶어서 함께 이야기한다.

즉, CSS를 이용하여 같은 문서라도 다르게 디자인할 수 있다.

2. CSS 문법과 적용

h1 { color: yellow; font-size: 2em; }

1. 어느 요소를 꾸밀 것인지. 선택할 요소

2. 그 요소를 어떻게 꾸밀 것인지. 스타일에 대한 내용

선택자(selector): "h1"
속성(property): "color", "font-size" vs HTML의 속성(attribute)
값(value): "yellow, "2em"
선언(declaration) "color: yellow", "font-size: 2em"
선언부(declaration block): "{color: yellow; font-size:2em;}"
규칙(rule set): "h1 { color: yellow; font-size:2em; }"

CSS 주석

/* */

CSS의 적용 4가지

1. inline

해당 요소에 직접 스타일 속성을 이용해 규칙을 선언함. (선택자 사용X)

<div style="color:red;">내용</div>

2. internal

문서의 <head> 내부에 <style>을 입력하여 내에 스타일 규칙들을 선언함.

하지만 모든 페이지마다 각각 규칙을 선언해야 하기 때문에 페이지가 많고 스타일 규칙 내용이 많아지면 힘들기 때문에 자주 사용되지 않는다.

<style> div { color: red; } </style>

3. external

.css 외부 스타일 시트 파일에 규칙들을 선언하고, 외부 파일을 넣어 사용한다.

파일 관리가 편하고 용량이 작기 때문에 주로 사용되는 방법이다.

div{color:red;}

<head>내에 <link>를 선언하여 href 속성을 이용해 css 파일의 경로를 적는다.

rel 속성 : 연결되는 파일이 문서와 어떤 관계인지 명시하는 속성. CSS 파일인 경우 'stylesheet'

<link rel="stylesheet" href="css/style.css">

4. import

스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식

@import url("css/style.css");

3. 선택자

원하는 요소를 선택하기 위해 사용하는 것

1. 요소 선택자

가장 기본적인 선택자. =태그 선택자

선택자 부분에 태그 이름이 들어간다. 문서 내 선택자에 해당하는 모든 요소에 스타일 규칙이 적용된다.

h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }
h4 { color: yellow; }
h5 { color: yellow; }
h6 { color: yellow; }

그룹화(,)

h1, h2, h3, h4, h5, h6 { color: yellow; }

전체 선택자(*)

* { color: yellow; }

선언이 동시에 그룹화 가능

h1 { color: yellow; font-size: 2em; background-color: gray; }

선택자와 선언이 동시에 그룹화 가능

h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; }

2. class 선택자(.)

HTML에 class 속성을 추가하여 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 방법

class 속성은 글로벌 속성이므로 어느 태그에서도 사용 가능하다.

.html { color: purple; }
.css { text-decoration: underline; }

<dl>
    <dt class="html">HTML</dt>
    <dd><span class="html">HTML</span>은 문서의 구조를 나타냅니다.</dd>
    <dt class="css">CSS</dt>
    <dd><span class="css">CSS</span>는 문서의 표현을 나타냅니다.</dd>
</dl>

다중 class

공백으로 구분하여 여러 개의 class값을 넣을 수 있다. (id는 단일)

.foo {font-size:30px;}
.bar {color:blue;}

<p class="foo bar"> ... </p>

위와 같이 입력하게 되면 해당 <p>태그 내에 foo, bar의 두 개 class의 스타일이 적용된다.

3. id 선택자(#)

class 선택자와 비슷하다.

#bar { background-color: yellow; }

<p id="bar"> ... </p>

class와 다른 점

.기호가 아닌 #기호를 사용
태그의 class 속성이 아닌 id 속성을 참조
문서 내에 유일한 요소에 사용 (단 한 번만 사용되어야 함/ 적용되는 요소는 단 하나)
구체성

(+) 선택자의 조합

/* 요소와 class의 조합 */
p.bar { ... }

/* 다중 class */
.foo.bar { ... }

/* id와 class의 조합 */
#foo.bar { ... }

4. 속성 선택자

단순 속성으로 선택

요소 선택자[class or id]에 모두 적용

p[class] { color: silver; }
p[class][id] { text-decoration: underline; }

1. p이면서 class 속성이 있는 요소일 때 규칙 적용

2. p이면서 class 속성과 id 속성이 함께 있어야 규칙이 적용

<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>

정확한 속성값으로 선택

요소 선택자[class or id="name"]

p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }

부분 속성값으로 선택

속성 이름과 속성값 사이에 사용되는 기호에 따라 동작이 다르다.

[class~="bar"]: class 속성의 값이 공백으로 구분한 "bar"단어가 포함된 요소 선택 (단어 그 자체만)
[class^="bar"]: class 속성의 값이 "bar"로 시작하는 요소 선택
[class$="bar"]: class 속성의 값이 "bar"로 끝나는 요소 선택
[class*="bar"]: class 속성의 값이 "bar" 문자가 포함되는 요소 선택

<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>

p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */

4. 문서 구조 관련 선택자

문서 구조의 이해

부모: 가장 가까운 상위 요소
자식: 가장 가까운 하위 요소
조상: 그 요소를 포함한 모든 요소
자손: 그 요소가 포함하고 있는 모든 요소
형제: 같은 부모를 가지고 있는 요소들

문서 구조 관련 선택자

자손 선택자: ( )공백

div span { color: red; }

: div 아래의 단계에 있는 모든 span들

자식 선택자: (>)

div > h1 { color: red; }

: div 바로 1단계 아래에 있는 모든 h1들

인접 형제 선택자: (+)

div + p { color: red; }

: div와 동일한 부모를 가지는 p들

조합해서 사용

body > div table + ul { ... }

: body 요소의 자식인 div 요소의 자손인 table요소 바로 뒤에 인접한 ul 요소를 선택

5. 가상 선택자(pseudo selector)

지금 문서 내에 존재하지 않는 요소에 스타일을 부여할 수도 있고, 특정 요소의 상태를 미리 추정하여 가상의 클래스로 스타일을 적용시킬 수 있는 선택자.

가상 클래스 (pseudo class) : 한 태그 전체를 적용시킴
가상 요소 (pseudo element) : 한 태그 내에서 어느 부분 요소만 적용시킴

1. 가상 클래스(:) (pseudo class)

미리 정의해놓은 상황에 적용이 되도록 약속되어있는, 보이지 않는 클래스.

보통 우리는 스타일을 주기 위해서 클래스를 이용한다. 스타일 규칙을 만들고 내가 원하는 요소에 클래스 값을 미리 선언하게 된다.

하지만, 우리가 요소에 직접 클래스를 입력하는 것이 아니라, 브라우저가 스스로 특정한 상황이 되면 자동적으로 클래스를 적용시켜주는 것이다.

예로 들어서 <p>태그가 있는데, <p>요소에 마우스를 올렸을 때 글자 색을 빨간색으로 나타내고 싶다고 해보자. 그러면 먼저 스타일 규칙을 만들 것이다.

.red { color: red; } .... <p class="red"> ... <p/>

위처럼 작성하게 되면 문서가 뜨자마자 처음부터 <p>가 빨간색이다. 이럴 때는 HTML과 CSS만으로는 처리가 불가능하다. 따라서 보통 JavaScript나 서버사이드와 같은 다른 언어를 사용하여, 특정 상황(마우스를 올리는 상황)이 되면 그때 이 요소에 red라는 클래스를 삽입하도록 별도의 처리를 하도록 해야한다. 이것이 바로 HTML과 CSS의 한계이다.

그래서 CSS에서는 자주 사용되는 여러 상황들을 미리 정의를 해놓고 그 상황이 되면 알아서 이 요소에 어떤 가상의 클래스가 들어가게끔 만들어놓은 것이 있다. 이것이 바로 '가상 클래스'이다. 가상 클래스를 사용하면 CSS만으로 구현이 가능하므로 앞서 얘기한 경우보다 훨씬 효율적이다. 우리는 그냥 그 클래스를 이용하여 스타일 규칙을 선언해놓으면 된다. 물론 그 클래스는 실제 코드에 클래스 속성이 보이지는 않는다. 하지만 보이지 않아도 클래스의 이름들은 모두 정의했기 때문에 알 수 있다.

의사 클래스 - CSS: Cascading Style Sheets | MDN

CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을

developer.mozilla.org

위의 링크에 클릭해서 들어가면 가상 클래스의 종류들을 볼 수 있다(표준 의사 클래스 색인). 우리는 그것을 보고 가져다 쓰기만하면 된다.

가상 클래스는 CSS3 버전까지 업데이트되면서 많이 생겼다.

가상 클래스 사용법

가상 클랫 ㅡ이름 앞에 :(콜론) 기호를 넣어주기만 하면 된다.

:pseudo-class {
	property: value;
}

대표적인 가상 클래스 종류

:first-child: 첫 번째 자식 요소 선택
:last-child: 마지막 자식 요소 선택

li:first-child { color: red; }
li:last-child { color: blue; }

리스트 중에서 가장 첫 번째/마지막 자식 요소의 폰트 색상 변화시키기

(ex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li:first-child { color: red; }
        li:last-child { color: blue; }
    </style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul>
</body>
</html>

    <style>
        :first-child { color: red; }
        /* :last-child { color: blue; } */
    </style>

    <style>
        /* :first-child { color: red; } */
        :last-child { color: blue; }
    </style>

    <style>
        :first-child { color: red; }
        :last-child { color: blue; }
    </style>

    <style>
        li:first-child { color: red; }
        li:last-child { color: blue; }
    </style>
    ...
    <ul>
        <li>HTML<p>p</p></li>
        <li>CSS</li>
        <li>JS</li>
    </ul>

선택된 요소의 자손들도 모두 적용된다.

링크와 관련된 가상 클래스

:link : 하이퍼링크이면서 아직 방문하지 않은 앵커(<a href=""></a>
:visited : 이미 방문한 하이퍼링크를 의미

a:link { color: blue; }
a:visited { color: gray; }

(ex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link { color: blue; }
        a:visited { color: gray; }
    </style>
</head>
<body>
    <a href="http://naver.com">네이버</a>
    <a href="http://google.com">구글</a>
    <a href="http://daum.net">다음</a>
</body>
</html>

사용자 동작 관련 가상 클래스

:focus : 현재 입력 포커스를 갖고 있는 요소에 적용
- focus: 현재 선택을 받고 있는 것. 초점
- (ex. 입력 폼 요소에 입력하려고 마우스를 클릭하여 커서를 입력 폼 위에 올려 놓고 있는 경우, 포커스가 입력 폼 요소에 걸려있다)
- (ex2. 키보드의 탭 키를 이용하여 요소를 탐색하다 보면, 링크나 버튼 같은 데 점선 테두리가 이동하는데, 이 점선 테두리가 위치하는 것도 포커스를 받는 상태라고 할 수 있다)
:hover : 마우스 포인터가 위치해 있는 요소에 적용
:active : 사용자 입력에 의해 활성화 된 요소에 적용
- 포커스가 간 상태에서 링크를 클릭하거나 버튼을 눌렀을 때 순간적으로 발생한다.

(ex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:focus { background-color: yellow; }
        a:hover { font-weight: bold; }
        a:active { color: red; }
    </style>
</head>
<body>
    <a href="http://naver.com">네이버</a>
    <a href="http://google.com">구글</a>
    <a href="http://daum.net">다음</a>
</body>
</html>

결과1) '네이버'에 마우스를 댔을 때 -> bold 효과

결과2) 탭 키를 눌러 '네이버'에 포커스를 주었을 때 -> background-color: yellow 효과

결과3) '구글'을 눌렀을 때 -> 순간적으로 폰트 색상이 빨간색으로 변화

2. 가상 요소(pseudo element)

미리 정의해놓은 위치에 삽입이 되도록 약속되어 있는, 보이지 않는 요소.

사용법

가상 클래스와 동일하게 :(콜론) 기호를 쓰고 그 뒤에 가상 요소 선택자를 쓰면 된다.

가상 요소 종류

:before : 가상 앞 요소에 삽입 -> 'contents 속성(property-css)'
:after : 가장 뒤에 요소를 삽입 -> 'contents 속성(property-css'
:first-line : 요소의 첫 번째 줄에 있는 텍스트
:first-letter : 블록 레벨 요소의 첫 번째 문자

의사 요소 - CSS: Cascading Style Sheets | MDN

CSS 의사 요소(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 ::first-line을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다. p::firs

developer.mozilla.org

(ex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:before {
            color: red;
            content: "before 가상 요소를 활용한 내용";
        }
        p:after {
            color: blue;
            content: "after 가상 요소를 활용한 내용";
        }
    </style>
</head>
<body>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus veritatis cupiditate voluptatibus minima accusantium, voluptates porro aliquid quas quidem. Nemo veritatis sint laudantium amet, voluptatum eaque exercitationem. Nihil, nobis accusantium?</p>
</body>
</html>

(ex2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:first-line {
            color: red;
        }
        p:first-letter {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus veritatis cupiditate voluptatibus minima accusantium, voluptates porro aliquid quas quidem. Nemo veritatis sint laudantium amet, voluptatum eaque exercitationem. Nihil, nobis accusantium?</p>
</body>
</html>

(+) 웹 페이지 너비를 늘렸을 때

웹 페이지에서의 첫 줄만 폰트가 빨간색으로 적용된다.

6. 구체성(명시도)

h1 { color: red; }
body h1 { color: green; }

h2.grape { color: purple; }
h2 { color: silver; }

위의 코드에서 h1, h2 요소는 어떻게 표현이 될까?

이처럼 선택자에 어떠한 규칙이 우선되어야 하는지 정한 룰이 "구체성"이다.

구체성

선택자를 얼마나 명시적으로 선언했는지 수치화한 것.

구체성의 값이 높을수록 우선되어 적용이 된다.

0, 0, 0, 0

다음과 같이 구체성은 4개의 숫자 값으로 이뤄져 있다.

값을 비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분(⬅)의 숫자가 클수록 높은 구체성을 갖는다.

구체성 규칙

인라인 - id - class - 요소 - *

1, 0, 0, 0 : 인라인 스타일
0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
전체 선택자는 0, 0, 0, 0을 가진다.
조합자는 구체성에 영향을 주지 않는다. (>, + 등)

(ex. 선택자의 구체성 계산하기)

h1 { ... }  /* 0,0,0,1 */
body h1 { ... }  /* 0,0,0,2 */
.grape { ... }  /* 0,0,1,0 */
*.bright { ... }  /* 0,0,1,0 */
p.bright em.dark { ... }  /* 0,0,2,2 */
#page { ... }  /* 0,1,0,0 */
div#page { ... }  /* 0,1,0,1 */

1. 모든 요소에는 0, 0, 0, 1이 추가된다.

2. 요소가 두 개 있으니 0, 0, 0, 2

=> 구체성이 2. > 1. 이므로 실제 스타일 적용은 2이 된다.

3. class 선택자는 0, 0, 1, 0

4. 전체 선택자(=영향없음)와 조합된 class 선택자는 0, 0, 1, 0

5. class 2개 0, 0, 2, 0 + 요소 2개 0, 0, 0, 2 => 0, 0, 2, 2

6. id 1개 0, 1, 0, 0

7. id 1개 0, 1, 0, 0 + 요소 1개 0, 0, 0, 1 => 0, 1, 0, 1

=> 7 > 6. 따라서 7의 스타일이 적용된다.

인라인 스타일

1, 0, 0, 0. 가장 높은 구체성을 가지고 있다.

CSS

0, 1, 0, 1

p#page { color: red; }

HTML

<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

Red? Blue? => Blue.

important

!important

별도의 구체성 값은 없으나, 모든 구체성을 무시하고 우선권을 갖는다.

p#page { color: red !important; }

<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

Red? Blue? => Red.

7. 상속

상속

구체성과 더불어 선언들이 문서에 어떻게 적용되는지 이해하기 위한 또다른 핵심 개념.

어떤 스타일이 특정 요소만이 아니라, 그 자손 요소에까지 적용되는 방식

(ex)

h1 { color: gray; }

<h1>Hello, <em>CSS</em></h1>

<em>요소는 <h1>에 영향받아 color: gray가 적용이 된다.

박스 모델 관련 속성들은 상속되지 않는다. (ex. margin, padding, background, border )

상속되는 값의 구체성

* { color: red; }
h1#page { color: gray; }

1. 0, 0, 0, 0

2. 0, 1, 0, 1

<h1 id="page">Hello, <em>CSS</em></h1>

상속된 값에는 아무런 구체성을 갖지 못하기 때문에, <em>은 color: red;

8. 캐스케이딩(Cascading)

CSS가 어떤 방식으로 문서에 적용이 되는지 정한 규칙.

Cascading: 단계적인

Q. 구체성이 같은 두 규칙이 동일한 요소에 적용된다면?

h1 { color: red; }
h1 { color: blue; }

구체성이 같은 규칙이 나오면, 캐스케이딩의 단계적인 규칙에 따라 동작한다.

캐스케이드 규칙

1. 중요도(!important) & 출처

기본적으로 !important로 선언된 모든 규칙은 다른 규칙보다 우선한다.
출처는 제작자, 사용자, 사용자 에이전트(=브라우저에 내장된 CSS)로 구분한다.
우선순위
1. 사용자 !important 스타일 (사용자는 잘 쓰지 않으므로 무시해도 됨)
2. 제작자 !important 스타일
3. 제작자 스타일 (사이트 제작자가 작성한 CSS)
4. 사용자 스타일 (일반 유저가 직접 CSS를 만들어 본인 브라우저에 설정을 해놓은 것. 현재는 사용되지 않으므로 신경쓰지 않아도 된다.)
5. 사용자 에이전트 스타일 (브라우저에 기본적으로 제공하는 스타일)

2. 구체성

구체적인 것이 더 우선하게 된다.

p#bright { color: silver; } 
p { color: red; }

=> silver

3. 선언순서

나중에 선언된 녀석이 더 우선하게 된다.

p { color: silver; }
p { color: red; }

=> red

9. 선택자 정리

CSS Selectors Reference

CSS Selector Reference CSS Selectors In CSS, selectors are patterns used to select the element(s) you want to style. Use our CSS Selector Tester to demonstrate the different selectors. Selector Example Example description .class .intro Selects all elements

www.w3schools.com

6. 단위, 배경, 박스모델

1. CSS 속성(property) 정의와 syntax 확인 방법

모든 속성을 알 수 없으므로, 필요에 따라 사이트를 통해 CSS의 몇 가지 속성들을 보면 된다.

속성을 알아보는 사이트

1) W3C > CSS Reference

World Wide Web Consortium (W3C)

W3C Advisory Committee Elects Technical Architecture Group 7 January 2021 | Archive The W3C Advisory Committee has elected the following people to the W3C Technical Architecture Group (TAG): Amy Guy (Digital Bazaar), Sangwhan Moon (W3C Invited Expert), The

www.w3.org

정의

해당 속성이 어떤 변화를 일으키고 어떻게 동작하는지 파악할 수 있다.

기본 값
상속 여부
애니메이션 가능 여부
사용 가능한 CSS 버전

문법(Syntax)

해당 속성값을 어떤 식으로 나열하여 사용하는지 파악할 수 있다.

(+)

간단한 스펙, 예제를 확인하는데 용이하다.

W3Schools Online Web Tutorials

HTML Example:

This is a heading

This is a paragraph.

Try it Yourself » CSS Example: body { background-color: lightblue; } h1 { color: white; text-align: ce

www.w3schools.com

2> MDN web docs

: 개발적 버그나 추가적인 스펙에 대해 확인하는데 용이하다.

MDN Web Docs

MDN 웹 문서 사이트는 HTML, CSS, 및 웹 사이트와 프로그레시브 웹 앱을 위한 API를 포함한 오픈 웹 기술에 대한 정보를 제공합니다. 또한 Firefox 개발자 도구와 같은 Mozilla 제품을 위한 개발자 지향 문

developer.mozilla.org

2. 속성의 종류

1) 단위(font-size)

절대 길이

고정된 크기 단위. 다른 요소의 크기에 의해 영향받지 않는다.

px - pixels (1px = 1/96th of 1in)
pt - points (1pt = 1/72 of 1in)
- 사용하는 기기의 해상도에 따라 차이가 있다.
- windows: 9pt = 12px
- mac: 9pt = 9px

상대 길이

다른 요소의 크기나 폰트 크기, 브라우저 등의 크기에 따라 상대적으로 값이 변한다.

% - 부모의 값에 대해 백분율로 환산한 크기를 갖는다.
- (ex. 폰트 사이즈가 100%이고, 상위 요소가 16px일 때 폰트 크기는 16px)
em - 선언한 해당 폰트의 대문자 M의 너비를 기준으로 하는 상대적인 단위
- 1em = 16px
- 1em: 현재 지정된 폰트 크기
- 2em: 현재 폰트 크기의 2배. =즉, 200%.
rem - root(부모)의 font-size를 기준으로 값을 환산한다.
vw - viewport의 width값을 기준으로 1%의 값으로 계산된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .px {
            font-size: 16px;
        }
        .pt {
            font-size: 12pt;
        }
        .percent {
            font-size: 100%;
        }
        .em {
            font-size: 2em;
        }
    </style>
</head>
<body>
    <p class="px">단위 16px로 선언된 텍스트입니다.</p>
    <p class="pt">단위 12pt로 선언된 텍스트입니다.</p>
    <p class="percent">단위 100%로 선언된 텍스트입니다.</p>
    <p class="em">단위 1em로 선언된 텍스트입니다.</p>
</body>
</html>

CSS values and units - Learn web development | MDN

Every property used in CSS has a value type defining the set of values that are allowed for that property. Taking a look at any property page on MDN will help you understand the values associated with a value type that are valid for any particular proper

developer.mozilla.org

2) 색상(color)

폰트의 색상 값을 적용할 때 사용하는 속성

컬러 키워드

red, blue, black와 같이 미리 정의된 키워드를 이용하여 색상 표현하기 (+transparent. 투명)

16진법

6자리의 16진수(0-9, A-F)는 각각 두 자리씩 세 가지 색상(RRGGBB)을 나타낸다. (#OOOOOO)

대소문자는 구분하지 않는다.

RGB ()

0(검정)-255(흰색)의 정수로 된 값을 지정하여 rgb(R, G, B)로 나타낸다.

RGBA ()

RGB ()에서 A(alpha, transparent)를 추가한 형태.

alpha: 0(투명)~1(불투명)

(ex. rgba(0, 0, 0, 0)은 투명한 색상이므로 보이지 않는다.)

3) background

background-color (default: transparent)

배경의 색상을 지정하는 속성 (text라면 형광펜 효과)

background-image (default: none)

배경에 사용할 이미지 경로를 지정하는 속성

url의 경로는 절대 경로, 상대 경로 모두 가능하다.

background-repeat (default: repeat)

배경의 이미지 반복 여부와 방향을 지정하는 속성

repeat 속성값 : x, y축 모두 반복
repeat-x 속성값 : x축 방향으로만 반복
repeat-y 속성값 : y축 방향으로만 반복
no-repeat 속성값 : 이미지를 반복하지 않는다.

background-position (default: 0% 0%)

값 선언 순서: x축 -> y축

한 값만 지정되었다면, 나머지는 자동으로 중앙 값(center)로 적용된다.
속성값: top, bottom, left, right, center

background-attachment (default: scroll)

화면 스크롤에 따른 배경 이미지의 움직임 여부를 지정하는 속성

scroll 속성값: 요소 자체를 기준으로 고정되어 있고 내용과 함께 스크롤 되지 않는다.
local 속성값: 요소의 내용을 기준으로 고정되어서 내용과 함께 스크롤이 된다.
fixed 속성값: 뷰포트를 기준으로 고정되어서 스크롤에 영향받지 않는다.

background 축약

background: [-color] [-image] [-repeat] [-attachment] [-position];

(ex)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>background</title>
  <style>
    div {
      height: 500px;
      background-color: yellow;
      background-image: url(https://www.w3schools.com/CSSref/img_tree.gif);
      background-repeat: no-repeat;
      background-position: center top;
      /* 축약형 */
      background: yellow url(https://www.w3schools.com/CSSref/img_tree.gif) no-repeat center top;
    }
  </style>
</head>
<body>
    <div> css background 속성 실습 </div>
</body>
</html>

(ex2. background-attachment)

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        height: 600px;
      }
      div {
        width: 30%;
        height: 300px;
        overflow: auto;
        float: left;
        margin: 0px 10px;
        background-image: url( "images/pizza-jpg.jpg" );
        background-repeat: no-repeat;
        border: 1px solid #bcbcbc;
        font-size: 36px;
      }
      .jb-scroll {
        background-attachment: scroll;
      }
      .jb-fixed {
        background-attachment: fixed;
      }
      .jb-local {
        background-attachment: local;
      }
    </style>
  </head>
  <body>
    <div class="jb-scroll">
      <p style="font-weight: bold">scroll</p>
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
        <li>Ten</li>
      </ul>
    </div>
    <div class="jb-fixed">
      <p style="font-weight: bold">fixed</p>
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
        <li>Ten</li>
      </ul>
    </div>
    <div class="jb-local">
      <p style="font-weight: bold">local</p>
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
        <li>Ten</li>
      </ul>
    </div>
  </body>
</html>

4) boxmodel

box model 구성

Margin
- border ~
- border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역이다.
- 주변 요소와의 여백(간격)을 두기 위해 사용된다.
Border
- content 영역을 감싸는 테두리 선
Padding
- content ~ border
- content 영역이 배경, 색 또는 이미지가 있을 경우 패딩 영역까지 영향을 미친다.
Content
- 요소의 실제 내용을 포함하는 영역.
- 크기는 내용의 너비 및 높이를 나타낸다.

(ex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            border: 10px solid #000;
            padding: 30px;
            margin: 30px;
        }
    </style>
</head>
<body>
    <div>
        Box model을 알아볼까요?
    </div>
</body>
</html>

5) border

요소의 테두리
축약형

border: [-width] [-style] [-color];

border-width

속성값: thin, default: medium, thick
단위: px, em, rem, ... ( %, 정수 단위 사용 불가)
축약형

border-width: [top] [right] [bottom] [left];

border-style

속성값: default: none(없음), solid(실선), double(이중실선), dotted(점선)
border-top-style, border-bottom-style, border-right-style, border-left-style을 이용하여 상하좌우 선의 모양을 다르게 표현할 수 있다.
축약형

border-style: [top] [right] [bottom] [left];

border-color

속성값: default: currentColor
border-top-color, border-bottom-color, border-right-color, border-left-color를 이용하여 상하좌우 선의 색상을 다르게 표현할 수 있다.
축약형

border-color: [top] [right] [bottom] [left];

6) padding

요소 안쪽의 여백 (content ~ border)

default: 0
length: 고정값으로 지정한다. (px, em, ... )
percent: 요소의 width에 상대적인 크기를 지정한다.

padding-top: content 영역의 위쪽 여백 지정
padding-right: content 영역의 오른쪽 여백 지정
padding-bottom: content 영역의 아래 여백 지정
padding-left: content 영역의 왼쪽 여백 지정
축약형

padding: [-top] [-right] [-bottom] [-left];
	0	10px	20px	30px	/* 상우하좌 다름 */
	0	10px	20px		/* 좌=우 */
	0	10px			/* 상=하, 좌=우 */
	0				/* all 같음 */

        div {
            padding: 0 10px 20px 30px;
            border: 10px solid black;
        }

7) margin

요소 바깥 여백 (border~)

length: 고정값으로 지정 (px, em, ... )
percent: 요소의 width에 상대적인 크기를 지정
auto: 브라우저에 의해 계산된 값이 적용됨.
- 대부분의 경우 0(기본값) 또는 요소의 해당 측면에서 사용 가능한 공간과 같은 값을 가진다. 이를 활용하여 수평 중앙 정렬을 할 수 있다.
- margin: auto; - 요소가 가질 수 있는 가로 영역에서 자신의 width를 제외한 나머지 여백의 크기에 대해 균등 분할하여 적용한다. 즉, 수평 중앙 정렬이 되는 것이다. 상하는 수직 중앙 정렬이 되지 않는다.
- width를 가지고 있는 요소에만 적용할 수 있다. (height는 한없이 늘어나는 요소이기 때문이다)

margin-top/right/bottom/left
축약형

margin: [-top] [-right] [-bottom] [-left];
    0	10px	20px	30px		/* 상우하좌 다름 */
    0	10px	20px			/* 좌=우 */
    0	10px				/*상=하, 좌=우 */
    0					/* all 같음 */

margin collapse(마진 병합)

두 개 이상의 수직 방향으로 인접한 박스의 마진이 하나로 합쳐지는 것.

두 요소가 상하로 인접한 경우: 위 요소의 margin-bottom + 아래 요소의 margin-top
부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소
1. 부모 요소의 margin-top + 첫 번째 자식 요소의 margin-top
2. 부모 요소의 margin-bottom + 마지막 자식 요소의 margin-bottom
내용이 없는 빈 요소의 경우: 해당 요소의 margin-top + margin-bottom

수직 방향으로만 이루어지고, 좌우로는 일어나지 않는다.
마진이 반드시 맞닿아야 발생한다. 따라서 2, 3의 경우 padding & border가 없어야 한다.

(확인하기) 위 요소의 margin-bottom + 아래 요소의 margin-top

Q> 아래 코드를 보고 <h1>과 <p> 사이의 간격으로 알맞은 것을 고르시오.

<h1>Margin Collapse</h1>
<div><p>What do you think?</p></div>

h1 { margin: 0 0 20px 0; }
div { margin-top: 40px; }
p { margin-top: 30px ;}

A> 40px

h1의 margin-bottom과 div의 margin-top이 병합되므로 간격은 둘 중 큰 값인 40px가 된다.

8) margin & padding

	+	-	auto	단위
margin	O	O	O	px, %, ...
padding	O	X	X	px, %, ...

음수값 사용 가능 여부 : margin - O / padding - X
- margin: 사람과 사람 사이의 간격이라 생각하면 된다. 사람은 멀리 떨어지거나 겹쳐 설 수 있으므로 음수 값이 가능하지만, 지방은 아무리 뺀다 해도 뼈 이하로 갈 수 없으므로 양수만 된다.
- 즉, A와 B가 겹쳐질 순 있지만 A의 내용 그 자체가 작아져서 내용이 짤릴 수 없다.
- (ex1. margin에 음수값을 넣었을 때)

        div {
            margin: 0 -50px;
            border: 10px solid black;
        }

(ex2. padding에 음수값을 넣었을 때)

%값의 사용과 기준점
- %는 상하좌우에 관계없이 무조건 width값을 기준으로 값이 결정된다.
- (ex. 아래의 경우, 모두 10px 10px 10px 10px 값으로 적용된다.)

div {
   width: 100px;
   height: 200px;
   margin: 10%;
   padding: 10%;
}

(ex2. padding-top: 10%;)

가로 크기를 늘리면 padding-top도 함께 증가함을 확인할 수 있다.

9) width

요소의 가로 값을 결정한다.

default: auto
length: px, em, ...
percent: %
width에 auto가 아닌 특정 값을 지정하여 사용하면, 크기는 box model 영역(margin, content, padding, border)에서 margin 영역을 제외한 모든 영역에 의해 영향을 받는다.
- (ex. width: 100px로 지정하고 검사해보면 .box의 width가 160px로 뜬다.)
- width 100px + border 10px * 2 (좌우) + padding 20px * 2 (좌우) = 160px

.box {
  width: 100px;
  padding: 20px;
  border: 10px solid black;
}

(ex2. %를 이용하여 width를 지정하는 경우)
parent width 464px * 0.5 + padding 40px + border 20px = 292px
=> 자식 요소의 퍼센트 값은 부모 요소의 contents 값에 영향을 받는다.

        .child {
            width: 50%;
            padding: 20px;
            border: 10px solid red;
        }

Q> inner의 전체 가로 길이는?

<div class="wrap">
	<div class="box">  
		<div class="inner">inner</div>
	</div>
</div>

.wrap { width: 500px; margin: 0 5px; padding: 10px; border: 15px solid red; }
.box { width: 60%; padding: 20px; border: 10px solid black; }
.inner { width: 30%; padding: 5px; background: pink; }

A> 100px

inner의 부모 width = box의 부모 width 500px * 0.6 = 300px

inner의 width = box의 width 300px * 0.3 + padding 10px = 90px + 10px = 100px

10) height

요소의 높이 값을 결정한다.

default: auto
length: px, em, ...
percent: %
- 부모가 명시적인 height값을 가지고 있어야 자식의 높이를 %로 지정해주었을 때 적용이 된다.

Q> .child 요소의 전체 높이 값은?

<div class="parent">
	<div class="child"></div>
</div>

.parent { width: 300px; padding: 10px; border: 10px solid black; }
.child { height: 30%; padding: 15px; border: 5px solid black; }

A> 0

parent의 height를 명시적으로 지정해주지 않았으므로 child의 height는 0(auto)이다.

11) boxmodel 정리

4가지 영역
- margin (transparent), border, padding, content
전체 박스 사이즈 = contents width/height + padding + border
margin은 음수값으로 지정할 수 있다.

7. 폰트, 텍스트

12) typography

타이포그래피의 구조

em: 폰트의 전체 높이
ex: (=x-height). 해당 폰트의 영문 소문자 x의 높이
Baseline: 소문자 x를 기준으로 하단의 라인
Descender: 소문자에서 baseline 아래로 쳐지는 영역. 서체에 따라 길이가 달라진다 (g, j, p, q, y)
Ascender: 소문자 x의 상단 라인 위로 넘어가는 영역. (b, d, h, l)

13) font-family

보통 family-name과 generic family를 함께 작성한다. (=우선순위)

generic-family

family-name으로 지정한 폰트가 사용자의 컴퓨터에 없을 경우 적절한 폰트를 선택할 수 있도록 몇 가지 유형의 폰트를 함께 선언해준다.
종류: serif, sans-serif, monospace, cursive, ...

자식 요소에서 font-family를 재선언하면 부모에 generic-family가 선언되어 있어도 다시 선언해주어야 한다. 즉, font-family + generic-family는 set로 생각하자.
(ex. font-family의 가장 마지막에는 generic-family를 선언해준다)

font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif;

14) line-height

줄간격. 주로 행간을 제어할 때 사용된다.

default: normal
행간: 폰트 사이즈(=ascender+descender+ex)(=em)를 제외한 영역
줄간격 = em 박스 + 행간

속성값
- number: font-size를 기준으로 설정한 숫자만큼 배율로 적용한다.
- length: px, em 등 고정 수치로 할당할 수 있다.
- %: font-size를 기준으로 설정한 퍼센트만큼 배율로 적용한다.
  - %로 계산된 px값은 자식에 그대로 상속된다.
  - 따라서 가능한 단위가 없는 값으로 사용하는 것이 좋다.

(ex)

body { font-size: 20px; line-height: 2; }    /* line-height = 40px; */
p { font-size: 10px; }                       /* line-height = 20px; */


body { font-size: 20px; line-height: 200%; }    /* line-height = 40px; */
p { font-size: 10px; }                          /* line-height = 40px; */

font-size가 body의 1/2이므로 line-height도 1/2
p에서 10px * 200%가 적용되는 것이 아니라, body에서 적용된 20px * 200%가 그대로 p에 상속되어 적용되기 때문이다.

Q> .child의 line-height값은?

<div class="wrap">

	<div class="parent">  

      		<div class="child">line-height 값 계산</div>

	</div>

</div>

.wrap { font-size: 20px; line-height: 2; }
.parent { font-size: 1.5em; line-height: 200%; }
.child { font-size: 15px; }

A> 60px

부모에서 %를 이용하여 계산한 line-height는 자식에게 그대로 상속된다.

wrap의 line-height = parent의 line-height = 20 * 1.5(1em=16px) * 2(=200%) = 60px

15) font-size

default: medium (=16px) (=1em)
상대적인 값보다는 고정적인 값을 주로 사용한다.
- em: 가장 가까운 부모 요소에 상대적인 값
- rem: 최상단 root인 html 요소에 상대적인 값. 선언이 없다면 16px가 기본.

Q> .section 요소의 font-size의 값은?

<html>

... 중략 ...

<div class="wrap">       

<div class="content">

<div class="section"></div>
<div class="article"></div>              
<div class="footer"></div>       

</div>

</div>

... 중략 ...

</html>

 html { font-size: 16px; } 
.wrap { font-size: 1.5rem; } 
.section { font-size: 1.5em; }

A> 32px

.wrap의 크기 = 1.5 * 16px (1em=16px) = 24px

.section의 크기 = 1.5em * 24px = 32px

16) font-weight

글꼴의 굵기를 설정할 때 사용한다.

default: normal (=400)
bold (=700)
(+) lighter, bolder
number

폰트 패밀리에 따라 값이 다르고, 안드로이드 혹은 ios냐에 따라서도 조금씩 굵기가 다르다.

17) font-style

글꼴의 스타일을 지정하는 속성

default: normal
italic
oblique : 각도를 지정하여 더 기울일 수 있다.

18) font-variant

글꼴의 형태를 변환하는 속성. 소문자를 작은 대문자로 변환할 수 있다.

default: normal
small-caps

19) font

축약형 속성

font: [style] [variant] [weight] [size/line-height] [font-family]

font-size와 font-family는 반드시 선언해야 하는 필수 속성이다.
빠진 속성은 기본 값으로 지정된다.
각 속성의 선언 순서를 지켜야 한다.

20) webfont

웹 폰트

웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용하는 속성.

즉, 다른 글꼴을 서버에 저장하여 제공하거나, 혹은 웹 경로를 가지고 와서 import하여 제공하는 폰트를 의미한다.

예로 들어서 네이버의 경우에는 나눔 고딕을 설치하여 제공하고 있다. 따라서 사용자가 설치한다면 나눔 고딕이 웹상에서 보이게 되는 것이다. 이것 또한 설치형 폰트라고 할 수 있다. 웹폰트를 사용하게 되면 나눔고딕 폰트를 설치 유무에 상관없이 모든 PC에서 나눔고딕 폰트가 노출된다.

웹 폰트는 폰트 파일 자체를 웹에서 제공해주는 것이기 때문에 열어 브라우저에서 나올 수 있도록 타입별로 여러 가지 파일을 제공해주어야 한다. 따라서 확장자명에 따라 브라우저 지원율이 다르다.

@font-face

웹 폰트를 사용하기 위해 사용하는 속성. 속성값은 아래와 같다.

속성값

font-family (필수) : css 문서에 사용할 웹폰트의 글꼴 이름을 지정
src (필수) : 다운로드 받을 글꼴의 경로(url). 여러 줄을 입력하여 브라우저에 적용할 수 있는 폰트를 찾을 때까지 선언한 순서대로 이동한다.
font-style (optional)
font-weight (optional)

( ex. )

@font-face {
    font-family: webNanumGothic; /* 사용자 지정 웹 폰트명 */
    src: url(NanumGothic.eot); /* 적용 될 웹 폰트의 경로 */
    font-weight: bold; /* 필요에 따라 지정 */
    font-style: italic; /* 필요에 따라 지정 */
}

body {
    font-family: webNanumGothic;
}

위의 예시의 경우, 내가 사용할 웹폰트 패밀리명을 webNanumGothic이라고 하겠다고 선언하는 것이 된다.

font-family에서 선언한 웹폰트 패밀리명과 사용할 웹폰트명이 반드시 같아야 하는 것은 아니다. 하지만 유지보수를 위해 웹폰트 패밀리명과 사용할 폰트명을 동일하게 하는 것이 좋다.

(+) 웹폰트의 모든 것

웹폰트 사용하기 (웹폰트의 모든 것) | WIT블로그

웹폰트의 기본적인 사용법부터 FOUC 해결까지 웹폰트의 모든것에 대해 정리해 보았습니다.

wit.nts-corp.com

21) vertical-align

요소의 수직 정렬을 지정하는 속성

! 인라인 레벨 요소에만 적용이 가능하다.

속성값

length : 요소를 지정한 길이만큼 올리거나 내린다. 음수 허용
% : 요소를 line-height를 기준으로 올리거나 내림. 음수 허용
keyword : baseline, sub, super, top, text-top, middle, bottom, text-bottom
- baseline (default) : 부모 기본 값 (소문자 x를 기준으로 그 밑으로 위치한 값)
- sub : 부모 아래 첨자 기준선
- super : 부모 위첨자 기준선
- text-top : 부모 텍스트의 맨위 (Ascender 제외)
- text-bottom : 부모 텍스트의 맨위 (Descender 제외)
- middle : 부모 중앙에 위치
- top : 부모의 맨위 위치
- bottom : 부모의 맨아래 위치

(ex. )

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>vertical-align</title>
  <style>
    p {
      padding: 10px;
      border: 1px dashed #aaa;
      line-height: 1;
      font-size: 16px;
    }

    p span {
      background-color: rgba(0, 255, 255, 0.5);
      border: 1px solid #aaa;
    }

    p span:nth-child(1) {
      background-color: rgba(255, 255, 0, 0.5);
    }

    p span:nth-child(2),
    p span:nth-child(4) {
      font-weight: bold;
      font-size: 20px;
    }

    p span:nth-child(3) {
      background-color: rgba(0, 0, 0, 0.2);
    }

    /* table */

    table {
      width: 100%;
      border-collapse: collapse;
    }

    table td,
    table th {
      border: 1px solid #aaa;
      height: 50px;
    }
  </style>
</head>
<body>
    <h1>vertical-align</h1>
    <p><span>vertical-align:</span>
      <span style="vertical-align: baseline;">baseline;</span>
      <span>---</span>
      <span style="vertical-align: baseline;">수직정렬</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: sub;">sub;</span>
      <span>---</span>
      <span style="vertical-align: sub;">수직정렬</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: super;">super;</span>
      <span>---</span>
      <span style="vertical-align: super;">수직정렬</span></p>
    <p>
      <span>vertical-align:</span>
      <span style="vertical-align: text-top;">text-top;</span>
      <span>---</span>
      <span style="vertical-align: text-top;">수직정렬</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: text-bottom;">text-bottom;</span>
      <span>---</span>
      <span style="vertical-align: text-bottom;">수직정렬</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: middle;">middle;</span>
      <span>---</span>
      <span style="vertical-align: middle;">수직정렬</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: top;">top;</span>
      <span>---</span>
      <span style="vertical-align: top;">수직정렬</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: bottom;">bottom;</span>
      <span>---</span>
      <span style="vertical-align: bottom;">수직정렬</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: 4em;">4em;</span>
      <span>---</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: 4px;">4px;</span>
      <span>---</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: 20%;">20%;</span>
      <span>---</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: -10px;">-10px;</span>
      <span>---</span></p>

    <table>
      <caption>table cell vertical-align</caption>
      <thead>
        <tr>
          <th>속성 값</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="vertical-align:baseline;">vertical-align:baseline</td>
        </tr>
        <tr>
          <td style="vertical-align:top;">vertical-align:top</td>
        </tr>
        <tr>
          <td style="vertical-align:middle;">vertical-align:middle(cell 기본값)</td>
        </tr>
        <tr>
          <td style="vertical-align:bottom;">vertical-align:bottom</td>
        </tr>
        <tr>
          <td>null</td>
        </tr>
      </tbody>
    </table>
</body>
</html>

22) text-align

텍스트의 가로 정렬을 지정하는 속성

! 블록 요소에 선언하게 되면, 블록 요소 안에 있는 인라인 요소들의 정렬을 정의하게 된다.

속성값

left (default)
right
top
bottom
center
justify : 텍스트를 라인 양쪽 끝으로 붙여서 정렬 (마지막 라인은 정렬하지 않음)

text-align과 display의 관계

text-align은 inline-level에 적용된다
block-level을 text-align으로 정렬할 수 없다.

block 요소를 가운데에 정렬하고 싶다면?

margin의 auto값을 이용한다.

margin: auto

! 인라인 요소: text-align

! 블럭 요소: margin

23) text-indent

텍스트의 들여쓰기를 지정하는 속성

속성값

length : px, em. 문단의 첫 줄에 대한 들여쓰기를 수행한다. 음수값 사용 가능하고, 음수값을 사용하면 왼쪽으로 이동한다.
percent(%) : 부모 요소의 width를 기준으로 퍼센트로 지정한다.

Q> .box의 text-indent값은?

<div class="wrap">
	<div class="box">Text-Indent ~ !</div>
</div>

.wrap { width: 200px; height: 100px; border: 5px solid red; } 
.box { width: 300px; text-indent: 10%; border: 10px solid black; }

A> 20px

퍼센트를 사용하면 부모 요소의 width를 기준으로 지정된다. 따라서 200px의 10%는 20px이므로 20px.

24) text-decoration

텍스트의 장식을 지정하는 속성.

default: none currentColor solid

속성값

none(default) : 꾸밈이 없음
underline : 밑줄 꾸밈
overline : 윗줄 꾸밈
line-through : 중간줄 꾸밈

text-decoration-color : 텍스트 꾸밈의 색상을 지정하는 속성 (default: currentColor)
text-decoration-style : 꾸밈에 사용되는 선의 스타일을 지정하는 속성 (default: solid)
- (+) double(이중선), dotted(점선), dashed(파선), wavy(물결)

속성-단어 관련 속성

white-space 속성

요소 안에 공백을 어떻게 처리할지 지정하는 속성.

normal (default) : 공백과 개행을 무시하고, 필요한 경우에 자동 줄바꿈 발생.
nowrap : 공백과 개행을 무시하고, 자동 줄바꿈이 일어나지 않음
pre : 공백과 개행을 표현하고, 자동 줄바꿈이 일어나지 않음
pre-line : 공백은 무시하고, 개행만 표현. 필요한 경우 자동 줄바꿈 발생
pre-wrap : 개행은 무시하고, 공백만 표현. 필요한 경우 자동 줄바꿈 발생

letter-spacing

자간(글자 사이 공간)을 지정하는 속성

normal (default)
length : 길이만큼 자간을 지정. 음수 허용.

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: 2px;
}

h3 {
  letter-spacing: -1px;
}

word-spacing

단어 사이의 간격을 지정하는 속성

normal (default)
length : 길이만큼 단어 사이의 간격을 지정. 음수 허용.

p.a { 
  word-spacing: normal;
}

p.b { 
  word-spacing: 30px;
}

p.c { 
  word-spacing: 1cm;
}

word-break

단어가 라인 끝에 나올 경우(중단점)를 처리하는 방법을 지정하는 속성

normal (default) : 중단점은 공백이나 하이픈(-)(CJK는 음절)
keep-all : 중단점은 공백이나 하이픈(-)(CJK는 그 외 기호도 포함)
break-all : 중단점은 음절(길이에 맞게 모두 끊어버림). 모든 글자가 요소를 벗어나지 않고 개행

word-wrap

요소를 벗어난 단어의 줄바꿈을 지정하는 속성

normal (default) : 중단점에서 개행
break-word : 모든 글자가 요소를 벗어나지 않고 강제로 개행함

8. 레이아웃

25) display

요소의 렌더링 박스 유형을 결정하는 속성

html의 요소 : 1. 블록레벨요소 2.인라인레벨 요소

display 속성을 이용하면 블록요소를 인라인요소로, 인라인요소를 블록요소로 보여줄 수 있다.

따라서 태그마다 고유하게 갖고 있는 rendering box의 특징을 display 속성으로 변경할 수 있다.

속성값 (default: 요소마다 다름)

none : 요소가 화면에서 표시되지 않음(공간도 차지하지 않음)
inline : inline level 요소처럼 렌더링
block : block level 요소처럼 렌더링
inline-block : inline level 요소처럼 렌더링되지만, block level의 성질을 가짐
- 배치는 inline처럼 하고, block처럼 렌더링 값을 가진다.
list-item : <li>가 가지는 display 속성.
flex
inline-flex
table
table-cell

display와 box model의 관계 (X/O : line-box로 반영이 되는지 여부)

display	width	height	margin	padding	border
block	O	O	O	O	O
inline	X	X	좌/우	좌/우	좌/우
inline-block	O	O	O	O	O

display: block의 경우, 한 줄을 통으로 자신의 영역으로 사용하고 있으므로 상하좌우로 속성값이 선언된다.
display: inline의 경우, 상하로는 속성값이 선언되지 않고, 좌우로만 선언된다.
display : inline-block의 경우, 상하좌우로 속성값이 선언된다. 따라서 block처럼 box model 속성을 모두 적용할 수 있다.

(+) inline 요소의 padding/border 속성이 좌/우만 적용된다고 표시한 이유 추가 설명

(아래 접은 글: 코드)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            color:white;
        }
        div {
            background-color:darkblue;
        }
        span {
            border: 10px solid black;
            padding: 10px;
            background-color:cornflowerblue;
        }
    </style>
</head>
<body>
    <section style="padding-top: 50px;"></section>
    <div>parent
        <span>child</span>
        <span>child</span>
    </div>
    <div>parent
        <span>child</span>
        <span>child</span>
    </div>
</body>
</html>

<parent는 <div>(=block), child는 <span>(=inline)으로 작성한 경우>

실제로는 위의 그림과 같이 inline 요소의 padding/border는 상,하,좌,우에 적용이 된다.

하지만 상/하의 padding/border는 line-box에 영향을 주지 못하기 때문에 위의 그림과 같이 부모 요소의 박스에 반영되지 않는다. (그래서 부모 요소의 박스(<div>)의 크기는 아래와 같이 <span>의 크기가 반영되지 않은 크기임을 확인할 수 있다)

또한 인접한 다른 line-box에도 반영되지 않는다. 따라서 콘텐츠가 겹칠 수 있기 때문에 inline 요소는 실무에서 잘 사용되지 않는다.

inline-block은 왜 사용할까? 그냥 block을 사용하면 되지 않을까?

➡ inline-block은 배치는 inline처럼 되지만, box는 block처럼 되기 때문에, 한 줄에 여러개의 요소들을 놓을 수 있고, 이들을 겹침없이 다룰 수 있다.

그리고 배치가 inline처럼 된다고 하였으므로 태그를 개행했을 경우 inline처럼 약 4px의 여백을 갖는다. (태그를 개행하지 않고 바로 옆에 두 요소를 작성하게 되면 여백을 갖지 않고 바로 옆에 붙어서 배치된다.)

또한, display 속성을 바꿀 순 있지만, 태그의 본질을 바꾸는 것은 아니기 때문에 html적으로 문법적 오류가 없도록 작성해야 한다.

예로 들어서 인라인 레벨 요소 안에 블록 레벨 요소가 오지 않도록 해야 하는데 (ex. <span>의 자식요소로 <div>를 선언하면 안됨), 이처럼 문법적 오류가 나지 않도록 주의해야 한다.

26) visibility

요소의 화면 표시 여부를 지정하는 속성

visible (default) : 화면에 표시
hidden : 공간은 차지하지만 화면에 표시되지 않음
collapse : 셀 간 경계를 무시하고 숨김(테이블 관련 요소에만 적용 가능)
- 즉, 테이블을 숨길 때 사용한다.

display:none과의 차이점

- display:none : 요소가 렌더링하지 않아 화면에 공간을 차지하지 않음

- visibility:hidden : 요소가 보이진 않지만 렌더링되어 화면에 공간을 차지하고 있음

27) float

요소를 float시킬지 지정하는 속성.

float는 떠가다, 뜨다는 의미이므로 요소를 보통의 흐름에서 벗어나도록 할 때 사용한다. 그래도 자신의 영역은 차지하고 있다.

요소를 보통의 흐름에서 벗어나 띄워지게 함
주변 텍스트나 인라인요소가 주위를 감싸는 특징이 있음
대부분 요소의 display값을 block으로 변경함
- display: inline 형식을 float 시키면 자동으로 block으로 변경된다.
- 따라서 <span>태그와 같은 인라인 태그를 float: left로 선언하면 자동으로 display:block으로 바뀌기 때문에 불필요하게 display를 재선언할 필요가 없다.

속성값

none (default)
left : 좌측으로 float 시킴
right : 우측으로 float 시킴

(ex. )

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>float</title>
  <style>
.container {
  border: 1px dashed #aaa;
  padding: 15px;
  clear: both;
}
.container div, .container span {
  width: 100px;
  height: 100px;
  border: 1px solid #aaa;
  color: #fff;
}
.container :nth-child(1) {
  background-color: green;
}
.container :nth-child(2) {
  background-color: skyblue;
}


</style>
</head>
<body>
  <h2>요소를 보통의 흐름에서 벗어나 띄워지게 함</h2>

  <div class="container" style="width:400px;">
    <div>Box1</div>
    <div>Box2</div>
  </div>

  <h2 style="margin-top:100px;">주변 텍스트나 인라인요소가 주위를 감싸는 특징이 있음.</h2>
  <div class="container" style="width:400px;">
    <div>Box1</div>
    <div>Box2</div>
    <p>CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. 부동(floating) 요소 는 float 의 계산값(computed value)이 none이 아닌 요소입니다.</p>
  </div>

  <h2>대부분의 요소에 display 값을 block으로 변경함.</h2>
  <div class="container" style="width:400px;">
    <div>Box1</div>
    <div>Box2</div>
  </div>
</body>
</html>

현재로는 세 박스가 다음과 같이 나타난다.

1. 요소를 보통의 흐름에서 벗어나 띄워지게 함

위의 상태에서 box1의 값에 style="float: left"를 추가해보자.

  <div class="container" style="width:400px;">
    <div style="float: left;">Box1</div>
    <div>Box2</div>
  </div>

그러면 box2가 갑자기 보이지 않는다. 이 상태에서 box2에도 float:left로 선언해보자.

그러면 box2가 보이게 된다. 그리고 점선의 container도 줄어들게 되었다.

왜 이렇게 되었을까?

요소를 보통의 흐름에서 벗어나서 띄운다고 했다. 처음 box1에 float:left를 주면 box2의 내용이 안 보이는 것처럼 보이게 된다. 사실 box2는 box1 뒤에 가려져 보이지 않고 있는 것이다. 이를 확인하기 위해 box2의 height: 120px로 줘보자.

그러면 가려져 있던 box2가 보인다. 그리고 box2는 float:none이기 떄문에 점선인 container의 크기도 box2에 맞게 증가함을 확인할 수 있다.

현재 box2는 floating되지 않은 상태(float:none)이다. 그리고 box2가 내용으로 텍스트를 포함하고 있고, 텍스트는 인라인 요소이다. 그래서 아무리 부모(<div>)가 block box여도 텍스트 자체는 인라인 요소이기 때문에 텍스트는 box1 아래로 보인다.

box1이 float:left인 점을 생각해보자. 그래서 일단 box1은 보통의 흐름에서 벗어나 띄워진 상태가 되었다. 따라서 바로 옆에 오는 다른 box인 box2가 밑에 깔린 형태가 된다.

여기서 box2의 width:150px로 수정해보자.

그러면 box2에 인라인 텍스트가 옆에서 띄워진다.

지금 box1은 본인 자체의 width와 height값을 유지하고 있으면서도 두 번쨰 box2가 영여깅 좁을 땐 box2에 포함된 텍스트는 영역을 차지하면서 밑으로 흘러갔는데, box2의 width가 커지니까 안쪽의 텍스트가 box1옆으로 가서 붙는 것을 확인할 수 있다.

특징1에서 알아야 할 것은 'float를 주면 보통의 흐름에서 벗어나서 떴다, 하지만 자신의 영역은 차지하고 있다' 는 것이다.

보통의 흐름에서 벗어났다는 것은, container의 자식이긴한데 가출을 해서 붕 떨어져 나왔다!고 생각하면 된다. (그래서 container와 상관없기 떄문에 container가 늘어나지 않는다)

여기서 만약 box2의 width/height를 auto로 주면 아래와 같이 뜬다.

따로 영역을 차지하지 않고, box1이 지나간 만큼만 자리를 비워주고 그 옆으로 계속하여 텍스트 내용을 보여준다. 그리고 box2가 container의 크기에 맞춰 변경되었기 떄문에, container의 크기도 box2에 맞추지 않고 이전의 크기로 돌아간다.

2. 주변 텍스트나 인라인요소가 주위를 감싸는 특징이 있음

box1에 float:left를 선언하고, box2에는 float:right를 선언해보자.

그러면 box2가 오른쪽에 나타나게 된다.

그리고 그 밑에 <p>요소에는 텍스트가 있다. <p>는 블록 요소이지만, 안에 텍스트들은 인라인 요소이다.

그래서 box1과 box2의 float된 요소를 제외한 나머지 영역에 순차적으로 <p>의 텍스트가 들어가게 된다. 하지만 텍스트만 float된 요소 사이에 들어가는 것이지, <p>가 차지하는 영역은 아래와 같이 box1, box2 아래의 배경 영역으로 차지한다.

즉,자기 자리의 공간은 모두 그대로 차지하지만, box1와 box2(float:left, right)의 영역은 비워준다.

<p>입장에서 보면, 형들이 가출을 했지만 나에게 형들이 있다며 형들의 자리를 유지해주는 것이다. 하지만 <p>가 차지하는 안쪽 텍스트들은 자연스레 그 영역을 제외한 공간을 채워가면서 주위를 감싼다.

float을 했을 때 공간이 어떻게 되는지 헷갈리면 border를 넣던지, 배경을 넣던지, 사이즈를 바꾼다던지, 혹은 opacity 값으로 투명도를 조절하여 어디까지 영역을 차지하고 있는지 확인해보면 좋다.

3. 대부분의 요소에 display 값을 block으로 변경함

현재 <div>는 모두 block 요소이기 때문에 기본적으로 display:block인 상태이다. 여기서 box2의 요소를 display:inline으로 변경하여 살펴보자. 이를 위해 box2의 태그를 <span>으로 변경하였다.

  <h2>대부분의 요소에 display 값을 block으로 변경함.</h2>
  <div class="container" style="width:400px;">
    <div>Box1</div>
    <span>Box2<span>
  </div>

<span>은 width, height를 선언해봤자, display가 inline이기 때문에 auto x auto로 잡힌다. 그래서 무조건 요소 안의 텍스트 크기에 맞게 잡힌다.

그런데 여기서 float를 선언하게 되면 대부분의 요소에 display:block으로 변경해준다고 한다. 이를 살펴보기 위해 <span>의 style에 float:left로 주어보자.

그러면 auto x auto -> 100px x 100px 로 변경된다. 그리고 display:block으로 변경되었다.

따라서 float로 선언하게 되면 display를 block으로 선언하지 않아도 자동으로 block으로 선언되므로, 불필요하게 display를 선언하지 않아도 된다.

A> 4번.

float를 선언하면 display속성값이 자동으로 block으로 변경된다.

28) clear

요소를 floating된 요소의 영향에서 벗어나 다음 행으로 이동하게 할 때 선언하는 속성

! block 레벨 요소에만 적용 가능하다.

속성값

none (default)
left : 왼쪽으로 floating 요소를 허용하지 않음
right : 오른쪽으로 floating 요소를 허용하지 않음
both : 양쪽으로 floating 요소를 허용하지 않음
==> float요소의 속성값이 none, left, right 값 뿐이므로 clear의 속성값도 좌/우의 값만 가진다.

(ex. )

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>clear</title>
  <style>
    .container {

      border: 1px dashed #aaa;
    }

    div,
    span {
      padding: 20px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <h2>clear: none</h2>

  <div class="container">
    <div style="float:left">float:left;</div>
    <span style="display:block;clear:none;">내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로</span>
  </div>

  <h2>clear: left</h2>
  <div class="container">
    <div style="float:left">float:left;</div>
    <span style="display:block;clear:left;">내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로</span>
  </div>

  <h2>clear: right</h2>
  <div class="container">
    <div style="float:right">float:right;</div>
    <span style="display:inline-block;clear:right;">내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로</span>
  </div>

  <h2>clear: both</h2>
  <div class="container">
    <div style="float:left">float:left;</div>
    <div style="float:right">float:right;</div>
    <span style="display:block;clear:both;">내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로</span>
  </div>
</body>
</html>

(ex.1)

clear: none을 한 경우, 기본값과 동일하므로 다음과 같이 나온다.

(ex.2)

float:left된 요소에, block인 요소에다가 clear:left를 한 결과이다. block 특성에 의해 float된 요소 아래에 표시된다.

(ex.3)

float:right된 요소에, inline-block인 요소에다가 clear:right을 한 결과이다. 이때는 <span>이 inline-block이기 때문에 제대로 동작하지 않는다(clear속성은 block-level 요소에만 적용이 가능하다!).

여기서 inline-block은 배치는 inline에 두고 있기 때문에 float된 요소에 영향을 받아 배치가 된다. 따라서 아래로 겹치지 않고, float된 요소의 위치를 피해서 배치가 된다.

만약 이 요소를 block으로 변경하게 되면 아래와 같이 clear가 잘 적용되는 것을 확인할 수 있다.

(+) 추가. 여기서 clear:left를 주게 되면 아래와 같이 뜬다.

block에 float:right를 주었기 때문에 이 요소는 container 위로 띄워져있다. 그리고 아래의 text가 적힌 block 요소는 float 아래로 배치가 된다. 아까 말했듯이, inline-block으로 두었을 때에는 배치를 inline으로 하기 때문에 float된 요소와 따로 배치가 된다. 하지만 이 경우는 block이기 때문에 float된 요소와 상관없이 아래로 깔리듯 배치된다.

(ex.4)

float:left와 right된 요소를 두고, block 레벨 요소에 clear:both를 배치하면 위와 같이 된다.

float된 요소를 모두 clear하므로 아래로 위치하게 된다 (모두 block요소이므로 아래로 내려옴).

그러면 float에서 살펴본 예제를 다시 한번 살펴보자!

현재 이 상태에서 box2에 clear:left를 주게되면 어떻게 될까? (아래의 접은 글을 통해 결과를 확인해보자)

  <div class="container" style="width:400px;">
    <div style="float: left;">Box1</div>
    <div style="height:auto; width:auto; clear:left;">Box2</div>
  </div>

box2 기준으로 float:left가 모두 clear하게 되므로, 두 요소는 블록으로 놓이게 된다.

이와 동시에 box2는 float:none이므로 점선 container 역시 box2에 맞게 크기가 변경된다.

하지만 아래와 같은 경우를 살펴보자.

  <h2>요소를 보통의 흐름에서 벗어나 띄워지게 함</h2>

  <div class="container" style="width:400px;">
    <div style="float:left;">Box1</div>
    <div style="float:left;">Box2</div>
  </div>

  <h2>주변 텍스트나 인라인요소가 주위를 감싸는 특징이 있음.</h2>
  <div class="container" style="width:400px;">
    <div style="float:left;">Box1</div>
    <div style="float:right;">Box2</div>
    <p>CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. 부동(floating) 요소 는 float 의 계산값(computed value)이 none이 아닌 요소입니다.</p>
  </div>

이 경우, 두 번째 요소의 텍스트가 이 위의 float 요소들에 대해 clear되지 않았기 때문에 위와 같이 float된 box들의 영역 옆으로 흘러가는 것을 알 수 있다.

heading 태그는 block-level 요소이므로, clear:both를 선언해주면 위의 현상을 해결할 수 있다.

  <h2 style="clear:both;">주변 텍스트나 인라인요소가 주위를 감싸는 특징이 있음.</h2>

이런 식으로 모든 요소마다 float을 넣을 순 있다. 하지만 앞에 어떤 내용의 float이 올지도 모르는 상황에서 모든 요소에 모두 clear를 선언하게 되면 불필요한 속성을 너무 많이 선언하게된다.

따라서, 해당 자식의 요소들이 float을 갖고 있을 수 있으므로 이 경우를 대비하여 부모 요소에서 이 안의 내용들이 모두 clear될 수 있도록 작업을 해주어야 한다. 쉽게 생각하자면 이렇게 생각하면 된다. 자식들이 가출을 했지만, 부모들이 이 소식을 다른 집안에 영향을 미치지 않도록 우리 집안의 일은 우리가 해결한다! 라는 뜻으로 하나의 태그를 더 생성하여 style="clear:both;"를 선언해주는 것이다.

  <div class="container" style="width:400px;">
    <div style="float:left;">Box1</div>
    <div style="float:left;">Box2</div>
    <section style="clear:both; display:block;"></section>
  </div>

그러면 해당 float가 다른 요소들에게 영향을 주지 않는다(display:block을 넣는 것도 잊지 않기!). 그래서 float과 clear 속성은 거의 하나의 세트처럼 많이 쓰인다.

! float를 선언하면 의도치 않게 주변 요소들에게 영향을 주므로, clear를 선언해주어야 한다.

clear는 block-level 요소에만 적용이 되므로, display:block; clear:both; 로 선언해주면 된다.

29) position

요소의 위치를 원하는 곳으로 지정하는 속성

네이버 화면의 더보기를 눌렀을 때, 아래 콘텐츠들의 위치를 그대로 유지하되 더보기 창을 띄우는 경우를 position 속성의 활용의 예로 볼 수 있다.

또한 이미지 위에 텍스트와 같은 요소들이 있는 경우도 포함된다.

스크롤을 했을 때 브라우저 상단에 고정적으로 위치할 수 있는 메뉴들도 position을 활용한 예시이다. (모바일에 자주 사용되는 화면)

이처럼, 밑에 다른 콘텐츠가 있고 그 흐름을 무시한 상태로 또 다른 별도의 레이어가 또 한 번 겹쳐지는 형태라고 보면 된다.

이는 position 단독으로도 역할을 수행할 수 있지만, 위치를 변경해야 하는 상황에서는 실제로 어떤 방향으로 얼만큼 이동할 것인지 정의를 해줘야 하는데, 이와 같은 상하좌우에 대한 top, bottom, left, right 속성으로 좌표값을 지정해줄 수 있다.

그리고 이런 해당 좌표에 대한 거리 등을 offset이라고 한다. 이에 대한 것은 아래 예제 코드를 통해 알아볼 것이다.

속성값

* normal flow? => 일반적인 상황에서 각 요소들의 성질에 따라 배치되는 순서(흐름)을 뜻한다. (ex. block-level 요소들은 상하로 배치되고, inline-level 요소들은 좌우로 배치되는 것을 말함)

static (default) : normal-flow에 따라 배치되고, offset이 적용되지 않는다.
absolute (절대적 위치)
- 부모 요소의 위치를 기준으로 offset에 따라 배치된다.
- 부모가 position (static제외) 값을 가지면 offset 값의 시작점이 된다.
- * 부모의 position 값이 static인 경우, 조상의 position값이 static이 아닐 때까지 거슬러 올라가서 기준으로 삼는다.
- normal-flow의 흐름에서 벗어난다.
fixed (고정위치)
- 뷰포트(브라우저의 창)를 기준으로 offset에 따라 배치된다.
- 즉, 화면 스크롤에 관계없이 항상 화면에 정해진 위치에 정보가 나타난다.
- 부모의 위치에 영향받지 않는다.
relative (상대적 위치)
- 자신이 원래 있어야 할 위치를 기준으로 offset에 따라 배치된다.
- 부모의 position 속성에 영향받지 않는다.
- normal-flow의 흐름에 따른다.
- 주변 요소에 영향을 주지 않으면서 offset값으로 이동한다.
sticky
- (브라우저 지원율이 좋은 편이 아니라서 실무에서 사용되지 않는 편이다)

* offset

auto (default)
top / left / bottom / right
%단위 사용하기: padding과 margin에서 %값을 사용할 때, 상하좌우 방향에 관계없이 가로 사이즈(width)를 기준으로 값을 계산한다고 했었다. 하지만 offset은 top, bottom(상하)은 기준이 되는 요소의 height값, left, right(좌우)는 width값에 대해 계산된다.

(ex. )

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>position</title>
  <style>
    .sibling {
      padding: 5px;
      background-color: #eee;
      text-align: center;
    }

    .parent {
      border: 1px dashed #aaa;
      padding: 10px;
    }

    .child,
    .child_offset {
      width: 60px;
      height: 60px;
      padding: 20px;
      background-color: #dc3636;
      text-align: center;
      color: #fff;
      font-weight: bold;
      border: 1px solid #333;
    }

    .child_offset {
      background-color: #3677dc;
    }

    .static {
      position: static;
    }

    .relative {
      position: relative;
    }

    .static {
      position: static;
    }

    .absolute {
      position: absolute;
    }

    .fixed {
      position: fixed;
    }
  </style>
</head>
<body>
  <h1>position (Offset 미지정)</h1>
  <h2>static (기본)</h2>
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <div class="child static">static</div>
    <div class="sibling">Sibling 2</div>
  </div>

  <h2>relative</h2>
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <div class="child relative">relative</div>
    <div class="sibling">Sibling 2</div>
  </div>

  <h2>absolute</h2>
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <!-- absolute, fixed는 inline요소일때 display:block으로 변경시킴. inline-block 값을 임의 지정했을 때는 그 값을 유지함. -->
    <span class="child absolute">absolute</span>
    <div class="sibling">Sibling 2</div>
  </div>

  <h2>fixed</h2>
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <!-- 현재 fixed는 offset값이 없어 뷰포트 밖으로 밀려나오면서 화면 아래로 사라짐 -->
    <div class="child fixed">fixed</div>
    <div class="sibling">Sibling 2</div>
  </div>


  <h1>position (Offset 지정)</h1>
  <h2>static - </h2>
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <div class="child_offset static" style="top: 40px; right: 40px;">static <br>top: 40, left: 40</div>
    <div class="sibling">Sibling 2</div>
  </div>

  <h2>relative</h2>
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <div class="child_offset relative" style="top: 40px; left: 40px;">relative <br>top: 40, left: 40</div>
    <div class="sibling">Sibling 2</div>
  </div>

  <h2>absolute - parent relative</h2>
  <div class="parent relative">
    <div class="sibling">Sibling 1</div>
    <div class="child_offset absolute" style="top: 40px; left: 80px;">absolute<br>top: 40, left: 80</div>
    <div class="sibling">Sibling 2</div>
  </div>

  <h2>fixed</h2>
  <!-- 부모가 fixed여도 별개로 위치함 -->
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <div class="child_offset fixed" style="top:100px;left:80%;">fixed<br>top:100, left:80%</div>
    <div class="sibling">Sibling 2</div>
  </div>
</body>
</html>

1-1. static (기본) - offset 미지정

형제 요소들 모두 position값을 선언하지 않았으므로 position:static(기본)값을 가지고 있다. 또한 Offset도 모두 auto(기본)값을 가지고 있다.

1-2. relative - offset 미지정

position:relative도 상대적인 값으로, 그대로 큰 변화가 없어보인다. static과 비슷해보이지만, offset값을 선언할 때 달라진다.

1-3. absolute - offset 미지정

다른 요소들의 경우(1-1, 1-2)에는 sibling1, 자기 자신, sibling2가 모두 그대로 자기 자리를 차지하고 있다.

하지만 absolute는 없는 존재인 것처럼 빠져나오게되면서 sibling1와 sibling2 요소가 달라붙게 된다.

이처럼 절대적인 위치(absolute)를 가지고 있는 값은 display:block을 갖는다. float속성을 주게 되면 자동으로 display:block이 되는 것처럼, position:absolute를 주는 것도 절대적인 좌표를 갖게 됨으로써 display속성값을 block으로 변경되어 box model에 대한 값을 가지게 된다.

이 상태에서 position:absolute 값을 없애면 아래와 같이 뜬다.

이때 <span>태그로 둘러싸여 있기 때문에 display:inline이다.

따라서 width x height가 auto x auto이다. 그리고 margin, padding, border의 값이 좌우로만 영역을 차지하고, 상하로는 영역에 영향이 없으므로 위와 같이 sibling1, sibling2와 겹치는 형태가 된다.

만약, 이 요소가 display:inline이 아니라 display:block 요소였다면 자신의 width, height, padding, border에 대한 해당 크기만큼 밀고 자기 자리를 차지해야 하는데 block이 아니라서 그러지 못하고 있다.

(➡요소의 상/하가 왜 sibling1,2와 겹칠까? 라고 의문이 들면 (+아래 더보기를 참고하기!) display와 box model의 관계)

display와 box model의 관계 (X/O: line-box로 반영이 되는지 여부)

display	width	height	margin	padding	border
block	O	O	O	O	O
inline	X	X	좌/우	좌/우	좌/우
inline-block	O	O	O	O	O

display: block의 경우, 한 줄을 통으로 자신의 영역으로 사용하고 있으므로 상하좌우로 속성값이 선언된다.
display: inline의 경우, 상하로는 속성값이 선언되지 않고, 좌우로만 선언된다.
display : inline-block의 경우, 상하좌우로 속성값이 선언된다. 따라서 block처럼 box model 속성을 모두 적용할 수 있다.

<parent는 <div>(=block), child는 <span>(=inline)으로 작성한 경우>

실제로는 위의 그림과 같이 inline 요소의 padding/border는 상,하,좌,우에 적용이 된다.

또한 인접한 다른 line-box에도 반영되지 않는다. 따라서 콘텐츠가 겹칠 수 있기 때문에 inline 요소는 실무에서 잘 사용되지 않는다.

어쨌든, position:absolute로 선언하면 문서의 흐름을 벗어나고, display:block을 갖는다는 점을 알면 된다!

1-4. fixed - offsest 미지정

position:fixed로 두면 전체화면을 해야만 보였다. 화면 위치상 가장 아래에 있어서 그런 것 같다.

일단 얘는 normal-flow에서 벗어난다는 것을 알 수 있다.

여기까지 봤을 때, none/relative는 자기 자리 그대로 배열되었으므로 normal-flow를 따른다는 것을 알 수 있다. 그리고 absolute/fixed는 normal-flow에서 벗어난 것을 확인할 수 있다.

그럼 이제 offset값을 변경하여 어떤 차이가 있는지 확인해보자.

2-1. static - offset 지정

1-1와 동일하게 뜬다. static의 경우 offset값이 적용되지 않는다.

즉, 정적으로 그 자리에 고정적으로 있는다.

따라서 position:static으로 두거나, position을 선언하지 않고도 top, right와 같은 offset값을 선언했을 때 왜 움직이지 않는지 의문을 가지게 된다면 position속성값을 움직일 수 있는 값으로 선언했는지 꼭! 발견할 줄 알아야 한다.

2-2. relative - offset 지정

static과 달리, relative의 경우에는 offset값이 적용된다.

relative는 원래 자기 자리에 기준을 두고 offset값을 준 방향만큼 자리를 움직인다.

여기서, (top, left)값을 (0,0)으로 둔다.

top을 -50px, bottom을 50px을 한 위치는 동일하다. 따라서 방향값을 양수로 줄지, 음수로 줄지, 어디를 기준으로 얼만큼 떨어지게 할 것인지는 잘 선택하여 개발해야 한다.

2-3. absolute - offset 지정

top:40px을 줬을 땐 이전의 화면과 동일하다. 그래서 top:0px로 줘봤다.

그랬더니 점선에 딱 붙어있다.

근데 다른 점 하나가 있다. 얘는 부모에 static이 아닌 다른 값으로 두었다. 그래야 이 parent가 자식의 기준이 된다.

만약 부모가 position을 갖고 있지 않으면 부모가 기준이 되어주지 않기 때문에 그 위로도 올라간다. 위로도 계속적으로 position을 갖고있지 않다면, 결국 <body>가 기준이 되어서 <body>를 기준으로 child에 선언한 offset값을 좌표 지점으로 잡는다.

parent의 position:relative를 제거했을 때 화면 모습. <body>가 기준이 되었으므로 가장 위에 요소가 위치한다.

따라서, position:absolute는 부모(position:relative)를 기준으로 offset값만큼 움직인다.

그러므로 기준점인 부모의 위치도 잘 알고 있어야 한다.

그러면 부모의 어느 부분을 기준점으로 삼는지도 알아야 한다! padding부터일까, border부터일까?

위의 그림은 padding을 50px, border를 5px로 두었을 때 요소의 위치이다.

따라서 부모의 border를 제외한, padding영역부터 영점기준을 갖는다.

❗ position:absolute는 position:static이 아닌 부모의 padding영역을 영점기준으로 offset값만큼 움직인다.

2-4. fixed - offset 지정

offset을 지정하지 않았을 때는 자기 자리에 문서의 흐름과 상관없이 위치해 있었다.

offset을 지정해주니, 스크롤과 문서의 흐름에 상관없이 브라우저의 좌표값을 기준으로 요소가 고정된 위치에 위치한다.

따라서 %로 선언하면, 브라우저의 창 크기를 기준으로 퍼센트만큼 offset이 주어진다.

그럼 position:fixed도 부모가 position:relative일 때 부모의 위치에 기준을 둘까? 하는 의문이 생길 수도 있는데 결과는 그렇지 않다. 부모 요소의 위치와 상관없이 무조건 브라우저를 기준으로 위치한다.

이 요소가 <span>일 때ㄴ경하면 display:block으로 변경된다.

summarization

	static	relative	absolute	fixed
기준(0,0)	자기 자리	자기 자리	position:static이 아닌 부모의 padding부분	브라우저 창
offset 영향 여부	X	O	O	O
normal-flow 여부	X	X	O	O
특징	default	-	-	display:block으로 변화 (➡box model 관련 속성들을 모두 선언할 수 있다) (➡위 내용을 알면 불필요한 속성의 선언을 최소화할 수 있음!)

(+) sticky

스크롤에 영향을 받지만, 아래로 스크롤을 했을 때 상단에 고정되어 붙어있다 (모바일에서 자주 볼 수 있는 속성)

30) z-index

요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성

속성값

auto (default)
number

특징

position:static이 아닌 경우에만 적용할 수 있다(relative, absolute, fixed, sticky).
순서값(number)이 없을 경우 생성순서(코드상 순서)에 따라 쌓인다.
- (ex) <body>속에 div1, div2, div3이 순서대로 있다면 z-index를 선언하지 않더라도 순서대로 z축이 쌓이기 때문에 body > div1 > div2 > div3 순서대로 쌓이게 된다.
부모가 z-index값이 있을 경우, 부모 안에서만 의미가 있다.
큰 값이 가장 위쪽, 음수 사용 가능
- + > 0 > - > auto(가장 밑에 깔려있다)

(+) position/z-index는 float/clear처럼 짝꿍을 이루는 경우가 많다!

HTML/CSS 유효성 검사

HTML/CSS코드를 작성하고 나서 항상 유효성 테스트를 실시해야 한다.

그래야 마크업 문법상 에러가 없는지, 표준에 맞게 작성되었는지 알 수 있고, 사용성과 접근성, SEO 최적화 개선에도 도움이 된다.

아래는 유효성 검사를 할 수 있는 링크주소이다.

The W3C Markup Validation Service

Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.

validator.w3.org

9. 미디어쿼리(Media Queries)

1. 미디어쿼리

: 각 미디어 매체(스크린, 프린터, 스크린 리더기)에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것.

* 스크린 리더기: 내용을 음성으로 읽어주는 것

- 목적: 동일한 웹 페이지를 사용자들에게 다양한 환경에 최적화된 경험을 제공하기

미디어 쿼리는 CSS3에서 처음 소개가 되었으며, CSS2의 미디어 타입이라는 기술을 개선하고 확장하여 만들어졌다.

CSS2 Media Types

98년도에 발명된 기술.
CSS3의 미디어 쿼리와 비슷한 목적을 가지고 이론적으로는 훌륭했으나, 당시 미디어 타입을 제대로 지원하는 기기가 없었기 때문에 제대로 활용되진 못했다.
문제점
1. 동일한 미디어 타입에서 광범위하게 적용된다.
  - (ex. handheld타입: 손에 들고 다닐 정도의 소형 스크린 브라우저. 하지만 수많은 모바일, 태블릿 기기가 여기에 해당되기 때문에 하나의 스타일로 모든 소형 기기를 대응해야 했으므로 디테일한 구분을 할 수가 없다.)
2. 당시 미디어 타입을 제대로 지원하는 기기가 없었다.
  - 그래서 제작자가 소형 브라우저를 위한 handheld타입을 작성해봤자 당시에 웹 환경을 제대로 지원하는 미디어 매체가 데스크톱 컴퓨터와 노트북을 제외하고는 해당하는 미디어 매체가 없었기 때문에 현실적으로 적용이 될 수가 없었다.

따라서 미디어 쿼리가 등장하기 전에는 현재와 같은 반응형 웹 사이트를 제작할 수 없었다. 당시에는 사용자들의 환경이 제한적이었기 때문에 대중적인 범위에서만 잘 보이게끔 사이트를 제작하면 반응형이 아니더라도 충분히 감수할 수 있을만한 불편함이었다.

하지만 지금은 웹의 급격한 발전으로 인해 웹을 지원하는 기기들이 기하급수적으로 늘어났으며, 모바일이 차지하는 비중이 커졌기 떄문에 대응해야 하는 미디어의 폭도 상당히 늘어났다.

이러한 필요성에 따라 w3c는 기존의 CSS2 미디어 타입을 확장하여 CSS3 미디어 쿼리를 발표하였다. 이로인해 이전에 정적이고 고정 레이아웃 웹사이트를 동적으로 반응한은 반응형 웹사이트로 새롭게 변화하게되었다.

2. 미디어 타입 & 미디어 특성

미디어 쿼리 선언

@media media queries{...}

media queries가 참이면 적용, 거짓이면 적용x

미디어 쿼리 타입

미디어 매체(ex. 스크린, 프린터, tv 등). 문서에 정의된 여러 타입.

all, braille, embossed, handleheld, print, projection, screen, speech, tty, tv, ...
all, print, screen만 알면 된다. 그 중에서 screen이 대부분이다.
- screen: 화면을 출력하는 디스플레이가 있는 기기들이 모두 스크린에 해당되기 때문
- all: 모든 기기에 적용. 미디어를 구분하는 용도가 아니기 때문에 유용하게 사용되진 않는다.

미디어 특성

여러 미디어 매체를 좀 더 세분화할 수 있도록 한다.

width, height, device-width, device-height, orientation, ...
실무에서 주로 사용되는 특성은 width, orientation이다.
- width: 브라우저(뷰포트)의 가로 길이
- orientation: 미디어가 가로/세로로 되어 있는지 구분하는 특성
  - height>width => 세로모드 / width>height => 가로모드 로 판단한다.
  - 실제 반응형 사이트들이 width특성 하나로 대부분 제작이 되고, orietnation 특성까지 사용한 경우는 적다.

미디어 쿼리 level 4의 CR단계 (CR: 다음 권고안으로 유력함)

미디어 쿼리의 다음 버전
미디어 타입과 미디어 특성에서 사용되지 않는 대부분이 폐기될 예정이다.

3. Syntax

syntax (=실제 미디어 쿼리 작성하는 방법)

media_query_list
 : S* [media_query [ ',' S* media_query ]* ]?
 ;
media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*
 ;
expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
 ;

S* : 공백에 관련된 표시이므로, 없다고 봐주면 된다.
[ ] : 속에 내용이 있을 수도 있고 없을 수도 있다는 의미
a:b(파이프라인) : a가 나올 수도 있고, b가 나올 수도 있다. 둘 중 하나를 선택해야 한다.
O? : O이 0번, 혹은 1번만 나와야 한다는 의미 (0 or 1)
O* : O이 0번, 혹은 1번, 혹은 그 이상 계속 연속적으로 나올 수있다는 의미 (0 or 1 or ... n)

media_query list

여러 개의 미디어 쿼리로 이루어진 리스트로 작성 가능. 쉼표로 구분한다.

media_query1, media_query2, ... 와 같이 연속적으로 나타낸다.
첫 번째에 대괄호가 있으므로, 아무런 미디어 쿼리 없이도 바로 CSS로 작성할 수도 있다는 의미이다.
또한 뒤에 대괄호가 있으므로 media_query가 한 번만 나올 수도 있고, 혹은 쉼표 찍고 더 나올 수도 있고, 또 별표가 있기 때문에 계속적으로 쉼표를 찍어 미디어 쿼리를 작성할 수 있다는 의미이다. (즉, 연속적으로 미디어 쿼리를 작성할 수 있다는 것)

media_query

A 형태
- 미디어 타입에 and로 미디어 표현식을 붙일 수 있다.
- 미디어 타입 앞에 only 혹은 not이 올 수 있다.
- 미디어 표현식은 생략 가능하므로, 미디어 타입 단독으로 사용될 수 있다.
B 형태
- 미디어 타입 없이 미디어 표현식(expression)이 바로 나올 수 있다(타입이 명시되지 않으면 all로 간주된다).
- 미디어 표현식은 and로 계속 나올 수 있다.

expression

미디어 표현식은 괄호로 감싸야 하며, 특성 이름과 해당하는 값으로 이뤄진다. 이름과 값은 :기호로 연결된다. 또, 값 없이 특성 이름만으로도 작성할 수 있다.

min-/max- 접두사

미디어 특성은 이름 앞에 mix-/max- 접두사를 사용하여 범위를 지정하게 되면 훨씬 간결하게 반응형 사이트를 제작할 수 있다.

(ex. min-width: 768px / max-width:768px)

예제 코드

@media screen { ... }

: 미디어 타입이 screen이면 적용된다

@media screen and (min-width:768px) { ... }

: 미디어 타입이 screen이고(and) width가 768px 이상이면 적용된다 (두 조건 모두 만족해야 한다)

@media (min-width: 768px) and (max-width: 1024px) { ... }

: 미디어의 width가 768px이상, 1024px 이하면 적용된다

@media (color-index)

: 미디어 장치가 color-index를 지원하면 적용된다

특성 이름만 나온 경우

@media screen and (min-width:768px), screen and (orientation:portrait), ...

: 미디어 타입이 screen이고(and) width가 768px 이상인 경우, 혹은(,) 미디어 타입이 screen이고(and) orentation이 portrait인 경우에 적용된다 (쉼표로 구분된 두 조건 중 하나라도 만족하면 적용된다)

orientation: portrait(가로모드) / landscape(세로모드)

@media not screen and (min-width:768px)

= not { screen and (min-width:768px) }

not 키워드는 하나의 media_query 전체를 부정한다.
첫 번째 미디어 쿼리에만 not 키워드가 적용되고, 두 번째 미디어 쿼리에는 영향이 없다.
- (ex. @media not screen and (min-width:768px), print => 첫 번째 미디어 쿼리에만 not 키워드가 적용되고, 두 번째 미디어 쿼리인 print에는 영향이 전혀 없다.)

: 미디어 타입이 screen이고(and) width가 768px 이상인 경우를 제외한 모든 경우에 적용된다

미디어 쿼리 선언 방법

@media screen and (color)
- 대부분 사용되는 방법. CSS 파일 내부 혹은 <style> 태그 내부에 작성한다.
~~<link rel="stylesheet" media="screen and (color)" href="example.css">~~
~~@import url(example.css) screen and (color);~~

4. 실습

실습1. 디스플레이 크기에 따른 body요소의 background-color 변경

세부조건

0~767px이면 gold => mobile
768px~1024px이면 lightblue => tablet
1025px~이면 lightpink => desktop, pc

@media (min-width:767px){
	body{ background-color: gold; }
}
@media (min-width:768px) and (max-width:1024px){
	body{ background-color: lightblue; }
}
@media (min-width:1025px){
	body{ background-color: lightpink; }
}

세 조건을 위해서 세 조건을 작성하였지만, 우선으로 두는 하나의 조건은 작성하지 않아도 된다.

/* mobile first*/
body { background-color: gold;}
@media (min-width:768px) and (max-width:1024px){
	body{ background-color: lightblue; }
}
@media (min-width:1025px){
	body{ background-color: lightpink; }
}
/* desktop first*/
body { background-color: lightpink; }
@media (min-width: 768px) and (max-width: 1024px) {
	body { background-color: lightblue; }
}
@media (max-width: 767px) {
	body { background-color: gold; }
}

여기서 작성하는 순서대로 조건이 적용되므로 desktop을 우선으로 두는 경우에는 조건의 순서를 변경해야 한다.

실습2. 웹 페이지를 인쇄하는 경우의 스타일 추가

세부 조건

앵커 요소의 url 츨력
앵커 요소의 밑줄 제거

인쇄될 경우에 적용되는 스타일을 추가하기 위해서는, 미디어 타입 print를 작성하면 된다.

@media print {
	a { text-decoration: none; }
	a:after { 
		display: inline; 
		content: attr(href); 
    }
}

(+) Media queries level 4

(min- )and(max- ) 대신 >=/<=와 같은 부등호를 사용할 수 있으므로 더 간편하게 식을 작성할 수 있다.

Media Queries Level 4

Abstract Media Queries allow authors to test and query values or features of the user agent or display device, independent of the document being rendered. They are used in the CSS @media rule to conditionally apply styles to a document, and in various othe

www.w3.org

추가. Viewport의 이해

스마트폰이 발달되기 전에 대부분의 웹 페이지는 데스크탑 모니터 사이즈를 기준으로 제작되었기 때문에 모바일 기기와 같이 작은 화면에서는 좌우로 스크롤을 해야만 내용을 볼 수가 있었다. 그래서 모일 브라우저들은 뷰포트(viewport)라는 가상의 화면을 만들고 그 화면에 페이지를 나타내었다.

기본 뷰포트의 크기: 980px

따라서 width:980px 정도인 웹 페이지를 모바일 브라우저로 보면 가로 스크롤 없이 화면에 딱 맞춰 나온다. 그렇지만 글자나 그림이 폭에 맞춰 작아지기 때문에 가독성이 떨어진다.

그래서 모바일 safari에서는 뷰포트를 설정할 수 있는 태그를 도입하여 뷰포트의 크기와 스케일을 조정할 수 있게 했다.

뷰포트 설정

사용법

<meta name="viewport" content="뷰포트를 설정하는 내용">

content의 몇 가지 설정값들

width/height : 뷰포트의 가로/세로 크기를 지정한다. px단위의 수치가 들어갈 수 있으나 대부분 특수 키워드인 "device-width/height"를 사용한다 (뷰포트의 크기를 기기의 스크린 width/height 크기로 설정한다는 의미)
initial-scale : 페이지가 처음 나타날 때 초기 줌 레벨 값을 설정한다(소수값)
user-scalable: 사용자의 확대/축소 기능을 설정한다.

대부분 모바일 웹 사이트의 뷰포트 설정은 아래에 따른다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

'Front-End: Web' 카테고리의 다른 글

[웹 UI 개발 코칭스터디 1기] 리드부스터와 함께 1일차 (0)	2021.01.15
[웹 UI 개발 코칭스터디 1기] 1. HTML & CSS 기초 - 미니 프로젝트 (0)	2021.01.15
나홀로 코딩 패키지 - 2일차 (0)	2020.12.28
나홀로 코딩 패키지 - 1일차 (0)	2020.12.28
[CSS] position: absolute인 요소를 중앙 정렬하기 (0)	2020.09.17

[웹 UI 개발 코칭스터디 1기] 1. HTML & CSS 기초

1. HTML 소개

1) HTML 이해하기

2. HTML 문법

1) 태그(TAG)

태그(TAG)

태그 사용하는 방법

요소(Element)

2) 속성(Attribute)

속성

속성을 사용하는 방법

속성의 종류

3) 태그의 중첩

태그의 중첩

4) 빈 태그

빈 태그

5) 공백

6) 주석

HTML의 주석

7) 문서의 기본 구조

HTML의 기본 구조

문서 타입 정의

<html> 요소

3. HTML 태그

1) HTML 태그 소개

2) 태그 종류

제목(Heading)

단락(Paragraph)

개행(LineBreak)

텍스트를 꾸며주는 요소

앵커(Anchor)

href 속성

target 속성

내부링크

컨테이너(Container)

리스트

(+) list태그의 중첩

이미지

테이블

폼

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

1. 콘텐츠 모델

1) Metadata Content

2) Flow Content

3) Sectioning Content

4) Heading Content

5) Phrasing Content

6) Embedded Content

7) Interactive Content

2. 시멘틱 마크업

3. HTML5 시멘틱 요소

4. 블록 레벨, 인라인 레벨

블록 레벨

인라인 레벨

5. CSS 이해하기

1. CSS 소개

2. CSS 문법과 적용

CSS 주석

CSS의 적용 4가지

3. 선택자

1. 요소 선택자

2. class 선택자(.)

3. id 선택자(#)

(+) 선택자의 조합

4. 속성 선택자

4. 문서 구조 관련 선택자

문서 구조의 이해

문서 구조 관련 선택자

조합해서 사용

5. 가상 선택자(pseudo selector)

1. 가상 클래스(:) (pseudo class)

가상 클래스 사용법

대표적인 가상 클래스 종류

링크와 관련된 가상 클래스

사용자 동작 관련 가상 클래스

2. 가상 요소(pseudo element)

사용법

가상 요소 종류

6. 구체성(명시도)

구체성