12 CSS 속성 - 박스모델
-
시험 외 범위
-
margin(단축)
요소의 외부 여백 / 음수값도 사용 가능하다.
auto, px...
%: 부모 요소의 가로 너비에 대한 비율로 지정
→ margin: 위 우 아래 좌;
→ margin: 위 [좌,우] 아래;🤦♀️마진 중복(병합, collapse) ← 버그는 아니다
-
형제 요소들의 margin-top과 margin-bottom이 만났을 때 (수직 정렬 되었을 때)
-
부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 때
-
부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 때
부모(자식) 요소의 margin bottom(top)이 시작하는 면이 같다면 자식(부모) 요소의 margin 값이 함께 사용된다. (부모(마진 0-양수), 자식(양수 0보다 큰수 → 자식의 마진이 함께 사용됨)→ 계산법
둘 다 양수면 더 큰 값으로 중복 (하나가 margin이 없으면 있는 거로 적용되는 이유)
둘 다 음수면 더 작은 값으로 중복(겹치게 된다.)
각각 음수 양수이면 양수+음수로 계산해 사용한다.(서로 더하기)
-
해결법
-
형제끼리
각 형제 요소에 float 속성 추가
-
부모 자식끼리
부모 요소에 아래의 속성 중 하나를 추가
속성 값
float left, right
overflow hidden, auto
position absolute, fixed
padding 1px 이상
border 1px 이상
-
-
-
padding(단축) - 마진과 비슷하게 사용됨
추가된 padding 값만큼 요소의 크기가 커지게 된다.
이를 방지하기 위해서 box-sizing: border-box;
(그렇지 않다면 직접 계산을 해서 사용해야 한다.
-
border(단축) (단축 속성은 개별 속성을 가지고 있다.)
두께가 추가되는 만큼 요소의 크기가 커지게 된다.
이것도 박스 사이징으로 방지 가능
border: 두께 종류 색상;
개별 (단축도 상하좌우 위치는 margin과 같음)
두께 - border-width(단축) (개별 4면의 라인의 두께를 각각 지정이 가능하다.)
종류 - border-style(단축) (개별 4면의 라인의 스타일을 각각 지정이 가능하다.)
색상 - border-color(단축) (개별 4면의 라인의 색을 각각 지정이 가능하다.)
→ transparent (크기는 두께로 지정한 만큼으로 추가되고 요소의 배경색이 있다면 배경색으로 보인다.)
+border-width-top이런식으로 개별요소로 사용가능
-
box-sizing
요소의 크기 계산 기준을 지정
content-box (w,h 로 지정된 값이 오직 content 만을 지정한다.)
border-box (padding과 border의 두께까지 포함해서 w,h값으로 지정한다.)
+padding-box 도 존재하나 브라우저 호환성이 매우 낮다.
-
display
inline-block : 수평으로 쌓이지만 가로와 세로, 마진과 패딩의 위아래 값을 가질 수 있다.
none: 요소가 사라짐(시각적이 아닌 실제로 없어짐)
-
overflow(단축)
-x, -y로 개별 속성 지정 할 수 있음
요소에 적용(부모)
요소(부모)의 크기 이상으로 내용(자식)이 넘쳤을 때 내용의 보여짐을 제어
- visible (기본값)
- hidden
- scroll (넘치든 넘치지 않든 스크롤 생성-위아래좌우)
- auto (넘치면 스크롤 생성)
-
시험 외 범위
-
opacity 투명도 (기본값 1)
0~1사이의 수를 입력한다.display: none은 요소가 아예 사라진다.
opacity: 0은 투명해질 뿐 존재는 한다.
-
👽position
요소의 위치 지정 방법의 유형(기준)을 설정
속성
-
기본값 - static 유형 기준 없음/ 배치 불가능
-
relative 요소 자신을 기준
자신의 기본위치를 기준으로 시각적으로 이동만 한다.
실제의 요소의 위치는 기본 위치를 가지고 있기에 주변의 영향을 주거나 받기에 사용에 주의해야한다.
-
absolute 위치 상 부모 요소를 기준
위치 상 부모(포지션 값을 가지고 있는 가장 가까운 상위 요소)를 기준으로 배치가 되기 때문에 주변(형제 요소)에 영향을 주지 않는다. (절대적?
-여기서 영향을 주지 않는다는 뜻은 자신의 위치가 문서 상의 기본 위치에 존재하지 않고 부모 위치를 기준으로 배치 되기 때문이다. 이점이 relation가 가장 큰 차이점
부모 요소에 보통 (relative)를 준다. (꼭 포지션 값을 줘야 한다.)
static이 아닌 이유는 static은 기본 값으로 위치 값을 가지고 있지 않는 것과 같은 의미를 가지고 있기 때문이다. html 문서 상의 구조로만 존재한다.
만약에 아무것도 없다면 브라우저를 기준으로 배치된다.
-
fixed 브라우저(viewport)를 기준
- 시험 외 범위
-
sticky 스크롤 영역을 기준
- 시험 외 범위
(position과 함께 사용하는 속성)
-
top: top에서 부터의 거리
단위: px,em...
% : (위치 상) 부모 요소의 세로너비 비율로 (음수값 허용)
-
bottom (% 부모 요소의 세로너비 비율)
-
left (% 부모 요소의 가로너비 비율)
-
right(..)
-
시험 외 범위
-
요소 겹칩 (overlapping elements)
position속성으로 배치된 요소는 특정한 기준을 가지기 때문에 다른 요소들의 위치에 영향을 받지 않습니다. 또한 기준(속성 값)에 따라 겹치는 형태가 달라질 수 있습니다.
-
요소 쌓임 순서(stack oder)
-
static을 제외한 (기본값) position속성의 값이 있을 경우 가장 위에 쌓임(값은 무관)
-
position이 모두 존재한다면 z-index속성의 숫자 값이 높을 수록 위에 쌓임
-
position속성의 값이 있고, z-index속성의 숫자 값이 같다면,
'HTML'의 마지막 코드일 수록 위에 쌓임(나중에 작성한 코드(요소))비교 순서: position → z-index → HTML위치 (나중에 작성한 게 우선 시)
-
-
display 수정
absolute, fixed 속성값이 적용된 inline요소는 display 속성의 값이 block로 수정됨
(like float)
15 CSS 속성 - 배경
-
BACKGROUND (단축)
background: 색상 이미지경로 반복 위치 스크롤특성;
(이미지경로 - 반복,위치,스크롤특성 함께 사용 (생략가능) )(개별)
-
color 요소의 배경 색 지정
background: (기본값) transparent; -
image 요소의 배경에 하나 이상의 이미지 삽입
background-image (기본값) none;-
url("경로");
하나 이상 이미지 url("경로"), url("경로2");
먼저 삽입한 이미지는 앞 쪽으로 배치된다.
다중 이미지 사용할때는 개별 속성보다 backgound 단축속성을 이용하는 것이 이미지 마다 속성을 관리하는것이 편하다.
-
이미지 투명도 관리
-
opacity: 0~1;
요소 안의 하위 요소들 혹은 다중이미지 모두 함께 전체적으로 투명해지기 때문에 사용에 불편하다.
이럴 경우 컨테이너에 가상요소::before을 추가해서 배경이미지를 추가해주면 된다. 그리고 position: absolute; (컨테이너에는 위치속성 넣어두고) top: 0; left:0;으로 위치를 위쪽에 고정시킨다.
- ( 근데 왜 포지션 값을 줘야하는걸까)
- 일단 가상요소는 인라인 요소이다. 그렇기 때문에 포지션값(absolute,fixed)이 적용된 inline 요소는block이 되는 특성을 이용해서
- ( 근데 왜 포지션 값을 줘야하는걸까)
-
-
-
-
repeat 배경 이미지의 반복을 설정
background-repeat: (기본값)repeat 수직, 수평으로 반복됨- norepeat
- repeat-x/y
-
position 배경이미지의 위치를 설정
background-position: (기본값) 0%(x) 0%(y) 단위의 경우 x, y축의 순서를 지켜서 입력해야한다.
-
왼쪽 상단 모서리 0% 0% / 오른쪽 하단 모서리 100% 100%
-
방향: ((y축 개념) top, bottom / (x축 개념) right, left / (x,y) center)
-
단위는 이미지의 방향의 끝(왼쪽과 위쪽)을 기준으로 인식한다.
ex) 부모 요소의 너비가 550px의 경우 background-position: 550px;을 입력하게 되면 이미지의 왼쪽의 끝을 기분으로 550px을 이동하기 때문에 화면에서 이미지가 보여지지 않게 된다.
한 방향만 입력했을 경우(단위는 입력 순서에 따라서 어차피 x축이 됨) 나머지는 자동으로 가운데 정렬에 맞춰지는 것 같음.
- attachment 요소가 스크롤 될 때 배경 이미지의 스크롤 여부 설정
background-attachment: (기본값) scroll 요소와 함께 배경 이미지 스크롤-
fixed 배경 이미지가 뷰포트에 고정되어 요소와 함께 스크롤 되지 않음
fixed가 속성 값으로 설정 된 경우 position의 위치 기준값이 viewport로 설정된다.
-size의 %기준 값도 부모 요소가 아닌 viewport가 기준이 된다.
-
local 요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨. (잘 사용되지는 않음)
스크롤의 기준이 viewport에서 요소로 옮겨서 적용된다. viewport의 스크롤을 내려도 요소에서의 스크롤 된 영역은 변하지 않는다.
만약 요소 안에 스크롤이 있지만 attachment 값이 scroll이라면 요소 내에서 scroll을 내려도 고정된 이미지만 보일 뿐이다.
- size 배경 이미지의 크기를 지정
background-size: (기본값) auto 원래의 크기로 설정-
단위: width height(잘못된 사이즈로 이미지가 변형될 수 있음 -눌리거나 늘려져서)
한 방향만 입력하면 나머지는 비율에 맞춰서 자동으로 조절됨
-
cover 비율을 유지하며 요소의 더 넓은 너비에 맞춰짐
기준이 더 넓은 너비이다 보니 이미지가 잘릴 수도 있다.
기본이미지보다 요소가 작아지면 원본 이미지에서 사이즈가 바뀌지 않는다.
이 경우 포지션 값으로 화면이 이미지보다 작아질 때 보일 부분을 지정할 수 있다. (방향으로 지정)
- top, bottom 세로로 이미지가 짤릴 경우
- right,left 가로로 이미지가 짤릴 경우
-
contain 비율을 유지하며 요소의 더 짧은 너비에 맞춰짐
기준이 짧은 너비이다 보니 빈 공간이 보일 수 있다.
attachment 값이 local인 경우 + overflow가 auto,scroll:
- cover: repeat값이 적용되지 않으며, (기준을 모르겠지만) 이미지가 원본 크기를 넘어서 커지는데 가로 스크롤은 작동되지 않는다.
- contain: 이미지가 cover의 값처럼 요소의 더 넓은 너비에 맞춰진다. 그러다 보니 repeat-x축은 보이지 않고 repeat-y축만 보인다.
