[HTML & CSS] 2. CSS & CSS 속성

18 분 소요

`CSS` (`Cascading Style Sheet`) : 웹 문서가 표현되는 방법을 기술하는 스타일시트 언어

레이아웃 및 디자인 정보로 인해 HTML 문서의 구조화가 어려워진 문제를 해결하기 위해 CSS 탄생

(1) Inline Style : HTML 태그의 style 속성으로 태그의 속성을 일일이 적용

<p style="color: blue">
    hello world
</p>

(2) Inline Style Sheet : HTML 문서 내 <style> 태그로 한 문서의 스타일 적용

<head>
    <style>
        body { background-color: black; }
    </style>
</head>

(3) Linking Style Sheet : 내용에 스타일 정보를 분리해 별도의 스타일시트 (.css) 파일을 만들고 HTML 문서와 연결

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

`CSS` 스타일시트 (`CSS Style Sheet`) : 스타일을 선언하고 태그를 선택하는 `CSS RuleSet`의 집합

CSS 선택자 (CSS Selector) : 어떤 HTML 태그나 HTML 속성을 꾸밀지 지정
CSS 선언 (CSS declaration) : CSS 선택자에 대한 CSS 속성과 CSS 값을 정의
- CSS 속성 (CSS Attributes) : 선택자가 지정한 것을 어떤 속성으로 꾸밀지 지정
- CSS 변수 (CSS Arguments) : 지정된 속성을 어떻게 나타낼지 지정

CSS 선택자 {
    CSS 속성 : CSS 값; /* CSS 선언 */
}

CSS 선택자 { /* 세미클론 (;)으로 선언을 구분해 여러 번의 선언 가능 */
    CSS 속성1 : CSS 값1;
    CSS 속성2 : CSS 값2;
}


CSS 선택자 { /* 작은따옴표 ('') 혹은 큰따옴표 ("")으로 값의 공백 처리 */
    CSS 속성1 : 'CSS 값1';
    CSS 속성2 : "CSS 값2";
}

! 같은 CSS 선택자나 CSS 속성이 선언되었다면? : CSS RuleSet에 대한 우선순위의 필요성

캐스케이딩 (`Cascading`) : 같은 `CSS` 선언이 여러 번 선언하였다면, 나중에 선언된 것을 적용

나중에 선언된 것이 먼저 선언된 것을 덮어버림 (Override)

CSS 선택자 { /* 나중에 선언된 CSS 속성1의 값2가 적용된다. */
    CSS 속성1 : CSS 값1;
    CSS 속성1 : CSS 값2;
}

전역적인 것을 먼저 적용하고, 그 다음에 지역적인 것을 적용
- 부모 태그에서 선언된 속성은 자식 태그로 상속되어, 부모 자식에서 선언된 값이 적용된다.
- 자식 태그에서 상속받은 속성을 다시 선언되면, 자식 태그에서 선언된 값이 적용된다.

<p style="color: red">
    <span style="color: blue">
        CSS 우선순위 : span의 font-color 속성이 p의 font-color 속성보다 높다.
    </span>
</p>

CSS 우선순위 : span의 font-color 속성이 p의 font-color 속성보다 높다.

`CSS` 명시도 (`Specificity`) : 작성된 순서가 아닌, `CSS` 선언에 적용되는 가중치에 따라 우선순위 적용

가중치는 네 가지 기준을 숫자로 표현 (0,0,0,0) : 제일 앞의 숫자가 높을수록 높은 우선순위를 가짐
- 명시도가 동일할 경우, 나중에 선언된 것을 우선해 적용 (Cascading)

p..div > span { color : green;} /* 몀시도 : 0,1,0,2 */
b span {color : red;} /* 명시도 : 0,0,0,2 */

첫번째 0 : 인라인 스타일 (inline style)의 개수
세번째 0 : 클래스, 가상 클래스, 속성 선택자의 개수
두번째 0 : ID 선택자의 개수
네번째 0 : 태그 선택자, 가상 요소 선택자의 개수

`!important` : 기존의 우선순위를 무시하고 해당 `CSS` 선언을 우선해 적용

CSS 선택자 { */
    CSS 속성1 : CSS 값1 !important;
    CSS 속성1 : CSS 값2;
}

CSS 선택자 (`CSS Selector`) : `HTML` 문서에 스타일을 입힐 요소를 선택하는 문자

여러 종류의 선택자를 중첩 가능 (p.span)
여러 종류의 선택자를 space 키로 구분해 동시에 선택 가능 (p.span p.img)

CSS 선택자 {
    CSS 속성 : CSS 값;
}

전체 선택자 `*` : 모든 요소를 선택하는 선택자

* {
  color: blue;
}

태그 선택자 `tag` : 해당 태그의 요소를 선택하는 선택자

tag {
  color: aqua;
}

아이디 선택자 `#id` : 해당 아이디의 요소를 선택하는 선택자

#tag {
  color: red;
}

클래스 선택자 `.class` : 해당 클래스의 요소를 선택하는 선택자

.class {
  color: green;
}

후손 선택자 `(selector1) (selector2)` : 해당 선택자의 모든 하위 요소 중 하나를 지정해 선택하는 선택자

div tag {
     color: yellow;
}
...
<div>
    <tag>
        hello world
    </tag>
