CSS 1일차

13 분 소요

CSS

HTML로 웹 사이트 내용 나열하고 CSS로 웹 문서의 디자인을 구성

스타일 형식

선택자 { 스타일 속성: 속성 값}
내부 스타일 시트
<head><style>내부 스타일 시트</style></head>
외부 스타일 시트
- .css 파일을 만들어서 <link>태그로 연결
인라인 스타일
- 태그 내에 style=”속성: 속성 값” 형태로 삽입

선택자

- : 전체 선택자
태그 선택자 : 특정 태그를 사용한 요소에 스타일 적용 ※ 태그와 요소의 차이점
- 태그는 태그 자체를 가리키는 말. 요소는 태그가 적용된 것
클래스 선택자 : 특정 부분에 스타일을 적용
- 클래스 이름 앞에 . 붙이기
- 문서 안에서 여러번 적용할 수 있음
id 선택자 : 특정 부분에 스타일 적용
- id 앞에 # 붙이기
- 중복해서 사용할 수 없음
- 문서의 레이아웃과 관련된 스타일, 자바스크립트에서 웹 요소들을 구별하기 위해 자주 사용

그룹 선택자 : 둘 이상 요소에 같은 스타일 적용

    h1 {
        text-align: center;
    }
    h2 {
        text-align: center;
    }
      
    --------------------------------------
    h1, h2 {
        text-align: center;
    }

캐스케이딩

위에서 아래로 흐르는 스타일 시트

스타일 우선순위 : 스타일 규칙의 중요도, 적용 범위에 따라 우선순위 결정되고 그 순서에 따라 위에서 아래로 스타일 적용
- 사용자 스타일 시트의 중요 스타일 > 제작자 스타일 시트의 중요 스타일(!important) > 제작자 스타일 시트의 일반 스타일 > 기본적인 브라우저 스타일 시트
- 스타일 적용 범위에 따른 우선 순위
  - 인라인 스타일 > id 스타일 > 클래스 스타일 > 태그 스타일
- 스타일 시트에서 중요도와 적용범위가 같으면 소스의 순서로 우선순위 정함
스타일 상속 : 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로 전달

스타일 상속

자식 요소에 별다른 스타일 지정하지 않으면 부모의 스타일 전달됨

이미지나 배경색은 상속되지 않음

텍스트 관련 스타일

글꼴 관련 스타일

