2020.09.07

border ; 박스의 경계

border: width style color;

inline요소에도 적용가능

 

inline 요소엔 margin이 좌우만 적용됨-높이,너비 없음

padding은 사방 가능

 

inline요소 위아래 margin을 적용하고 싶다면 ->block요소로 바꿔주어야함

 

*{ } { 모든 속성에 적용 }

*id로 각 요소를 바꿔줄 수 있으나 tag마다 id가 겹치면 안됨 ->style에서 각각 바꿔줘야함

 

class - 여러곳에서 중복해 사용할 수 있음

.class { }

한 태그에서 여러 class 사용가능

id는 한 요소당 하나만 가질 수 있음

공통적인 부분을 class 로 묶어서 여러 요소에 사용한다

 

inline-block;

block을 inline요소처럼 취급함, 옆으로 배치할 수 있음

하지만 inline요소들은 옆으로 이어붙일 수 없음(공백이 있음),

페이지 가로를 넘어가면 자동으로 줄바꿈되어 내려감 (창 크기에 따라 달라짐)

->잘 안씀!!

 

flexbox

자유로운 배치 가능

창 크기를 줄이면 박스 사이의 거리 바뀜-interactive가능

1. 자식 엘리먼트 X 부모 엘리먼트에만 명시 O(div 아닌 body에)

2. 부모 엘리먼트를 flex container로 만들어야 한다

display: flex;

2. 수직으로 배치 가능(cross axis)

justify-content: main axis배치(주축, 수평배치 기본)

align-items: cross axis배치(교차축, 수직이 기본)

수직배치 위해서는 body의 height 설정해줘야함 - 100vh(viewport hight=screen size, 100vh=100% vh)

flex-direction: main axis바꿔줌 기본-row, 반대-column

reverse-순서바꿔줌

 

창이 좁아지면 좌우 사이즈 줄어듬

flex-wrap: wrap; 하면 창이 작아지면 다음줄에 배치됨

 

body-div-text

flex속성은 바로 아래 자식 엘리먼트에 적용됨

body가 flex container이어도 div안의 text는 적용안됨

 

pesudo selector

div:first-child

같은 tag들중 다른것 만들 때

div:nth-child(n), span:nth-child(k) {}

even/odd, 2n+1등도 작동함

 

다른것들이 아래에 자리할 때 - last-child 성립안됨

(div여러개 뒤에 span올 경우, div의 last-child가 없음)

 

 

 

 

position:

static; default

 

fixed; 스크롤해도 초기위치 그대로

다른 레이어에 생성됨

 

top, bottom으로 위치 조정해주면 다른 div신경안쓰고 배치됨

 

첫번째 div의 위치조정-left, right로도 두번째 div가 body 맨위부터 시작해서 위치함

두번째 div의 위치조정-left, right를 사용하면 첫번째 div아래에서 좌우로 움직임/첫번째 div와 겹치지 않음

순서대로 레이아웃을 먼저하고 조정한다고 생각해야될듯

 

relative;

처음 위치한 곳을 기준으로 위치조정

+/-로 위치조정

 

absolute;

가장 가까운 relative 부모를 기준으로 이동함(fixed도 가능)

body-div-class/id순으로 올라감

class/id - absolute, div가 default(static)이면 body를 기준으로 움직임(body는 default가 relative)