</div>
<div>
    <span>
        <tag>
            hello world
        </tag>
    </span>
</div>

자손 선택자 `(selector1)>(selector2)` : 해당 선택자의 자식 요소 중 하나를 지정해 선택하는 선택자

div > tag{
     color: purple;
}
...
<div>
    <tag>
        hello world
    </tag>
</div>

형제 선택자 `(selector1)~(selector2)` : 해당 선택자의 형제 요소 중 하나를 지정해 선택하는 선택자

div ~ tag{
     color: pink;
}
...
<div>
    hello world
</div>
<tag>
    !
</tag>

인접 형제 선택자 `(selector1)+(selector2)` : 선택자의 형제 중 바로 다음에 오는 요소를 선택하는 선택자

div + tag{
     color: gray;
}
...
<div>
    hello world
</div>
<tag>
    ?
</tag>
<tag>
    !
</tag>
/* 첫번째 형제 요소인 "?"가 회색으로 출력 */

속성 선택자 `[attr]` : 태그에 해당 속성이 명시된 요소들을 모두 선택하는 선택자

[attr = "A"] : 해당 속성이 명시된 요소들 중 값이 일치하는 것들만 선택
[attr ~= "B"] : 해당 속성이 명시된 요소들 (띄어쓰기로 여러 값이 저장된 요소 포함) 중 값이 일치하는 것들만 선택
[attr ^= "C"] : 해당 속성이 명시된 요소들 중 값을 접두사로 가지는 것들만 선택
[attr $= "D"] : 해당 속성이 명시된 요소들 중 값을 접미사로 가지는 것들만 선택
[attr *= "E"] : 해당 속성이 명시된 요소들 중 값을 포함하는 것들만 선택

tag[attributes]{
     color: white;
}
...
<tag attributes="true">
    hello world
</tag>

tag[attributes="attr"]{
     color: yellow;
}
...
<tag attributes="attr">
    hello world
</tag>

가상 클래스 선택자 (`Pseudo-class Selector`) : 가상 클래스를 선택하는 선택자

앵커 가상 클래스 : 어떤 요소에 대한 스타일을 추가하는 선택자
- link : 사용자가 이전에 방문하지 않은 요소에 대한 스타일을 추가하는 선택자
- visited : 사용자가 이전에 방문하였던 요소에 대한 스타일을 추가하는 선택자
- :hover : 사용자가 해당 요소에 커서를 접근시킬 때의 동적인 스타일을 추가하는 선택자
- :active : 사용자가 해당 요소를 클릭할 때의 동적인 스타일을 추가하는 선택자
- :focus : 사용자가 해당 요소에 키보드로 포커싱할 때의 동적인 스타일을 추가하는 선택자

a:link {
    color: black;
}
a:visited {
    color: gray;
}
a:hover {
    color: red;
}
a:active {
    color: gray;
}
a:focus {
    color: yellow;
}

순서 가상 클래스 : 순서가 존재하는 요소의 특정 항목에 대한 스타일을 추가하는 선택자
- :first-child : li의 첫번쩨 요소에 대한 스타일를 추가하는 선택자
- :last-child : li의 마지막 요소에 대한 스타일를 추가하는 선택자
- :nth-child(n) : li의 n번쩨 요소에 대한 스타일를 추가하는 선택자

ol li:first-child {
    border-top: none;
}
ol li:last-child {
    border-top: none;
}
ol li:nth-child(2) {
    border-top: none;
}

가상 요소 선택자 (`Pseudo-element Selector`) : 가상 요소를 선택하는 선택자

선택된 요소의 태그 안에 가상 요소가 자식 요소로 위치 (::before > 컨텐츠 > ::after 순)

선택자::가상 요소 {
    property: value;
}

::before : 요소 내용의 앞에 새 컨텐츠를 추가하는 선택자

tag::before {
    content: "Hello, ";
}

::after : 요소 내용의 뒤에 새 컨텐츠를 추가하는 선택자

tag::after {
    content: "World! ";
}

::first-letter : 요소의 첫번째 글자를 선택하는 선택자

tag::first-line {
  color: orange;
}

::first-line : 요소의 첫번째 줄을 선택하는 선택자

tag::first-line {
  color: orange;
}

현재까지 배운 것을 토대로 여러 HTML 문서로 이루어진 가상의 웹사이트를 디자인한다고 가정해보자.

태그나 문서에 스타일을 적용하는 경우를 배제하고, 스타일시트에 모든 스타일 정보가 존재한다 가정하자.

모든 HTML문서가 <body>, <main>, <section>, <p>만 존재하고, 다음의 구조를 이룬다.
<body>
  <main>
    <section>
      <p> Hello World! </p>
    </section>
  </main>
</body>
그리고 스타일시트에는 다음과 같은 CSS 선택자만 사용한다고 가정하자.

문서의 전반적인 스타일을 적용하기 위한 <body>를 지정할 선택자

메인 컨텐츠의 스타일을 적용하기 위한 <main>를 지정할 선택자

세부 컨텐츠의 스타일을 적용하기 위한 <section>를 지정할 선택자

문단의 스타일을 적용하기 위한 <p>를 지정할 선택자

