기본 배치 : normal position (block, inline...)
1. Position
2. Flexbox
3. Grid
position 속성이 갖는 속성값 -> 위치 기준을 잡는건 position
"static" : position 속성을 지정하지 않았을때의 기본값 / 일반적인 글의 흐름
"relative"
"absolute"
"fixed"
"sticky"
구체적인 위치는 top/right/bottom/left 속성을 쓴다 : px, 값이 마이너스면 영역 바깥쪽방향
{position : relative
top: 30px }
=> 원래 있어야할 위치(지금 위치~)에서 top 방향(영역 안쪽)으로 30px 이동
: static -> relative 로 바꿔줘도 원래 위치를 유지한다.
position : static & margin 을 주면 다른 요소까지 같이 움직임
position : relative & 위치별 값을 주면 다른 요소에는 영향을 주지 않음 (겹쳐 보이기도)
position : absolute
가장 가까운 포지셔닝이 된 조상 요소를 기준으로 위치를 잡는다?
조상 요소의 영역 경계선을 기준으로 설정됨
ex. 자식요소의 bottom : 10px 주면 부모 요소의 bottom 라인에서 10px 떨어진 곳으로 이동
부모가 static position 이면 건너뛰고 그 다음 부모요소를 기준으로 함 --- 왜지
포지셔닝 : 명시적으로 position 을 지정한 경우 포지셔닝 했다 고 한다.
원래 배치에서 아예 자리 차지를 하지않음
크기를 정해주지 않으면 : 안에 있는 내용(text..) 만큼의 크기를 갖는다. 내용이 없으면 화면에서 안보임
left / right 양쪽 위치를 정해주면 그거에 맞는 크기로 생성이 됨
absolute 요소에 상하좌우 모두 0px 주면 부모 요소를 가득 채우게 됨
= inset : 0 동일 (상하좌우에 같은 값을 줄때 사용)
position : fixed
브라우저 창을 기준으로 상/하/좌/우 위치를 적용
원래 있던 자리와 상관이 없음 (다른 요소들이 이 요소가 원래 있던 자리를 채운다) (absolute와 같은 성질)
= 기존 배치에서 자리를 차지하지 않음
네비게이션에 많이 쓰임 or 챗봇?
내용이 없으면 화면에서 안보임 (absolute와 같은 성질)
뒤에있는 내용을 가릴수도 있음 = > 기존 내용 영역에 위쪽 마진을 주어야함
position: sticky
맨 위에 배너(광고 등) + 그 밑에 nav bar 가 있을때 스크롤을 내리다가 배너가 가려지고 nav bar 가 최상단에 위치했을때부터 nav위치가 고정되도록(fixed처럼)
position : sticky
top: 0 => 브라우저 영역 기준, top 방향으로 0 px 위치가 됐을때 고정시킨다는 의미
원래 위치에서 자리를 차지한다 (static같은 성질) & 부모 요소에 소속되어있다 = 부모 요소 밖으로는 나가지 않는다
= 부모요소 컨텐츠가 끝나는 영역에서는 더이상 보이지 않음
여러개 소제목이 각 컨텐츠 상단에 달라붙게 만들수 있음
z-index : 요소가 겹쳐질 때 앞뒤 순서를 정해줌
기본적으로는 코드가 밑에 있는 요소가 앞쪽에 표현된다 -> 따라서 동일 z-index를 갖는 요소들은 코드 위치로 판단
z-index : 1; (단위 없음. 숫자가 클수록 더 앞쪽에 보임. 음수도 가능)
기본값: auto = 0
but.. 단순히 z index 만 비교해서 순서를 정하는것은 아님
쌓임 맥락 을 고려한다 (z-index를 묶어서 생각하는 범위)
부모 요소의 자식 요소는 부모와 같은 z-index를 갖는다
쌓임 맥락이 만들어지는 조건이 있다...
쌓임 맥락 안에서는 z-index에 따라 순서 정해짐
원하는 대로 순서가 적용되지 않는다? 쌓임맥락이 만들어진거임 -> 요소 위치를 쌓임 맥락 밖으로 바꿔준다
display : flex
배치할 방향 : flex-direction
정렬하기 : justify-content, align-items
요소가 넘칠때 : flex-wrqp
요소 간격 : gap
크기 늘이거나 줄이기 : flex-grow, flex-shrink, flex-basis(크기 정하기)
flex-direction
(기본값) row : 가로방향으로 배치(왼->오)
row-reverse : 오른쪽->왼쪽
column : 세로방향(위->아래) (display :block 처럼 배치)
column-reverse : 아래-> 위
요소가 정렬되는 방향을 기본축 Main Axis / 수직방향을 교차축 Cross Axis 라고 한다
요소는 기본적으로 기본축 방향으로 순서대로 배치되고 / 교차축 방향으로는 꽉 채워서 배치된다.
기본축 방향에서 정렬할땐 : justify-content
속성값
center
flex-end : 맨 끝쪽으로 정렬
flex-start : 맨 앞으로 정렬 (기본정렬)
space-around : 모든 요소의 앞 뒤로 같은 간격으로 정렬(padding처럼)
space-between : 양 끝 요소를 가장자리에 배치하고, 나머지 요소를 동간격으로
space-evenly: 빈공간의 크기가 모두 동일하도록
교차축 정렬 : align-items
속성값
center -> flex 설정 시 교차축 방향으로 꽉 채워 배치되던 상태에서 요소의 원래 크기로 변함 & 가운데 정렬
flex-end
flex-start
stretch : 늘려서 배치 (높이 지정해주지않은 요소만)
한개의 div 영역안에 있는 '로고 이미지'와 '텍스트' 의 높이를 일정하게 맞추려면 align-item : center
요소가 넘칠때
flex-wrap: wrap; 교차축 방향으로 넘어가서 배치된다...
flex-direction: row일때는 다음 행으로 넘어가서 배치 / column일때는 다음 열로 넘어가서 배치
/ 폭(길이)는 정해진 영역 내에서 나눠 갖는다
요소간의 간격을 동일하게( -> 맨 끝 요소에도 간격이 생긴다 )
gap: 00px;
gap: 00px 00px (세로 / 가로 : 메인축/교차축 이랑 상관없이 무조건 세로/가로)
wrap 처리해서 줄이 넘어가도 똑같이 적용됨
요소를 늘려서 빈공간을 꽉 채울때
flex-grow: 0 (기본값)
1, 2 등 숫자를 쓰면 비례해서 요소의 크기(너비/ 길이) 늘어나게됨
각 요소의 크기 합이 부모 영역 보다 클때
flex-shrink: 1(기본값) 으로 되어있음 -> 부모 영역 내에서(넘치지않고) 각각 같은 크기로 채워진다
flex-shrink값이 작을수록 차지하는 영역이 크다(?) / 클수록 많이 줄어든다
값으로 0을 주면 내가 지정해준 크기에 고정 (영역과 다른 요소에 의해 작아지지않는다)
플렉스박스는 고정된 크기가 있는게 아니라 시작 크기와 최종 크기가 있다...
시작 크기를 정해놓으면, 플렉스박스 안에서 유연하게 최종 크기가 결정된다. (개발자 도구에서 빗금친 영역 & 화살표로 표시해줌)
시작크기는 flex-basis 으로 정해줄 수 있다 :
지정하지 않으면 auto(기본값) -> width, height 를 참고해서 시작 크기를 정한다.
보통의 경우 문제 없지만 정확히 크기를 설정해줄때는 flex-basis 를 사용하자
flex: flex-grow flex-shirink flex-basis; 를 한번에 쓸수 있음
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100px;
<=>
flex: 1 0 100px;
display: flex
position: relative/sticky -> flex box 안에서 배치// absolute/fixed-> flex box와 무관하게 배치
Grid : row, column으로 이루어진 2차원 배열
grid line, grid cell
display: grid
격자 나누기 grid-template-rows(또는 columns)
간격 gap (세로 가로)
크기 미리 정하기 grid-auto-rows (또는 columns)
원하는 위치에, 여러칸에 걸쳐서 배치 grid-row(columns), span
이름으로 배치 grid-area, grid-template-areas
grid-template-columns : 100px 300px 100px;
=> 열 너비(100, 300, 100)를 갖는 칸 세개가 만들어짐
grid-template-rows: 100px 200px 200px;
=> 줄 높이 (100, 200, 200) 로 나뉘어짐 => 총 9개의 그리드 셀이 생성됨
요소가 들어가있는 순서대로 채워진다
한번에 쓰는 방법 : row 먼저 쓰고 / columns ;
grid-template: 100px 200px 200px / 100px 300px 100px;
grid 로 지정한 div 크기가 달라지면-> grid 크기는 정해져있기때문에 영역을 벗어나거나 공백이 생김
상대적인 값을 나타내는 단위 fr (fraction)
1fr, 1fr, 1fr -> 1:1:1로 생성됨
함수를 이용할 수도 있다
repeat(3, 1fr) -> 1fr 3개
minmax(0px, 0px) -> 최소 최대값 안에서만 크기가 변함
최대값에는 fr 단위를 쓸수도 있음
repeat과 minmax결합도 가능
columns 만 원하는 개수/너비로 나눠놓고 row는 알아서 배치하고싶을때
grid-auto-rows : 00px -> 높이 00px를 갖는 그리드 셀이 만들어진다.
grid-template 에서 rows 정보가 명시적으로 정하지 않았을때 grid-auto-rows값을 가져다쓴다
여러개의 값을 적으면 반복하면서 적용됨
ex. grid 영역 내 요소 가 15개가 있다면
grid-template-columns : repeat(3, 1fr);
grid-auto-rows: 50px, 100px, 200px;
=> 균등하게 나눠진 3개의 칼럼 & 높이가 50->100->200->50px 로 반복되는 5줄에 요소가 순서대로 배치된다
그리드 라인 숫자를 기준으로 요소를 원하는 위치에 배치할 수 있다
가장 앞쪽라인(테두리 포함) 1부터 시작 -> +1씩 늘어남. 맨 마지막 줄부터 -1, -2, -3, ... 으로 표현할 수 있다
grid-row: 3;
grid-column : 2 ;
=> 3과 2가 만나는 지점부터(?) 요소가 자리한다
영역으로도 선택이 가능하다
1) 그리드 라인 번호
grid-row: 3 /5 ;
grid-column : 2 / -2;
2) 그리드 라인 + span
grid-row: 3 / span2; => 3부터 2칸 차지
각 영역에 grid-area 속성으로 이름을 붙인다
grid-area : a ;
grid-area : b ;
grid-area : c ; 로 해놓고
grid 요소로 돌아가서
grid-template-areas:
"a b"
"a c" 이렇게 하면 田 모양에 맞게 채워짐;;;
'개발 공부 일지 > HTML_CSS' 카테고리의 다른 글
| input:focus border 스타일 지정이 안된다면? (0) | 2024.07.10 |
|---|---|
| Font awesome 적용하기 (0) | 2024.07.08 |
| HTML 핵심개념 (0) | 2024.07.04 |
| Cascading이란? (0) | 2024.07.04 |
| HTML/CSS 웹페이지 작성하기 (0) | 2024.07.02 |
