팀플
HTML & CSS ( 4. CSS 이해하기 / 5. 단위, 배경, 박스모델 / 6. 폰트,텍스트 / 7. 레이아웃 / 8. 미디어쿼리)
김솜뭉치
2022. 5. 5. 12:40
4. CSS 이해하기
(1) CSS소개
- Cascading Style Sheets
- HTML(마크업 언어)를 꾸며주는 언어
- HTML : 웹페이지 정보 표현 / CSS : HTML을 디자인
(2) CSS 문법과 적용
h1 { color: yellow; font-size:2em; }
선택자(selector) - "h1"
속성(property) - "color"
값(value) - "yellow"
선언(declaration) - "color: yellow", "font-size: 2em"
선언부(declaration block) - "{ color: yellow; font-size:2em; }"
규칙(rule set) - "h1 { color: yellow; font-size:2em; }"- HTML > attribute / CSS > property
# 주석 Comment tags
/* 내용 */1. Inline : 직접 선언
<div style="color:red;"> 내용 </div>
2. Internal : <style> 이용 / <head> 안에 위치
<style> div {color: red;} </style>
3. External : 외부 스타일 시트 이용
div {color: red;} ------ 외부 파일
<link rel="stylesheet" href="css/style.css">(3) 선택자
- 그룹화 Grouping
# 선택자
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; }- class 선택자
.foo { font-size: 30px; } --- class="foo"로 적용된 요소는 다 적용
<p class="foo"> ... </p>
# 다중클래스
.foo { font-size: 30px; }
.bar { color: blue; }
<p class="foo bar"> ... </p> --- foo 와 bar 2개 적용- id 선택자
#bar { background-color: yellow; }
<p id="bar"> ... </p>
class선택자와 비슷
.대신 #써야 함
class 대신 id 속성 써야 함
문서 내 유일한 요소에 사용
구체성의 값이 class와 다름- 선택자의 조합
/* 요소와 class의 조합 */
p.bar { ... }
/* 다중 class */
.foo.bar { ... }
/* id와 class의 조합 */
#foo.bar { ... }
# 단순 속성
p[class] { color: silver; } --- class 값
p[class][id] { text-decoration: underline; } --- class 값/id 값
# 정확한 속성
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" 문자가 포함되는 요소 선택(4) 문서 구조 관련 선택자
# 자손선택자
div span { color: red; } --- 공백으로 구분
# 자식 선택자
div > h1 { color: red; } --- > 기호 / 공백 상관 x
# 인접형제 선택자
div + p { color: red; } --- + 기호 / 공백 상관 x(5) 가상 선택자 / 가상 클래스
# 문서 구조와 관련
:first-child : 첫 번째 자식 요소 선택
:last-child : 마지막 자식 요소 선택
# 앵커 요소
:link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
:visited : 이미 방문한 하이퍼링크를 의미
# 사용자 동작
:focus: 현재 입력 초점을 가진 요소에 적용
:hover: 마우스 포인터가 있는 요소에 적용
:active: 사용자 입력으로 활성화된 요소에 적용
# 가상 요소
:before : 가장 앞에 요소를 삽입
:after : 가장 뒤에 요소를 삽입
:first-line : 요소의 첫 번째 줄에 있는 텍스트
:first-letter : 블록 레벨 요소의 첫 번째 문자(6) 구체성
구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것
구체성의 값이 클수록 우선으로 적용이 됨 (왼쪽에 있는 값부터 비교, 왼쪽이 클수록 높은 구체성)
0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
전체 선택자는 0, 0, 0, 0을 가진다.
조합자는 구체성에 영향을 주지 않는다. (>, + 등)- 인라인 스타일 : 1,0,0,0 규칙 중 제일 큰 구체성을 가짐
- !important : 구체성 없음, 모든 구체성을 무시하고 우선권을 가짐
(7) 상속
- 박스모델 속성은 상속되지 않음
* { color: red; }
h1#page { color: gray; }
<h1 id="page">Hello, <em>CSS</em></h1>
> color:Red- 상속되는 속성은 아무런 구체성을 가지지 못함
(8) 캐스캐이딩 Cascading
- 규칙
1. 중요도(!important)와 출처
- !important 로 선언된 규칙을 최우선
- 출처는 제작자, 사용자, 사용자 에이전트로 구분
2. 구체성
- 구체성이 높은 규칙을 우선
3. 선언 순서
- 뒤에 선언된 규칙을 우선
5. 단위, 배경, 박스모델
(1) 단위
- 절대 길이
px ( 1px = 1/96th of 1 inch )
pt ( 1pt - 1/72 of 1 inch )- 상대길이
% : 부모의 값에 대해서 백분율로 환산한 크기를 갖게 됩니다.
em : font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 가능합니다.
rem : root의 font-size를 기준으로 값을 환산합니다.
vw : viewport의 width값을 기준으로 1%의 값으로 계산됩니다.(2) 색상
- 컬러키워드
- 16진법 : #RRGGBB /
- RGB(R,G,B) : 0~255 / 검>흰
- RGBA(R,G,B,A) : a는 투명도 / 0~1의 값 / 소수점 표기 / 투명 > 불투명
(3) Background
- background-color : 배경의 색상 지정
- background-image : url() : 배경의 이미지 지정
- background- repeat : 반복여부
repeat : x, y축 으로 모두 반복합니다.
repeat-x : x 축 방향으로만 반복합니다.
repeat-y : y 축 방향으로만 반복합니다.
no-repeat : 이미지를 반복하지 않습니다.- background-position : 위치지정
% : %만큼 떨어진 곳
px : px만큼 떨어진 곳
키워드 : top, bottom 은 y축 기준
left, right 는 x축 기준- background-attachment : 화면 스크롤에 따른 배경이미지 움직임 여부
scroll : 배경 이미지는 요소 자체를 기준으로 고정, 내용과 함께 스크롤 안 됨
local : 배경 이미지는 요소의 내용을 기준으로 고정, 내용과 함께 스크롤 됨
fixed : 배경 이미지는 뷰포트를 기준으로 고정, 스크롤에 영향 x(4) Box model
- border-width : 선의 굵기
- border-style : 선의 모양 지정
none : 표시 x
solid : 실선
double : 이중실선
dotted : 점선# 축약
border: [-width] [-style] [-color];(5) Padding
- 요소의 안쪽 여백
- length : 고정 값 / percent : 상대적인 크기
padding: [-top] [-right] [-bottom] [-left];(6) Margin
- 요소의 바깥 여백
- length : 고정 값 / percent : 상대적인 크기 / auto : 브라우저에 의해 계산된 값
margin: [-top] [-right] [-bottom] [-left];(7) Margin & Padding
| + | - | auto | 단위 | |
Margin |
o | o | o | px, % ... |
Padding |
o | x | x | px, % ... |
(8) Width 가로 크기 / Height 세로 크기
- auto : 자동 / length : 고정값 / percent : 상대적인 크기
- auto가 아닌 값을 지정하면 margin을 제외한 모든 영역에 대해 영향을 받음
6. 폰트, 텍스트
(1) Typography
(2) 글꼴 Font-family
font-family: family-name | generic-family ( | initial | inherit );- family-name: 사용할 폰트의 이름 / 여러개 선언 가능 / 한글일 경우 '돋움'
- generic-family : family-name으로 지정할 수 없을 때 선택가능하게 함
(3) 줄 간격 Line-height
line-height: normal | number | length | initial | inherit ;- 텍스트 라인의 높이 / 행간 제어
(4) 글꼴 크기 Font-size
font-size: keyword | length | initial | inherit ;- small / medium / large ...
(5) 글꼴 굵기 Font-weight
font-weight: normal | bold | bolder | lighter | number | initial | inherit ;(6) 글꼴 스타일 Font-style
- em : 강조 / italic체
- normal : font-family 에 분류된 기본 값
- italic : italic 스타일
- oblique : oblique 스타일 / 기울기 각도 지정 가능
(7) 글꼴 변환 Font-variant
font-variant: normal | small-caps | initial | inherit ;- font-variant : small-caps : 소문자를 작은 대문자로 변형
(8) 글꼴 속성의 축약형
font: font-style font-variant font-weight font-size/line-height font-family | initial | inherit;- font-size와 font-family는 반드시 선언해야 함
- 빠진 속성이 있으면 기본 값으로 지정
- 각 속성의 선언 순서를 지켜야 함
(9) 웹 폰트 @Font-face
@font-face {
font-properties
}- 웹페이지에 있는 글꼴을 컴퓨터로 다운로드하여 적용
(10) 수직 정렬 Vertical-align
vertical-align: keyword | length | percent | initial | inherit ;- 인라인 요소 또는 테이블 셀 상자의 수직 정렬 지정
- 대부분 부모요소에 상대적으로 정렬됨
(11) 수평 정렬 Text-align
text-align: left | right | center | justify | initial | inherit ;- inline-level 에 적용 / block-level에 정렬 x
- block 요소를 가운데 정렬하고 싶다? margin:auto
(12) 텍스트 들여쓰기 Text-indent
text-indent: length | initial | inherit;- 음수 값 사용 가능 . 사용 시 왼쪽으로 이동
(13) 텍스트 장식 Text-decoration
text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;
# text-decoration-line
none : 아무것도 없음 / 기본값
underline : 밑줄
overline : 윗줄
line-through : 중간줄
# text-decoration-color
색깔 지정
# text-decoration-style
solid : 한줄 / 기본값
double : 이중선
dotted : 점선
dashed : 파선
wavy : 물결(14) 단어 관련 속성
normal : 공백과 개행을 무시, 필요한 경우에 자동 줄바꿈
nowrap : 공백과 개행을 무시, 자동 줄바꿈이 일어나지 않음.
pre : 공백과 개행을 표현, 자동 줄바꿈이 일어나지 않음.
pre-line : 공백은 무시, 개행만 표현. 필요한 경우에 자동 줄바꿈 발생.
pre-wrap : 개행은 무시, 공백만 표현. 필요한 경우 자동 줄바꿈 발생.- letter-spacing 자간
letter-spacing: normal | length | initial | inherit;- word-spacing 단어 사이의 간격
word-spacing: normal|length|initial|inherit;- word-break 단어가 라인 끝에 나올 경우, 어떻게 처리할 것인지 지정
word-break: normal | break-all | keep-all | initial | inherit;
normal : 기본 값. 중단점은 공백이나 하이픈(-)(CJK는 음절)
break-all : 중단점은 음절. 모든 글자가 요소를 벗어나지 않고 개행
keep-all : 중단점은 공백이나 하이픈(-)(CJK는 그 외 기호도 포함)- word-wrap 요소를 벗어난 단어의 줄바꿈
word-wrap: normal|break-word|initial|inherit;
normal : 기본 값. 중단점에서 개행
break-word : 모든 글자가 요소를 벗어나지 않고 강제로 개행7. 레이아웃
(1) Display
- 렌더링 박스 유형을 결정
display: value;
none : 요소가 렌더링 되지 않음
inline : inline level 요소처럼 렌더링
block : block level 요소처럼 렌더링
inline-block : inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐
* height 나 width 등과 같은 박스모델 속성을 적용할 수 있다| display | width | height | margin | padding | border |
| block | O | O | O | O | O |
| inline | X | X | 좌/우 | O | O |
| inline-block | O | O | O | O | O |
(2) Visivility
- 요소를 어떻게 숨길 것인지 결정
visibility: visible | hidden | collapse | initial | inherit;
visible : 화면에 표시
hidden : 화면에 표시되지 않음(공간은 차지함)
collapse : 셀 간의 경계를 무시하고 숨김(테이블 관련 요소에만 적용 가능)
# display : none 과 차이점
display : none > 요소가 렌더링 되지 않음
visibility : hidden > 요소가 보이지 않지만 렌더링 되어 화면에 공간이 있음(3) Float
float: none | left | right | initial | inherit;- 요소를 보통의 흐름에서 벗어나 띄워지게 함
- 주변 텍스트나 인라인 요소가 주위를 감싸는 특징
- 대부분 요소의 display 값을 block으로 변경 (display 값 변경 예외: inline-table, flex 등)
(4) Clear
clear: none | left | right | both | initial | inherit;- floating 된 요소의 영향에서 벗어나 다음 행으로 이동
- block-level 요소만 적용 가능
(5) Position
position: static | absolute | fixed | relative | sticky | initial | inherit;
static : offset 적용 x
absolute : 부모를 기준으로 배치됨 / 흐름에서 벗어남 / 부모가 static 아니어야 함
fixed : 부모의 위치에 영향 x / 브라우저를 기준으로 배치
relative : 부모의 영향 x / 원래 있어야 할 위치를 기준으로 배치- 요소의 위치를 원하는 곳으로 이동시킬 때 사용
(6) z-index
z-index: auto | number | initial | inherit;
auto : 쌓임 순서를 부모와 동일하게 설정(기본값)
number : 해당 수치로 쌓임 순서를 설정(음수 허용)- position 값이 static이 아닌 경우 지정가능
- 순서 값이 없을 경우 생성순서(코드상 순서)에 따라 쌓임
- 부모가 z-index 값이 있을 경우 부모 안에서만 의미있음
- 큰 값이 가장 위쪽(음수 사용 가능)
- 부모 z-index끼리 값이 같으면 자식 z-index 값이 큰 게 위로 올라감 / 부모가 작으면 자식이 커도 밑으로 내려감
8. 미디어쿼리
(1) 미디어쿼리 소개
- 각 미디어 매체에 따라 다른 스타일 시트를 적용할 수 있게 만드는 것
(2) 미디어 타입 & 미디어 특성
@media mediaqueries { /* style rules */ }
at media : 미디어 쿼리를 시작한다.
mediaqueries 가 참이면 { 스타일 규칙 } 적용
# 미디어 타입
all, print, screen
# 미디어 특성
width , orientation (세로모드/가로모드 구분)(3) 미디어쿼리 Syntax
s* : 공백
[ a ] : a가 나올 수도, 나오지 않을 수도
a | b : a 또는 b 둘 중에 하나를 선택
a? : a가 0번 나오거나 1번만 나올 수 있음
a* : a가 0번 나오거나 그 이상 계속 나올 수 있음(4) 실습
디스플레이 크기에 따른 background-color 변경
# 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; }
}