A는 모든 문서의 “Hello World!”를 빨간색으로 적용하고 싶어서 태그에 스타일을 적용했다.
p {
   color:green;
}
그런데 B가 특정 문서의 “Hello World!”를 초록색으로 적용하고 싶어서 id와 #를 사용했다.
<p id="sec2"> Hello World! </p>
#sec {
   color:green;
}
A가 그걸 보고
p {
   color:green;
}
CSS는 시대가 요구하는 의도대로 설계되었으나, 기존의 설계와 새로운 요구사항에 괴리가 발생

문서를 잘 표현하기 위해 설계된 방법 vs 어플리케이션을 잘 표현하기 위해 설계된 방법

이를 절충하기 위해 기존의 의도와는 다른 방식으로 CSS를 사용해 화면을 표현

CSS가 웹 문서를 웹 사이트에 표현하는 데에서 시작되어 대규모 웹 서비스를 만드는 데에 한계점 존재

그러므로, 이를 극복하기 위한 최신 기술들을 꾸준히 학습하고, 프로젝트에 도입해야 된다!

CSS 변수 (CSS variables) : CSS 사용자 속성 (CSS 일반 속성과 동일한 문법으로 변수를 정의 가능)
- var() 함수 : CSS 변수값을 읽는 데에 사용
- :root : CSS 변수를 전역 변수로 정의

.ex {
    --variable-name: value;
}

:root {
       --variable-name: value;
}

# 박스 모델 (`Box Model`) 관련 `CSS` 속성

모든 HTML 엘리멘트들은 박스 모양으로 구성되어 있음
- 마진 영역 (Margin Area)
- 테두리 영역 (Border Area)
- 패딩 영역 (Padding Area)
- 컨텐츠 영역 (Content Area)

마진 영역 (Margin Area)

테두리 영역 (Border Area)

패딩 영역 (Padding Area)

컨텐츠 영역 (Content Area)

`width`, `height` : 박스의 가로, 세로 길이를 지정하는 속성

<div style="
    position: relative;
    background-color: black;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 200px;">
    <div style="
        position: absolute;
        background-color: white;
        margin-left: auto;
        margin-right: auto;
        width: 70%;
        height: 70%;">
    </div>
</div>

`margin` : 마진에 값을 부여하는 속성

margin-top: : 위쪽 마진에 값을 부여하는 속성
margin-right: : 오른쪽 마진에 값을 부여하는 속성
margin-bottom: : 아랫쪽 마진에 값을 부여하는 속성
margin-left: : 왼쪽 마진에 값을 부여하는 속성

.box {
    margin: xx yy zz ww;
    /* xx는 위쪽 마진, yy는 오른쪽 마진, zz는 아랫쪽 마진, ww는 왼쪽 마진 */
    margin-top: xx;
    margin-right: yy;
    margin-bottom: zz;
    margin-left: ww;
}

margin-top

margin-left

테두리 영역
(Border Area)

패딩 영역
(Padding Area)

컨텐츠 영역 (Content Area)

margin-right

margin-bottom

`padding` : 패딩에 값을 부여하는 속성

padding-top: : 위쪽 패딩에 값을 부여하는 속성
padding-right: : 오른쪽 패딩에 값을 부여하는 속성
padding-bottom: : 아랫쪽 패딩에 값을 부여하는 속성
padding-left: : 왼쪽 패딩에 값을 부여하는 속성

.box {
    padding: xx yy zz ww;
    /* xx는 위쪽 패딩, yy는 오른쪽 패딩, zz는 아랫쪽 패딩, ww는 왼쪽 패딩 */
    padding-top: xx;
    padding-right: xx;
    padding-bottom: xx;
    padding-left: xx;
}

마진 영역 (Margin Area)

테두리 영역 (Border Area)

padding-top

padding-left

컨텐츠 영역
(Content Area)

padding-right

padding-bottom

`border` : 테두리에 값을 부여하는 속성

border: 속성

설명

기본값

medium, none, color

상속 여부

애니메이션 여부

문법

border: 값

설명

border-width

border-width: 값	테두리의 두께 정도 지정
medium	기본값
thick	기본값보다 굵게
thin	기본값보다 얇게
%, px, em, rem	직접 테두리의 두께 정도 지정

border-style

border-style: 값	테두리의 모양 지정
none	테두리를 생성하지 않음 (기본값)
dashed, dotted, double, groove, hidden, inset, outset, ridge, solid	여러 모양의 테두리를 생성

border-color

테두리의 색상 지정

border-radius

%, px, em, rem 등으로 테두리의 모서리에 대한 둥근 정도 지정

top-left-x

top-right-x

bottom-right-x

bottom-left-x

top-left-y

top-right-y

bottom-right-y

bottom-left-y

<div style="
    background-color: black;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2%;
    padding-bottom: 2%;
    ">
    <div style="
        border: dashed 5px red;
        margin-left: 5%;
        margin-right: 5%;
        border-radius: 25%;
        padding-bottom: inherit;">
    dashed 5px red (border-radius: 25%)
        <div style="
            border: dotted 3px blue;
            margin-left: inherit;
            margin-right: inherit;
            padding-bottom: inherit;">
        dotted 3px blue
            <div style="
                border: double 7px green;
                margin-left: inherit;
                margin-right: inherit;
                padding-bottom: inherit;">
            double 7px green
                <div style="
                    border: solid 3px gray;
                    margin-left: inherit;
                    margin-right: inherit;
                    padding-bottom: inherit;">
                    solid 3px gray
                </div>
            </div>
        </div>
    </div>
