[CSS] CSS 정리 (5)
기본 문법은 위와 같이 사용한다.
Selector로는 태그 이름 혹은 CSS 선택자를 사용한다.
모든 요소의 이름은 숫자로 시작하면 안 된다.
id : #으로 선택. 문서 안에 하나만 사용한다.
class : .으로 선택. 문서 안에 여러 개를 사용해도 된다. 그룹화에 사용됨. 띄어쓰기하면 클래스 2개 지정. p.large는 p요소의 large를 의미
* : 모든 요소를 선택함
opacity/transparency : 투명도
background-repeat : 배경 이미지를 반복해서 배경 채움
background-attachment : fixed 설정 시 스크롤해도 이미지 고정
background-position : 배경 이미지 위치 지정
border-radius : 둥글게
margin : auto 설정 시 반응형 웹 (브라우저가 계산)
inherit : 상위 노드 (부모) 의 값을 따라감
margin collapse : 겹칠때 큰 값으로 설정
box-sizing : 컨텐츠 길이가 border 길이로 설정됨
max-width : width와의 차이점은 스크롤했을때 유지하냐 마냐의 차이 width는 유지
text-align justify : 양쪽 줄맞춤
text-decoration : a 태그는 기본적용이니 제거하려면 none
text-transform : 대문자로 / 소문자로 등..
text-indentation : 들여쓰기
letter-spacing : 글자간 간격
word-spacing : 단어간 간격
line-height : 줄간 간격
white-space : 공백 처리에 관련됨. 무조건 1칸으로 한다던가.. 줄바꿈을 무시한다던가..(nowrap, normal, pre)
text-shadow : 가로 세로 번짐정도 색상
요소는 여러 개 한번에 지정 가능. h,p1,p2{ ... }
Inline style sheet : html 요소에 추가로 사용.
internal style sheet : <head> 태그 안에 <style> 태그 사용.
external style sheet : 가장 많이 사용함. 파일 따로 사용. <head> 태그 안에 <link> 태그로 연결해줌.
중복 시 마지막에 적용된 css를 따른다.
아무것도 없으면 브라우저 default를 따라감.
CSS 주석은 /* */
프로퍼티 하나에 값을 여러개 써도 됨.
content에는 태그의 내용이 들어감
border는 테두리
padding은 border와 content의 경계
margin은 element와 element의 경계
양 옆으로 들어감에 주의
2개만 쓰면 상하 / 좌우
3개 쓰면 상 / 좌우 / 하
4개 쓰면 상 부터 시작해서 시계로 돌기
style 정의하지 않으면 다른 요소들 모두 적용 안 됨
색표현
1. 16진수 #000000검 ~ #ffffff흰 (RRGGBB)
2. 10진수 0 ~ 255 (ff = 255) r, g, b (R, G, B) a로 불투명도 포함 가능(1 불투명 0 투명)
3. 색상-채도-밝기 0% 어두움 ~ 100% 밝음
display 속성
block : div h1 p form header 등 margin width height 속성 정의 가능
inline : span. 속성 정의 불가능
none : 아예 없던것처럼 설정. visibility - hidden은 그 자리를 숨김
기본 값이 위와 같다는거지 커스텀해서 설정해 줄 수 있다.
position 속성
static : 기본값. 순서대로 쌓인다.
relative : 특정 원소를 기준으로 위치 지정
absolute : relative와 함께 사용함. relative가 absolute의 기준이 된다.
fixed : 말 그대로..
sticky : 특정 위치에 도달하면 fixed처럼 동작. (스크롤)
z-index 속성
겹칠 때 뭘 우선시해서 앞으로 보낼지를 지정함.
float 속성
빈 공간을 차지하도록 배치됨.
clear 속성으로 float 속성에 영향 받지 않게 설정함
'Web > HTML && CSS' 카테고리의 다른 글
| [HTML] Layout (1) (0) | 2022.10.25 |
|---|---|
| [HTML] Form (1) (0) | 2022.10.25 |
| [HTML] HTML 정리 (3) (0) | 2022.09.14 |
| [CSS] CSS 정리 (4) (2) | 2022.02.06 |
| [CSS] CSS 정리 (3) (0) | 2022.01.21 |