CSS-기초편 Position과 Transform

앞에서 간단하게

인라인, 블록 요소, 선택자를 배운적이 있다.

 

CSS의 우선순위

CSS는 기본적으로 위아래로 순차적으로 읽지만,

• 동일한 요소를 다른 선택자로 적용해 여러 스타일이 적용되는 난감한 상황 이 발생하기도 함.

• CSS 파일이 여러 개라면 더욱 난감해짐

*외우긴 힘듬, 자주봐라 *

!important > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 선택자 >태그 선택자 > 전체선택자

---

레이아웃을 위한 첫번쨰

Position과 transform에 대해서 알아보자.

 

 

Position

웹 문서 안 요소들을 배치할 때, 텍스트나 이미지 원하는 곳에 배치할 때 사용

 

1) static : 정적 위치 지정 방식

기본 위치에 존재하는 속성값 (div같은 경우 왼쪽 상단부터), 위치 지정불가(top, left 등)

 

 

2) relative: 상대 위치 지정 방식 (눈치보는 아이)

(본인이 원래 static일 때 기준점, 존재하는 위치에서 상대적으로 움직임)

top, left 등 적용 가능

#circle2 { background-color: aqua; position: relative; left:100px;}

해당 아이디가 원래 존재했던 좌표(static)부터 왼쪽으로 100px 이동

 

 

3) absolute: 절대 위치 지정 방식 (겹치거나 할 때, 눈치보지 않는 얘)

부모, 조상(형제x) 중 relative 포지션을 가진 얘가 기준점

없으면! body태그 기준이 됨!

#circle2 { background-color: aqua; position: relative; left:100px;}          얘가 기준점!

#circle3 { background-color: blueviolet; position: absolute; left: 10px;}  기준점으로부터 왼쪽 10px 이동

 

4) fixed : 화면이 기준점, 얘는 절대 고정 (다른 얘들은 화면비율에 따라 움직이는데)

#circle4 { background-color: black; position: fixed; left: 50px; top: 10px;}

화면 최상단에서 10px 내린다, 제일 왼쪽에서부터 50px

 

 

position 속성은 아니지만, 상관있는

5) z-index : 고정 위치 지정 방식 (포토샾의 레이어라고 생각)

•  z축, 기본적으로 0이다.
• position 속성이 relative, absoulute 여야 동작한다.
• 기본값은 auto, 정수로 설정이 가능하다. (양수, 음수 오케이)
• 번호가 높게 부여된 레이어부터 보여진다.
• z-index는 같은 선상에 있는 태그값부터 확인하지만, 부모 태그의 z-index가 더 우선이기 때문에 아무리 자식 태그의 z-idex가 크더라도 부모 태그 값을 우선시 합니다. (부모가 1이면, 자식도 1인 것)

 

Transform

객체의 모양, 크기, 위치 등을 자유롭게 변경 가능

 

1) skew: 기울기 

transform: skewX(10deg);

x축 왼쪽으로 10도 기울인다.

 

사진 출처: https://dev.to/kunaal438/css-transform-complete-guide-on-css-transform-everything-you-need-for-good-developer-841

 

 

2) scale: 확대

teransform: scale 2하면, 2배 확대

scale x 가로만 확대

scale y 세로만 확대

 

 

3) rotate:회전 (기본적으로 시계방향)

transform: rotateY(10deg);

 

 

 확대,축소 / 기울이고 / 회전하고 / translation은 애니메이션 효과와 같은 것인데 나중에 알아보도록 하겠다.

사진 출처: https://desktop.arcgis.com/en/arcmap/10.6/tools/coverage-toolbox/how-transform-works.htm

 

 

주의해야할 점은, x축은 가로로 도는것과, y축은 -y가 위에 있다는점...

주의해야할 점은 y축은 위가 -y축이다.

축의 회전도 x축은 좌우로 도는게 아니라 가로로 회전하는 것