조반짝의 도전일지

01 자식 요소의 순서를 지정하자 html 마크업 css편집 ●order: 나열되어있는 자식들에게 order로 순서값을 변경해 줄 수 있다. 1 2 3 02 요소의 안쪽 여백 확대하기 ●flex-grow:1; 모든 article이 똑같은 사이즈로 넓이값이 지정됨 article 중 하나만 2를 넣었을 때 ●flex-grow:2; FLEX GROW_1 FLEX GROW_2 FLEX GROW_3 03 요소의 안쪽 여백을 축소하기 ●flex-shrink: 여백을 축소한다. FLEX shrink FLEX shrink FLEX shrink

01 자식 요소의 배치방법을 지정하기 컨텐츠에 flex를 사용하면 편리하게 사용할 수 있다. html 골격 css 편집 section, article > 영역잡아주기 article 옆으로 flex를 이용해서 정렬하기 display: flex; >> 옆으로 나열 display: iline-flex; - in-line 구조 dispaly: flex; - block 구조 flext-direction: column; 세로로 자식을 정렬 flext-direction: 가로로 자식을 정렬 display: flex; align-item: center; justify-content: center article 안 요소 가운데 정렬 flext-direction: column-reverse; 세로로 자식을 반대로정렬 fl..

html 생성 linear-gradient(각도, 색상코드) - 직선 그라디언트 색상 코드 두가지로 사용하면 한 가지 명령어가 안 먹을 시에 둘 중 하나가 들어올 수 있도록 한다. 전에는 브라우저마다 속성이 다르기 때문에 배경색과 그라디언트색상을 두가지 사용했지만 지금은 거의 브라우저가 통일된상태이다. _가운데 정렬 3총사 flex: 자식들을 옆으로 보내주는 것이 특징 alian-items: center; - 세로 가운데 정렬, 높이값이 있어야 적용이 됨 justfy-content: center; - 가로 가운데 정렬 border-radius: __px 는 이미지위에 피규어가 있기 때문에 이미지에 명령을 줘야함 figcaption이 움직이려면 부모(figure)가 기준점(relative)이 되어야함 fi..

01 헤더 사이드로 보내기 #header, #banner, #contents, #footer 에 float: left;를 넣어 주면 헤더가 사이드에 오게 된다. html 메뉴1 서브메뉴1 서브메뉴1 서브메뉴1 서브메뉴1 메뉴2 서브메뉴2 서브메뉴2 서브메뉴2 서브메뉴2 메뉴3 서브메뉴3 서브메뉴3 서브메뉴3 서브메뉴3 메뉴4 서브메뉴4 서브메뉴4 서브메뉴4 서브메뉴4 배너영역 컨텐츠영역 푸터영역 @charset "utf-8"; /*reset*/ *{ margin: 0; padding: 0; box-sizing: border-box; } li{ list-style: none; } a{ color: #333; text-decoration: none; } img{ display: block; } .clearf..