[CSS] 문법, Selector

HTML에 CSS를 적용하는 방법

- 인라인스타일

: 태그 안에 스타일 지정 <nav style ="background:blue; color:yellow;">...</nav>

- 내부 스타일 시트

: html 파일에 <style> 태그를 이용하여 작성

- 외부 스타일 시트(권장)

css 파일을 작성 후 html 파일과 연결

<link rel="stylesheet" herf="파일위치+이름.css"/>

 

관심사 분리

외부 스타일 시트를 사용하는게 권장되는데

코드의 단순화, 유지 보수가 자유롭기 때문임.

 

CSS 문법 구성

셀렉터 {

    속성명(property): 속성값(value);

    }

{} 중괄호 내부를 선언 블록(Declaration block),

각 속성 설정을 선언(Declaration)이라함

 

속성

color 글자색

background-color 배경색

border: 1px solid red; 테두리(두께, 형태, 색)

-> 색과 관련된 속성값으로는 색상 이름, 16진수RGB, rgba(r,g,b,투명도) 등이 있음

bodrder-radius 둥근 모서리

테두리border는 디자인 요소로도 사용하지만

개발 과정에서 각 영역이 차지하는 크기를 파악하기 위해 사용됨(레이아웃)

 

box-shadow 그림자(가로 위치, 세로 위치 필수)

font-family: "글꼴", "fallback1", "fallback2"; fallback은 글꼴이 없거나 지원하지 않을 경우 차선책 ','순서로 적용됨

font-size 글자크기

font-weight 굵기

text-decoration 밑줄, 취소선

letter-spacing 자간

line-height 행간

text-align 정렬(left, right, center, justify양쪽정렬)

 

box-sizing: content-box; 기본값, 콘텐츠 내용이 길이

box-sizing: border-box; 콘텐츠 내용+ border 두께+ padding 크기의 합이 길이(margin은 비포함)

margin 테두리 바깥 여백(속성값 개수 4 상우하좌, 3 상 좌우 하, 2 상하, 좌우, 1 전체), 음수도 가능

padding 테두리 안쪽 여백

 

overflow: auto; 콘텐츠 길이에 맞게 스크롤 생성

overflow: hidden; 콘텐츠가 넘치면 넘치는 부분은 안 보여줌

 

단위

절대 단위 px, pt

: 크기가 고정되어 있기 때문에 사용자 접근성이 불리

 

상대단위

%

: HTML이 차지하는 모든 영역(지금은 보이지 않는 스크롤 끝까지)

em

: 상위 요소 크기 배수(2em)

rem(추천)

: 최상위(기본값) 요소 크기 배수(0.5rem)

vw

: Viewport width 디바이스에 보이는 넓이

vh

: Viewport height 디바이스에 보이는 길이

 

박스 모델

	block	inline-block	inline
줄바꿈 여부	Y	N	N
기본 너비	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능 여부	Y	Y	N
예시	div, p, h1	span에 style display:inline-block; 적용	span

 

Selector

*

: 문서 전체

아래는 css 작성 기본값(브라우저 기본설정 패딩값, 마진값 초기화, box-sizing 설정)

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  }

 

태그(h1, div 등)

: 해당 태그 전체

 

#id명

: id 이름이 일치하는 태그

 

.class명

: class 이름이 일치하는 태그

 

attribute

- 태그[attr] attr속성을 가진 해당 태그

- 태그[attr=value] attr=value값만 가진 해당 태그

- 태그[attr~=value] attr=value값을 가진 해당 태그(다른 값을 동시에 가져도 됨)

- 태그[attr|=value] attr의 값이 정확히 value거나 value-('-')로 시작하는 태그

- 태그[attr^=value] value로 시작하는 attr를 가진 해당 태그 모두 선택. 뒷문자 상관 없음

- 태그[attr$=value] value로 끝나는 attr를 가진 해당 태그 모두 선택

- 태그[attr*=value] value를 포함한 attr를 가진 해당 태그 모두 선택. avalueb도 선택됨

 

자식 셀렉터 header > p {}

: header 바로 아래의 p 태그들에 적용

 

후손 셀렉터 header p {}

: header 아래의 모든 p 태그들에 적용

 

형제 셀렉터 section ~ p {} 

: 부모 요소를 공유하면서 처음 요소(section) 다음에 오는 두번째 요소(p) '모두' 선택

 

인접 형제 셀렉터 section + p{}

부모 요소를 공유하면서 처음 요소(section) 다음에 오는 두번째 요소(p) '하나' 선택

 

 

기타 셀렉터

가상 클래스 셀렉터

: 가상 클래스는 요소의 상태 정보에 기반해 요소를 선택

a:link	사용자가 방문하지 않은 <a> 선택
a:visited	사용자가 방문한 <a> 선택
a:hover	마우스를 <a> 위에 올렸을 때 선택
a:active	활성화된(클릭한) 상태일 때 선택
a:focus	초점이 맞춰졌을 때 선택(키보드 탭 등)

 

UI 요소 상태 셀렉터

input:checked+span	체크 상태일 때 선택
input:enable+span	사용 가능한 상태일 때 선택(활성 상태)
input:disabled+span	사용 불가능한 상태일 때 선택(비활성 상태)

 

구조 가상 클래스 셀렉터

p:first-child	첫번째 자식이 p인 경우 선택
li:last-child	마지막 자식이 li인 경우 선택
li:nth-child(조건)	n에 해당하는 li 선택
p:nth-last-child(조건)	뒤에서부터 n번째 p 선택(n에 해당하는 li 선택)
p:first-of-type	형제 요소 중 첫번째 p 선택
div:last-of-type	형제 요소 중 마지막 div 선택
ul:nth-of-type(조건)	형제 요소 중 n번째 ul 선택
p:nth-last-of-type(조건)	형제 요소 중 뒤에서부터 n번째 p 선택

* 조건

odd 홀수

even 짝수

An+B (n은 0,1,2,...)

 

부정 셀렉터

input:not([type="password"])	password 타입이 아닌 input 선택
div:not(:nth-of-type(2))	2번째 div가 아닌 div 선택

 

정합성 확인 셀렉터

input[type="email"]:valid	타입값이 유효하게 들어오는 input 선택(aaa@aaa.com)
input[type="email"]:invalid	타입값이 유효하지 않게 들어오는 input 선택(a@a@aaa.com)

 

 

 

VSCode 유용한 단축키(더 많은 기능은 emmet 검색)

html파일 생성 후 ! + tab 기본문서 작성

div + tab <div></div>

div*10 + tab  <div></div>*10

div.code*10 + tab <div class="code"></div>*10  

ctrl + d 선택한 단어와 같은 내용 순서대로 하나 선택

ctrl + shift + l 자동 정렬

alt + 클릭 커서 여러개 생성

alt + 방향키 코드 줄 이동

ctrl + x/backspace 한줄 지우기

 

 

 

22.10.27

코스 S1U5