Importatnt Q. Inline CSS와 External CSS가 같은 대상(선택자)을 가르킬 경우, 실제로 적용되는 효과는 어떤 것일까? A. CSS는 Cascading 정의 그대로 위에서부터 아래로 차례대로 적용되기 때문에 가장 아래 위치한 Inline CSS 코드가 적용. (if External CSS(<link>태그)가 가장 아래 위치할 경우 External CSS 코드가 적용
CSS
"CSS가 하는 일은 HTML 태그를 가르켜서(point) 꾸며주는 일" "근육"
Structure
구조
예제
* 속성(property)에 띄어쓰기/밑줄(_)/슬래쉬(/) 사용 불가
Boxes
inline
block
inline ↔ block 전환
정의
같은 열에 다른 요소와 함께 위치 가능
줄 전체를 차지; 다른 요소와 함께 위치 불가능 (대부분의 boxes)
외부 배치 : block 내부 속성 : inline
(width/height/margin/padding 속성 변경 가능)
해당 태그
<span> <a> <image> <code>등 해당
<div> <p> <address> <blockquote> <header>등 해당
해당 element 속성에 display: inline; 추가시 inline으로 변경 display: block; 추가시 block으로 변경
- 높이(height)와 너비(width) 변경 가능 - margin/padding/border 설정 가능
- 변경된 속성을 따름
* 대부분 block element기 때문에 inline element가 무엇인지 기억하는것이 편리
Importatnt
Before
change1
change2
코드
의미
<div> 태그의 display 속성이 갖는 default 값 = block
웹페이지에서 표현 X (기본적으로 inline요소들은 너비/높이를 가질수 없기 때문)
inline요소의 속성을 갖는 동시에 block처럼 너비/높이/margin등 속성 값 가질 수 있음
* inline-block : 반응형 디자인(Responsive Desgin)을 지원하지 않는 단점 존재 ∴ 화면 크기에 따라 레이아웃이 달라지기 때문에 잘 쓰이지 않는다 → flexbox로 해결 가능
Flexbox : Rules
행과 열의 형태로 항목 무리를 배치하는 일차원 레이아웃 메소드;
부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형됨 → 반응형 디자인 지원
Importatnt
Rule 1. 움직일 박스(<div>)의 부모 요소(element; <body>)를 flexbox로 변경 → <body> becomes a flex container * <div>에는 display관련하여 아무것도 적지 않는다.
Rule 2. Flex Container은 2개의 축을 갖는다 * 주축(main-axis)의 default값은 수평값 → justify-content 속성은 주축에 적용 * 교차축(cross-axis)의 default값은 수직값 → align-element 속성은 교차축에 적용 * 주축/교차축의 default값은 변경 가능. 즉, 각각 수평/수직으로 변경될 수 있다. Flexbox @MDN
■ flex-direction : column
해당 속성값(default값:row)을 column으로 변경 → 기준 축 방향이 반대로 변경된다.
* justify-content는 주축 → 교차축 기준으로 변경되어 적용 * align-element는 교차축 → 주축 기준으로 변경되어 적용
Box Model
Layout and the containing block @MDN
■ content : 컨텐츠가 표시되는 영역
■ padding : content와 border 사이의 공간
■ border : 테두리
■ margin : border밖 여백; 다른 요소와 해당 박스 사이의 공백역할
Importatnt
margin 표현방법 * value값이 1개일 경우 모든 방향 적용
(1) 하나씩 방향 입력
(2) value값 2개 (1st value: 위/아래 적용 2nd value: 왼/오른쪽 적용)
(3) value값 4개 (top→right→bottom→left 시계 방향 순서)
코드
* margin value 값들 사이에 쉼표(,) 사용 불가
마진 겹침 (Collapsing Margins) "경계가 닿아서 margin이 같아졌나보구나." 정도로만 이해해도 ok 상하 마진값이 어떤 상황에서 사라지는 현상을 의미 * 좌우는 발생하지 x
1. 인접 형제 박스 간 상하 마진이 겹칠 때 발생 2. 빈 요소의 상하 마진이 겹칠 때 발생 (1) 상하단 마진값을 비교해 더 큰 값으로 상쇄 (2) 상하단 마진값이 같을 경우 중복값 상쇄
