1. css margin 상쇄
collapse margin : 부모 border와 내부 border이 서로 붙어있으면 상하 margin은 적용이 안된다.
그래서 padding이란 개념이 도입
2. id, padding
- id -> # { }
- padding : border 반댓말
<!DOCTYPE html>
<html lang="ko">
<head>
<title>document</title>
<style>
html {
background-color: tomato;
}
body {
margin: 20px;
padding: 20px; // paddgin을 적용하면 padding 적용한 부분 안쪽으로 뭔가를 생성할 수 있다.
background-color: thistle;
}
div { // 모든 div에 적용
height: 150px;
width: 150px;
padding: 10px;
}
#first { // id 사용하는 방법
background-color: whitesmoke;
width: 150px;
height: 150px;
}
#second {
background-color: teal;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="first"> // id 지정
<div id="second">
</div>
</div>
</body>
</html>
3. border
- border: block의 경계 의미
- block, inline 모두 적용
4. class
- class : .으로 나타냄
- class 내부에 여러개 지정이 가능하다.
class="btn hello bye" - id는 여러개 쓸수 없다.
- span에서는 좌우 : margin은 적용가능 - 상하 안됨
- span에서는 상하좌우 : padding 적용 가능
5. inline-block
div {
display: inline-block;
/* display에는 block / inline-block / inline 등이 존재 이 중 inline-block은 block인데 inline처럼 나열이 가능
inline block은 단점이 많음. margine이 없는데도 빈 공간이 있고 간격도 고르지 않음
= responsive design(반응형 디자인)을 지원하지 않는다 = 화면 창마다 크기가 달라짐*/
width: 100px;
height: 100px;
background-color: teal;
margin-right: 11px;
}
- height: 100vh;
vh: viewport height ; screenheight라고 생각하면 됨 px로 하면 상대방이사용하는 기계의 화면 크기따라 달라지므로 그것까지 감안한 vh를 이용한다
6. flexbox
<!-- inline-box의 문제점을 해결해주는 것이 flexbox이다
이것은 지켜야할 3가지의 규칙이 있다
1) 자식에게 명시하지 않고 부모에게 명시한다. div의 부모를 display:flex로 만든다
부모 엘리멘트에만 말하고 자식 엘리먼트에 말하지 않는다 = 부모에게 명시하고 자식에게 명시할 필요X
EX) div에 명시할게 있으면 body에게 명령을 해야함
이렇게 하고 나면 많은 다른 속성(property)를 수정할 수 있다
2)3) main axis(주축)justify-content and cross axis(교차축)align-items
주축은 x축이고 교차축은 y축이라고 생각하면 됨. justify-content 는 주축을 따라서 움직이고 align-items는 교차축 위로 움직인다
align-items를 이용하고 싶을 때 defalt값으로 body가 한정 되어 있으므로 body의 height를 늘려주고 이용하면 된다.
하지만 이들의 값은 주축이 수평=x축 값은 변경 가능하므로 항상 가로라고 생각하지는 말기
## 정리
flexbox를 이용하려고한다면 우선 display: felx;를 지정해주고 이를 지정해 주어야지 justify-content align-items를 이용할 수 있다.
제일 중요
flex에 관한 모든 것을 시각적으로 보여주는 어플
https://flexboxfroggy.com/#ko -->
<!-- 3_11에도 연장된 felxbox 개념이 들어가 있다 -->
- display : flex; -> block을 가로줄로 정렬
- justify-content : 가로줄 관련 작동
- align-item: 세로줄 관련 작동
- flex-direction: 뒤집기
- row : 가로 뒤집기
- column : 세로 뒤집기
- flex-wrap: 해당 범위 내에서 분할 해주는 기능
body {
height: 100vh;
margin: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap-reverse;
/* wrap: 화면창을 줄일때 box 가 크기를 바꾸지 않고 위치가 변하고 nowarp: 화면을 바꿀때 box 크기도 줄어들면서 공간을 일정하게 유지 */
/* flex-direction: column-reverse; */
}