[ CSS ] 정렬 / 배치

[ reset ]

: 태그에 걸려있는 CSS 초기화 
CSS 적용 전에 h, a 등 태그에 default 로 걸려있는 CSS 를 초기화 시키고 작업 시작

=> reset 템플릿 사용 ( reset css cdn <= 검색해서 다운받아서 사용 )

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

[ css 적용 우선순위 ] 
- 로컬에 가까운 순서대로 적용 
- 로컬에서 우선순위 
1. 직접 걸어둔 style 태그 
2. id 
3. class 
( !important <= 무조건 적용 )

 

=> 부모 태그 부터 타고들어가서, ID로 CSS 를 줬다거나, 

바로 class 로만 CSS 를 줬다거나 

타고 들어가는 방법에 따라 점수합쳐서 우선순위 적용 

 

=> 부모 태그에서 들어가는 식으로 줘서 씹히지 않도록

=> 개발자도구 styles 에서 뭐가 씹히는지 확인하며 작업

 

[ position ]  
position : absolute 
=> 부모태그 영향받지 않는 절대적 위치 
=> absolute 로 하면 주변 태그에 영향 줌 ( z index ) 

=> absolute는 주변 다른 태그가 빠지면 빠진 자리를 채움 

position : relative 
=> 부모태그 안에서의 위치 
=> relative 로 하면 주변 태그에 영향을 안받음 ( 자기 자리 차지 ) 

=> relative는 다른 태그가 빠져도 자리유지 


position : fixed 
=> 자리를 고정시키겠다. 
=> absolute + 휠 고정 효과 
=> header , 광고 등에 적용 


- 기본 : 브라우저 전체 기준 
=> 기준으로 삼고 싶은 부모 태그에 가서 => position : relative / absolute /fixed 아무거나 걸고   
// 기본 position: static 디폴트 값을 제거 ( 보통 ralative 줌 )  

=> 만약, 이런 absolute에 기준을 주는 relative가 여러 부모태그에 잡혀있으면 
=> 가장 가까운 태그 기준으로 적용된다. 

- fixed 는 무조건 브라우저 전체를 기준으로 한다. ( absolute 와 차이 ) 


[ Stack Order ]  (z-index)
규칙
1. position 이 있으면 가장 위에 쌓인다. 
2. position 있는 것들 끼리는 =>  z-index 높을 수록 위에 쌓임 
( z-index 는 기본값 0 , - 도 줄 수 있음 ) 
3. z-index 같을 때는 => 코드 순서상 마지막에 쓰인 코드가 위에 쌓임 

ex ) header 에는 position fixed 고정 z-index=1000; ( 절대 위에 두겠다 ) 


[ display ] 
- inline : 수평 ( a, span, img 대표 + b, strong )  => inline 태그 안에는 inline 요소만 사용 가능

- block : 수직 ( 나머지 전체 태그 ) => 안에 block 이나 inline 요소 포함 가능  

display: inline 적용시 기본적으로 inline 배치가 되지만, width / height 지정이 안된다.

 

display: float; 
=> float 사용 시 => overflow 처리필요

 

[ overflow ] 
: 자식박스가 부모의 길이나 너비를 넘어갔을 때 처리

=> height / max-height 값이 있어야 작동함 

    hidden : 숨겨라 
    scroll : 스크롤 무조건. 
    auto : 넘치면 스크롤, 안넘치면 스크롤 X 

height: 400px;
overflow: auto; 

[ display: flex; ]  
=> 자식들의 부모인 컨테이너 tag 한테 ( 감싸는 부모 tag )
display: flex;  
=> 자식 태그들이 자동으로 inline 배치가 된다! 

=> display: flex; flex-direction, flex-wrap, justify-content 등은 모두 
부모태그 (컨테이너)에 걸어서 자식태그에 적용하는 방식 


[ flex-direction ]
flex-direction: row; (기본값) 
이게 default 값으로 잡혀있기 때문에 inline 배치 되는 것 
flex-direction: row-reverse;
리버스 잡으면 오른쪽에서부터해서 역순으로 배치 

flex-direction: column;  
=> 수직배치 
=> 반응형 웹디자인 만들 때 쓰인다! 
( row => column ) 모바일이면 column 형태로 바꿔주기 