</div>

dashed 5px red (border-radius: 25%)

dotted 3px blue

double 7px green

solid 3px gray

`box-sizing` : 박스 크기의 기준을 지정하는 속성

box-sizing: 속성

설명

기본값

content-box

상속 여부

애니메이션 여부

문법

box-sizing: 값	설명
content-box	컨텐츠 영역을 기준으로 지정
border-box	테두리 영역을 기준으로 지정

.cb {
    box-sizing: content-box;
}
.bb {
    box-sizing: border-box;
}
.iib {
    box-sizing: initial;
}
.ihb {
    box-sizing: inherit;
}

# 배경 관련 `CSS` 속성

`background-color` : 배경의 색상을 지정하는 속성

background-color: 속성

설명

기본값

transparent

상속 여부

애니메이션 여부

문법

background-color: 값	설명
transparent	배경색 없음
color	배경색 지정

<div style="
    position: relative;
    background-color: black;
    width: 200px;
    height: 200px;">
    <div style="
        position: absolute;
        background-color: white;
        margin-left: auto;
        margin-right: auto;
        width: 70%;
        height: 70%;">
        <div style="
            position: absolute;
            background-color: black;
            margin-left: auto;
            margin-right: auto;
            width: 70%;
            height: 70%;">
        </div>
    </div>
</div>

`background-image` : 배경 이미지를 지정하는 속성

background-image: 속성

설명

기본값

none

상속 여부

애니메이션 여부

문법

background-image: 값	설명
none	배경 이미지 사용 안함
url("")	배경 이미지 URL 지정

background-attachment : 배경 이미지의 스크롤 여부를 지정하는 속성
- scroll : 내용을 스크롤하면 배경 이미지는 스크롤되지 않음
- fixed : 배경 이미지가 움직이지 않음
- local : 내용을 스크롤하면 배경 이미지는 스크롤
- initial : 현재의 속성값을 기본값으로 지정
- inherit : 부모 요소의 속성값 상속
background-position : 배경 이미지의 위치를 지정하는 속성
- x y : 가로와 세로 위치 지정 (left-right, center, top-bottom, %, length)
- initial : 현재의 속성값을 기본값으로 지정
- inherit : 부모 요소의 속성값 상속
background-size : 배경 이미지의 크기를 지정하는 속성
- length : 배경 이미지의 가로와 세로 크기나 백분율을 직접 지정
- cover : 가로/세로 비율을 유지하면서, 배경을 다 채울 수 있도록 이미지 조절
- contain : 가로/세로 비율을 유지하면서, 배경을 벗어나지 않도록 이미지 조절
- initial : 현재의 속성값을 기본값으로 지정
- inherit : 부모 요소의 속성값 상속

<div style="background-image: https://cdn.pixabay.com/photo/2020/10/21/04/01/leaves-5672036_1280.png;">
    background-image
</div>

`overflow` : 컨텐츠가 요소의 크기를 벗어날 때의 처리 방법을 지정하는 속성

overflow: 속성

설명

기본값

visible

상속 여부

애니메이션 여부

문법

overflow: 값	설명
visible	박스를 넘어가도 내용을 표시
hidden	박스를 넘어간 부분은 표시하지 않음
scroll	무조건 스크롤바 표시
auto	박스를 넘어가면 스크롤바 표시

<div>
    <div style="
        width: 20%;
        height: 150px;
        background-color: black;
        float: left;
        overflow: visible;
        margin-right: 5%;">
            visible
    </div>
    <div style="
        width: 20%;
        height: 150px;
        background-color: black;
        float: left;
        overflow: hidden;
        margin-right: 5%;">
            hidden
    </div>
    <div style="
        width: 20%;
        height: 150px;
        background-color: black;
        float: left;
        overflow: scroll;
        margin-right: 5%;">
            scroll
    </div>
    <div style="
        width: 20%;
        height: 150px;
        background-color: black;
        float: left;
        overflow: auto;
        margin-right: 5%">
            auto
    </div>
</div>

자기가 무엇에 홀려 있음을 깨닫는다. 그 넉넉한 뱃길에 여태껏 알아보지 못하고, 숨바꼭질을 하고, 피하려 하고 총으로 쏘려고까지 한 일을 생각하면, 무엇에 씌었던 게 틀림없다. 큰 새 작은 새는 좋아서 미칠 듯이, 물속에 가라앉을 듯, 탁 스치고 지나가는가 하면, 되돌아오면서, 그렇다고 한다.

`z-index` : 요소들의 수직 위치를 지정하는 속성

숫자가 클수록 위에, 숫자가 작을수록 아래에 위치

// 수직 위치를 역순으로 배치
<div style="
    width: 100px;
	height: 100px;
	position: absolute;
    top: 30px;
	left: 210px;
    background-color: red;
    z-index: 1;"></div>
<div style="width: 100px;
	height: 100px;
	position: absolute;
    top: 60px;
	left: 270px;
    background-color: blue;"></div>
<div style="width: 100px;
	height: 100px;
    position: absolute;
    top: 90px;
	left: 240px;
    background-color: green;
    z-index: -1;"></div>

# 글자 관련 `CSS` 속성

`color` : 글자의 색상을 지정하는 속성

color: 속성

