css (72) 썸네일형 리스트형 12장 실습 DOCTYPE html> css 그리드 레이아웃으로 갤러리 만들기 * { box-sizing:border-box; } body{ background-color:#eee; font-size:16px; } #wrapper { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); grid-gap:1rem; } .card { background-color:#fff; box-shadow:0px 1px 5px #222; } .card > header { font-size:1.5rem; padding:0.5rem; } .card > p { padding:0.5rem; line-height:1.6rem; } .card > img { max-w.. 12장 예제- 템플릿 영역을 만들어 배치하기 DOCTYPE html> 템플릿 영역을 만들어 배치하기 #wrapper { width:700px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,100px); grid-template-areas: "box1 box1 box1" "box2 box3 box3" "box2 . box4"; } .box { padding:15px; color:#fff; font-weight:bold; text-align:center; } .box1{ background-color:#3689ff; grid-area:box1; } .box2{ background-color:#00cf12; grid-area:box2; } .box3{ bac.. 12장 예제- 그리드 라인을 사용해서 항목 배치하기 DOCTYPE html> 그리드 라인을 사용해서 항목 배치하기 #wrapper { width:700px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,100px); } .box { padding:15px; color:#fff; font-weight:bold; text-align:center; } .box1 { background-color:#3698ff; grid-column:1/4; } .box2 { background-color:#00cf12; grid-row:2/4; grid-column-start:1; } .box3 { background-color:#ff9019; grid-column:2/4; gri.. 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; } 클릭! 이전 1 2 3 4 ··· 9 다음