[ flex-wrap ] 
flex-wrap : nowrap; ( 기본 값 ) 
=> 창 크기 줄였을 때, 자식 태그들의 width 등 크기가 줄어듦 

flex-wrap: wrap; 
=> 크기 유지하고 밑으로 내려줌 ( 모바일 용 ) 
=> wrap 설정을 해줘야 열 레이어 등 작업 가능 

 

ex ) 3열 레이어 => 자식 태그 width 를 33.333% 로 잡아두는 기법 

 padding / border 고려해서 % 줘야 하므로, 
[ box-sizing: border-box; ]
=> border / padding 이 width 에 영향을 주는 것을 방지

( box 사이즈 유지시키기 위한 안전장치 )

자식태그에 공식처럼 박아두고 사용! 

 

 

[ flex-grow ]  == [ flex ]
: "비율" 로 박스들을 배치하여 화면 구성
=> flex-grow + flex-basis 세트

flex-grow: 비율;
flex-basis: 0; => 0으로 기본값 잡아줘야함 

== flex : 비율 
        .item1 {
             flex: 1; 
        }
        .item2 {
             flex: 2; 
        }
        .item3 {
             flex: 1; 
        }
=> 1 : 2 : 1 비율로 화면 구성 

 

=> 제대로 다 차지할 item 에만

flex: 1; 
주고 나머지는 아예 안주면, 그것들은 최소한의 영역만 차지하고 
flex : 1 이 채워서 차지 


[ justify-content ] 
- 주축 : item 들이 쌓이는 방향 
flex-direction : row; => 주축은 x 축 / 교차축은 y 축 
flex-direction : column; => 주축은 y축 / 교차축은 x 축 

justify-content => 주축의 정렬 방법을 설정 

flex-direction : row; 
=> 주축 : x축, 왼쪽 (시작점) => 오른쪽 (끝점) 
flex-direction : row-reverse;
 => 주축 : x축, 왼쪽 (끝점) <= 오른쪽 (시작점) 

justify-content : flex-start; ( 기본 값 )
=> 시작점 정렬 : 시작점 부터해서 정렬하는 기본 방식 

justify-content : flex-end;
=> 끝점 정렬 

justify-content : center; 
=> 중앙정렬 ( row 일땐 좌우 / column 일땐 위아래 정렬 ) 

justify-content: space-between;
=> 양 끝에 맞추고, 사이에는 동일 간격 
( 양 끝 공백 X  ) 

justify-content: space-evenly;
=> 양 끝도 포함해서 모든 사이를 동일하게 
( 양 끝도 공백을 넣을 때 사용 ) 

justify-content: space-around;
=> 아이템의 양 옆을 동일하게


[ align-items ] 
align-items: flex-start; 시작점 배치

align-items: flex-end; 끝점 배치 

 

 align-items: center; => 중앙 배치 

=> 이걸 부모 태그에 주면 안에 자식 태그들 중앙정렬 한방에 

 

[ align-self ] 
=> 하나의 태그에만 다른 align 적용=> 변칙 레이아웃 
=> 툭 튀어나오게 끔 
 .item:nth-child(2) {
            align-self: flex-start;
        }

 

 

[ flex 중앙정렬 ] 
- 부모태그 display 아무거나 줘놓고, 자식태그에서 3개 공식처럼 사용  

display: flex; (df) 
justify-content: center; (jcc)
align-items: center; (aic)

 

 

 

[ margin: auto; ]  

: margin 으로 박스들 사이 간격 조종

margin-left: auto;
margin-right: auto;
=> 왼쪽 오른쪽 자동으로 계산해서 중앙으로 정렬 
margin : 100px auto; 
=> 위아래는 100, 좌우는 auto 

 

[ width: fit-content; ]
=> 안에 든 내용에 맞춰서 크기 조정

 

[ 원하는 위치로 이동시키기 ]
position: absolute; 
bottom: 0;

[ 화면의 정 중앙 공식 ] 
position: absolute; 
left: 50%;
bottom: 50%;
transform: translate(-50%, -50%);

 

class로 만들어두고 
적용하고자 하는 클래스에 붙여서 사용 

</div class="root center-box">
        

</div class="parent center-box">

[ 정중앙 공식 이용해서 이동시키기 ] 
position: absolute; 
left: 50%;
bottom: -5%;
transform: translate(-50%, 0);