설명

기본값

#000000

상속 여부

애니메이션 여부

문법

color: 값	설명
color	색상 지정

<div style="color:red">
    hello world
</div>

hello world

`font-size` : 글자의 크기를 지정하는 속성

font-size: 속성

설명

기본값

medium

상속 여부

애니메이션 여부

문법

font-size: 값	설명
medium	웹 브라우저에서 정한 기본값
xx-small, x-small, small, large, x-large, xx-large	기본값에 대한 상대적인 크기
smaller, larger	부모 요소의 글자 크기에 대한 상대적인 크기
px	글자 크기를 직접 지정
%, em	부모 요소의 글자 크기에 대한 상대적인 글자 크기의 비율을 직접 지정
rem	최상위 요소의 글자 크기에 대한 상대적인 글자 크기의 비율을 직접 지정

<div style="font-size: xx-small">xx-small</div>
<div style="font-size: x-small">x-small</div>
<div style="font-size: small">small</div>
<div style="font-size: medium">medium</div>
<div style="font-size: large">large</div>
<div style="font-size: x-large">x-large</div>
<div style="font-size: xx-large">xx-large</div>

xx-small

x-small

small

medium

large

x-large

xx-large

<div style="font-size: smaller">smaller</div>
<div>medium</div>
<div style="font-size: larger">larger</div>

smaller

medium

larger

<div style="font-size: 10px">
    10px
    <i style="font-size: 200%;">
        20px
        <span style="font-size: 0.8em">
            16px
            <b style="font-size: 1rem">
                1rem
            </b>
        </span>
    </i>
</div>

10px 20px 16px 1rem

`font-family` : 글꼴을 지정하는 속성

font-family: 속성

설명

기본값

웹 브라우저의 기본 글꼴

상속 여부

애니메이션 여부

문법

font-family: 값	설명
font	글꼴 이름 / 글꼴 유형

<div style="font-family: (지정할 글꼴);">
    지정된 글꼴로 출력합니다.
</div>

<div style="font-family: (지정할 글꼴1), (지정할 글꼴2);">
    지정된 글꼴1로 출력하되 (i) 해당 글꼴이 존재하지 않는다면 (ii) 표현할 수 없다면, 지정된 글꼴2로 출력합니다.
</div>

`font-weight` : 글자의 굵기 정도를 지정하는 속성

나타낼 수 있는 굵기의 정도는 글꼴마다 다름

font-weight: 속성

설명

기본값

normal

상속 여부

애니메이션 여부

문법

font-weight: 값	설명
normal	보통 굵기 (400)
bold	굵은 굵기 (700)
bolder	상속된 값보다 굵은 크기
lighter	상속된 값보다 얇은 크기
number	굵기 정도를 직접 지정

<div style="font-weight: normal">
    <div style="font-weight: lighter">normal-lighter</div>
    normal
    <div style="font-weight: bolder">normal-bolder</div>
</div>
<div style="font-weight: bold">
    <div style="font-weight: lighter">bold-lighter</div>
    bold
    <div style="font-weight: bolder">bold-bolder</div>
</div>

normal-lighter

normal

normal-bolder

bold-lighter

bold

bold-bolder

# 텍스트 관련 `CSS` 속성

`text-align` : 텍스트를 정렬하는 속성

text-align: 문법	설명
left	왼쪽 정렬
right	오른쪽 정렬
center	가운데 정렬
justify	양쪽 정렬

<div style="text-align: left;">바다는 크레파스보다 진한 푸르고 육중한 비늘을 무겁게 뒤채면서, 숨을 쉰다.</div>
<div style="text-align: right;">중립국으로 가는 석방 포로를 실은 인도 배 타고르호는, 흰 페인트로 말쑥하게 칠한 삼천 톤의 몸을 떨면서, 물건처럼 빼곡이 들어찬 동지나 바다의 훈김을 헤치며 미끄려져 간다.</div>
<div style="text-align: center;">석방 포로 이명준(李明俊)은, 오른편의 곧장 갑판으로 통한 사닥다리를 타고 내려가, 배 뒤쪽 난간에 가서, 거기에 기대어 선다.</div>
<div style="text-align: justify;">담배를 꺼내 물고 라이터를 켜댔으나 바람에 이내 꺼지고 하여, 몇 번이나 그르친 끝에, 그 자리에 쭈그리고 앉아서 오른팔로 얼굴을 가리고 간신히 댕긴다.</div>

바다는 크레파스보다 진한 푸르고 육중한 비늘을 무겁게 뒤채면서, 숨을 쉰다.

중립국으로 가는 석방 포로를 실은 인도 배 타고르호는, 흰 페인트로 말쑥하게 칠한 삼천 톤의 몸을 떨면서, 물건처럼 빼곡이 들어찬 동지나 바다의 훈김을 헤치며 미끄려져 간다.

석방 포로 이명준(李明俊)은, 오른편의 곧장 갑판으로 통한 사닥다리를 타고 내려가, 배 뒤쪽 난간에 가서, 거기에 기대어 선다.

담배를 꺼내 물고 라이터를 켜댔으나 바람에 이내 꺼지고 하여, 몇 번이나 그르친 끝에, 그 자리에 쭈그리고 앉아서 오른팔로 얼굴을 가리고 간신히 댕긴다.

