🍌뷰포트 : 브라우저에서 웹사이트를 볼 수 있는 영역
🍌vw(width) : 가로 단위이며, 디바이스에 맞춰
🍌vh(height) :
디바이스에 따라 반응형으로 만들고 싶을때 사용하는 단위
🍌vmin : vw와 vh중 작은 것
🍌vmax : vw와 vh중 큰 것
- 주로 웹사이트가 가로모드와 세로모드가 있을 경우 사용
🍌 %(percentage) : 부모를 기준으로 함( 부모의 값에 따라 영향을 받음)
🍌cal() : 단위가 다른 것들을 사칙연사 해줄 수 있게 하는 함수
- +, -, *, / 연산자 앞 뒤로 공백 하나씩 줘야함
- 숫자를 사용
🍌min(x,y) : x와 y중 작은 값 선택
🍌max(x,y) : x와 y중 큰 값 선택
- 지원안하는 브라우저도 있으니 확인하고 사용하기
🍌content : html요소 중 실제 컨텐츠의 영역
🍌padding : 요소 안쪽 여백
🍌border : padding과 margin 사이의 테두리
🍌margin : 요소 바깥쪽 여백
🍌 지정한 값이 되면 브라우저 창에 맞게 요소의 가로/세로가 줄어들거나 늘어나지 않게 하는 속성
🍌initail value
- margin-bottom : 0;
- margin-left : 0;
- margin-right : 0;
- margin-top : 0;
🍌자식요소에서 상속되지 않음
🍌마진 상쇄
-블록요소들의 위/아래의 margin이 겹칠 경우에 상쇄되는 현상
- 마진상쇄가 발생하면 더 큰 값이 적용됨
- 좌/우에는 발생하지 않음
- 단 겹치는걸 끊어줄 수 있는 1px이라도 있으면 마진 상쇄는 발생하지 않음
📌 인접형제 : 두 형제 요소의 위/아래 여백이 만날 때 상쇄
📌 부모-자식요소 간 : 부모와 자식을 분리해줄 수 있는 값이 없을 경우
📌 자기 자신의 margin 좌/우와 상쇄 : height이 존재하지 않을 때
🍌px, em, rem, % 단위 사용 가능 / 음수값 사용가능
*단, %는 부모의 width(가로)의 %를 따라감
🍌margin : 10px; (상하좌우 모두 바깥쪽으로 10px 간격 생김)
🍌margin : 20px; (상하) 10px(좌우)
🍌margin : 20px; (상) 10px(우) 15px(하) 5px(좌) -> 시계방향
🍌initail value
- padding-bottom : 0
- padding-left : 0
- padding-right : 0
- padding-top : 0
🍌padding : 10px; (상하좌우 모두 안쪽으로 10px 간격 생김)
🍌padding : 20px; (상하) 10px(좌우)
🍌padding : 20px; (상) 10px(우) 15px(하) 5px(좌) -> 시계방향
🍌상쇄 일어나지 않음
🍌px, em, rem, % 단위 사용 가능 / 음수값 사용 불가능
*단, %는 부모의 width(가로)의 %를 따라감
🍌외부 영역과 내부영역 사이의 테두리
🍌border-style
- none(defalut)
- solid : 직선
- 상하좌우 모두 다른 선으로 지정할 수 있음 (시계방향)
- 스타일을 지정하지 않으면 두께와 색깔이 있어도 보이지 않음
🍌border-width : 테두리 두께
- thin/medium/thick 키워드 있음
- 키워드보단 px로 주는게 좋음
🍌border-color : 테두리 색상
- 상하좌우 모두 다른색상으로 지정할 수 있음 (시계방향)
- 색깔이 없으면 border에 두께와 스타일을 줘도 보이지 않음
🍌border : 1px solid red; 보통 이렇게 선언
🍌outline : 요소를 강조하기 위한 것으로, border 처럼 디자인적으로 꾸밈을 주는거와는 다름
🍌border-radius : 테두리 곡선을 줄 수 있음
- 상하좌우 다르게 줄 수 있음
- 음수 값 불가능
- %단위 사용가능
div{ width : 300px; height : 300px; border : 5px solid red; border-radius : 30px }
🍌요소의 width와 height 계산하는 방법을 지정
🍌box-sizing 값
- content-box(defalut) : width와 height이 의미하는 것이 content부분의 width와 height을 의미(padding과 border는 무시)
- border-box : width와 height의 값을 border까지 인식하게됨
🍌이런식으로 선언하고 디자인주는 게 좋음
*{ box-sizing: border-box; }