다단 레이아웃
- 텍스트를 column 속성으로 다단을 생성
- 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미
- column-count: 단의 갯수를 설정
- column-rule: 단과 단사이의 구분선, 구분의 모양, 두께, 색상을 설정
- column-gap: 단과 단사이의 여백을 설정
- column-span: 단과 안의 포함된 요소를 다단편집에서 해제
Flex 레이아웃
- 가로정렬: 테이블, float, flex, grid
- css3에 새롭게 추가되었음
- display: flex
flex-wrap
플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성
nowrap:기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치
wrap: 플렉스 요소의 여유공간이 없다면 다음줄로 넘김
wrap-reverse: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김(단, 아래쪽이 아닌 위쪽으로 넘김)
flex-direction
플렉스 요소들이 배치되는 축의 방향을 결정하는 속성
row: 기본값. 가로로 배치
row-reverse: 가로로 배치(반대로)
column: 세로로 배치
column-revese: 세로로 배치(반대로)
flex-flow
flex-wrap과 flex-direction을 한꺼번에 지정할 수 있는 속성
예) flex-flow: row nowrap;
justify-content
플렉스 요소의 수평방향 정렬방식을 설정
flex-start: 기본값. 앞쪽에서 부터 배치됨
flex-end: 뒤쪽에서부터 배치됨
center: 가운데 배치됨
space-between: 요소들 사이에 여유 공간을 두고 배치됨(앞뒤 양쪽에 요소를 붙임)
space-around: 요소들 사이에 여유 공간을 두고 배치됨(앞뒤 약간의 공간을 둠)
align-items
플렉스 요소의 수직방향 정렬방식을 설정
stretch: 기본값. 아이템들이 수직축 방향으로 늘어남
flex-start: 요소들이 시작점으로 정렬됨
flex-end: 요소들이 끝으로 정렬됨
center: 요소들이 가운데로 정렬됨
baseline: 요소들을 텍스트 베이스라인 기준으로 정렬됨
align-content
flex-wrap: wrap 설정된 상태에서 아이템들이 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성
stretch: 기본값. 위 아래로 늘어남
flex-start: 요소들이 시작점으로 정렬됨
flex-end: 요소들이 끝으로 정렬됨
center: 요소들이 가운데로 정렬됨
space-between: 요소들 사이에 여유 공간을 두고 배치됨(앞뒤 양쪽에 요소를 붙임)
space-around: 요소들 사이에 여유 공간을 두고 배치됨(앞뒤 약간의 공간을 둠)
align-self //flex2에 2블럭 예시
플렉스 요소에 다른 align 속성값을 설정
order
플렉스 요소들의 순서를 설정
flex-basis
플렉스 요소의 기본 크기를 설정
flex-grow
플렉스 요소를 flex-basis의 설정한 것보다 커질 수 있는지를 결정하는 속성
flex-shirnk
플렉스 요소를 flex-basis의 설정한 값보다 작아질 수 있는지를 결정하는 속성(flex-grow와 쌍을 이룸)
flex
flex-grow, flex-shirnk, flex-basis를 한 번에 쓸 수 있는 속성 (저 순서대로 작성해야함!)
미디어 쿼리(media query)
-반응형웹페이지 만들때 주로씀
-반응형웹페이지:기기의 해상도에따라 다르게 화면을 보여줄때
-css에서 특정 속서잉 변했을때 컨텐츠를 어떻게 바꿀지를 설정
- 특정 속성이 적용되는 범위가 변경되었을 때 컨텐츠를 별도로 변경하지 않아도 알맞는 형태로 스타일을 조절
@media 매체유형 and(속성에 대한 조건){
css 코드
...
}
✔ 매체유형
all: 모든 매체
screen: 컴퓨터,태블릿, 스마트폰 ..
print: 프린터
speech: 스크린 리더
em과 rem
상대적인 크기를 정하는 단위
em: 부모 요소 크기의 몇 배인지로 크기를 설정
pc의 일반 텍스트 크기: 16px(기본값)
16px = 1em
모바일의 일반 텍스트 크기: 12px(기본값)
12px = 1em
#hello { font-size: 2em} /* pc기준으로 32px */
<div id="hello">
<div>안녕하세요</div> <!-- 1em = 32px -->
</div>
rem: 문서의 최상위 요소(html)의 몇 배인지로 크기를 설정
html {font-size: 1rem}
<html>
<body>
<div>...</div>
</body>
</html>
과제.
원하는 사이트를 정해 메인 페이지를 클론 코딩하여 자신의 웹페이지에 링크(일요일 자정)
1.다단레이아웃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div,h2,p{ margin: 0; padding: 0;}
body { margin: 10px}
h2{padding: 0 0 20px; text-align: center;}
div.col{
text-align: justify;
padding: 20px;
background-color: gold;
border: 3px solid red;
column-count:3;
column-gap:30px;
column-rule:3px dashed red;
}
.col>h2{column-span: all;}
</style>
</head>
<body style="background-color: black;">
<div class="col">
<h2>다단 레이아웃</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam perspiciatis tenetur nesciunt eum iusto iste eligendi id hic debitis inventore quidem, cupiditate odit ipsum possimus fuga repellat quasi? Expedita, soluta?ipsum dolor sit, amet consectetur adipisicing elit. Aperiam perspiciatis tenetur nesciunt eum iusto iste eligendi id hic debitis inventore quidem, cupiditate odit ipsum possimus fuga repellat quasi? Expedita, soluta?ipsum dolor sit, amet consectetur adipisicing elit. Aperiam perspiciatis tenetur nesciunt eum iusto iste eligendi id hic debitis inventore quidem, cupiditate odit ipsum possimus fuga repellat quasi? Expedita, soluta?ipsum dolor sit, amet consectetur adipisicing elit. Aperiam perspiciatis tenetur nesciunt eum iusto iste eligendi id hic debitis inventore quidem, cupiditate odit ipsum possimus fuga repellat quasi? Expedita, soluta?ipsum dolor sit, amet consectetur adipisicing elit. Aperiam perspiciatis tenetur nesciunt eum iusto iste eligendi id hic debitis inventore quidem, cupiditate odit ipsum possimus fuga repellat quasi? Expedita, soluta?ipsum dolor sit, amet consectetur adipisicing elit. Aperiam perspiciatis tenetur nesciunt eum iusto iste eligendi id hic debitis inventore quidem, cupiditate odit ipsum possimus fuga repellat quasi? Expedita, soluta?</p>
</div>
</body>
</html>
2.flex1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: black;
}
#container {
width: 1000px;
height: 500px;
margin: 0 auto;
border: 3px solid red;
display: flex;
flex-wrap: nowrap;
/* flex-wrap:wrap; */
/* flex-wrap:wrap-reverse; */
/* flex-direction: row; */
/* flex-direction: column; */
}
#container > div {
width:400px;
border: 1px solid black;
background-color: rgb(72, 71, 66);
}
h2{
font-size: 50px;
font-weight: bold;
padding: 20px;
}
</style>
</head>
<body>
<h2>flex1</h2>
<div id="container">
<div id="box1"><h2>1</h2></div>
<div id="box2"><h2>2</h2></div>
<div id="box3"><h2>3</h2></div>
</div>
</body>
</html>
3.flex2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper{
width: 500px;
height:200px;
margin: 0 auto;
display:flex;
border: 3px solid red;
}
body{
background-color: black;
}
.wrapper div{
width: 50px;
border: 2px solid black;
background-color: gold;
}
#container {
justify-content: flex-start;
/* justify-content: flex-end; */
/* justify-content:center; */
/* justify-content:space-between; */
/* justify-content: space-around; */
/* align-items: flex-start; */
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
align-items: baseline;
}
h2,p{
text-align: center;
}
#box2{
align-self:flex-end;
}
#box1{ order: 5;
align-self: ;}
#box2{ order: 3;}
#box3{ order: 2;}
#box4{ order: 1;}
#box5{ order: 4;}
</style>
</head>
<body>
<h2>flex2</h2>
<div id="container" class="wrapper">
<div id="box1">
<p>1</p>
</div>
<div id="box2">
<p>2</p>
</div>
<div id="box3">
<p>3</p>
</div>
<div id="box4">
<p style="font-size: 50px;">4</p>
</div>
<div id="box5">
<p>5</p>
</div>
</div>
</body>
</html>
4.flex3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper{
width: 500px;
height:200px;
margin: 0 auto;
display:flex;
border: 3px solid red;
}
body{
background-color: black;
}
.wrapper div{
width: 150px;
border: 2px solid black;
background-color: gold;
}
#container {
flex-wrap:wrap;
/* align-content: stretch; */
/* align-content: flex-start; */
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: space-between; */
align-content: space-around;
}
h2,p{
text-align: center;
}
</style>
</head>
<body>
<h2>flex3</h2>
<div id="container" class="wrapper">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
<div>
<p>5</p>
</div>
</div>
</body>
</html>
5.flex4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: black;
}
#container {
width: 50%;
height: 500px;
margin: 0 auto;
border: 3px solid red;
display: flex;
flex-wrap: nowrap;
/* flex-wrap:wrap; */
/* flex-wrap:wrap-reverse; */
/* flex-direction: row; */
/* flex-direction: column; */
}
#container > div {
width:400px;
border: 1px solid black;
background-color: rgb(72, 71, 66);
}
h2{
font-size: 50px;
font-weight: bold;
padding: 20px;
}
.item{
/* flex-basis: auto; */
flex-basis: 100px;
/* word-wrap: break-word; */
/* flex-grow: 1 */
}
/* 비율로 크기를 정함 */
/* .item:nth-child(1){ flex-grow: 1;}
.item:nth-child(2){ flex-grow: 2;}
.item:nth-child(3){ flex-grow: 1;} */
.item:nth-child(1){ flex-grow: 1;flex-shrink: 1;}
.item:nth-child(2){ flex-grow: 2;flex-shrink: 2;}
.item:nth-child(3){ flex-grow: 1;flex-shrink: 1;}
</style>
</head>
<body>
<h2>flex4</h2>
<div id="container">
<div id="box1" class="item"><h2>1</h2></div>
<div id="box2" class="item"><h2>2</h2></div>
<div id="box3" class="item"><h2>3</h2></div>
</div>
</body>
</html>
6.미디어쿼리1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: rgb(54, 54, 54);
}
@media screen and (min-width: 1024px )
{
body{background-color: deepskyblue;}
}
@media screen and (min-width: 1110px )
{
body{background-color: red;}
}
@media screen and (min-width: 1200px )
{
body{background-color: orange;}
}
@media screen and (min-width: 1300px )
{
body{background-color: yellow;}
}
@media screen and (min-width: 1400px )
{
body{background-color: green;}
}
@media screen and (min-width: 1500px )
{
body{background-color: blue;}
}
@media screen and (min-width: 1600px )
{
body{background-color: rgb(6, 17, 75);}
}
@media screen and (min-width: 1700px )
{
body{background-color: rgb(115, 0, 121);}
}
</style>
</head>
<body>
<h2>미디어쿼리1</h2>
</body>
</html>
7.미디어쿼리2(CSS,HTML)
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
#container{
width:100%;
}
header{
width: 100%;
background-color: black;
margin-bottom: 20px;
}
nav>ul{
height:50px;
margin:0;
list-style: none;
color: white;
}
nav>ul>li{
float:left;
padding: 10px;
margin : 5px 5px;
}
/*
구형폰: 가상뷰포트가 320px
일반폰: 가로길이가 360px~380px
*/
nav, #contents {
width: 310px;
margin: 0 auto;
}
nav >ul{
font-size: 12px;
}
#intro{
width:100%;
margin-bottom: 20px;
}
#intro> img{
width: 100%;
padding: 10px;
}
#desc{
width:100%;
padding: 10px;
line-height: 1.5;
font-size: 18px;
}
footer{
width: 100%;
height: 50px;
padding: 20px;
background-color: black;
color: white;
}
footer>p{
text-align: center;
font-size: 12px;
line-height: 10px;
}
/* 테블릿 : 768px ~ */
@media screen and (min-width: 768px) {
nav > ul{
font-size: 18px;
}
nav,#contents{
width:750px;
margin: 0 auto;
}
#intro{
width: 100%
}
#intro>img{
width: 24%;
padding: 10px;
}
#desc{
width: 100%;
padding: 10px;
margin: 10px auto;
}
footer{
height: 70px;
padding: 30px;
}
footer > p{
font-size:18px;
}
}
/* 데스크탑 : 1024px ~ */
@media screen and (min-width:1024px){
nav, #contents{
width: 1000px;
margin: 0 auto;
}
#intro > img{
width: 10%;
padding: 10px;
float: left;
}
#desc{
display: inline-block;
width: 400px;
height: auto;
padding: 10px;
margin-left: 10px;
margin-bottom: 20px;
}
footer{
clear: both;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/media.css">
</head>
<body style="background-color: rgb(80, 80, 80);color:white;">
<div id="container">
<header>
<nav>
<ul>
<li>인스타그램</li>
<li>유튜브</li>
<li>페이스북</li>
<li>트위터</li>
</ul>
</nav>
</header>
<div id="contents">
<section id="intro">
<img src="./images/instagram.png" alt="인스타그램">
<img src="./images/youtube.png" alt="유튜브">
<img src="./images/facebook.png" alt="페이스북">
<img src="./images/tweet.png" alt="트위터">
</section>
<section id="desc" class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam quos, vitae nemo architecto molestiae, consequuntur, earum sunt deleniti praesentium expedita eum omnis sequi? Amet aliquam vitae eius itaque necessitatibus culpa
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error totam cupiditate eveniet incidunt beatae officiis saepe nihil voluptate tenetur consectetur? Nostrum, unde! Veniam nemo delectus in soluta molestiae hic earum!
</section>
</div>
<footer><p>이재원</p>
</footer>
</div>
</body>
</html>
8.em과rem
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{font-size:14px;} /* 1rem=14px */
/* body{font-size: 1.2em}
.em{font-size: 1.2em} */
.rem{font-size: 1.2rem;}
</style>
</head>
<body>
<h2>em</h2>
<p class="em">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id commodi voluptatibus amet dolores cupiditate repudiandae quo veniam explicabo magnam. Eum impedit neque ipsum odit praesentium? Nisi soluta nobis consequatur facilis!</p>
</body>
</html>
반응형
'웹 개발 > 🖥️ HTML&CSS' 카테고리의 다른 글
| CSS | portfolio page만들기 (0) | 2022.11.06 |
|---|---|
| HTML&CSS | transform,벤더프리픽스,transition,animation (1) | 2022.11.01 |
| HTML&CSS | 패딩,테두리,마진,박스사이징,디스플레이,폼,상대위치,고정위치,절대위치,z-index,float,clear (0) | 2022.10.27 |
| HTML&CSS | 선택자,텍스트,배경 (1) | 2022.10.27 |
| HTML&CSS | CSS,스타일,선택자,상속 (0) | 2022.10.27 |