`text-decoration` : 텍스트을 꾸미는 선을 지정하는 속성

text-decoration: 속성

설명

기본값

none

상속 여부

애니메이션 여부

문법

text-decoration: 값	설명
none	선을 만들지 않음
line-through	취소선 생성
overline	윗줄 생성
underline	밑줄 생성

<div style="text-decoration: none">none</div>
<div style="text-decoration: line-through">line-through</div>
<div style="text-decoration: overline">overline</div>
<div style="text-decoration: underline">underline</div>
<div style="text-decoration: line-through overline underline">text-decoration</div>

none

line-through

overline

underline

text-decoration

`columns` : 여러 개의 문단을 만드는 속성

columns: 속성	설명
기본값	auto
속성값	문단의 최대 개수 or 문단의 최소 가로 길이

<div style="columns: 3;">자기가 무엇에 홀려 있음을 깨닫는다. 그 넉넉한 뱃길에 여태껏 알아보지 못하고, 숨바꼭질을 하고, 피하려 하고 총으로 쏘려고까지 한 일을 생각하면, 무엇에 씌었던 게 틀림없다. 큰 새 작은 새는 좋아서 미칠 듯이, 물속에 가라앉을 듯, 탁 스치고 지나가는가 하면, 되돌아오면서, 그렇다고 한다. 무덤을 이기고 온, 못 잊을 고운 각시들이, 손짓해 본다. 내 딸아. 비로소 마음이 놓인다. 옛날, 어느 벌판에서 겪은 신내림이, 문득 떠오른다. 그러자, 언젠가 전에, 이렇게 이 배를 타고 가다가, 그 벌판을 지금처럼 떠올린 일이, 그리고 딸을 부르던 일이, 이렇게 마음이 놓이던 일이 떠올랐다. 거울 속에 비친 남자는 활짝 웃고 있다.</div>

자기가 무엇에 홀려 있음을 깨닫는다. 그 넉넉한 뱃길에 여태껏 알아보지 못하고, 숨바꼭질을 하고, 피하려 하고 총으로 쏘려고까지 한 일을 생각하면, 무엇에 씌었던 게 틀림없다. 큰 새 작은 새는 좋아서 미칠 듯이, 물속에 가라앉을 듯, 탁 스치고 지나가는가 하면, 되돌아오면서, 그렇다고 한다. 무덤을 이기고 온, 못 잊을 고운 각시들이, 손짓해 본다. 내 딸아. 비로소 마음이 놓인다. 옛날, 어느 벌판에서 겪은 신내림이, 문득 떠오른다. 그러자, 언젠가 전에, 이렇게 이 배를 타고 가다가, 그 벌판을 지금처럼 떠올린 일이, 그리고 딸을 부르던 일이, 이렇게 마음이 놓이던 일이 떠올랐다. 거울 속에 비친 남자는 활짝 웃고 있다.

<div style="columns: 150px;">자기가 무엇에 홀려 있음을 깨닫는다. 그 넉넉한 뱃길에 여태껏 알아보지 못하고, 숨바꼭질을 하고, 피하려 하고 총으로 쏘려고까지 한 일을 생각하면, 무엇에 씌었던 게 틀림없다. 큰 새 작은 새는 좋아서 미칠 듯이, 물속에 가라앉을 듯, 탁 스치고 지나가는가 하면, 되돌아오면서, 그렇다고 한다. 무덤을 이기고 온, 못 잊을 고운 각시들이, 손짓해 본다. 내 딸아. 비로소 마음이 놓인다. 옛날, 어느 벌판에서 겪은 신내림이, 문득 떠오른다. 그러자, 언젠가 전에, 이렇게 이 배를 타고 가다가, 그 벌판을 지금처럼 떠올린 일이, 그리고 딸을 부르던 일이, 이렇게 마음이 놓이던 일이 떠올랐다. 거울 속에 비친 남자는 활짝 웃고 있다.</div>

# 애니메이션 관련 `CSS` 속성

`transform:` : 요소의 형태를 변화시키는 속성

transform: rotate( angle )  /* 요소를 angle (각의 크기)만큼 회전 (단위 : deg, turn) */
transform: rotateX( angle ) /* 가로를 축으로 회전 */
transform: rotateY( angle ) /* 세로를 축으로 회전 */

transform: translate( Xpx, Ypx ) /* 요소를 가로축, 세로축 기준으로 이동 */
transform: translateX( px ) /* 가로축을 기준으로 이동 */
transform: translateY( px ) /* 세로축을 기준으로 이동 */

transform: scale( X ) /* 가로와 세로를 모두 X배만큼 확대 */
transform: scale( X, Y ) /* 가로로 X배만큼 확대, 세로로 Y배만큼 확대 */
transform: scaleX( X ) /* 가로로 X배만큼 확대 */
transform: scaleY( Y ) /* 세로로 Y배만큼 확대 */

transform: skewX( Xdeg ) // 가로 뱡향으로 비틈
transform: skewY( Ydeg ) // 세로 뱡향으로 비틈
transform: skewX( Xdeg, Ydeg ) // 가로 뱡향으로 X도만큼, 세로 방향으로 Y도만큼 비틈

`animation` : 요소에 애니메이션 효과를 넣는 속성

