전체 글 (894) 썸네일형 리스트형 12장 예제 - 그리드 항목의 간격 지정하기 DOCTYPE html> 그리드 항목의 간격 지정하기 #wrapper{ display:grid; grid-template-columns:repeat(3,200px); grid-template-rows:minmax(100px,auto); grid-gap:20px 30px; /*칼럼 간격 30px, 줄 간격 20px*/ } .items { padding:15px; background-color:#eee; } .items:nth-child(odd) { background-color:#bbb; } Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta nesciunt magni voluptatem. Lorem ipsum dolor sit amet co.. 12장 예제- 자동으로 칼럼 개수 조절하기 DOCTYPE html> 자동으로 칼럼 개수 조절하기 #wrapper1 { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); margin-bottom:20px; } #wrapper2{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px, 1fr)); } h1{ font-size:24px; } .items { padding:15px; background-color:#eee; } .items:nth-child(odd){ background-color:#bbb; } auto-fit일 때 Lorem ipsum dolor sit amet, consectetur adi.. 12장 예제 - 칼럼과 줄 크기를 자동으로 지정하기 DOCTYPE html> 칼럼과 줄 크기를 자동으로 지정하기 #wrapper { width:600px; display:grid; /*그리드 컨테이너 지정 */ grid-template-columns:repeat(3,1fr); /*너비가 같은 칼럼 3개 */ grid-template-rows:minmax(100px,auto); /*줄 높이는 최소 100px*/ } .items { padding:10px; background-color:#eee; } .items:nth-child(odd) { background-color:#bbb; } Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, reprehenderit.Lorem ipsum dolor, s.. 12장 예제- 그리드 박스에서 칼럼과 줄 지정하기 DOCTYPE html> 그리드 박스에서 칼럼과 줄 지정하기 #wrapper { display:grid; /*그리드 컨테이너 지정*/ grid-template-columns: 200px 200px 200px; /*너비가 200px인 칼럼 3개 */ grid-template-rows : 100px; /*줄 높이 100px*/ } .items { padding:10px; background-color:#eee; } .items:nth-child(odd) { background-color:#bbb; } Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, reprehenderit.Lorem ipsum dolor, sit amet consectetur .. 12장 예제 - 플렉스 박스 레이아웃을 사용해 화면 중앙에 배치하기 DOCTYPE html> 플렉스 박스 레이아웃을 사용해 화면 중앙에 배치하기 * { margin:0; box-sizing:border-box; } body { background:url("images/bg5.jpg") no-repeat left top fixed; background-size:cover; display:flex; justify-content:center; align-items:center; min-height:100vh; } button { background-color:#ccc; font-size:1.2em; padding: 1em 2em; border:none; border-radius: 5px; box-shadow:1px 1px 2px #fff; } 클릭! 12장 예제 - 여러 줄일 때 교차축에서 플렉스 항목 간의 간격 지정하기 DOCTYPE html> 여러 줄일 때 교차축에서 플렉스 항목 간의 간격 지정하기 .container { float:left; width:200px; height:150px; display:flex; flex-flow:row wrap; /*왼쪽에서 오른쪽, 여러줄 표시*/ border:1px solid #222; background-color:#eee; margin:30px; } #opt1 { align-content:flex-start; /*교차축 시작점 기준*/ } #opt2 { align-content:flex-end; /*교차축 끝점 기준*/ } #opt3 { align-content:center; /*교차점 중앙 기준*/ } #opt4 { align-content:space-between; /*.. 12장 예제- 플렉스 박스에서 특정 항목만 정렬 방법 지정하기 DOCTYPE html> 플렉스 박스에서 특정 항목만 정렬방법 지정하기 .container{ width:450px; height:150px; background-color:#eee; border:1px solid #222; margin-bottom:20px; display:flex; /*플렉스 컨테이너 지정*/ align-items:center; /*교차축의 중앙에 배치*/ } .box { padding:5px 45px; margin:5px; background-color:#222; } #box1 { align-self:flex-start; /*교차축의 시작점에 배치*/ } #box3 { align-self:stretch; /*교차축에 가득 차게 눌림*/ } p{ color:#fff; text-align.. 12장 예제 - 플렉스 박스에서 교차축 정렬 방법 지정하기 DOCTYPE html> 플렉스 박스에서 교차축 정렬 방법 지정하기 .container { width:100%; height:150px; display:flex; background-color:#eee; border:1px solid #222; margin-bottom:30px; } #opt1 { align-items:flex-start; /*주축 시작점을 기준으로 배치 */ } #opt2 { align-items:flex-end; /*주축 끝점 기준으로 배치 */ } #opt3 { align-items:center; /*주축 중앙 기준으로 배치 */ } #opt4 { align-items:baseline; /*문자 기준선에 맞춰 배치 */ } #opt5 { align-items:stretch; /*항목.. 이전 1 ··· 100 101 102 103 104 105 106 ··· 112 다음
