11.23 CSS

홍왕열·2021년 11월 23일
0

CSS

// * {
box-sizing: border-box;
}
모든 형태의 요소를 선택해서 여백을 포함하여 계산하도록 바꾼다.

float : left//center//right
그림과 글의 배치를 변경할 때 사용

a:hover{}
마우스를 올려놓았을 때 {}로 변경 및 작동을 시킨다.

CSS의 꽃, flex

container(가장 크게 싸고있는){

height: 100vh; - 현재 화면 높이 100%를 사용하겠다.
display:flex - flex 타입의 시작.
부모 tag에다가 쓰는 것이다.
이 값이 지정된 컨테이너의 일차 자식(direct children) 요소가 flex 항목이 된다.
display 속성만 지정하여 flex 컨테이너를 생성하면 다른 flex 관련 속성들은 아래처럼 기본 값이 지정됩니다.

항목은 행으로 나열됩니다. (flex-direction 속성의 기본값은 row입니다).
항목은 주축의 시작 선에서 시작합니다.
항목은 주 차원 위에서 늘어나지는 않지만 줄어들 수 있습니다.
항목은 교차축의 크기를 채우기 위해 늘어납니다.
flex-basis 속성은 auto로 지정됩니다.
flex-wrap 속성은 nowrap으로 지정됩니다.

flex-direction: row(기본값); 왼쪽부터 행으로
row-reverse 오른쪽부터 행으로
column 위에서부터 세로로
column-reverse 아래에서부터 세로로

flex-wrap: nowrap(기본값); 한 줄에 자동을 채워짐
wrap; 한 줄에 박스들이 차면 자동으로 밑으로 내려감

flex-flow: direction요소 wrap요소 - 둘 다 한 번에 적용하는 것.

justyfy-content(어떻게 배치할 것인가): flex-start (현재 행으로 진행중이라면 왼쪽부터, 세로로 진행중이면 위부터)
flex-end: 오른쪽부터 or 아래부터
center: center
space-around: 좌우에 아주 조금의 공간을 남기고 나머지 공간을 일정한 간격을 띄워서 배치
space-evenly: 아예 좌우 끝부터 끝까지 전부 똑같게
space-betwwen: 좌우는 아예 벽에 붙이고 나머지 공간을 나눈다

align-items(justyfy와 반대에서):center
baseline : 만약 padding값 등에 의해 어떤 한 box만 튀게 된다면, 그것을 일정하게 가운데에서 이어지게 만드는 것(baseline에 맞추어서)

item1 {

flex-grow: 0(기본값) - container의 크기가 변함에 따라 비율에 맞춰서 변함.
grow의 총 합은 1이고, 이것을 나머지 객체들, 즉 item1, item2, item3가 grow값을 1,4,5를 갖는다면, container가 쓰고 있는 화면을 1:4:5 비율로 나눠서 쓰게 된다.

flex-basis: 60%, 30%, 10% 이런식으로 세부적으로 비율을 정하여 다른 객체들이 특정한 비율로 쓸 수 있게 해줌

flex: grow, shrink, basis

오늘 배운 것

vh - 단위. 100vh는 화면에 보이는 100%를 사용하겠다.
보통 flex 가장 큰 box에 지정하여 사용

객체배열에서 property = key = 속성

빈 배열도 배열이다.

[]은 단순배열
{}은 객체배열

Object.keys() Method!

메소드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환합니다.

오늘도 무척이나 힘들고 지쳤지만 무사히 또 공부를 마쳤다.
받은 걸 잊지 말고 꼭 열심히 해서 갚자.
힘내자!

반복문 10번까지
배열0번
객체 17번까지 품
css선택자 정리하기

profile
코딩 일기장

0개의 댓글