@keyframes name { /* 애니메이션에 이름을 붙이고, 어떤 모양에서 어떤 모양으로 바꿀지 지정 */
0% { ... } /* 시작할 때 요소의 모양 지정 */
n% { ... } /* n%일 때 요소의 모양 지정 */
100% { ... } /* 끝날 때 요소의 모양 지정 */}

animation-name: /* 어떤 이름의 @keyframes를 사용할지 지정 */; 

animation-duration: /* 애니메이션이 진행될 시간 지정 (단위: s 또는 ms) */;

animation-timing-function: /* 애니메이션의 진행 속도 지정 */
  /* cubic-bezier(n,n,n,n) 함수 : 애니메이션을 3차원 베지에 곡선에 맞게 표현 */
  /* linear : cubic-bezier(0,0,1,1). 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행 */
  /* ease : 기본값. cubic-bezier(0.25,0.1,0.25,1). 애니메이션 효과가 천천히 시작되어 빨라졌다가 다시 느려짐 */
  /* ease-in : cubic-bezier(0.42,0,1,1). 애니메이션 효과가 천천히 시작됨 */
  /* ease-out : cubic-bezier(0,0,0.58,1). 애니메이션 효과가 천천히 끝남 */
  /* ease-in-out : cubic-bezier(0.42,0,0.58,1). 애니메이션 효과가 천천히 시작되어 천천히 끝남 */
  /* steps(1,...) 함수 : 애니메이션을 스텝에 맞게 끝어서 표현 */
  /* step-start : steps(1,start). 시작하는 지점에 스텝 */
  /* step-end : steps(1,end). 끝나는 지점에 스텝 */

animation-delay: /* 애니메이션이 시작하기 전에 대기하는 시간 지정 (단위: s 또는 ms) */;

animation-iteration-count: /* 애니메이션이 반복하는 횟수 지정 */;

animation-direction: /* 애니메이션이 진행하는 방향 지정 (normal | reverse | alternate | alternate-reverse) */;

animation-fill-mode: /* 애니메이션 종료 후의 상태 지정 (none | forwards | backwards | both) */;

animation-play-state : /* 애니메이션의 진행 여부 지정 (running | paused) */;

`transition:` : 요소에 트랜지션 효과를 넣는 속성

transition-property: /* 트랜지션의 속성 지정 (none | all | property) */;

transition-timing-function: /* 트랜지션의 진행 속도 지정 */;
  /* cubic-bezier(n,n,n,n) 함수 : 애니메이션을 3차원 베지에 곡선에 맞게 표현 */
  /* linear : cubic-bezier(0,0,1,1). 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행 */
  /* ease : 기본값. cubic-bezier(0.25,0.1,0.25,1). 애니메이션 효과가 천천히 시작되어 빨라졌다가 다시 느려짐 */
  /* ease-in : cubic-bezier(0.42,0,1,1). 애니메이션 효과가 천천히 시작됨 */
  /* ease-out : cubic-bezier(0,0,0.58,1). 애니메이션 효과가 천천히 끝남 */
  /* ease-in-out : cubic-bezier(0.42,0,0.58,1). 애니메이션 효과가 천천히 시작되어 천천히 끝남 */
  /* steps(1,...) 함수 : 애니메이션을 스텝에 맞게 끝어서 표현 */
  /* step-start : steps(1,start). 시작하는 지점에 스텝 */
  /* step-end : steps(1,end). 끝나는 지점에 스텝 */

transition-duration: /* 트랜지션이 진행될 시간 지정 (단위: s 또는 ms) */;

transition-delay: /* 트랜지션이 시작하기 전에 대기하는 시간 지정 (단위: s 또는 ms) */;

Twitter LinkedIn

pocj8ur4in

CSS (Cascading Style Sheet) : 웹 문서가 표현되는 방법을 기술하는 스타일시트 언어

CSS 스타일시트 (CSS Style Sheet) : 스타일을 선언하고 태그를 선택하는 CSS RuleSet의 집합

캐스케이딩 (Cascading) : 같은 CSS 선언이 여러 번 선언하였다면, 나중에 선언된 것을 적용

CSS 명시도 (Specificity) : 작성된 순서가 아닌, CSS 선언에 적용되는 가중치에 따라 우선순위 적용

!important : 기존의 우선순위를 무시하고 해당 CSS 선언을 우선해 적용

CSS 선택자 (CSS Selector) : HTML 문서에 스타일을 입힐 요소를 선택하는 문자

전체 선택자 * : 모든 요소를 선택하는 선택자

태그 선택자 tag : 해당 태그의 요소를 선택하는 선택자

아이디 선택자 #id : 해당 아이디의 요소를 선택하는 선택자

클래스 선택자 .class : 해당 클래스의 요소를 선택하는 선택자

후손 선택자 (selector1) (selector2) : 해당 선택자의 모든 하위 요소 중 하나를 지정해 선택하는 선택자

자손 선택자 (selector1)>(selector2) : 해당 선택자의 자식 요소 중 하나를 지정해 선택하는 선택자

형제 선택자 (selector1)~(selector2) : 해당 선택자의 형제 요소 중 하나를 지정해 선택하는 선택자

인접 형제 선택자 (selector1)+(selector2) : 선택자의 형제 중 바로 다음에 오는 요소를 선택하는 선택자

속성 선택자 [attr] : 태그에 해당 속성이 명시된 요소들을 모두 선택하는 선택자