font-family : 글꼴 지정
- `body { font-family: “맑은 고딕”, 돋움, 굴림 }
  - 두 단어 이상으로 된 글꼴은 따옴표로 묶어서 표시
  - 맑은 고딕이 없을 경우 돋움 굴림 순으로 지정

@font-face : 웹 폰트 사용

    @font-face {
        font-family: 글꼴 이름;
        src:url(글꼴 파일 경로) format(파일 유형);
    }

font-size : 글자 크기 조절

단위	설명	특징
em	해당 글꼴의 대문자 M의 너비를 기준으로 크기 조절	지정한 크기 없으면 16px가 1em
ex	x-height. 해당 글꼴의 소문자 x 높이 기준으로 크기 조절
px	픽셀. 모니터에 따라 상대적 크기 결정	폰트 크기 고정. 모바일 기기로 볼 때도 같은 크기 출력(작게 보임)
pt	포인트. 일반 문서에서 많이 사용

font-weight : 글자 굵기 지정

속성 값	설명
normal	기본 값
bold	lighter	bolder	굵게	원래보다 가늘게	원래보다 더 굵게
100 ~ 900	400은 normal. 숫자 값으로 세밀하게 조절

font-variant : 작은 대문자로 표시
- font-variant: small-caps

font-style : 글자 스타일 지정

속성 값	설명	특징
normal	기본
italic	이탤릭체	기울어진 글꼴이 디자인되어 있음
oblique	이탤릭체	원래 글꼴을 기울임

font 속성 : 한꺼번에 묶어서 표현

속성 값	설명
font-*	font-로 시작하는 글꼴 관련 속성 한꺼번에 나열
caption	캡션에 어울리는 글꼴 스타일로 표시
icon	아이콘에 어울리는 글꼴 스타일로 표시
menu	드랍다운 메뉴에 어울리는 글꼴 스타일로 표시
message-box	대화상자에 어울리는 글꼴 스타일로 표시
small-caption	작은 캡션에 어울리는 글꼴 스타일로 표시
status-bar	상태 표시줄에 어울리는 글꼴 스타일로 표시

텍스트 스타일

color : 글자 색 지정

text-decoration : 텍스트 줄 표시 / 제거

속성 값	설명
none	밑줄 삭제
underline	밑줄 표시
overline	영역 위로 선 그리기
line-through	취소선

text-transform : 텍스트 대소문자 변환

속성 값	설명
none	변환 안함
capitalize	시작하는 첫번째 글자 대문자로 변환
uppercase	모든 글자 대문자로 변환
lowercase	모든 글자 소문자로 변환
full-width	가능한 모든 문자를 전각 문자로 변환

text-shadow : 텍스트에 그림자 효과 추가

text-shadow : none | <가로거리> <세로거리> <번짐 정도> <색상>

속성 값	설명
가로거리	텍스트부터 그림자까지 가로거리. 양수 값은 글자 오른쪽, 음수 값은 글자 왼쪽에 그림자 생성. 필수 속성
세로거리	텍스트부터 그림자까지 세로 거리. 양수 값은 아래쪽, 음수 값은 글자 위쪽에 그림자 생성. 필수 속성
번짐 정도	그림자가 번지는 정도. 양수 값은 모든 방향으로 퍼져 나가고 음수 값은 모든 방향으로 축소되어 보임. 기본값 0
색상	그림자 색상 지정

white-space : 연속된 공백 처리

속성 값	설명
normal	여러 개의 공백 하나로 표시. 기본 값
nowrap	여러 개의 공백 하나로 표시. 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시
pre	여러 개의 공백 그대로 표시. 영역 너비를 넘어가는 내용은 줄 바꾸지 않고 계속 한 줄로 표시
pre-line	여러 개의 공백 하나로 표시. 영역 너비를 넘어가는 내용은 자동으로 줄 바꿔 표시
pre-wrap	여러 개의 공백 그대로 표시. 영역 너비 넘어가는 내용은 자동으로 줄 바꿔 표시

letter-spacing / word-spacing : 텍스트 간격 조절
- 자간 조절 / 단어와 단어 사이 조절
- 자간은 em으로 지정하는 것이 좋음 ⇒ 바뀌는 글꼴에 맞춰 자동으로 자간 유지됨

문단 스타일

direction : 글자 쓰기 방향 지정
- ltr : 왼쪽에서 오른쪽(기본값)
- rtl : 오른쪽에서 왼쪽

text-align : 텍스트 정렬

속성 값	설명
start	현재 텍스트 줄의 시작 위치에 맞춰 문단 정렬. 언어에 따라 좌우 / 우좌 정렬
end	현재 텍스트 줄의 끝 위치에 맞추어 문단 정렬. 언어에 따라 좌우 / 우좌 정렬
left	왼쪽에 맞춰 정렬
right	오른쪽에 맞춰 정렬
center	가운데 정렬
justify	양쪽에 맞춰 정렬
match-parent	부모 요소 따라 정렬. 부모 요소의 언어에 따라 정렬

text-justify : 정렬 시 공백 조절

text-align 속성 값이 justify 일 때 간격 조절

속성 값	설명
auto	브라우저에서 자동으로 지정
none	정렬 안함
inter-word	단어 사이의 공백 조절해 정렬
distribute	인접한 글자 사이의 공백을 똑같이 맞춰 정렬

text-indent : 텍스트 들여쓰기
- 크기 : 들여 쓸 크기 지정. 음수 사용 가능
- 백분율 : 부모 요소 너비 기준으로 상대적 크기 지정
line-height : 줄 간격
- 숫자, 크기, 백분율로 지정
text-overflow : 넘치는 텍스트 표기
- clip : 넘치는 텍스트 자르기
- ellipsis : 말 줄임표로 잘린 텍스트 표시

목록 스타일

list-style-type : 목록의 불릿과 번호 스타일 지정

순서 없는 목록

속성 값	설명
disc	●
circle	○
square	□
none	불릿 제거

순서 있는 목록 숫자 바꾸기

속성 값	설명	예시
decimal	1로 시작하는 십진수	1,2,3,…10, 11
decimal-leading-zero	앞에 0이 붙는 십진수	01, 02, 03, …
lower-roman	소문자 로마 숫자	i, ii, iii…
upper-roman	대문자 로마 숫자	I, II, III…
lower-alpha / lower-latin	소문자 알파벳	a,b,c,d,..
upper-alpha / upper-latin	알파벳	A,B,C,D…
armenian	아르메니아 숫자
georgian	조지 왕조시대 숫자	an, ban, gan

list-style-image : 불릿 대신 이미지 삽입
- list-style-image : url(이미지 파일 경로)
- list-style-image : none ⇒ 이미지 사용하지 않고 list-style-type 형태로 표시
list-style-position : 목록에 들여 쓰기 효과
- inside : 불릿이나 숫자를 안쪽으로 들여 쓰기
- outside : 기본 값으로 불릿이나 숫자 밖으로 내어 쓰기

화면 디자인

웹에서 색상 표현

16진수 표기법
- #ffff00 : 앞에서 두자리씩 묶어서 #RRGGBB 표시
- 색이 가득 섞였으면 ff, 하나도 섞이지 않으면 00
rgb / rgba
- rgb(255, 255, 255) : 10진수 표기
- rgba(255, 255, 255, 0.1) : rgb와 같으나 마지막에 0 ~ 1 불투명도 표기
hsl / hsla
- hue(색상), saturation(채도), lightness(밝기)
- 색상 : 둥글게 배치한 색상환으로 표시(각도)
- 채도 : %로 표시. 0%면 회색톤, 100%면 순색
- 밝기 : %로 표시. 가장 어두운 0%, 가장 밝은 100%
- rgb와 같이 hsl뒤에 a를 붙여 투명도 표기
색상 이름 표기법
- 모든 브라우저에서 표현할 수 있는 웹 안전 색상 216가지

배경색 / 이미지

background-color : 배경색 지정
- 16진수, rgb / rgba 등으로 표시
- 예외적으로 background-color 값은 상속되지 않음

background-clip : 배경 적용 범위 조절

속성 값	설명
border-box	박스 모델의 가장 외곽 테두리(border)까지 적용
padding-box	박스 모델에서 테두리를 뺀 패딩 범위까지 적용
content-box	박스 모델에서 내용 부분에만 적용

background-image : 웹 요소에 배경 이미지 삽입
- background-image: url('파일경로')
- 여러개 사용 가능. 이미지가 채우는 요소 크기보다 작을 경우, 해당 요소를 가득 채우도록 가로 / 세로 반복

background-repeat : 배경 이미지 반복 방법

속성 값	설명
repeat	화면에 가득 찰 때까지 가로, 세로 반복
repeat-x	브라우저 창 너비와 같아질 때까지 가로 반복
repeat-y	브라우저 창 높이와 같아질 때까지 세로 반복
no-repeat	반복 없음

background-size : 배경 이미지 크기 조절

속성	설명
auto	원래 배경 이미지만큼 표시
contain	요소 안에 배경 이미지가 다 들어오도록 이미지를 확대 / 축소
cover	배경 이미지로 요소를 모두 덮도록 이미지 확대 / 축소
크기 값	너비, 높이 값 지정. 너비만 지정할 경우 자동으로 높이값 계산
백분율	백분율 값 지정. 크기에 맞도록 확대 / 축소

background-position : 배경 이미지 위치 조절
- background-position: 수평위치, 수직위치
- 수평 : left, center, right, 백분율, 값
- 수직 : top, center, botton, 백분율, 값

background-origin : 배경 이미지 배치할 기준 조절

속성 값	설명
border-box	박스 모델의 가장 외곽 테두리(border) 기준
padding-box	박스 모델에서 테두리를 뺀 패딩 기준
content-box	박스 모델에서 내용 부분 기준

background-attachment : 배경 이미지 고정

속성 값	설명
scroll	화면 스크롤과 함께 배경 이미지도 스크롤. 기본값
fixed	화면이 스크롤되도 배경 이미지 고정

background 하나로 사용 할 수 있음
- background: url('images/apple.jpg') no-repeat fixed right bottom
- 속성값을 입력하지 않으면 기본값 적용

그라데이션 효과

그라데이션을 지원하지 않는 브라우저와 접두사를 사용해야 되는 브라우저 확인 필요
background-image or background 속성으로 지정
선형 그라데이션
- liner-gradient(각도 to 방향, color-stop)
- to 방향 으로 표시(to right, to left, to top, to bottom). 생략하면 to bottom
- 각도(deg) 로도 방향 표시. 그라데이션이 끝나는 각도
- 색상 중지 점(color-stop) : 색이 바뀌는 부분
  - 색, 중지 점 위치 지정 가능
원형 그라데이션
- radial-gradient(최종 모양 크기 at 위치, color-stop)
- 모양 : circle(원형) / ellipse(타원형). 타원형이 기본값
- 위치 : 시작하는 원의 중심 지정 가능. 생략하면 center
- 크기 : closet-corner(가장 가까운 코너에 닿을때까지) / farthest-side(가장 먼 모서리와 만날때까지) / farthest-corner(가장 먼 코너에 닿을때까지)
- 색상 중지 점 : 색상, 색상이 바뀌는 위치 지정 가능
그라데이션으로 패턴 만들기
- 패턴을 만든 후 요소를 채울만큼 반복해서 표시
- 선형 : repeating-linear-gradient. background: repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px)
- 원형 : repeating-radial-gradient. background: repeating-radial-gradient**(**circle, white, white 10%, #ccc 10%, #ccc 20%)

CSS 박스 모델

블록 레벨 요소 : 혼자 한 줄을 차지하는 요소. ex) <p>, <div>, <h1> ~ <h6>, <ul>, <ol>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>
인라인 레벨 요소 : 화면에 표시된 콘텐츠만큼 공간 차지. 양옆으로 다른 요소가 올 수 있다. ex) <img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button>

박스 모델 : 박스 형태 콘텐츠

width, height : 콘텐츠 영역 크기
- 백분율, 값, auto(기본값)로 설정
- 박스 모델 전체 너비 = width + 좌우 패딩 + 좌우 테두리

display : 화면 배치 방법

block : 해당 요소를 블록 레벨로 지정. 인라인 레벨 요소를 블록 레벨 요소로 바꿀 수 있음
inline : 블록 레벨 요소를 인라인 레벨로 바꿈. 블록 레벨을 한 줄로 표시할 때 주로 쓰임
inline-block : display: inline 을 지정하면 너비, 높이, 위 아래 마진 float 같은 값이 정확히 적용되지 않음. 인라인 레벨로 배치하면서 블록 레벨 속성을 지정하기 위해 사용
none : 화면에 요소를 표시하지 않음. 공간도 차지하지 않는다 <=> visibility: hidden 공간은 그대로 차지하고 화면에서만 감춤

기타 요소들

속성 값	설명
inherit	상위 요소의 display 속성 상속
table	블록 레벨의 표로 만든다
inline-table	인라인 레벨 표로 바꿈(`<table>` 태그 사용한 것처럼)
table-row	표의 행으로 만든다(`<tr>` 태그 사용)
table-row-group	표의 행 그룹으로 만든다(`<tbody>`)
table-header-group	표의 제목 영역(header) 그룹으로 만든다(`<thead>`)
table-footer-group	표의 요약 영역 그룹으로 만든다(`<tfoot>`)
table-column	표의 열로 만든다(`<col>`)
table-column-group	표의 열 그룹으로 만든다(`<colgroup>`)
table-cell	표에서 하나의 셀로 만든다(`<td>`, `<th>`)
table-caption	표의 캡션을 만든다(`<caption>`)
list-item	목록의 항목을 표시할 수 있도록 기본적인 블록 박스와 표시자 박스 만든다(`<li>`)

테두리 관련 속성

border-style : 테두리 스타일

속성 값	설명
none	테두리가 나타나지 않음. 기본값
hidden	테두리가 나타나지 않음. border-collapse:collapse일 경우 다른 테두리도 표시되지 않음
dashed	테두리를 짧은 선으로 표시
dotted	점선으로 표시
double	이중선으로 표시. 선 사이 간격 border-width 값으로 지정
groove	창에 조각한 것처럼 표시. 홈이 파인 듯 입체적
inset	border-collapse:separate ⇒ 전체 박스 테두리가 창에 막혀 있는 것처럼 표시
border-collapse:collapse ⇒ groove와 똑같이 표시
outset	border-collapse:separate ⇒ 전체 박스 테두리가 창에서 튀어나와 있는 것처럼 표시
border-collapse:collapse ⇒ ridge와 똑같이 표시
ridge	테두리를 창에서 튀어나온 것처럼 표시
solid	테두리를 실선으로 표시

border-width : 테두리 두께
- 상하좌우 따로 지정 가능 border-top-width: 10px
- thin, thick, medium, 값 으로 지정
border-color : 테두리 색상
- 상하좌우 따로 지정 가능
border : 한번에 지정
- border: 3px solid dotted black
- border-bottom: 3px solid #ccc
border-radius : 모서리 둥글게
- 각 모서리 따로 지정 가능
- border-top-left-radius: 50%

box-shadow : 그림자 효과

box-shadow: 수평거리 수직거리 흐림정도 번짐정도 색상 (inset)

속성 값	설명
수평 거리	그림자의 수평 옵셋 거리. 양수 값은 오른쪽, 음수 값은 왼쪽에 그림자. 필수 속성
수직 거리	그림자의 수직 옵셋 거리. 양수 값은 아래쪽, 음수 값은 위쪽에 그림자. 필수 속성
흐림 정도	흐림 정도. 생략하면 0을 기본값으로 진한 그림자 표시. 값이 커질수록 부드러운 그림자, 음수 X
번짐 정도	번지는 정도. 양수 값은 모든 방향으로 퍼져 나가기 때문에 박스보다 크게 표시, 음수 값은 모든 방향으로 축소되어 보인다. 기본값 0
색상	그림자 색상. 한 가지 or 공백으로 여러개 지정 가능. 현재 글자색이 기본값
inset	안쪽 그림자로 그리는 옵션값

여백 조절 속성

margin : 요소 주변 여백
- 크기, 백분율, auto(display 속성에서 지정한 값에 맞게 적절한 값 자동으로 지정)
- 값 2개 지정 margin: 30px 50px : 첫번째 값은 위아래 / 두번째 값은 좌우
- 값 4개 지정 margin: 30px 40px 50px 60px : top ⇒ right ⇒ bottom ⇒ left 순
- 값 3개 지정 : 빠진 값은 마주보는 방향의 속성값
- 마진 중첩 현상(마진 상쇄)
  - 마진과 마진이 만나면 더 큰 쪽으로 겹쳐지는 현상
  - 위, 아래가 만날때 발생. 좌, 우는 중첩되지 않음
padding : 콘텐츠 영역과 테두리 사이 여백
- margin과 사용법 유사

CSS 레이아웃

CSS 포지셔닝과 주요 속성

box-sizing : 박스 너비 기준
- content-box : width 속성 값을 컨텐츠 영역 넓이로 사용. 기본값
- border-box : width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용
float : 왼쪽 / 오른쪽 배치
- left / right / none : 왼쪽 / 오른쪽 / 어느 쪽으로도 배치하지 않음
- float로 배치하면 너비 값은 콘텐츠 영역만큼 차지하고 다른 요소가 옆에 들어올 수 있음
clear : float 속성 해제
- float 속성은 한번 배치하면 계속 전달됨
- clear: both : float 모두 해제
- clear: right / left : float 오른쪽 / 왼쪽 해제

position : 배치 방법 지정

속성 값	설명	사용법
static	문서의 흐름에 맞춰 배치	float 속성으로 좌우 배치만 가능
relative	이전 요소에 자연스럽게 연결해 배치하되 위치 지정 가능	나열한 순서대로 배치되지만 top, bottom, right, left 값으로 위치 조정 가능
absolute	원하는 위치 지정	문서의 흐름과 상관없이 top, bottom, right, left 값으로 원하는 위치에 배치 가능
absolute를 사용하려면 부모 요소가 relative 여야 함
fixed	지정한 위치에 고정. 화면에서 요소가 잘릴 수 있음	absolute와 비슷하지만 브라우저 창이 기준

static을 제외한 나머지 속성값은 좌표를 이용해 위치를 조절할 수 있음

visibility : 보이게 하거나 보이지 않게 하기

속성 값	설명
visible	화면에 요소 표시. 기본값
hidden	요소 감춤. 자리는 그대로 차지
collapse	표의 행, 열, 행 그룹, 열 그룹에 지정하면 겹치도록 조절. 그 외의 영역에서는 hidden

z-index : 요소 쌓이는 순서
- 값이 작을수록 아래 ⇒ 값이 클수록 위에 쌓임
- 기본값 : 1

다단 편집

column-width : 단 너비 고정하고 다단 구성
- column-width: 값 : 단 너비 직접 지정
- column-width: auto : 다른 속성에 따라 자동 계산
column-count : 단의 개수 고정하고 다단 구성
- column-count: 3 : 콘텐츠가 들어갈 단의 개수 지정. 0보다 큰 수
- column-count: auto : 다른 속성에 따라 자동 계산
column-gap : 단 사이 여백
- column-gap: 값 : 단 사이 여백 지정
- column-gap: normal : 자동 지정. W3C 권장 여백 1em
column-rule : 구분선 색상, 스타일, 너비
- column-rule-color , column-rule-style , column-rule-width
- column-rule: 너비 스타일 색상

break-after : 다단 위치 지정

속성	나눌 위치
break-before	특정 요소 앞
break-after	특정 요소 뒤
break-inside	특정 요소 안

break-after: column : 요소 뒤에서 단 나누기
break-after: avoid-column : 요소 뒤에서 단 나누지 않기

column-span : 단 합치기
- 1 : 단을 하나만 합치는 것. 합치지 않는 것과 같음. 기본값
- all : 전체 단을 하나로 합쳐 표현. 단의 일부만 합칠 수 없음

표 스타일

caption-side : 표 제목 위치
- tom / bottom 두가지 위치. 기본값 : top
border : 테두리 스타일
- 테두리 색, 너비, 형태 지정
- css 이용해서 테두리 표시할 때는 바깥 테두리와 셀의 테두리 따로 지정해야 함.
border-collapse : 테두리 통합, 분리
- collapse : 테두리 합쳐서 표시
- seperate : 테두리 따로 표시. 기본값
- 테이블이 바깥 테두리와 안쪽 테두리에 다른 스타일 적용할 수 있음
border-spacing : 인접한 셀 테두리 사이 거리
- border-collapse: seperate 사용했을 경우 사용
- px, em 등 크기와 단위를 직접 지정
empty-cell : 빈셀 표시 여부
- show : 빈 셀 주위에 테두리 그려 빈 셀 표시. 기본값
- hide : 테두리 그리지 않고 비워둠
table-layout : 콘텐츠에 맞게 셀 너비 지정
- fixed : 셀 너비 고정. 셀 내용에 따라 너비가 달라지지 않음
- auto : 셀 내용에 따라 너비 달라짐. 기본값
- fixed 경우 셀 너비보다 긴 내용이 셀 밖으로 밀려나감.
  - word-break: break-all로 자동 줄바꿈
  - height: auto 로 셀 높이 자동 조절

vertical-align : 셀 안에서 수직 정렬(inline과 table-cell에만 적용)

속성 값	설명
baseline	인라인 요소 기준선을 부모 요소의 기준선에 맞춤
sub	인라인 요소 기준선을 부모 요소 아래 첨자 위치에 맞춤
super	부모 요소의 위 첨자 위치
top	부모 요소의 윗부분
middle	중앙 부분을 부모 요소 기준선에서 x 높이의 반만큼 올려서 맞춤
bottom	아랫부분을 부모 요소의 아랫부분에 맞춤
text-top	윗부분을 부모 요소 글꼴의 윗부분에 맞춤
text-bottom	아랫부분을 부모 요소 글꼴의 아랫부분에 맞춤
길이 값	기준선을 0px로 생각하고 양수면 위로, 음수면 아래로 이동
백분율	0%에서 양수면 위, 음수면 아래로 이동

Twitter Facebook LinkedIn

Taeyoung