웹스토리보이

CSS(Cascading Style Sheets)는 HTML로 작성된 문서를 쓰기 위한 스타일 시트 언어입니다.

HYML은 문서의 골격을 이룬다면, CSS는 그 골격에 맞는 디자인 작업 언어라고 생각하면 됩니다.

CSS 선택자를 통해 요소를 선택하고 속성을 줄 수 있습니다.

id 선택자와 class선택자

id 선택자
1. 하나의 태그만 식별하기 위한 선택자입니다.
2. 하나의 태그에서 하나만 사용할 수 있습니다.
3. "#"으로 표시합니다.
class선택자
1. 여러개의 태그를 식별하기 위한 선택자입니다.
2. 하나의 태그에서 여러 개를 사용할 수 있습니다.
3. "."으로 표시합니다.

속성 선택자

종류	예시	이름
[name]	a[href]	a 태그 속성 중에 href가 있으면 선택합니다.
[name="value"]	a[href="#header"]	a 태그 href 속성의 값이 '#header'이면 선택합니다.
[name~="value"]	a[href~="web"]	a 태그 href 속성의 값이 'web'을 포함한 요소를 선택합니다.
[name\|="value"]	a[href\|="web"]	a 태그 href 속성의 값이 'web'이거나 'web'으로 시작하는 요소를 선택합니다.
[name^="value"]	a[href^="web"]	a 태그 href 속성의 값이 'web'으로 시작하는 태그를 선택합니다.
[name*="value"]	a[href*="web"]	a 태그 href 속성의 값이 'web'이 포함되어 있는 태그를 선택합니다.
[name$="value"]	a[href$="com"]	a 태그 href 속성의 값이 'com'으로 끝나는 태그를 선택합니다.

가상 요소

