CSS

스타일 기본 문법

• CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드
• 실제 프로그래밍 언어가 아닌 Style Sheet 언어로, HTML 문서의 요소에 선택적으로 스타일을 적용함.
• html 태그의 속성은 attribute, css 스타일의 속성은 properties라 한다.
  • 선택자(selector): 서식을 지정하고 싶은 요소. 한 선택자에 적용될 속성은 {중괄호}안에 쓰인다.
  • 속성(properties): 지정할 서식. 스타일의 속성은 ;로 구분되어진다.
  • 값(value): 해당 속성으로 지정 가능한 키워드, 수치(length) 등

p {color: red;}
<!-- CSS 주석 -->
<!-- p태그에 color 속성을 red값으로 지정함 -->

javascript로 css 속성을 변환할 수도 있다. 🔗 자바스크립트로 문서 요소를 제어하는 것을 DOM control이라 한다. 마찬가지로 브라우저를 제어하는 것을 BOM control이라 한다.

스타일 지정 방식

인라인 스타일 방식

해당 요소에 style 속성(attribute)로 직접 지정하므로 스타일 지정 즉시 해당 스타일이 그 요소에만 지정됨. 코드의 간결성, 재사용성, 변동성이 떨어지므로 가급적 사용 지양.

내부 스타일 방식

해당 문서의 태그 안 쪽에 style 태그로 지정하여 현재 문서에만 적용할 경우 활용, 재사용성은 현재 문서에만 적용되므로 중간 정도, 변경하기는 쉽다. 같은 선택자에 같은 속성을 줬을 때는 마지막에 준 속성이 부여된다.

외부 스타일 방식

별도의 css 파일을 작성하여 해당 html 문서에 연결하여 사용하는 방식. 재사용성이 뛰어 나고, 필요한 곳에 링크 태그를 활용하여 연결하고, 필요가 없는 경우 해당 link 태그를 삭제하면 된다. 반드시 charset을 UTF-8로 처리해야 한글이나 특수문자가 손상되지 않는다.

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

IN style1.css
@charset "UTF-8": 선택자 {속성: 값;}

스타일 속성 값의 단위

크기 단위

스타일에서 콘텐츠나 요소의 크기를 지정할 때는 px, pt, %, em(rem), vh, vw 등을 사용한다. cm 등도 있지만 웹에서는 사용하지 않는다. 퍼센트는 글자가 아니라 부모의 상대적인 크기를 결정할 때 사용한다. 포인트는 인쇄에서 비롯된 것으로 문서의 글자 크기가 포인트 단위이다. px은 점 하나의 단위로 가장 많이 사용된다. 보통 10포인트는 13픽셀 정도 된다. 그래픽 카드 해상도에 따라서 달리 보일 수 있다. vh(높이), vw(넓이)는 기기에 따라 달라진다(variable)는 의미이다. 스마트폰이 가로, 세로로 변형될 때 거기에 맞춰서 변화하는 것이 vh, vw을 적용한 것이다.

색상 단위

