[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 1주차 - 5일차 회고⎜CSS

CSS 3일 차 수업이다.

 

position

 

static : 정적 위치 지정 방식

relative : 요소 자신을 기준으로 배치

aboslute : 위치상 부모 요소를 기준으로 배치(부모가 relative 여야 하지만, 부모의 부모의 부모의∙∙∙ 반복하여 relative가 없으면 뷰포트가 기준이 된다.)

fixed : 뷰포트(브라우저)를 기준으로 배치

 

요소 쌓임 요소 : 어떤 요소가 사용자와 더 가깝게 있는(즉, 위에 쌓이는지) 결정

 1. 요소에 position 속성 값이 있는 경우 위에 쌓임(기본값인 static은 제외)

 2. 1번과 같은 경우, z-index 속성의 숫자 값이 높을수록 위에 쌓임

 3. 1,2번 까지 같은 경우 HTML의 다음 구조일수록 위에 쌓임

 

position의 속성 값으로 absolute, fixed가 지정된 요소는 display 속성이 block으로 변경된다.

 

z-index : 요소의 쌓임 정도를 지정(숫자가 높을수록 위에 쌓임)

 

배경

 - background-color

 - background-image : 배경 이미지 삽입 / url("경로")로 해서 보통 삽입

 - background-repeat : 배경 이미지 반복 

     repeat:수직,수평 반복 / repeat-x : 수평 반복 / repeat-y : 수직 반복 / no-repeat : 반복 x

 - background-position : 배경 이미지 위치(방향이나 수치로 위치 조절 가능)

 - background-size : 배경 이미지 크기

     auto : 실제 크기 / cover : 비율을 유지, 더 넓은 너비에 맞춤 / co : 비율을 유지, 더 짧은 너비에 맞춤

 - background-attachment : 배경 이미지 스크롤 특성

     seroll : 이미지가 요소를 따라서 같이 스크롤 / fixed : 이미지가 뷰포트에 고정, 스크롤 x

 

display

 

 여러 개의 div가 있다고 가정할 때 그대로 넣으면 세로로 정렬되지만 display: flex를 하면 가로 정렬이 된다.(앞으로 많이 쓰일 기능 같음!)

 

 - flex-direction : 주 축을 설정

     row(기본) : 좌 >> 우 / row-reverse : 우 >> 좌 / column : 위 >> 아래 / column-reverse : 아래 >> 위

 - flex-wrap : flex items 묶음(줄 바꿈) 여부

     wrap : 여러 줄로 묶음(브라우저 크기? 에 따라 깨지지 않고 줄이 바뀐 상태에서 나옴)

     nowrap : 브라우저 크기가 바뀌어도 절대 줄이 바뀌지 않음

 - justify-content : 주 축의 정렬 방법

     flex-start(기본) :  시작점으로 정렬 / flex-end : 끝점으로 정렬 / center : 가운데 정렬 / space-between : flexitems 각각 사이가 똑같이 두는 것 / space-around : flexitems의 둘레? 에 동일한 간격을 두는 것 / space-evenly : flexitems들의 사이와 양 끝간 사이를 똑같이 두는 것

>> flex-flow : flex-content + flex-wrap를 합친 것

 - align-items : 교차 축의 한 줄 정렬 방법

     stretch(기본) : flexitems를 교차 축으로 늘림 / flex-start : flexitems를 각 줄의 시작점으로 정렬 / flex-end : flexitems를 각 줄의 끝점으로 정렬 / center : flexitems를 각 줄의 가운데 정렬

 - align-content : 교차 축의 여러 줄 정렬 방법

    stretch(기본) : flexitems를 교차 축으로 늘림 / flex-start : flexitems를 각 줄의 시작점으로 정렬 / flex-end : flexitems를 각 줄의 끝점으로 정렬 / center : flexitems를 각 줄의 가운데 정렬

 

(align-items과 align-content는 사실 직접 코드를 적고 웹 브라우저에 띄어 보면서 직접 해봐야 이해가 쉽다.)

 

오늘 배운 부분 중 특히 display부분이 좀 어려웠다. 교육 시간에도 마지막 실습 문제를 풀지 못하여 집에 와서 다시 확인해 보았는데 쉽지 않다. 주변 크루에게 어떻게 풀었는지 코드를 물어보면 정말 한 명 한 명 조금씩 다 다르다. 각자 스타일에 따라 결과물은 똑같아도, 코드가 조금씩 다른 게 계속 봐도 봐도 신기할 따름이다. 일단 내가 모르는 부분은 내일 일찍 가서 다시 물어보면서 내 것으로 터득해야겠다. 그리고 오늘 CSS속성을 빠르게 이해하기 위한 링크를 리더님께서 알려주셨다. (https://flexboxfroggy.com/#ko) 정확하게 이해하지 못한 부분은 저 링크를 들어가서 꾸준히 연습하여 감을 잡아야 할 거 같다.