-
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; } }'팀플' 카테고리의 다른 글
React JS (0) 2022.05.26 자바스크립트 DOM & EVENT (0) 2022.05.16 JavaScript 이해하기 (0) 2022.05.09 HTML & CSS (1. HTML 이해하기 / 2.HTML 태그 / 3. 콘텐츠모델, 시멘틱마크업, 블록) (0) 2022.05.01 Git, Git hub 사용하기 (0) 2022.04.30