가상 클래스 선택자 (Pseudo-class Selector) : 가상 클래스를 선택하는 선택자

가상 요소 선택자 (Pseudo-element Selector) : 가상 요소를 선택하는 선택자

# 박스 모델 (Box Model) 관련 CSS 속성

width, height : 박스의 가로, 세로 길이를 지정하는 속성

margin : 마진에 값을 부여하는 속성

padding : 패딩에 값을 부여하는 속성

border : 테두리에 값을 부여하는 속성

box-sizing : 박스 크기의 기준을 지정하는 속성

# 배경 관련 CSS 속성

background-color : 배경의 색상을 지정하는 속성

background-image : 배경 이미지를 지정하는 속성

overflow : 컨텐츠가 요소의 크기를 벗어날 때의 처리 방법을 지정하는 속성

z-index : 요소들의 수직 위치를 지정하는 속성

# 글자 관련 CSS 속성

color : 글자의 색상을 지정하는 속성

font-size : 글자의 크기를 지정하는 속성

font-family : 글꼴을 지정하는 속성

font-weight : 글자의 굵기 정도를 지정하는 속성

# 텍스트 관련 CSS 속성

text-align : 텍스트를 정렬하는 속성

text-decoration : 텍스트을 꾸미는 선을 지정하는 속성

columns : 여러 개의 문단을 만드는 속성

# 애니메이션 관련 CSS 속성

transform: : 요소의 형태를 변화시키는 속성

animation : 요소에 애니메이션 효과를 넣는 속성

transition: : 요소에 트랜지션 효과를 넣는 속성

참고

[SpringBoot] 3. Spring Data

[SQLD] 4. 관리 구문

[SQLD] 3. SQL 활용

[SQLD] 2. SQL 기본

`CSS` (`Cascading Style Sheet`) : 웹 문서가 표현되는 방법을 기술하는 스타일시트 언어

`CSS` 스타일시트 (`CSS Style Sheet`) : 스타일을 선언하고 태그를 선택하는 `CSS RuleSet`의 집합

캐스케이딩 (`Cascading`) : 같은 `CSS` 선언이 여러 번 선언하였다면, 나중에 선언된 것을 적용

`CSS` 명시도 (`Specificity`) : 작성된 순서가 아닌, `CSS` 선언에 적용되는 가중치에 따라 우선순위 적용

`!important` : 기존의 우선순위를 무시하고 해당 `CSS` 선언을 우선해 적용

CSS 선택자 (`CSS Selector`) : `HTML` 문서에 스타일을 입힐 요소를 선택하는 문자

전체 선택자 `*` : 모든 요소를 선택하는 선택자

태그 선택자 `tag` : 해당 태그의 요소를 선택하는 선택자

아이디 선택자 `#id` : 해당 아이디의 요소를 선택하는 선택자

클래스 선택자 `.class` : 해당 클래스의 요소를 선택하는 선택자

후손 선택자 `(selector1) (selector2)` : 해당 선택자의 모든 하위 요소 중 하나를 지정해 선택하는 선택자

자손 선택자 `(selector1)>(selector2)` : 해당 선택자의 자식 요소 중 하나를 지정해 선택하는 선택자

형제 선택자 `(selector1)~(selector2)` : 해당 선택자의 형제 요소 중 하나를 지정해 선택하는 선택자

인접 형제 선택자 `(selector1)+(selector2)` : 선택자의 형제 중 바로 다음에 오는 요소를 선택하는 선택자

속성 선택자 `[attr]` : 태그에 해당 속성이 명시된 요소들을 모두 선택하는 선택자

가상 클래스 선택자 (`Pseudo-class Selector`) : 가상 클래스를 선택하는 선택자

가상 요소 선택자 (`Pseudo-element Selector`) : 가상 요소를 선택하는 선택자

# 박스 모델 (`Box Model`) 관련 `CSS` 속성

`width`, `height` : 박스의 가로, 세로 길이를 지정하는 속성

`margin` : 마진에 값을 부여하는 속성

`padding` : 패딩에 값을 부여하는 속성

`border` : 테두리에 값을 부여하는 속성

`box-sizing` : 박스 크기의 기준을 지정하는 속성

# 배경 관련 `CSS` 속성

`background-color` : 배경의 색상을 지정하는 속성

`background-image` : 배경 이미지를 지정하는 속성

`overflow` : 컨텐츠가 요소의 크기를 벗어날 때의 처리 방법을 지정하는 속성

`z-index` : 요소들의 수직 위치를 지정하는 속성

# 글자 관련 `CSS` 속성

`color` : 글자의 색상을 지정하는 속성

`font-size` : 글자의 크기를 지정하는 속성

`font-family` : 글꼴을 지정하는 속성

`font-weight` : 글자의 굵기 정도를 지정하는 속성

# 텍스트 관련 `CSS` 속성

`text-align` : 텍스트를 정렬하는 속성

`text-decoration` : 텍스트을 꾸미는 선을 지정하는 속성

`columns` : 여러 개의 문단을 만드는 속성

# 애니메이션 관련 `CSS` 속성

`transform:` : 요소의 형태를 변화시키는 속성

`animation` : 요소에 애니메이션 효과를 넣는 속성

`transition:` : 요소에 트랜지션 효과를 넣는 속성