[내가 보려고 만든] css 속성 정리 2

지난 포스팅에 이어 css 속성 정리에 대한 내용이다.

이번에는 더 활용적인 속성들을 정리해 볼 예정이다.

​

​

​

<박스 모델 영역>

html 요소들은 박스 모양의 공간을 차지하기 때문에 박스 모양의 영역을 구분할 수 있다.

​

- 콘텐츠 (element/ content) :문서 내용

- 테두리/경계선 (border) : 콘텐츠를 둘러 싼 경계

> 테두리/경계선 두께 : border-width, border-top-width,...

> 테두리 모양 : border-style (soid, dotted, double,...)

> 테두리 색 : border-color

* border로 줄여쓰기 가능 border(두께, 모양, 색상, 값)

​

- 내부 여백 (padding) : 테두리와 내용 사이 여백

> padding, padding-top,...

​

- 외부 공백(margin) : 바탕과 테두리 사이

> margin, margin-top, margin-right, margin-left,...

​

​

​

<콘텐츠 위치>

- top, bottom, left, right, width, height 속성

- position 속성 : 위치 값 유형 지정

> static : 기본 값, 순서 배치

> absolute : 문서 내의 절대 위치

> relative : 직전 요소의 상대 위치

> fixed : 브라우저 화면 내의 절대 위치

​

​

​

<앞/뒤 순서>

- z-index 속성 : 콘텐츠의 앞 뒤 순서 지정 (값이 큰 콘텐츠가 앞에 위치)

​

​

​

<플로팅 박스>

- float 속성 : 플로팅 박스 지정 (특정 콘텐츠를 별도로 분리 지정 시 사용)

> left, right, none(기본 값)

​

​

​

<콘텐츠 박스>

- width, height 속성 : 콘텐츠 크기 조정 (min, max를 사용하여 크기의 하한과 상한 지정)

- overflow 속성 : 오버플로우 처리

> visible : 기본 값. 콘텐츠 박스를 무시하고 내용이 다 보임

> hidden : 콘텐츠 박스 만큼만 내용 표시

> scroll : 스크롤 표시(세로, 가로), 내용 확인

> auto : 박스 영역이 줄어들면 스크롤 표시(세로만), 내용 확인

​

​

- border-radius 속성 : 둥근 모서리 지정

> border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius

​

- box-shadow 속성 : 박스 그림자 속성 지정

> 속성값 6개 같이 지정 (가로 시작 위치, 세로 시작 위치, 번짐 정도, 그림자 크기, 그림자 색상, 그림자 방향(inset, outset(기본값))

​

- opacity 속성 : 투명도 지정 (0.0 (투명) ~ 1.0 (불투명))

​

​

<전환 효과>

- :hover : (* 전 포스팅 참고)

- transition 속성 : 변화될 속성 이름과 전환 시간 지정

- transform 속성 : 객체의 좌표 변환 (* 글자 단위 요소(span, strong,...) 적용 불가)

> 이동 변환 : translate(x,y), translateX(x), translateY(y)

> 크기 변환 : scale(x,y), scaleX(x), scaleY(y)

> 회전 변환 : rotate(angle)

> 기울임 변환 : skew(x-angle, y-angle), skewX(angle), skewY(angle)