css (72) 썸네일형 리스트형 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; /*항목.. 12장 예제 - 주축에서 플렉스 항목 간의 간격 적용하기 DOCTYPE html> 주축에서 플렉스 항목 간의 간격 적용하기 .container { width:800px; display:flex; background-color:#eee; border:1px solid #222; margin-bottom:30px; } #opt1 { justify-content:flex-start; /*주축 시작점 기준*/ } #opt2{ justify-content:flex-end; /*주축 끝점 기준*/ } #opt3 { justify-content:center; /*주축 중앙 기준*/ } #opt4{ justify-content:space-between; /*시작점과 끝점 배치한 후 같은 간격*/ } #opt5{ justify-content:space-around; /*전체 .. 12장 예제 - 플렉스 항목의 배치 방향과 줄바꿈 적용하기 DOCTYPE html> 플렉스 항목의 배치방향과 줄바꿈 적용하기 .container { width:400px; display:flex; background-color:#eee; border:1px solid #222; margin-bottom:10px; } #opt1 { /*왼쪽에서 오른쪽으로, 여러줄 */ flex-flow:row wrap; } #opt2 { /*왼쪽에서 오른쪽으로, 한줄*/ flex-flow:row nowrap; } .box { padding: 5px 45px; margin:5px; background-color:#222; } p { color:#fff; text-align:center; } 1 2 3 4 5 6 1 2 3 4 5 6 12장 예제 - 플렉스 항목의 줄 바꾸기 DOCTYPE html> 플렉스 항목의 줄 바꾸기 .container { width:800px; display:flex; /* 플렉스 컨테이너 지정 */ background-color:#eee; border:1px solid #222; margin-bottom:30px; } .box { padding:5px 45px; margin:5px; width:80px; background-color:#222; } #opt1{ flex-wrap: nowrap; /* 한 줄에 표시 */ } #opt2{ flex-wrap: wrap; /* 여러 줄에 표시 */ } #opt3{ flex-wrap: wrap-reverse; /* 시작점과 끝점 바꿔 여러 줄에 표시 */ } p { color:#fff; text-align:.. 12장 예제 - 플렉스 항목 배치하기 DOCTYPE html> 플렉스 항목 배치하기 .container { width:700px; display:flex; /*플렉스 컨테이너 지정*/ background-color:#eee; border:1px solid #222; margin-bottom:30px; } .box { padding: 5px 45px; margin: 5px; width: 80px; background-color:#222; } #opt1 { flex-direction:row; /*왼쪽에서 오른쪽으로*/ } #opt2 { flex-direction:row-reverse; /*오른쪽에서 왼쪽으로 */ } #opt3 { flex-direction:column; /*위에서 아래로*/ } #opt4 { flex-direction:colu.. 12장 예제 - 미디어 쿼리 화면 학인하기 DOCTYPE html> 미디어 쿼리 사용하기 body { background:url(images/bg0.jpg) no-repeat fixed; /*기본 배경 이미지 지정*/ background-size:cover; /*배경 이미지로 요소를 모두 덮도록 이미지 확대 및 축소*/ } @media screen and (max-width:1024px) { /*가로가 1024px 이하이면 bg1.jpg 지정 */ body { background:url("images/bg1.jpg") no-repeat fixed; background-size:cover; } } @media screen and (max-width:768px) { /*가로가 768px 이하면 bg2.jpg 지정*/ body { background:.. 이전 1 2 3 4 5 ··· 9 다음