종류	예시	이름
::first-line	p:first-line {color:#fff;}	문단의 첫 줄에 컬러색을 하얀색으로 변경합니다.
::first-letter	p:first-letter {color:#fff;}	문단의 첫 글자에 컬러색을 하얀색으로 변경합니다.
::before	p:before {content:"시작"}	문단 시작 부분에 '시작'이라는 요소를 추가합니다.
::after	p:after {content:"끝"}	문단 끝 부분에 '끝'이라는 요소를 추가합니다.
::selection	p:selection {color:#fff;}	드래그로 선택하였을 경우 글씨 색을 하얀색으로 변경합니다.

가상 클래스

종류	예시	이름
:first-child	li:first-line {color:#fff;}	li 자식 요소 중 첫 번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:last-child	li:last-line {color:#fff;}	li 자식 요소 중 마지막 번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:first-of-type	p:first-of-type {color:#fff;}	자식 요소 중 p 태그 첫 번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:last-of-type	p:last-of-type {color:#fff;}	자식 요소 중 p 태그 마지막 번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:nth-child()	li:nth-child(2) {color:#fff;}	li 자식 요소 중 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:nth-last-child()	li:nth-last-child(2) {color:#fff;}	li 자식 요소 중 뒤에서 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:nth-of-type()	p:nth-of-type(2) {color:#fff;}	자식 요소 중 p 태그 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:nth-last-of-type()	p:nth-last-of-type(2) {color:#fff;}	자식 요소 중 p 태그 뒤에서 2번째 자식 요소에게 컬러를 하얀색으로 변경합니다.
:only-child	:only-child {color:#fff;}	자식 요소 중 유일한 태그 자식 요소에게 컬러를 하얀색으로 변경합니다.	CSS3
:only-of-type	p:only-of-type {color:#fff;}	자식 요소 중 유일한 p 태그 자식 요소에게 컬러를 하얀색으로 변경합니다.	CSS3
:not()	li:not(:nth-child(2)) {color:#fff;}	li 자식 요소 중 2번째 자식 요소를 제외하고 컬러를 하얀색으로 변경합니다.
:root	:root {color:#fff;}	기본 루트 요소의 컬러를 하얀색으로 변경합니다.
:empty	:empty {color:#fff;}	컨텐츠 요소가 없는 요소의 컬러를 하얀색으로 변경합니다.

링크 가상 클래스

종류	예시	이름
:link	a:link {color:#fff;}	방문하지 않는 링크의 글씨 색을 하얀색으로 설정합니다.
:visited	a:visited {color:#fff;}	방문한 링크의 글씨 색을 하얀색으로 설정합니다.
:hover	a:hover {color:#fff;}	링크 위에 마우스를 올려 놓았을 경우 글씨 색을 하얀색으로 설정합니다.
:active	a:active {color:#fff;}	링크가 활성화되었을 경우 글씨 색을 하얀색으로 변경합니다.

폼 관련 선택자

종류	예시	이름
:checked	input:checked {color:#fff;}	input 태그가 체크되었을 때 글씨 색을 하얀색으로 변경합니다.
:focus	input:link {color:#fff;}	input 태그에 초점이 맞추어졌을 때 글씨 색을 하얀색으로 변경합니다.
:enabled	input:enabled {color:#fff;}	input 태그가 사용 가능하면 글씨 색을 하얀색으로 변경합니다.
:disabled	input:disabled {color:#fff;}	input 태그가 사용 가능하지 않으면 글씨 색을 하얀색으로 변경합니다.

CSS를 통해 색상을 표현하는 방법은 16진수,색상이름, RGBA, HSLA 표기법이 있습니다.

RGB모드

RGB Color모드는 빛의 삼원색인 "빨강,초록,파랑" 을 섞어 색을 만듭니다. 색을 섞을수록 점점 밝아지므로 '가산 혼합'이라 부릅니다. 모니터 화면용 작업 (프레젠테이션,웹디자인 등)에서 기본적으로 사용하는 색상 모드입니다.

CMYK모드

CMYK Color모드는 "시안,마젠타,노랑,검정"의 원색을 섞어서 색상을 만듭니다. 물감처럼 색을 섞을수록 점점 어두어지므로 '감산 흔합'이라 부릅니다. 출력용 이미지를 작업할떄는 CMYK 색상 모드에서 작업해야 합니다.

16진수 표기법

웹 문서에서 색상을 표현하는 방법은 16진수 로 표현하는 방법입니다. 두자리씩 묶어서 #RRGGBB형식으로 표현하며, RR는 빨간색, GG는 초록색, BB는 파란색의 양을 표현합니다. 각 색상이 하나도 섞이지 않았음은 00부터 가득 섞여음은 FF까지 사용할 수 있습니다.

색상이름 표기법

색상 이름을 이용하여 색을 표현할 수 있습니다. 가장 기본적인 16가지를 포함하여 216가지의 색상 이름 표기법이 있습니다.

RGB와 RGBA 표기법

웹 문서에서 색상을 표현하는 RGB(255,255,255)는 십진수를 이용하여 포현합니다. 색이 하나도 섞이지 않았을 떄에는 0으로 표시하고, 가득 섞였을 떄에는 255로 표현합니다. 숫자는 색상의 양을 나타내고 a는 투명도(Alpha)를 나타냅니다. 투명도는 0과 1사이로 표현합니다.

HSL와 HSLA 표기법

웹 문서에서 색상을 표현하는 HSL은 색상(HUE), 채도(saturation), 밝기(lightness)를 나타냅니다. 색상은 둥글게 배치한 색상환으로 표시하고 0도와 360도에는 빨간색, 120도에는 초록색, 240도에는 파란색이 배치됩니다. 채도가 0%이면 회색톤, 100%이면 순색으로 표시됩니다. 밝기는 0%에서는 가장 어둡고 100%에서는 가장 밝습니다.

HTML 문서에 스타일을 선언하는 방법은 3가지가 있습니다.

내부 스타일(Internal Style Sheet) : head 태그 안에 선언하는 방법
외부 스타일(External Style Sheet) : 외부 파일로 연결하는 방법
인라인 스타일(Inline Style Sheet) : 태그에 직접 연결하는 방법

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <!-- 내부 스타일 -->
    <style>
        h1 {color: #fff;}
    </style>
    
    <!-- 외부 스타일 -->
    <link rel="stylesheet" href="경로">
</head>
<body>
    <!-- 인라인 스타일 -->
    <h1 style="color: #fff"></h1>
</body>
</html>

float을 쓰게되면 영역의 높이 값을 0으로 줄어들기 떄문에 영역을 유지하는 방법이 필요합니다.

꺠지는 영역에 똑같이 float:left를 사용합니다. - 모든 영역에 float을 사용하게 되고, 레이아웃이 복잡하면 정확이 어디가 꺠지는지 알 수가 없습니다.
float의 성질을 차단하는 clear:both를 사용합니다. - 레이아웃이 복잡해지면 어디가 꺠지는지 알 수가 없습니다.
float을 사용하여 부모 박스 영역에 overflow:hidden를 사용합니다.
가상요소 clearfix 만들어서 영역 깨짐 현상을 막아줍니다.

상대주소는 컴터파일 주소를 뜻하고, 절대주소는 인터넷 하이퍼 링크를 뜻합니다.

상대주소

상대주소는 이미지를 삽입할 HTML 문서를 기준으로 경로를 인식하는 방법입니다.

이미지 파일이 HTML 문서와 같은 폴더에 있는지, 상위 폴더에 있는지, 하위 폴더에 있는지를 따져보고 경로를 지정해줘야 합니다.

HTML 문서와 이미지 파일이 같은 폴더에 저장되어 있다면 이미지 파일명만 적어주면 되므로 문제가 되지 않습니다.

하위폴더로 이동하는 방법은 하위폴더명를 적어주고 슬래쉬(/)를 입력해 주면 됩니다.

절대주소

이미지의 절대적인 경로로 지정하는 방식입니다.

절대주소는 고유한 경로입니다. 위의 예처럼 http://가 포함되어 있는 절대주소를 경로명만 웹브라우저 주소줄에 입력해도 그 이미지가 그대로 나옵니다.

보통 홈페이지 제작시 자신의 컴퓨터에서 HTML 문서를 만들고 이를 FTP를 통해서 웹서버에 일괄적으로 올립니다. 이런 경우 절대주소로 이미지를 삽입했다면 모두 고쳐줘야 하는 불편이 있습니다.

일반적으로 절대경로보다는 상대경로를 이용해서 이미지를 삽입하는게 좋습니다.

웹 문서에 이미지를 표현하는 방법은 img태그와 background를 통해 설정할 수 있습니다.

img태그를 표현하는 방법 : 이미지에 의미가 있는 경우(로고,배너)
background로 표현하는 방법 : 이미지에 의미가 없는 경우(배경,장식)

img태그로 이미지 표현하기

background태그로 이미지 표현하기 (대체문자를 표현 X)

이미지 스프라이트를 이용한 이미지 표현 (대체문자를 표현 X)

아이콘 또는 장식을 위한 이미지 요소들은 스프라이트 기법을 활용하여 파일의 사이즈를 최소화하고 효울성을 높일 수 있습니다.

여러번의 서버 요청을 한번으로 줄일 수 있습니다.
이미지 수정이나 관리가 간편해집니다.
웹 접근성을 준수하기 위해서는 IR 효과를 설정해야 합니다.

IR(Iamge Replacement)기법은 이미지 대체 텍스트를 제공하기 위한 CSS 기법으로 다양한 기법을 사용하여 이미지 대체 텍스트를 제공할 수 있습니다.

Phark Method

의미 있는 이미지의 대체 텍스트를 제공하는 경우 : 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로 빼내어 보이지 않게 하는 방법

PWA IR

의미 있는 이미지의 대체 텍스트로 이미지를 off시에도 대체 텍스트를 보여주고자 할 때 : 이미지로 대처할 엘리먼트에 배경이미지를 설정하고 글자는 span태그로 감싼 후 z-index: -1을 이용하여 화면에 안보이게 처리하는 방법

Screen Out

대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 사용합니다.

프로젝트 종류에 따라 여러가지 이미지 타입을 사용할 수 있습니다.

종류	PC Web	Mobile Web	Mobile App	투명효과	용량	애니메이션
GIF	O	O	X	△	저	O
JPG	O	O	X	X	중	X
PNG-8	X	O	△	△	저	X
PNG-24	△	O	O	O	고	X
SVG	O	O	O	O	저	O

GIF : GIF 는 이미지를 저장해도 데이터가 손실 되지 않는 무손실 압축을 사용합니다. 파일 사이즈는 BMP보다 적은데, 좋은 압축 알고리즘을 사용하기 때문입니다. 하지만 Indexed color 속성을 가지고 있어서 최대 256가지의 컬러로만 저장 할 수 있습니다.
JPG : JPEG 이미지는 인간의 눈으로 확인 할 수 없는 정보를 제거하는 방법으로 디테일한 사진 이미지를 가능한한 작게 만들어 놓은 압축된 디자인 파일입니다. 색이 많이 들어가거나 화려한 이미지는 JPG로 표현합니다.
PNG-8 : PNG는 새로운 포맷입니다. PNG-8은 GIF의 대체품으로 좋은데요. 슬프게도 문제점이 있어요. 첫번째는 GIF같이 에니메이션을 지원하지 않는점입니다.(파이어폭스에서는 지원되는 데, 거의 모든 브라우저에서 해당 포맷의 에니메이션이 지원되지 않습니다.) 두번째는 IE6같은 오래된 브라우저에서 지원 문제가 있습니다. 세번째는, 포토샵같은 중요한 소프트웨어에서 이 포맷을 구현하기가 어렵다는 점입니다. PNG-8은 GIF와 같이 256 색상으로만 저장이 되고, PNG-8이 GIF보다 더 나은 점은 Alpha Transparency를 지원하는 점이라고 할까요.
PNG-24 : JPEG처럼 수천가지의 컬러를 가지면서 무손실 압축인 훌륭한 포맷입니다.
SVG

컨텐츠 요소를 보이지 않게 하는 방법은 display, opacity, visibility등이 있습니다.

종류	반대	영역	애니메이션
`display:none`	`display:block`	영역 사라짐	X
`visibility:hidden`	`visibility:visible`	영역 유지	X
`opacity:0;`	`opacity:1;`	영역 유지	0

출력 장치의 여러 특징 가운데 일부를 참조하여 CSS 코드를 분기 처리함으로써 하나의 HTML 소스가 여러가지 뷰를 갖도록 구현할 수 있는 명세이다. 일반적으로 뷰포트 해상도에 따라 CSS 코드를 분기한다.

@media only all and (조건문) {실행문}

@media: 미디어 쿼리가 시작됨을 선언한다. @media, only, all, and, (조건문) 사이에 포함되어 있는 공백은 필수적이다.
only: only 키워드는 미디어 쿼리를 지원하는 사용자 에이전트만 미디어 쿼리 구문을 해석하라는 명령이며 생략 가능하다. 생략했을 때 기본 값은 only로 처리 된다. 생략해도 무방하므로 이 키워드는 일반적으로 작성하지 않는다. 이 자리에는 not 키워드를 사용할 수 있는데 뒤에 오는 모든 조건을 부정하는 연산을 한다.
all: all 키워드는 미디어 쿼리를 해석해야 할 대상 미디어를 선언한 것이다. all 이면 모든 미디어가 이 구문을 해석해야 한다. all 키워드 대신 screen 또는 print와 같은 특정 미디어를 구체적으로 언급할 수도 있다. all 키워드는 생략 가능하고 생략했을 때 기본 값은 all 으로 처리된다. 이 밖에도 다양한 미디어 타입(all, aural, braille, embossed, handheld, print, projection, screen, speech, tty, tv)이 있다. all, screen, print를 가장 널리 쓴다.
and: and 키워드는 논리적으로 ‘AND’ 연산을 수행하여 앞과 뒤의 조건을 모두 만족해야 한다는 것을 의미한다. 조건이 유일하거나 또는 only, all과 같은 선행 키워드가 생략되면 and 키워드는 사용하지 말아야 한다. and 대신 콤마 , 기호를 사용하면 ‘OR’ 연산을 수행한다. ‘OR’ 연산은 나열된 조건 중에서 하나만 참이어도 {실행문}을 해석한다.
(조건문): 브라우저는 조건문이 참일때{실행문}을 처리하고 거짓일 때 무시한다. 조건문은 두 가지 이상 등장할 수 있다. 둘 이상의 조건문은 and 키워드 또는 콤마 , 기호로 연결해야 한다.
{실행문}: 일반적인 CSS 코드를 이 괄호 안에 작성한다. 브라우저는 (조건문)이 참일때 실행문 안쪽에 있는 CSS 코드를 해석한다.

조건문이 될 수 있는 특징들

속성	설명
width / height	뷰포트의 너비와 높이. 뷰포트의 크기는 HTML body 콘텐츠를 표시하는 영역으로 실제 스크린의 크기와는 다르다. 반응형 웹 구현시 가장 일반적으로 사용하는 조건이 된다.
device-width / device-height	스크린의 너비와 높이. 스크린은 출력 장치가 픽셀을 표시할 수 있는 모든 영역으로 일반적으로 HTML body 콘텐츠를 표시하는 뷰포트 보다 크다.
orientation	뷰포트의 너비와 높이 비율을 이용하여 세로 모드인지 가로 모드인지를 판단한다.
aspect-ratio	뷰포트의 너비와 높이에 대한 비율. ‘너비/높이’ 순으로 조건을 작성한다. min/max 접두사를 사용하면 너비 값의 최소/최대 비율을 정할 수 있다.
device-aspect-ratio	스크린의 너비와 높이에 대한 비율. ‘너비/높이’ 순으로 조건을 작성한다. min/max 접두사를 사용하면 너비 값의 최소/대최 비율을 정할 수 있다.
color	출력 장치의 색상에 대한 비트 수. 출력 장치가 컬러가 아닌 경우 0의 값에 대응한다.
color-index	출력 장치가 색상 색인 테이블을 사용하는 경우 표현할 수 있는 색의 수. 출력 장치가 색상 색인 테이블을 사용하지 않으면 0의 값에 대응한다. 현재 제대로 지원하는 브라우저가 없다.
monochrome	출력 장치가 흑백인 경우 픽셀당 비트 수. 출력 장치가 흑백이 아니라면 0의 값에 대응한다.
resolution	출력 장치의 해상력에 대응한다. min/max 접두사는 사각형 아닌 픽셀(인쇄 장치)에도 대응하지만 접두사 없는 resolution 조건은 사각형 픽셀에만 대응한다. 조건의 값으로 dpi와 dpcm 단위를 사용할 수 있다.
scan	TV의 스캔 방식에 따라 대응한다. progressive 값은 초당 60회 수준의 고화질 스캔에 대응하고 interlace 값은 초당 30회 수준의 일반 스캔에 대응한다. 대부분의 HDTV는 progressive와 interlace 방식을 모두 지원하고 있다.
grid	출력 장치가 그리드 방식이면 대응한다. 그리드 방식은 타자기와 같이 고정된 글꼴만 사용하는 장치이다. 통상 출력 장치는 비트맵이 아니면 그리드 방식이다. 값은 정수 0과 1 뿐이고 0의 값은 비트맵 방식에 대응한다.

반응형을 작업할 때 어떤 요소를 가운데 오게 하는 방법은 상당히 중요하고 방법도 여러가지가 있습니다.

가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다.

부모요소(인라인구조) : text-align : center; line-height: (height값과 동일하게)
요소(블록구조) : margin:0 auto; line-height: (height값과 동일하게)

요소의 성질을 table로 변환시켜서 가운데 정렬을 하는 방법이지만 table자체를 레이아웃에 많이 사용하지 않기 때문에 잘 쓰지 않는 방법입니다.

부모요소 : display:table;
자식요소 : display:table-cell, text-align:center; vertical-align:middle;

절대 요소를 이용한 가운데 정렬방법이며, 제일 흔하게 쓰이지만 단점은 영역이 없어지는 것이 단점이어서 반응형을 할 때 사용하기 불편한 점이 있습니다.

부모요소 : position:relative;
자식요소 : position:absolute; top:50%; left: 50%; margin-top:-(자식 요소 높이값의 반); margin-left:-(자식 요소 가로값의 반);

만약 자식요소의 가로값과 세로 값을 모르고 유동적인 경우에 절대 요소를 사용하여 가운데로 오는 정렬방법입니다.

부모요소 : position:relative;
자식요소 : position:absolute; top:50%; left: 50%; transform:translate(-50%, -50%);

절대 요소를 이용한 가운데 정렬 방법이지만 흔하게 쓰이지는 않습니다.

부모요소 : position:relative;
자식요소 : position:absolute; top:0; left:0; top:0; right:0; margin: auto;

CSS3를 이용한 방법이지만 최신 브라우저 이외에서는 작동하지 않는 단점이 있지만 표준화 된다면 앞으로 많이 쓰일 방법입니다.

부모요소 : height 값 설정
자식요소 : display: flex; justify-content: center; align-items: center;

margin 속성은 요소의 바같쪽 여백을 설정합니다.

margin-top: 10px; 요소의 위쪽 바깥 여백을 설정
margin-right: 11px; 요소의 오른쪽 바깥 여백을 설정
margin-bottom: 12px; 요소의 아래쪽 바깥 여백을 설정
margin-left: 13px; 요소의 왼쪽 바깥 여백을 설정
margin: 10px 11px 12px 13px; 요소의 위쪽/오른쪽/아래쪽/왼쪽 바깥 여백을 설정
margin: 10px 11px 12px; 요소의 위쪽(10px)/왼쪽,오른쪽(11px)/아래쪽(12px)
margin: 10px 11px; 요소의 위쪽,아래쪽(10px)/왼쪽,오른쪽(11px)
margin: 10px; 요소의 위쪽/오른쪽/아래쪽/왼쪽(10px)
margin: auto; 자동값 또는 기본값 또는 초기값
margin: 0 auto;블록 구조를 가운데 정렬할 때 사용

padding 속성은 요소의 안쪽 여백을 설정합니다.

padding-top: 10px; 요소의 위에 안쪽 여백을 설정
padding-right: 11px; 요소의 오른쪽 안쪽 여백을 설정
padding-bottom: 12px; 요소의 아래쪽 안쪽 여백을 설정
padding-left: 13px; 요소의 왼쪽 안쪽 여백을 설정
padding: 10px 11px 12px 13px; 요소의 위쪽/오른쪽/아래쪽/왼쪽 안쪽 여백을 설정
padding: 10px 11px 12px; 요소의 위쪽(10px)/왼쪽,오른쪽(11px)/아래쪽(12px)
padding: 10px 11px; 요소의 위쪽,아래쪽(10px)/왼쪽,오른쪽(11px)
padding: 10px; 요소의 위쪽/오른쪽/아래쪽/왼쪽(10px)

width 속성은 요소의 가로 값을 설정합니다.

width: 10px
width: auto자동값 또는 초기값

hight 속성은 요소의 세로 값을 설정합니다.

height: 10px
height: auto자동값 또는 초기값

text-align 속성은 택스트의 정렬 방식을 설정합니다.

text-align: left왼쪽 정렬
text-align: right오른쪽 정렬
text-align: center가운대 정렬
text-align: justify양쪽 정렬

font 속성은 폰트의 다양한 속성을 설정합니다.

font
fotn-family
fotn-size
fotn-size-adiust
fotn-stretch
fotn-style
fotn-variant
fotn-weight
@fotn-face

line-height 속성은 줄 높이를 설정합니다.

line-height: normal웹브라우저에서 정한 기본값입니다. 보통 1.2입니다.
line-height: length길이로 줄 높이를 정합니다.
line-height: number글자 크기의 몇 배인지로 줄 높이를 정합니다.
line-height: percentage글자 크기의 몇 %로 줄 높이로 정합니다.
line-height: initial기본값으로 설정합니다.
line-height: inherit부모 요소의 속성값을 상속받습니다.

text-transform 속성은 대문자로 또는 소문자로 바꾸는 속성입니다.

text-transform: none입력된 그대로 출력합니다.
text-transform: capitalize단어의 첫번째 글자를 대문자로 바꿉니다.
text-transform: uppercase모든 글자를 대문자로 바꿉니다.
text-transform: lowercase모든 글자를 소문자로 바꿉니다.
text-transform: initial기본값으로 설정합니다.
text-transform: inherit부모 요소의 속성값을 상속받습니다.

text-decoration 태그는 선으로 텍스트를 꾸밀 수 있게 해주는 속성입니다.

text-decoration: none선을 만들지 않습니다.
text-decoration: line-through글자 중간에 선을 만듭니다.
text-decoration: overline글자 위에 선을 만듭니다.
text-decoration: underline글자 아래에 선을 만듭니다.
text-decoration: initial기본값으로 설정합니다.
text-decoration: inherit부모 요소의 속성값을 상속받습니다.

속성값을 여러개 사용하여 여러 선을 만들 수 있습니다.

float 속성은 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다.

float: inherit부모 요소에서 상속합니다.
float: left왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름니다.
float: right오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다.
float: none요소를 부유시키지 않습니다.

left와 right를 통해 부유속성을 지정시 display는 무시됩니다. (none은 제외) 또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라집니다.

background 속성은 백그라운드 이미지 속성 값을 설정한다.

background
background-attachment : 백그라운드 이미지 고정여부를 설정합니다.
- background-attachment: scroll
- background-attachment: fixed
- background-attachment: local
background-blend-mode : 백그라운드 배경을 혼합했을 떄의 상태를 설정합니다.
- background-blend-mode : nomal;
- background-blend-mode : multiply
- background-blend-mode : screen
- background-blend-mode : overlay
- background-blend-mode : darken
- background-blend-mode : lighten
- background-blend-mode : color-dodge
- background-blend-mode : saturation
- background-blend-mode : color
- background-blend-mode : luminosity
background-clip : 백그라운드 이미지 영역 속성을 설정합니다.
- background-clip : borde-box
- background-clip : padding-box
- background-clip : content-box
background-clolor : 백그라운드 컬러를 설정합니다.
- background-clolor : color 값
- background-clolor : transparent
background-image : 백그라운드 이미지를 설정합니다.
- background-image : url()
- background-image : none
background-orgin : 백그라운드 방향을 설정합니다.

background-orgin : borde-box
background-orgin : padding-box
background-orgin : content-box

background-postion : 백그라운드 위치를 설정합니다.
- background-postion : left | right | bottom | top
- background-postion : percentage
- background-postion : length
background-repeat : 백그라운드 반복 여부를 설정합니다.
- background-repeat : repeat;기본값(x축, y축 반복)
- background-repeat : repeat-x;이미지가 x축으로 반복
- background-repeat : repeat-y;이미지가 y축으로 반복
- background-repeat : no-repeat;이미지가 하나만 나오게 설정
background-size : 백그라운드 사이즈를 설정합니다.
- background-size : auto;
- background-size : contain;
- background-size : cover;
- background-size : percentage;
- background-size : length;

border 속성은 테두리를 설정합니다.

border
border-color : 선의 색을 정한다. 기본값은 꾸미려는 요소의 색(color)이다.

boeder-right-color요소의 오른쪽 태두리 색상을 지정한다.
boeder-top-color요소의 윗쪽 태두리 색상을 지정한다.
boeder-left-color요소의 왼쪽 태두리 색상을 지정한다.
boeder-bottom-color요소의 아래쪽 태두리 색상을 지정한다.

border-width : 선의 두께를 정한다. 기본값은 medium이다.

boeder-right-width요소의 오른쪽 테두리의 선 두께를 정한다.
boeder-top-width요소의 윗쪽 테두리의 선 두께를 정한다.
boeder-left-width요소의 왼쪽 테두리의 선 두께를 정한다.
boeder-bottom-width요소의 아래쪽 테두리의 선 두께를 정한다.

border-style : 속성값은 한개에서 네개까지 정할 수 있다.

border-style: none; 테두리 스타일을 지정하지 않는다.
border-style: hidden; 테두리 스타일을 보여주지 않는다.
border-style: dotted; 테두리 스타일을 점으로 설정한다.
border-style: dashed; 테두리 스타일을 점선으로 설정한다.
border-style: solid; 테두리 스타일을 선으로 설정한다.
border-style: double; 테두리 스타일을 두개의 선으로 설정한다.
border-style: groove; 테두리 스타일을 홈처럼 설정한다.
border-style: ridge; 테두리 스타일을 입체적인것처럼 설정한다.
border-style: inset; 테두리 스타일을 안쪽으로 설정한다.
border-style: outset; 테두리 스타일을 바깥쪽으로 나오는 것처럼 설정한다.

border-image

boeder-image-outset테두리 이미지와 요소 외곽의 거리를 지정하며 네 개 값까지 지정할 수 있다.
boeder-image-repeat원본 이미지의 모서리 구역을 테두리의 크기에 맞출 때의 조정 방법이며 두 개 값까지 지정할 수 있다.
boeder-image-silce이미지를 구역별로 나눌 때 사용할 슬라이스 크기이며 네 개 값까지 지정할 수 있다.
boeder-image-source원본 이미지
boeder-image-width테두리 이미지의 너비를 정하며 네 개 값까지 지정할 수 있다.

border-radius : 속성은 요소의 바깥 테두리 경계의 모서리를 둥글게 만든다. 하나의 값을 사용해 원형 모서리를, 두 개의 값을 사용해 타원형 모서리를 적용할 수도 있다.

boeder-top-left-radius
boeder-top-right-radius
boeder-bottom-left-radius
boeder-bottom-right-radius

position 속성은 태그를 선택할 수 있습니다.

position: static: 위치, 다른 태그와의 관계를 자동으로 배치 할 수 있습니다 .
position: absolute: 절대적으로와 함께 위치를 지정해 줄 수 있습니다.
position: relative: 표준 온도 위치 를 기준으로합니다.
position: fixed:과 상관없이 스크롤 항상 문서 최 좌측 상단을 기준으로 좌표를 고정 합니다.
position: inherit: 부모 태그의 속성 값을 상속받습니다.

좌표를 지정 해주기 위해서는 left, right, top, bottom속성과 함께 사용합니다.
position을 absolute나 fixed로 설정시 가로 크기가 100 %되는가 block태그의 특징이 사라지게됩니다.

display 속성은 요소를 어떤 형태로 나타나게 하는 속성으로, 네 가지의 값을 가질 수 있습니다.

display: none: 선택한 요소를 화면에 나타나지 않게 합니다.
display: block;: 항상 새로운 라인에 요소가 배치되고 화면 크기의 전체 가로폭을 영역으로 차지한다는 특성이 있습니다. 또한 width 속성 값을 부여해주면 그 너비만큼의 영역을 차지합니다.
display: inline;: 새로운 라인에서 시작하지 않으며 다른 요소들과 같은 줄에 배치 될 수 있고 content의 너비만큼의 영역을 차지합니다. 그리고 width, height, margin-top, margin-bottom의 속성 값이 적용되지 않습니다.
display: inline-block: block 레벨 요소와 inline 레벨 요소의 특징을 모두 가지고 있는 요소입니다. 한 줄에서 inline 레벨 요소들과 같이 배치될 수 있으며 width와 height 속성으로 영역의 크기를 지정할 수 있습니다.

text-indent 속성은 들여쓰기 효과를 지정합니다.

문단을 처음 시작할때 맨 첫 시작 부분에 빈 여백을 남겨두는데 이 부분을 들여쓰기라고 합니다. CSS에는 들여쓰기를 가능하게 하도록 text-indent 속성을 제공하며 매우 간단하게 원하는 만큼 앞에 들여쓰기 공간을 줄 수 있습니다.

들여쓰기를 위해서 사용되지만 텍스트가 안보이게 할 경우에도 사용됩니다. 예를 들어 평소에는 텍스트를 보여주다가 text-indent를 사용해 -9999px 값을 주어 안보이도록 수정할 수 있니다.

span {text-indent: -9999px;}

이를 css에 사용하게 되면 inline 타입의 요소가 사라지게 될 것입니다. 이는 display값을 none을 준 것처럼 시아에서 사라지게 됩니다.

z-index 속성은 요소의 수직 위치를 지정합니다.

position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다.

initial : 기본값으로 설정합니다.
auto : 기본값으로 z-index를 지정하지 않은 것과 같습니다.
number : 배치 순서를 결정, 숫자가 낮을수록 뒤에 배치되며 숫자가 높을수록 앞에 나옵니다.
-1처럼 음수도 가능합니다.

박스를 넘어간 부분은 보이지 않습니다.

텍스트가 많은 경우 생략기호로 보여줍니다.

적용 전 : 동해물과 백두산이 마르고
적용 후 : 동해물과 백두산 ...

normal과 같이 공백을 채우지만 가로로 긴 줄에서도 줄 바꿈을 하지 않고 표시합니다.

overflow-x 속성은 x축, 즉 왼쪽과 오른쪽의 내용이 더 길 때(가로) 어떻게 보일지 선택하는 속성 입니다.

visible : 특정 요소가 박스를 넘어 가더라도, 그대로 보여준다.
hidden : 부모요소의 범위를 넘어가는 자식 요소의 부분은 보이지 않도록 처리한다.
(가로 스크롤바가 나타나지 않을 뿐 브라우저에 따라 세로 스크롤바는 나타남)
scroll : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않지만, 사용자가 확인 할 수 있도록 스크롤바를 표시한다.
(가로 스크롤바 항상 표시)
auto : 부모요소의 범위를 넘어가는 자식요소의 부분이 있을 경우 해당 부분을 보이지 않도록 처리하고, 사용자가 해당 부분을 확인 할 수 있도록 스크롤바를 표시 한다.
(내용이 넘칠때만 가로 스크롤바 표시)

overflow-y 속성은 y축, 즉 위와 아래의 내용이 더 길때 (세로) 어떻게 보일지 선택하는 속성 입니다.

visible : 특정 요소가 박스를 넘어 가더라도, 그대로 보여준다.
hidden : 부모요소의 범위를 넘어가는 자식 요소의 부분은 보이지 않도록 처리한다.
(세로 스크롤바가 나타나지 않을 뿐 브라우저에 따라 가로 스크롤바는 나타남)
scroll : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않지만, 사용자가 확인 할 수 있도록 스크롤바를 표시한다.
(세로 스크롤바 항상 표시)
auto : 부모요소의 범위를 넘어가는 자식요소의 부분이 있을 경우 해당 부분을 보이지 않도록 처리하고, 사용자가 해당 부분을 확인 할 수 있도록 스크롤바를 표시 한다.
(내용이 넘칠때만 세로 스크롤바 표시)

visibility 속성은 태그의 가시성을 결정합니다.

아래의 4가지 값을 가지며, 기본 값은 inherit 입니다.

visibility: visible : 보여줍니다.
visibility: hidden : 숨겨줍니다. (자신의 영역은 계속 차지)
visibility: collapse : 겹치도록 지정합니다.(테이블의 행과 열 요소만 지정할 수 있으며, 그 외 요소의 지정하면 hidden으로 해석)
visibility: inherit : 부모 요소의 값을 상속합니다.

box-sizing 속성은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다.

box-sizing: content-box : 콘텐트 영역을 기준으로 크기를 정합니다.
box-sizing: border-box : 테두리를 기준으로 크기를 정합니다.
box-sizing: initial : 기본값으로 설정합니다.
box-sizing: inherit : 부모 요소의 속성값을 상속받습니다.

-webkit-line-clamp CSS 속성은 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한합니다. display 속성을 -webkit-box 또는 -webkit-inline-box로, 그리고 -webkit-box-orient 속성을 vertical로 설정한 경우에만 동작합니다. -webkit-line-clamp만 사용하는 경우, 말줄임표는 노출되나 넘친 콘텐츠가 숨겨지지 않으므로 대개 overflow 속성 또한 hidden으로 설정해야 합니다.

CSS Reference v1.0 </doc>

CSS

CSS 선택자

id 선택자와 class선택자

속성 선택자

가상 요소

가상 클래스

링크 가상 클래스

폼 관련 선택자

CSS 색상

RGB모드

CMYK모드

16진수 표기법

색상이름 표기법

RGB와 RGBA 표기법

HSL와 HSLA 표기법

CSS 선언

float으로 인한 꺠짐 현상

상대주소 절대주소

이미지 표현 방법

img태그로 이미지 표현하기

background태그로 이미지 표현하기 (대체문자를 표현 X)

이미지 스프라이트를 이용한 이미지 표현 (대체문자를 표현 X)

이미지 스프라이트

IR 효과

Phark Method

PWA IR

Screen Out

이미지 타입

컨텐츠 요소를 보이지 않게 하는 방법

미디어 쿼리

조건문이 될 수 있는 특징들

컨텐츠 요소를 가운데 오게 하는 방법

가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다.

요소의 성질을 table로 변환시켜서 가운데 정렬을 하는 방법이지만 table자체를 레이아웃에 많이 사용하지 않기 때문에 잘 쓰지 않는 방법입니다.

절대 요소를 이용한 가운데 정렬방법이며, 제일 흔하게 쓰이지만 단점은 영역이 없어지는 것이 단점이어서 반응형을 할 때 사용하기 불편한 점이 있습니다.

만약 자식요소의 가로값과 세로 값을 모르고 유동적인 경우에 절대 요소를 사용하여 가운데로 오는 정렬방법입니다.

절대 요소를 이용한 가운데 정렬 방법이지만 흔하게 쓰이지는 않습니다.

CSS3를 이용한 방법이지만 최신 브라우저 이외에서는 작동하지 않는 단점이 있지만 표준화 된다면 앞으로 많이 쓰일 방법입니다.

margin

padding

width

height

text-align

font

line-height

text-transform

text-decoration

float

background

border

position

display

text-indent

z-index

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

overflow-x

overflow-y

visibility

box-sizing

line-clamp