##GRID 위 스타일을 만들어 봅시다 첫번째로는 , flexbox를 세개 만들고 넣어주면 되겠죠 두번째는,  width를 각각 33%로 설정하고 flex-wrap을 주면 되겠죠조금 번거로워 보이죠?플렉스는 한방향 이기 때문에 그렇습니다.그럼 양방향으로 배치를 하면 더 쉬울까요??이걸 가능하게 해주는 게 ‘그리드’ 입니다.그리드는 2차원 영역에서 왼쪽 -> 오른쪽, 위 -> 아래 방향으로 배치를 가능하게 해주죠여기서 칸을 나누는 선을 그리드 라인 각 칸 (요소배치공간) 을 그리드 셀 이라고 합니다그리드를 설정하면 각 셀에 요소 배치, 그리드 크기 조절, 사이 간격 등을 플렉스와 마찬가지로 설정할수 있습니다. 또한 모든 그리드를 채우지 않아도 가능하죠 #그리드 나누기 (기본 작성법) 가장 큰 틀인 컨테이너..

CSS 2024. 7. 10. 20:43

# FLEXBOX 플렉스박스는 아주 쉽게 설명하면 ‘1차원’ 으로 배치하는 것 입니다.그래서 가로 혹은 세로 의 방향성을 먼저 정하고 요소를 배치하는 거죠가로로 배치하기로 정했다면, 가상의 화살표 위에 요소를 어디에 배치할지를 정합니다.화살표 처음 또는 끝에 위치하게 또는 양끝 중앙정렬넘치면 어떻게 배치 등등 다양한 방식의 배치 설정이 가능해 집니다.또한 요소의 크기를 유연하게 늘리거나 줄이거나 간격을 조정할 수도 있습니다.#배치방향  현재 컨테이너 박스를 크게 만들고 그 안에 div 3개를 각각 다른색으로 지정했습니다.  평소에 보던 것 처럼 블락이 적용되면서 세로로 배치가 되고 있네요. 이제 컨테이너에 display : flexbox를 줘보겠습니다.    세로로 배치가 되는 걸 볼수 있습니다.  fl..

CSS 2024. 7. 10. 20:43

#POSITION 기본적인 흐름에서 벗어나고 싶을때 사용합니다. (기본흐름은 블락, 인라인을 의미합니다.)가장 많이 쓰는 예시로는 이미지위에 글자 쓰기, 화면상단에 메뉴 고정 같은 것이 있습니다.포지션 요소에는 다섯가지가 있습니다. 요소에 대해 자세히 알아보죠. *요소를 주면 ‘기준’을 잡는 것입니다.쉽게 말해, 이미지 ‘기준’으로 위에서 10px에 위치시켜줘 같은 느낌으로 명령하는 것입니다.position: ~~원래자리 (기본값-블락/인라인)static기본지금위치 기준relative쉽게 현재위치에서 이동시키기  (얘만 원래자리를 차지 - 유체이탈개념)가장 가까운 포지션 기준absolute바로 상위 포지션(가장가까운) 기준으로 이동 (relative 필수)브라우저 기준 고정시키기 fixed네비바 만들기특..

CSS 2024. 7. 10. 20:42

CSS를 통한 레이아웃  일반적으로 HTML은 블락 과 인라인 처럼 배치가 됩니다. 이러한 배치를 ‘노말 플로우’ 라고 합니다.이것을 바꾸는 방법 중 자주 쓰이는 것들에는 3가지 정도가 있습니다. 첫번째, position-직접 위치를 지정하는 방식입니다. 두번째, flexbox -박스를 만들고 방향을 정해서 요소를 배치합니다. 세번째, grid -칸을 나눈뒤, 칸에다가 요소를 배치합니다.

CSS 2024. 7. 10. 20:41