웹 컬러를 나타내는 방식으로 RGB 체계를 사용한다. 컬러명, 16진(hexacode) 코드 6자리(#ff0000), 16진 코드 3자리, hsl(색각도, 채도, 명도), hsla(색각도, 채도, 명도, 불투명도), rgb(빨, 초, 파), rgba(빨, 초, 파, 투명) 등으로 표현 가능하다. 색각도는 0~355, 채도는 0~100, 불투명도는 0~1, 빨초파는 0~255의 값을 가진다.

• RGB는 가산혼합, 즉 빛의 혼합 방식으로 Red, Green, Blue의 빛이 섞일수록 밝아져 종래에는 흰색이 된다. 주로 컴퓨터와 같은 디스플레이 매체에서 사용하는 색상 모드이다.
• CMYK는 감산혼합으로, Cyan, Magenta, Yellow, Black의 물감이 혼합될수록 어두워져 종래에는 검은색이 된다. 주로 인쇄 출력물을 기반으로 할 때 사용하는 색상 모드이다.
• 색(Color)는 색상 + 채도 + 명도로 구성되어 있다.
  • saturation(채도): 맑고 탁함, 연함 진함. 0~100 값을 가짐
  • brightness(lightness, 명도): 밝고 어두움.
  • hue(색각도, 색상): 24색으로 분류됨. 0~355의 값(원형)을 가짐
  • transparent(불투명도): 0~1값을 가짐.

각도 단위

해당 요소를 회전하려고 할 경우 활용하며, deg(각도), turn(바퀴) 등으로 명시함

시간 단위

애니메이션이나 지연시간 등에 지정하며, 단위로써는 초(s), 밀리초(ms)를 사용한다. 더 작게는 micro(만분의 1), nano(10억분의 1)도 있다.

• 1s = 1000ms

선택자(🔗)

• 선택자 🔗: 스타일을 부여할 대상을 지정하는 키워드

기본 선택자( 🔗)

태그, 클래스, 아이디, 전체 선택자

* {margin: 20px;} // 모든 태그에 마진을 20 픽셀 넣음
a {text-decoration: none;} // anchor 태그의 밑줄을 없앤다

기본 선택자	설명
* {style}	모든 태그 선택
태그명 {style}	해당 태그 선택
.클래스명 {style}	해당 클래스 선택. 해당 클래스 속성이 있는 요소만 선택. 같은 스타일을 부여하고 싶다면 클래스를 부여한다.
#아이디명 {style}	해당 아이디가 있는 태그 선택

💡 클래스(class): 스타일이나 스크립트를 공통으로 적용하기 위한 것 💡 아이디(id): 특정 요소 하나만 선택해서 부여할 경우를 의미한다. 하나의 html 문서에서 각각의 요소를 중복되지 않게 아이디를 부여하여 각 요소를 구분하여 스타일이나 스크립트를 각각 적용하기 위해 태그에 지정한다. 중복되는 아이디를 가진 요소가 있다면 표준을 통과하지 못한다.

계층 선택자(결합자)

조상후손, 부모자식, 형제, 순서 선택자가 있다.

조상 후손 {}  // 조상과 후손 간에 한 칸 띄워서 표시
부모>자식 // 부모와 자식 간에 > 기호
형~제 // 형과 아우 요소 사이에 물결(~) 기호
n째+(n+1)째 // 바로 밑의 형제 관계 사이엔 + 기호

div.ex1>nav.gnb>ul.lst>li[class="item$"]*7>a{항목$}
div.ex1>nav.gnb>(ul.lst>li[class="item$"]*3>a{항목$})+(ol.lst>li[class="item$"]*3>a{항목$})

.ex1 li {} // 조상과 후손 관계
.ex1 > nav > .lst1 > li // 부모와 자식 관계로 사이의 모든 노드를 기재

.ex1 .item1~li {} // item 클래스의 동생들을 선택
.ex1 .item1+li {} // item 클래스의 바로 다음의 하나만 선택된다.

계층 선택자	설명
조상 후손 {style}	조상 요소에 포함된 모든 후손 요소를 선택함
부모>자식	부모 요소에 포함된 자식 요소만 선택함(손자는 선택되지 않음)
형~제	형의 모든 아우 요소를 선택함
형+제	형의 첫 번째 아우 요소를 선택함

<style>
    section p{border: 1px black solid;}
    section>p{width: 50%;}
    h1+p{color:red;}
    h2+p{color:blue;}
    h1~p{background-color: pink;}
</style>

...

<section>
    <h1>H1</h1>
    <p>p1</p>
    <p>p2</p>
    <div>
        <p>p3</p>
        <p>p4</p>
    </div>
    <h2>H2</h2>
	<hr>
	<p>p5</p>
</section>

!https://blog.kakaocdn.net/dn/N5JRa/btsm9vjhRGy/xlJblo8NYKL0CpRmU0krRK/img.png

의사 클래스( 🔗)

.ex1 li:first-child {} // ex1의 자손 중 첫 번째 자식들. item1과 item4가 걸린다. 만약 첫 번째 자식이 li가 아니라면 선택되지 않는다
.ex1 li:first-of-type {} // ex1의 자손 중 li 중 가장 첫 번째 타입
.ex1 li:last-child {} // ex1의 자손 중 li 중 마지막 자식
li:last-of-type {} // li 중 마지막 타입
li:nth-child(i) {} // li 중 i번째 자식
li:nth-of-type(i) {} // li중 i번째 타입
li:nth-child(2n) // 짝수번째 선택
li:nth-child(2n+1) // 홀수번째 선택

text-indentention: -20px;  // 내어쓰기

only-child
only-of-type

empty

의사 클래스(계층 선택자)	설명
요소:first-child	첫째이면서 해당 요소와 일치하는 요소(첫째가 아니라면 해당 안 됨)
요소:first-of-type	해당 요소 중에 가장 먼저 오는 요소(첫째가 아닐 수도 있음)
요소:last-child	막내이면서 해당 요소와 일치하는 요소
요소:last-of-type	해당 요소 중에 가장 마지막에 오는 요소
요소:nth-child(N)	N째이면서 해당 요소와 일치하는 요소
요소:nth-of-type(N)	해당 요소 중에 N째인 요소
요소:nth-child(2n)	해당 요소 중에 짝수번째인 요소
요소:nth-child(2n+1)	해당 요소 중에 홀수번째인 요소
요소:only-child	독자인 해당 요소(형제 없음)
요소:only-of-type	다른 형제가 있더라도 형제 중 해당 요소는 하나인 요소
요소:empty	해당 요소 중 비어있는 요소

 <style>
        li:first-of-type{color:red;}
        li:first-child{background-color: pink;}
        li:last-child{color:blue;}
        li:last-of-type{background-color: aqua;}
        li:nth-child(2){color:orange;}
        li:nth-of-type(2){background-color: beige;}
        li:nth-child(2n){border-bottom: 1px gray solid;}
        li:nth-child(2n+1){border-bottom: 1px green dotted;}
        li:only-child{background-color: lightgreen;}
        p:only-of-type{background-color: lightcoral;}
        h1:empty::before{content: "비어있음";}

</style>

...

<body>
    <section>
        <h1></h1>
        <ul>ul1
            <li>ul1_li1</li>
            <li>ul1_li2</li>
            <li>ul1_li3</li>
        </ul>
        <ol>ol
            <li>ol_li1</li>
        </ol>
        <ul>ul2
            <p>paragrpaph</p>
            <li>ul2_li1</li>
            <li>ul2_li2</li>
            <li>ul2_li3</li>
        </ul>
    </section>
</body>

속성 선택자

태그의 속성에 따라 다르게 선택할 경우 사용한다.

태그[속성 이름]

div.pic_fr>(img+br)*4
img[src] {} // src 속성이 "존재하는" img 태그 선택
img [src=특정] // src 속성 중 특정 값인 img 태그 선택
img [src|=특정] // img 태그의 src 속성 중 특정으로 시작된 속성 요소 선택
img [src^=문자] // 특정으로 시작하는 요소

img [src$=특정] // img 태그의 src 속성 중 특정으로 끝나는 요소 선택

img [src*=문자] // 특정이 포함되는 요소

종류	요소
[속성]	속성이 있는 요소
[속성 = 값]	지정한 속성 값인 요소(일치)
[속성 ~= 값]	지정한 속성 값이 포함된 요소(단어별)
[속성	= 값]
[속성 ^= 값]	지정한 속성 값으로 시작하는 요소
[속성 $= 값]	지정한 속성 값으로 끝나는 요소
[속성 *= 값]	지정한 속성 값의 일부가 일치하는 요소

가상 클래스(선택자)

링크 선택자	하이퍼링크 요소인 a요소의 현재 동작 상태에 따라 달리 적용
:link	a 요소의 링크에 스타일 적용
:visited	a 요소의 방문했던 링크에 스타일 적용
:target	a가 가리키는 대상에 스타일 적용

---

반응 선택자
:hover	요소에 마우스 포인터가 올라감
:active	요소를 마우스로 누르고 있는 경우(활성화)

💡 link - visited - hover - active 순으로 사용해야 한다(LoVe, HAte 순)

기타 선택자

전후 선택자
::before	특정 요소의 앞에 내용이나 스타일을 추가
::after	특정 요소의 뒤에 내용이나 스타일을 추가
::selection	마우스로 드래그해서 선택했을 때 스타일 추가

---

텍스트/문장 선택자
::first-letter	태그 안의 첫 번째 위치에 있는 글자를 선택(글자가 등 태그 뒤로, 두 번째 이상이면 X
::first-line	화면 상에서 첫 번째 줄을 선택(창 크기에 따라 달리 적용될 수 있다)

---

조건 선택자
:not(조건)	부정 선택자. 조건이 아닌 요소.
:checked	라디오나 체크에서 선택되어 있는 요소

💡 어떤 대상에 선택자를 썼을 때, 그 선택자 중 id > class(이중 클래스 포함) > tag 순으로 걸린다.

---

출력 관련 속성

출력 관련 속성에는 display, visibility, opacity, width, height, overflow, margin, padding, border 등이 있다.

display

display는 화면 출력 모드를 지정하는 속성이다. 부여 가능한 기본적인 속성의 값에는 inline ⊕ block ⊕ inline-block(한 줄 출력, 크기 지정) ⊕ none(아예 공간을 차지하지 않는다)이 있으며 이 중 하나만 지정 가능하다. 다른 부여 가능한 속성의 값에는 contents, flex, gird, box, table, inline-flex, inline-grid, inline-table, list-item, run-in, table-caption, table-column, table-row, table-cell, table-header-group, table-footer-group, table-column-group, table-row-group 등이 있다.

• 모든 속성의 값에 initial(초기값), inherit(상속값, 부모요소로부터 상속)이 있다. 기본적으로 각 요소에는 display값이 지정되어있다.
• inline 요소에는 span, a, strong, em, ins 등이 있다. 한 줄 안에 자동 줄바꿈이 될 때까지 배치되며, 크기 지정을 할 수 없다는 특징이 있다. 따라서 width, height, line-height, text-indent, text-align padding-top, padding-bottom, margin-top, margin-bottom 등의 속성을 지정할 수 없다(지정하더라도 결과에 반영되지 않는다).
• block 요소에는 div, h1~h6, p, section, article, header, footer 등이 있다. 자동으로 다음 줄에 배치가 되며, 크기와 관련된 속성을 지정할 수 있다.

visibility, opacity

• visibility(가시 속성)는 보일 지 여부에 대해 결정하는 속성이다. visible ⊕ hidden(영역은 차지함) ⊕ collapse 가 있다.
• opacity(불투명도 속성)은 불투명 정도를 나타내는 속성으로 0(투명)~1(불투명)까지 실수 또는 정수로 표시한다. visibility 보다는 opacity가 더 많이 사용된다. 해당 요소의 글자와 배경색/배경이미지를 포함한 모든 콘텐츠의 불투명도를 지정할 수 있다.

width, height, overflow

• width(너비 속성)은 가로(폭, 너비)의 크기를 지정하는 속성이다. auto ⊕ length ⊕ % 등을 부여할 수 있다. length는 px, pt, pc, cm, mm, in, vw, vmin, vmax 등의 단위로 지정이 가능하다.
• height(높이 속성)은 세로(높이)의 크기를 지정하는 속성으로 width와 같다.

💡 기본 화면 출력 속성은 블록 요소 또는 인라인-블록 요소 등에만 크기 지정이 가능하다.

• overflow(흘러넘침 속성)은 콘텐츠의 양이 지정한 크기(너비와 높이)보다 더 클 경우 지정한다. visible(무조건 표시) ⊕ hidden(스크롤이 안 됨) ⊕ scroll(무조건 스크롤 표시) ⊕ auto(흘러 넘치면 스크롤, 안 넘으면 표시X, default값) ⊕ clip(거의 사용하지 않는다) 을 부여할 수 있다. 세부 속성으로는 overflow-x(너비만 조율), overflow-y(높이만 조율) 등이 있다.

margin, padding

• margin(바깥 여백 속성)은 현재 콘텐츠의 테두리 영역의 바깥 여백으로써 여러 콘텐츠와 콘텐츠 사이의 여백이다. auto(좌우) ⊕ length ⊕ %를 지정할 수 있다. 전체, 상하와 좌우 2개의 값을 주거나, 상 우 하 좌(시계방향) 4개의 값을 줄 수 있다. auto는 좌우만 지정할 수 있다. 세부 속성으로 margin-left, margin-top, margin-bottom, margin-right 등이 있다.

margin: 전체
margin: 상하 좌우
margin: 상 우 하 좌

• padding(안쪽 여백 속성)은 테두리와 콘텐츠 사이의 여백이다. margin과 마찬가지로 전체 값, 상하와 좌우 2개 값, 상 우 하 좌 4개의 값을 줄 수 있다. 세부 속성으로 padding-left, padding-top, padding-bottom, padding-right가 있다.

💡 margin과 padding을 사용할 때는 통합 속성을 먼저 지정하고, 세부 속성을 나중에 지정해야 세부 속성이 적용된다.

border

border(테두리 속성)에는 width, style, color를 지정할 수 있다.

• border의 세부 속성은 border-width, border-style, border-color로 각각 전체, 상하 좌우, 상 우 하 좌로 지정할 수 있다. 또한, border-left, border-right, border-top, border-bottom과 같은 세부 속성도 존재한다. 각 border의 방향 별 세부속성에 대해서도 border-left-width와 같이 세세한 속성 지정도 가능하다.
• border-width(선의 두께)에는 length(px, pt, pc, cm, mm, in, vw, vmin, vmax 등) 단위가 지정이 가능하다.
• border-style🔗은 선의 종류로 solid(실선), none(기본값), hidden, dotted(둥근 점선), dashed(사각 점선), double(2중 선), groove(음각), ridge, inset, outset이 있다.
• border-color는 선의 색으로서 컬러명, 16진 코드, rgb(a), hsl(a) 등이 있다.
• border-radius는 테두리의 둥글기 속성이다. length 단위로 지정 가능하다. 퍼센트로 지정하면 타원형을 만들 수도 있다(너비와 높이가 같다면 원도 가능하다). 이 경우 콘텐츠의 내용이 일부 가려질 수 있으니 주의해야 한다. border-radius는 전체, 상하 좌우, 상 우 하 좌로 지정할 수 있다. 각각의 모서리를 지정하는 세부속성(border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius)도 있다.

{border: 1px solid #000;} // 1px 실선 검은색 테두리
{border-left: 2px double silver;}
{border-width: 2px;}

💡 지정한 폭과 높이에 padding과 border 값을 더한 값이 실제 콘텐츠의 크기가 된다.

box-sizing

box-sizing 속성은 박스의 크기 산정 방법을 규정한다. 즉 박스의 지정된 크기(너비나 높이)가 컨텐츠, padding, border 등에서 적용 여부를 결정한다. content-box와 border-box의 값을 지정할 수 있다. 앞으로는 padding-box, outer-box등이 모든 브라우저에서 지원될 예정이나, 아직 css3에서는 사용되지 않는다. content-box는 지정한 너비/높이가 콘텐츠에만 지정되게 하며, border-box는 지정한 크기가 콘텐츠의 크기, padding, border에 모두 적용된다.

위치(배치) 및 레이아웃 관련 속성

배치 및 레이아웃 관련 속성에는 position, left, right, top, bottom, z-index, float, clear 등이 있다. 가급적이면 left, right, top, bottom은 사용하지 않는다. left과 right는 x축의 위치, top과 bottom은 y축, z-index는 z축(층 수, default는 0)의 위치를 결정한다. 각 축 별로 하나만 정의하는 것이 좋다.

position

💡 기본적으로 웹의 모든 요소는 위에서 아래로, 왼쪽에서 오른쪽으로 배치된다. 또한 모든 배치의 기준은 부모를 따라간다.

position(위치 속성)은 현재 선택된 요소를 어떠한 방식으로 배치할지 위치 결정 방식을 지정한다. static ⊕ relative ⊕ absolute ⊕ fixed ⊕sticky의 값을 지정할 수 있다.

• static: 정적 배치이며(natural한 방식), position의 기본 값으로 별도의 position 지정을 하지 않더라도 모든 요소는 static으로 지정되어 있다. 가장 많이 사용한다. 위치 배정은 margin으로 하도록 한다. 가로 방향으로 여러 요소를 배치할 경우는 float 속성을 활용하여 배치하도록 한다.
• relative: 상대적 배치이며, 내부 요소나 형제 요소와 상대적으로 배치할 경우 지정한다. 주로 absolute와 fixed에서 요소를 겹치게 배치할 때 사용한다. 위치 배정은 margin으로 하도록 한다. 가로 방향으로 여러 요소를 배치할 경우는 float 속성을 활용하여 배치하도록 한다. absolute인 내부 요소의 원점을 부모 요소로 하려고 할 경우 활용한다.

💡 요소끼리 겹치게 될 경우 문서상의 순서의 역순으로 쌓인다. static과 relative는 margin으로 위치를 결정하고, absolute와 fixed는 left, right, top, bottom으로 위치를 정한다.

• absolute: x축과 y축에 의해 고정된 절대적인 위치이다. 기본적으로 좌표는 (0, 0)이 default 값이므로, 보통 부모의 값에 relative를 걸어 자식에 absolute를 부여한다. 절대 배치이며, x(가로방향) 축의 위치에 해당하는 left/right 속성과 y(세로 방향)축 위치에 해당하는 top/bottom 속성으로 배치하도록 하고, 가급적 margin을 지양해야 한다. 요소들을 겹치게 배치할 경우 z-index(레이어=층수)의 속성을 지정하고, z-index는 숫자가 클 수록 앞에 배치된다.
• fixed: 스크롤해도 화면에 고정되는 요소가 대표적인 예시다. left, right, top, bottom과 z-index를 부여한다. 화면에 고정시키는 위치 결정 방법으로 eft/right 속성과 y(세로 방향)축 위치에 해당하는 top/bottom 속성으로 배치하도록 하고, 가급적 margin을 지양해야 한다. 요소들을 겹치게 배치할 경우 z-index(레이어=층수)의 속성을 지정하고, z-index는 숫자가 클 수록 앞에 배치된다.
• sticky: fixed와 비슷하지만, 안 보이다가 스크롤할 때 튀어나온다. 거의 사용하지 않는다.

위치 값 지정

• left: 왼쪽에서부터의 위치
• right: 오른쪽에서부터의 위치
• top: 위쪽에서부터의 위치
• bottom: 아래쪽에서부터의 위치

지정 가능한 키워드: auto⊕length

• length는 %, px, pt, pc, cm, mm, in, vw, vmin, vmax 등 지정 가능
• auto는 현재 left 속성 값이 지정이 되어있는 경우 right 속성 값을 변경하려고 할 경우 left를 auto로 하고, right 값을 지정하면 된다.

레이어 설정

• z-index: 레이어(층수)의 위치로써 여러 요소를 겹칠 경우, 어떤 요소를 앞 또는 뒤로 보낼지를 숫자 정수(클 수록 위층)로 지정하여 결정한다. 자동 설정인 경우 auto이다. 만약 z-index의 속성 값을 지정하지 않으면, 먼저 작성된 요소(태그)가 뒷면에 배치되고, 나중에 작성된 요소(태그)가 면에 배치된다. 양의 정수. 음수도 가능은 하다.

흐름 속성

• float(흐름 속성)은 none⊕left⊕right 값을 지정할 수 있다.
• clear(흐름 해제 속성)는 none⊕left⊕right⊕both 값을 지정할 수 있다.
• 클리어 처리: (:after {display: block; clear: both;})

배경 관련 속성

background 속성

background와 관련된 세부 속성에는 -attachment, -blend-mode, -clip, -color, -image, -position, -repeat, -size, -origin 등이 있다. 이 중 -color를 제외한 나머지 속성은 배경 이미지에 대한 속성이다.

• background 통합 속성은 여러 속성을 한꺼번에 지정할 수 있지만, 각 세부 속성의 순서를 지키면서 설정해야 한다. 특히, 위치(position)와 크기(size) 는 필수적으로 순서를 지켜야 한다. position과 size는 같은 length 단위를 쓰므로 사이에 슬래쉬(/)가 들어가야 한다.

background: color image position/size repeat origin clip attachment;

<section class="frame" id="frame_background" style="background: skyblue url(./img/mario_luigi.png) center center/50% no-repeat content-box padding-box scroll;">skyblue url(./img/mario_luigi.png) center center/300px no-repeat content-box padding-box scroll</section>
<section class="frame" id="frame_background2" style="background: radial-gradient(white, skyblue);">radial-gradient</section>

• background-image에서 url의 경로에 영어가 아니거나 띄어쓰기가 있다면 url 경로를 큰 따옴표(””) 안에 적어줘야 한다.

background-image: url(.image/kim.png);
background-image: url(".image/김 기태.png");

• background-position에서 키워드로 적을 경우 가로(landscape) 방향은 left⊕center⊕right 중에, 세로(portrait) 방향은 top ⊕ center ⊕ bottom중에 선택할 수 있다. 특정 숫자로 기입할 경우 0이 아니라면 단위를 반드시 명기해야 한다. 아이콘 리스트 이미지인 경우 -10px과 같이 음수값을 주어, 해당 이미지의 위치 값에 따라 다른 아이콘이 나오게 할 수 있다(split image).

background-position: 수평(landscape) 수직(portrait);
background-position: 0 0;
background-position: center bottom, center center;
backgorund-position: left center;
background-position: 10% 100px;
background-position: -200px -400px;

CSS Sprite 🔗: 여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법

<section class="frame" id="frame_position_1" style="background-position: right top, center bottom">right top, center bottom</section>
<section class="frame" id="frame_position_2" style="background-position: center center, right bottom;">center center, right bottom</section>
<section class="frame" id="frame_position_2" style="background-position: -20px -20px, 70px 110px;">-20px -20px, 70px 110px</section>

• background-size는 auto ⊕ length(%, px 등) ⊕ cover ⊕ contain 을 부여할 수 있다. auto는 이미지 크기 그대로 출력한다. cover는 가로 큰 축(폭이나 높이)에 맞추어 콘텐츠가 잘릴 수 있고, contain은 해당 콘텐츠의 크기에 맞추어 조절한다.

background-size: 가로 세로;
background-size: auto;
background-size: 300px auto, cover;
background-size: 80% auto;

<section class="frame" id="frame_size1" style="background-size: 100px;">100px auto</section>
        <section class="frame" id="frame_size2" style="background-size: cover;">cover</section>
        <section class="frame" id="frame_size3" style="background-size: 30%;">30%</section>

• background-repeat는 no-repeat ⊕ repeat(default로 가로 세로 모두 적용) ⊕ repeat-x(가로 방향만 반복) ⊕ repeat-y(세로 방향만 반복) 값을 지정할 수 있다. 해당 요소의 크기가 배경 이미지의 크기보다 클 경우만 유효하다.

background-repeat: repeat;
background-repeat: no-repeat;
background-repat: repeat-x;

<section class="frame" id="frame_repeat1">repeat</section>
<section class="frame" id="frame_repeat2" style="background-repeat: no-repeat;">no-repeat</section>
<section class="frame" id="frame_repeat3" style="background-repeat: repeat-x;">repeat-x</section>
<section class="frame" id="frame_repeat4" style="background-repeat: repeat-y;">repeat-y</section>

• background-origin은 배경 시작점 속성이다. padding-box(패딩부터 이미지 시작) ⊕ border-box(테두리부터 이미지 시작) ⊕ content-box(콘텐츠부터 이미지 시작) 값을 적용할 수 있다. 배경 이미지가 어디부터 시작할 지를 결정한다.

background-origin: padding-box;

<section class="frame" id="frame_origin1" style="background-origin: padding-box;">padding-box</section>
<section class="frame" id="frame_origin2" style="background-origin:content-box;">content-box</section>
<section class="frame" id="frame_origin3" style="background-origin:border-box;">border-box</section>

• background-clip은 배경 적용 범위 속성이다. padding-box(패딩까지 이미지 표시) ⊕ border-box(테두리까지 이미지 표시) ⊕ content-box(콘텐츠까지 이미지 표시) 값을 적용할 수 있다. 배경 이미지가 어느 영역까지 표시될 지를 결정한다.

background-clip: padding-box;

<section class="frame" id="frmae_clip1" style="background-clip:padding-box;">padding</section>
<section class="frame" id="frmae_clip3" style="background-clip:content-box;">content</section>
<section class="frame" id="frmae_clip2" style="background-clip:border-box;">border</section>

• background-attachment는 배경 이미지 스크롤 속성이다. scroll(배경 이미지는 고정, 내용만 스크롤) ⊕ fixed(배경 이미지 화면에 고정, 노 스크롤) ⊕ local의 값을 부여할 수 있다. 배경 이미지가 마우스 스크롤 시에 스크롤 유무를 결정하는 속성이다. local은 배경을 요소 콘텐츠에 대해 고정된다. 요소에 스크롤이 존재하면 배경은 콘텐츠와 함께 스크롤된다.

background-attachment: fixed, scroll;

<section class="frame" id="frame_attachment1" style="background-attachment:fixed;">fixed</section>
<section class="frame" id="frame_attachment2" style="background-attachment:scroll;">scroll</section>
<section class="frame" id="frame_attachment3" style="background-attachment:local;">local<br><br><br><br><br><br><br><br><br><br><br><br></section>

gradient 그라데이션 속성 값

• linear-gradient: 선형 그라데이션.
• radial-gradient: 원형 그라데이션.
• repeating-linear-gradient와 repeating-radial-gradient도 있다.

background: linear-gradient(방향or각도, 시작색, 끝색);
background-color: radial-gradient(시작색. ..중간색.., 끝색);

filter

filter 속성에는 blur, contrast, grayscale, hue-rotate, drop-shadow 등이 있다.

• blur(px): 이미지에 흐림 효과를 적용한다. 값이 클수록 더 흐리다.
• brightness(%): 이미지의 명도를 조정한다. 200% 등 범위를 벗어나면 대비를 조정한다.
• contrast(%): 이미지의 대비를 조정한다.
• grayscale(%): 이미지를 회색조로 변환한다. 100%가 되면 회색으로 변한다.
• hue-rotate(deg): 0~360도 각도의 색조 회전으로 채도를 바꾼다.
• drop-shadow(x y blur 색상): 이미지에 그림자 효과를 지정한다.
• invert(%): 색상 반전됨. 보색으로 바뀜.
• saturate(%): 색이 날아간 느낌을 준다.
• sepia(%): 오징어 먹물 같은 효과를 준다.

<section class="frame" id="filter1" style="filter:blur(2px);">blur(2px)</section>
<section class="frame" id="filter2" style="filter:brightness(150%);">brightness (150%)</section>
<section class="frame" id="filter3" style="filter:contrast(30%);">contrast(30%)</section>
<section class="frame" id="filter4" style="filter:grayscale(90%);">grayscale (90%)</section>
<section class="frame" id="filter5" style="filter:hue-rotate(40);">hue-rotate(40)</section>
<section class="frame" id="filter6" style="filter:drop-shadow(3px 3px 1px gray);">drop-shadow(3px 3px 1px gray)</section>
<section class="frame" id="filter7" style="filter:invert(30%);">invert (30%)</section>
<section class="frame" id="filter8" style="filter:saturate(10%);">saturate (10%)</section>
<section class="frame" id="filter9" style="filter:sepia(20%);">sepia (20%)</section>

글자/문단 관련 속성

💡 글자/문단 관련 속성은 폰트마다 지원 여부가 다르므로 확인이 필요하다. 사용자 컴퓨터 기준으로 폰트를 기반으로 하면 변동이 심하므로, 요즘에는 서버에서 폰트를 제공한다(서버용 폰트 woff - 맥 용, eot - 윈도우 용).

글자 관련 속성

글자 관련 속성에는 color, font-size, font-weight(소얇대굵), font-stretch(장평), text-transform(대→소, 소→대, 첫 글자 대문자), font-variant(소문자를 소문자 크기의 대문자로 바꿈), font-style(기울어), font-family(글꼴), font-kerning(커서가 놓였을 때 자간) 등이 있다. 또한 서버의 폰트를 임의 폴더에 다운받아 사용하도록 하는 @font-face 속성도 있다.

• color: 컬러명 ⊕ 16진코드 ⊕ rgb(a) ⊕ hsl(a) 의 값을 지정할 수 있다.

Web colors

• font-size(글자 크기): 키워드 ⊕ length 의 값을 지정할 수 있다. 키워드에는 xx-small, x-small, smaller, small(상대적으로 작게), smaller(더 작게), medium, large, x-large, xx-large 등이 있다. length에는 px, em(rem), pt등의 단위가 있다. 키워드를 사용할 경우 브라우저마다 모두 다르므로, 키워드 사용은 지양해야 한다.
• font-weight(두께): 키워드 ⊕ number(100 가늘게 ~900 굵게, 100단위) 등을 지정할 수 있다. 키워드는 bolder, bold, normal, lighter 등이 있다.
• font-stretch(장평): ultra-condensed(가늘게), extra-condensed, condensed, semi-condensed, normal, semi-expanded, extra-expanded, expanded, ultra-expanded 등을 지정할 수 있다.

💡 장평은 한 글자의 가로-세로 크기의 비율로 가로를 기준으로 한다. 한글은 장평을 별로 사용하지 않는데, 영문의 경우 대소문자와 자모음에 따라 크기가 다르므로 장평을 많이 사용한다. 한편, 글자의 세로 간격을 행간(line-height)라 한다.

• font-style(글자 스타일): normal ⊕ italic ⊕ oblique 등이 있다. 기울임 꼴의 유무를 나타내는 속성으로 현재로서는 italic과 oblique는 큰 차이가 없다.
• font-variant(글자 변형): normal ⊕ small-caps 값을 지정할 수 있다. 영문의 경우 대문자와 소문자의 크기가 각각 달라 균일하게 글자 크기나 폭을 지정하기 힘듦으로, 대문자를 소문자 크기로 변형하기 위한 속성이다.
• text-transform(글자 변환): none ⊕ uppercase ⊕ lowercase ⊕ capitalize 값을 부여할 수 있다. 해당 단어나 문장의 영문을 대문자 또는 소문자로 변환할 때 사용한다.
• font-family(글꼴 지정): 1순위폰트 [, 2순위폰트, 3순위_폰트] 값을 부여할 수 있다. 서버에 설치되어 있는 폰트의 이름을 지정하며, @font-face를 사용한다. 만약 폰트의 이름 중간에 공백이 있거나, 영문이 아닌 경우 반드시 인용부호(’’, “”)로 감싸서 표기해야 한다. 만약 1순위 폰트가 존재하지 않을 경우 2순위가 적용되고, 마찬가지로 2순위도 없는 경우 3순위가 적용된다. 따라서 3순위는 웹 브라우저 기본 폰트로 지정해야 한다. 2순위, 3순위는 생략할 수 있지만 사용하는 것을 권장한다. 브라우저가 제공하는 기본 폰트는 해당 서버나 클라이언트에 설치가 되어 있지 않아도 자동 제공된다. 기본 폰트에는 serif(명조), sans-serif(고딕), cursive(궁서), monospace(장평이 100%인 폰트), fantasy(디자인)가 있다.
  • 구글 폰트(https://fonts.google.com/)와 다폰트(http://dafont.kr/), 눈누(https://noonnu.cc/)가 있다.
• font-kerning(커서 위치의 자간): auto ⊕ normal ⊕ none 값을 부여할 수 있다. 특이하게도 initial, inherit 값이 없다.

문단 관련 속성

문단 관련 속성에는 letter-spacing(특정 범위의 자간), line-height(행간), word-spacing(어간), text-align, text-indent(들여쓰기), text-decoration, text-justify, text-orient, text-overflow, white-space, word-break 등이 있다.

• letter-spacing(자간): normal ⊕ length 값을 부여할 수 있다. 해당 요소 안의 글자와 글자 사이의 간격을 설정한다.
• word-spacing(어간): normal ⊕ length 값을 부여할 수 있다. 단어와 단어 사이의 간격을 설정한다.
• line-height(행 높이): normal ⊕ number(=em 단위) ⊕ length 값을 부여할 수 있다. 블록 요소에만 사용 가능하다. number로 기재할 경우 현재 문단의 글자 크기의 배수가 된다. length를 사용하는 경우 해당 단위의 크기만큼 행 높이가 설정된다. 기본 행 높이는(1.3배)
• text-align(문단 정렬): left(기본 값) ⊕ right ⊕ center ⊕ justify(배분/나눔 정렬) 값을 부여할 수 있다. 문단의 가로 방향에 대한 정렬을 설정한다.
• text-indent(들여쓰기, 내어쓰기): length(px, %, pt 등) 값을 부여한다. 들여쓰기(양수)는 다른 줄에 비해 첫 번째 줄이 더 들어가게 만드는 것이며, 내어쓰기(음수)는 첫 번째 줄이 더 나오게 만드는 것이다.
• text-decoration: none ⊕ underline(밑줄) | overline(윗줄) | line-through(취소선) 등의 값을 부여할 수 있다. none을 제외한 다른 값은 중복해서 사용할 수 있다. 다음과 같은 세부 속성을 가진다.
  • text-decoration-color(줄의 색)
  • text-decoration-line: underline | overline | line-through
  • text-decoration-style(줄의 종류): solid ⊕ wave ⊕ double ⊕ dotted ⊕ dashed 등이 있다.

text-decoration: overline underline;
text-decoration: underline double #369, overline wave #c00;

• text-justify: auto(영문 default) ⊕ none(한글 default) ⊕ inter-character ⊕ inter-word(단어 기준 배분 정렬) 값을 부여할 수 있다. 단어 또는 글자 단위로 한 줄의 데이터를 분량을 똑같이 배분 정렬할 수 있는 속성
• text-orientation: mixed ⊕ upright(위에서 오른쪽으로) ⊕ sideways(쏠림) ⊕ sideways-right ⊕ use-glyph-orientation(호환성 낮음)
• text-overflow(글자 흘러 넘침): clip ⊕ ellipsis(…) ⊕ 특정_문자 값을 부여할 수 있다. 단, text-overflow는 overflow:hidden이며, white-space: nowrap인 경우에만 유효하다.

내용 보호/줄 끝 처리

• white-space: normal ⊕ nowrap ⊕ pre(자연 그대로, 줄바꿈 안 됨) ⊕ pre-line(자동 줄바꿈만) ⊕ pre-wrap(줄 바꿈과 개행 인식) 값을 부여할 수 있다. 하나의 단어가 한 줄에 입력되어야 하므로, 한 줄에 단어 하나 배치, 영문배치문법 무시 후 단어 중간에서 자르기, 하나의 문장을 한 줄로만 표시 또는 문장의 줄 끝을 어떻게 처리할 지 정하는 속성이다.
• word-break(단어 처리): normal ⊕ break-all ⊕ keep-all ⊕ break-word 값을 부여할 수 있다. 한 줄 또는 한 문장 안에서의 단어의 끝 처리 부분을 어떻게 할지 정하는 속성

기타 속성

list-style

list-style은 메뉴나 목록의 기호를 표시하는 속성이다. type | position | image 등의 값을 부여할 수 있다.

list-style: type position image;

list-style의 세부 속성은 다음과 같다.

• list-style-type: none(default) ⊕ disc(ul의 default) ⊕ circle ⊕ square ⊕ decimal(ol의 default) ⊕ armenian ⊕ georgian ⊕ hebrew ⊕ hiragana ⊕ katakana ⊕ lower-alpha ⊕ lower-greek ⊕ lower-latin ⊕ lower-roman ⊕ upper-alpha ⊕ upper-greek ⊕ upper-latin ⊕ upper-roman ⊕ cjk-ideographic 등의 값을 부여할 수 있다. li 요소에 표시되는 목록 기호로 부모 요소가 ol인 경우는 숫자가 순서대로 앞에 표기되고, ul인 경우는 disc가 앞에 표시된다.
• list-style-position: inside ⊕ outside
• list-style-image: none ⊕ url(”파일 경로 및 이름”) 값을 부여할 수 있다. 목록 기호가 들어갈 자리에 이미지를 표시된다. 파일 경로나 이름은 ”큰따옴표”나 ‘작은따옴표’로 묶을 수 있으며, 파일명에 공백이나 영어를 제외한 문자가 들어간 경우 반드시 사용해야 한다.

<style>
	#li_style_image{list-style-image: url("./img/yoshi.cur");}
</style>

...

<ul id="list-style">
	<li id="li_style_type1" style="list-style-type: disc;">disc</li>
	<li id="li_style_type2" style="list-style-type: circle;">circle</li>
	<li id="li_style_type3" style="list-style-type: square;">square</li>
	<li id="li_style_type4" style="list-style-type: decimal;">decimal</li>
	<li id="li_style_type5" style="list-style-type: armenian;">armenian</li>
	<li id="li_style_type6" style="list-style-type: georgian;">georgian</li>
	<li id="li_style_type7" style="list-style-type: hebrew;">hebrew</li>
	<li id="li_style_type8" style="list-style-type: hiragana;">hiragana</li>
	<li id="li_style_type9" style="list-style-type: katakana;">katakana</li>
	<li id="li_style_type10" style="list-style-type: lower-alpha;">lower-alpha</li>
	<li id="li_style_type11" style="list-style-type: lower-greek;">lower-greek</li>
	<li id="li_style_type12" style="list-style-type: lower-latin;">lower-latin</li>
	<li id="li_style_type13" style="list-style-type: lower-roman;">lower-roman</li>
	<li id="li_style_type14" style="list-style-type: upper-alpha;">upper-alpha</li>
	<li id="li_style_type15" style="list-style-type: upper-greek;">upper-greek</li>
	<li id="li_style_type16" style="list-style-type: upper-latin;">upper-latin</li>
	<li id="li_style_type17" style="list-style-type: upper-roman;">upper-roman</li>
	<li id="li_style_type18" style="list-style-type: cjk-ideographic;">cjk-ideographic</li>
	<li id="li_style_position" style="list-style-position: inside;"> list position inside</li>
	<li id="li_style_position" style="list-style-position: outside;"> list position outside</li>
	<li id="li_style_image">list-style-image</li>
</ul>

마우스 포인터 🔗

• cursor: none ⊕ alias ⊕ all-scroll ⊕ auto ⊕ cell ⊕ col-resize(↔) ⊕ context ⊕ copy ⊕ crosshair ⊕ default ⊕ e-resize ⊕ n-resize ⊕ s-resize ⊕ w-resize ⊕se-resize ⊕ ns-resize ⊕ew-resize ⊕ ne-resize ⊕ nwse-resize ⊕ grab ⊕ grabbing ⊕ help ⊕move ⊕ no-drop ⊕ not-allowed ⊕ pointer ⊕ progress ⊕ row-resize ⊕ url(”파일 경로 및 이름”) ⊕ zoom-in ⊕ zoom-out ⊕ text 등의 값을 부여할 수 있다. 해당 요소의 영역에 마우스 포인터가 위치하면, 그 마우스 포인터 모양을 지정할 수 있는 속성이다.

<style>
	#li_mouse23 {cursor: url("./img/yoshi.cur") 20 30, pointer;}
</style>

...

<ul id="mouse">
      <li id="li_mouse1" style="cursor: alias;">alias</li>
      <li id="li_mouse2" style="cursor: all-scroll;">all-scroll</li>
      <li id="li_mouse3" style="cursor: auto;">auto</li>
      <li id="li_mouse4" style="cursor: cell;">cell</li>
      <li id="li_mouse5" style="cursor: col-resize;">col-resize</li>
      <li id="li_mouse6" style="cursor: row-resize;">row-resize</li>
      <li id="li_mouse7" style="cursor: nwse-resize;">nwse-resize</li>
      <li id="li_mouse8" style="cursor: context;">context</li>
      <li id="li_mouse9" style="cursor: copy;">copy</li>
      <li id="li_mouse10" style="cursor: crosshair;">crosshair</li>
      <li id="li_mouse11" style="cursor: default;">default</li>
      <li id="li_mouse12" style="cursor: grab;">grab</li>
      <li id="li_mouse13" style="cursor: grabbing;">grabbing</li>
      <li id="li_mouse14" style="cursor: help;">help</li>
      <li id="li_mouse15" style="cursor: move;">move</li>
      <li id="li_mouse16" style="cursor: no-drop;">no-drop</li>
      <li id="li_mouse17" style="cursor: not-allowed;">not-allowed</li>
      <li id="li_mouse18" style="cursor: pointer;">pointer</li>
      <li id="li_mouse19" style="cursor: progress;">progress</li>
      <li id="li_mouse20" style="cursor:zoom-in;">zoom-in</li>
      <li id="li_mouse21" style="cursor: zoom-out;">zoom-out</li>
      <li id="li_mouse22" style="cursor: text;">text</li>
      <li id="li_mouse23">img</li>
  </ul>

그림자 속성

shadow에는 text-shadow, box-shadow 가 있다. 텍스트나 박스의 외부(default) 또는 내부(inner) 그림자를 지정할 수 있다. 이때 그림자는 크기 속성에 포함되지 않으므로 아무리 크더라도 영역을 차지하지 않는다.

text-shadow: x-len y-len blur-len color;
box-shadow: x-len y-len blur-len spread-len color;

• x에 양의 값을 입력하면 그림자의 방향은 오른쪽, 음의 값을 입력하면 그림자의 방향은 왼쪽이 된다.
• y에 양의 값을 입력하면 그림자의 방향은 아래, 음의 값을 입력하면 그림자의 방향은 위쪽이 된다.
• x y blur color의 양을 여러 단계에 걸쳐 값을 지정하면, 입체 모양의 그림자가 표시된다. 또한 text-shadow나 box-shadow의 x, y, blur는 px 또는 pt 단위로 기재한다. 또한 box-shadow의 spread 또한 px, pt 단위이며 생략 가능하다.

<link href="https://fonts.googleapis.com/css2?family=Diphylleia&display=swap" rel="stylesheet">
<style>
#shadow p{font-size:40px; font-weight: bolder; margin:20px; font-family: "Diphylleia", serif;}
#shadow section{display:inline-block; margin: 10px; width: 100px; height: 40px; border: 1px solid gray; padding: 10px;}
#shadow_neon {text-shadow: 0 0 2px white, 0 0 10px #ff00de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; color: white; background-color: black;}
#shadow_blank {text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; color: white}
</style>
...
<div id="shadow">
        <p id="shadow1" style="text-shadow:10px 10px 1px rgba(128, 128, 128, 0.281);">Text-Shadow1</p>
        <p id="shadow2" style="text-shadow:-10px -10px 3px rgba(128, 128, 128, 0.281);">Text-Shadow2</p>
        <p id="shadow3" style="text-shadow: 3px 3px 1px rgba(16, 187, 235, 0.653), 4px 4px 2px rgba(16, 187, 235, 0.653); text-decoration: underline wavy; color: skyblue;">Text-Shadow3</p>
        
        <p id="shadow_neon">Text-Shadow-NEON</p>

        <p id="shadow_blank">Text-Shadow-Blank</p>

        <section id="shadow1" style="box-shadow: 10px 10px 1px rgba(128, 128, 128, 0.281);">box-shadow1</section>
        <section id="shadow2" style="box-shadow:-10px -10px 1px rgba(128, 128, 128, 0.281);">box-shadow2</section>
        <section id="shadow3" style="box-shadow:10px 10px 1px 15px rgba(128, 128, 128, 0.281);">box-shadow3</section>
  </div>

공백 채우기

• Loren Ipsum 🔗
• Korean Loren Ipsum 🔗

색

• 명도 대비 - 그라데이션 🔗
• color picker - 단색 🔗