📍 position 속성
-
컨텐츠의 좌표 이동이 가능하게 함.
-
내 기준점을 정해줌
-
해당 컨텐츠를 공중에 띄워 보기에는 위에 있어 보이게함.
-
positon 속성 지정 후 left, right, top, bottom 좌표 값 지정가능. (- 값도 가능)
📍 positon 요소
-
static (기본값) : 좌표이동 안함
-
relative : 내가 기준
-
fixed : 브라우저 기준
-
absolute : 부모 태그 중 'position: relative;' 를 가진 부모 태그 기준
-
sticky : 스크롤에 따라 움직임 (position 좌표 지정이 필수)
※ position: absolute; 일때 컨텐츠 가운데 정렬 시키기
이때 배경이미지가 있다면 background-image: cover; 로 되어있다면 가운데 정렬됨.
.content {
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 100px; (가로값은 있기만 하면됨)
}📍 z-index
자연수로 지정되며, 숫자가 클수록 위로, 숫자가 작을수록 아래로.
📍 반응형 레이아웃 만들기
-
width, height 값을 % 로 지정하기 ( 부모값의 % 를 크기로 받음)
-
PC브라우저에서는 너무 크게 보일 수 있고, 휴대폰에서는 너무 작게 보일 수 있음
→ 커지는 최대값을 정하고 싶다면 : max-width , max-height
→ 작아지는 최소값을 정하고 싶다면 : min-width, min-height
► width, height 를 % 로 정하고, max 나 min 값도 같이 정해주면 좋음!
📍 box-sizing
- width, height 값은 사실 우리 눈에 보이는 크기가 아닌, 컨텐츠만의 크기를 말함.
- padding, border 값은 포함 하지 않아, 생각한 크기대로 구현이 안될 수 있음.
→ 이럴때는box-sizing: border-box;로 지정
→ padding, border 크기가 내가 적은 가로나 세로 폭에 포함되어 구현됨.
∴ CSS 작성 전 미리 전체 문서에 적용되게 적어두면 편리함.
📌 생각정리
구글에 normalize.css 로 검색하면,
브라우저에서 기본적으로 설정되어있는 CSS 스타일을 모두 빼주는 코드들이 많다.
왜 미리 정해놓은 css 스타일을 빼는 걸까?
브라우저 종류마다 조금씩 미리 정해진 기본 스타일이 다른데,
이렇게 되면 내가 원하는 스타일이 미리 지정된 기본 스타일 때문에
브라우저 마다 다르게 규현될수 있다.
그래서 미리 똑같이 맞춰놓고 스타일 넣기 시작함.
→ 멋진 말로 '브라우저 호환성을 위해'
