z-index
- HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있음
- 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용
- 순서는 숫자의 숫자의 크기가 클수록 위에 위치하고 작을수록 아래 위치하게 됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>z-index</title>
<style>
div#wrapper { position: relative; }
div.box {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid black;
font-size: 25px;
}
#b1 {
left: 50px;
top: 50px;
background-color: deeppink;
z-index: 100;
}
#b2 {
left: 120px;
top: 70px;
background-color: gold;
z-index: 1;
}
#b3 {
left: 70px;
top: 110px;
background-color: deepskyblue;
z-index: 10;
}
</style>
</head>
<body>
<h2>z-index</h2>
<div id="wrapper">
<div id="b1" class="box">1번째 div</div>
<div id="b2" class="box">2번째 div</div>
<div id="b3" class="box">3번째 div</div>
</div>
</body>
</html>
float
- HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만듦
- float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐
- float를 적용받은 요소의 다음에 나오는 요소방향을 결정(left, right)
- 컨텐츠 크기 만큼만 영역을 설정(블록)
- float를 적용받은 요소는 다른 요소(배경)보다 위에 위치
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float1</title>
<style>
img {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<h2>float1</h2>
<img src="./gift.png" alt="선물">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut ea totam modi fugit doloremque odio, laudantium repellendus ratione similique delectus. Architecto dolorum debitis asperiores, aliquam tenetur beatae dolores cum velit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut ea totam modi fugit doloremque odio, laudantium repellendus ratione similique delectus. Architecto dolorum debitis asperiores, aliquam tenetur beatae dolores cum velit.
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float2</title>
<style>
div {
padding: 20px;
}
#box1 {
background-color: gold;
float: left;
margin-right: 20px;
}
#box2 {
background-color: deeppink;
float: left;
margin-right: 20px;
}
#box3 {
background-color: greenyellow;
float: left;
margin-right: 20px;
}
#box4 {
background-color: deepskyblue;
float: right;
}
</style>
</head>
<body>
<h2>float</h2>
<div id="box1">박스1</div>
<div id="box2">박스2</div>
<div id="box3">박스3</div>
<div id="box4">박스4</div>
</body>
</html>
clear
- float 속성이 적용된 이후 나타나는 요소들의 동작을 조절
- float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기 힘듬
- clear 속성을 이용하여 float 이후에 등장하는 요소들이 더이상 float 속성에 영향을 받지 않도록 설정(left, right, both)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clear</title>
<style>
body { margin: 20px 30px; max-width: 800px;}
p {
padding: 10px;
text-align: center;
font-size: 20px;
}
#p1 {
float: left;
width: 38%;
background-color: gold;
margin-bottom: 20px;
}
#p2 {
float: right;
width: 54%;
background-color: deepskyblue;
}
#p3 {
clear: both;
background-color: deeppink;
}
</style>
</head>
<body>
<h2>clear</h2>
<div id="p1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus iste saepe dolores, nostrum reiciendis aliquam voluptatum unde veniam porro iusto nihil. Soluta commodi accusamus perferendis minus, tempora mollitia hic at!</p>
</div>
<div id="p2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus iste saepe dolores, nostrum reiciendis aliquam voluptatum unde veniam porro iusto nihil. Soluta commodi accusamus perferendis minus, tempora mollitia hic at!</p>
</div>
<div id="p3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus iste saepe dolores, nostrum reiciendis aliquam voluptatum unde veniam porro iusto nihil. Soluta commodi accusamus perferendis minus, tempora mollitia hic at!</p>
</div>
</body>
</html>
다단 레이아웃
- 텍스트를 column 속성으로 다단을 생성
- 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성
column-count: 단의 개수를 설정
column-rule: 단과 단사이의 구분선, 구분의 모양, 두께, 색상을 설정
coloumn-gap: 단과 단사이의 여백을 설정
coloumn-span: 단과 안의 포함된 요소를 다단편집에서 해제(all)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2단 레이아웃</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="continer">
<header id="header">
<h1>사이트 제목</h1>
</header>
<div id="contents">
<h2>본문</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam, numquam aspernatur sequi reprehenderit suscipit deleniti voluptates corporis qui sed tempora veniam a tempore et rerum, autem debitis molestias quo!</p>
</div>
<div id="sidebar">
<h2>사이드바</h2>
<ul>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum exercitationem porro quam eos ipsum ipsam dolores velit tempora debitis sed, reiciendis aperiam laudantium distinctio? Ad beatae quasi hic minima ipsum?</li>
</ul>
</div>
<footer id="footer">
<h2>푸터</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde perferendis officiis repellat earum ut ducimus laborum autem ea porro obcaecati ipsam sit aut laboriosam, corrupti iste voluptatum voluptatem. Saepe, vero?</p>
</footer>
</div>
</body>
</html>#container {
width: 1000px;
margin: 0 auto;
}
header {
padding: 20px;
border: 1px solid gray;
background-color: deeppink;
margin-bottom: 20px;
}
#contents{
padding: 20px;
width: 700px;
background: deepskyblue;
border: 1px solid gray;
float: left;
}
#sidebar {
padding: 20px;
width: 200px;
background-color: gold;
border: 1px solid gray;
float: right;
margin-bottom: 20px;
}
#footer {
padding: 20px;
background-color: greenyellow;
border: 1px solid gray;
clear: both;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3단 레이아웃</title>
<link rel="stylesheet" href="./css/layout.css">
</head>
<body>
<div id="continer">
<header id="header">
<h2>사이트 제목</h2>
</header>
<div id="left-sidebar">
<h2>사이드바</h2>
<ul>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
</ul>
</div>
<div id="contents">
<h2>본문</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam, numquam aspernatur sequi reprehenderit suscipit deleniti voluptates corporis qui sed tempora veniam a tempore et rerum, autem debitis molestias quo!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam, numquam aspernatur sequi reprehenderit suscipit deleniti voluptates corporis qui sed tempora veniam a tempore et rerum, autem debitis molestias quo!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam, numquam aspernatur sequi reprehenderit suscipit deleniti voluptates corporis qui sed tempora veniam a tempore et rerum, autem debitis molestias quo!</p>
</div>
<div id="right-sidebar">
<h2>사이드바</h2>
<ul>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
</ul>
</div>
<footer id="footer">
<h2>푸터</h2>
<p>저작권 정보</p>
<p>연락처 등</p>
</footer>
</div>
</body>
</html>#container {
width: 1000px;
margin: 0 auto;
}
div {
padding: 20px;
border: 1px solid gray;
}
#header {
padding: 20px;
background-color: deeppink;
border: 1px solid gray;
margin-bottom: 20px;
}
#left-sidebar {
width: 150px;
float: left;
background-color: gold;
margin-right: 20px;
}
#contents{
width: 535px;
float: left;
background-color: deepskyblue;
margin-bottom: 20px;
}
#right-sidebar {
width: 150px;
float: right;
background-color: gold;
}
#footer {
padding: 20px;
border: 1px solid gray;
background-color: greenyellow;
clear: both;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>다단 레이아웃</title>
<style>
div, h2, p { margin:0; padding: 0; }
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>
<div class="col">
<h2>다단 레이아웃</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo officia sit ratione vel quibusdam qui aut, accusamus, recusandae voluptates consequatur dolores harum, architecto fugit ducimus corporis blanditiis vitae porro necessitatibus.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo officia sit ratione vel quibusdam qui aut, accusamus, recusandae voluptates consequatur dolores harum, architecto fugit ducimus corporis blanditiis vitae porro necessitatibus.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo officia sit ratione vel quibusdam qui aut, accusamus, recusandae voluptates consequatur dolores harum, architecto fugit ducimus corporis blanditiis vitae porro necessitatibus.
</p>
</div>
</body>
</html>
Flex 레이아웃
- 수평정렬을 하기 위한 속성
display: flex
flex-wrap: 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성
nowrap: 기본값, 플렉스 요소가 다음줄로 넘어가지 않음, 요소의 너비를 줄여 한 줄에 배치
wrap: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘기
wrap-reverse: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김(단, 아래가 아닌 위쪽으로 넘김)
flex-direction: 플렉스 요소들이 배치되는 축의 방향을 결정하는 속성
row: 기본값, 가로로 배치
row-reverse: 가로로 배치(반대)
column: 세로로 배치
column-reverse: 세로로 배치(반대)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>플렉스 레이아웃1</title>
<style>
#container {
width: 1000px;
height: 500px;
margin: 0 auto;
border: 3px solid red;
display: flex;
/* 기본값 nowrap*/
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse; */
/* flex-direction: row; */
/* flex-direction: row-reverse; */
/* flex-direction: column-reverse; */
flex-flow: row-reverse nowrap;
}
#container > div {
width: 400px;
border: 1px solid black;
background-color: gold;
}
span {
font-size: 50px;
font-weight: bold;
padding: 20px;
}
</style>
</head>
<body>
<h2>플렉스 레이아웃1</h2>
<div id="container">
<div id="box1"><span>1</span></div>
<div id="box2"><span>2</span></div>
<div id="box3"><span>3</span></div>
</div>
</body>
</html>
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: 요소들이 텍스트 베이스라인 기준으로 정렬
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>플랙스레이아웃</title>
<style>
.wrapper {
width: 500px;
height: 200px;
margin: 0 auto;
border: 3px solid red;
}
.wrapper div {
width: 50px;
border: 2px solid black;
background-color: gold;
}
#container {
display: flex;
/* justify-content: flex-start; 기본값 */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
/* align-items: stretch 기본값 */
align-items: flex-start;
/* align-items: flex-end; */
/* align-items: center; */
/* align-items: baseline; */
#box2 {align-self: center;}
#box1 { order: 4; }
#box2 { order: 1; }
#box3 { order: 5; }
#box4 { order: 2; }
#box5 { order: 3; }
}
</style>
</head>
<body>
<h2>플렉스레이아웃2</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>
align-self: 플렉스 요소에 수직축으로 다른 align 속성값을 설정
order : 플렉스 요소의 순서를 설정
align-content: 플렉스 요소가 설정된 상태에서 요소들이 2줄이상 되었을 때 수직방향 정렬방식을 설정(flex-wrap의 값을 wrap으로 설정해야 함)
stretch: 기본값, 아이템들이 수직축 방향으로 늘어남
flex-start: 요소들이 시작점으로 정렬
flex-end: 요소들이 끝으로 정렬
center: 요소들이 가운데로 정렬
space-between: 요소들 사이에 여유 공간을 두고 배치(앞뒤 양쪽에 요소를 붙임)
space-around: 요소들 사이에 여유 공간을 두고 배치(앞뒤 약간의 공간을 둠)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>플렉스 레이아웃3</title>
<style>
.wrapper {
width: 500px;
height: 200px;
margin: 0 auto;
border: 3px solid red;
}
.wrapper div {
width: 150px;
border: 2px solid black;
background-color: gold;
}
#container {
display: flex;
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
}
</style>
</head>
<body>
<h2>플렉스 레이아웃3</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>
미디어 쿼리(media query)
반응형웹
하나의 웹사이트에서 pc, 스마트폰, 태블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법
@media 매체유형 and (속성에 대한 조건){
css 코드 ...
}
매체유형
all: 모든 매체
screen: 컴퓨터, 태블릿, 스마트폰 ...
print: 프린터
speech: 스크린 리더
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>미디어쿼리1</title>
<style>
body { background-color: deeppink;}
@media screen and (min-width: 800px) {
body { background-color: deepskyblue;}
}
</style>
</head>
<body>
<h2>미디어쿼리1</h2>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>미디어쿼리2</title>
<link rel="stylesheet" href="./css/media.css">
</head>
<body>
<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/facebook.png" alt="페이스북">
<img src="./images/youtube.png" alt="유튜브">
<img src="./images/instagram.png" alt="인스타그램">
<img src="./images/twitter.png" alt="트위터">
</section>
<section id="desc" class="text">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias vel dolorum quaerat. Id iusto cumque soluta ipsum ad corrupti hic dolorem dicta ab, mollitia ut praesentium, debitis aperiam eos cupiditate!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias vel dolorum quaerat. Id iusto cumque soluta ipsum ad corrupti hic dolorem dicta ab, mollitia ut praesentium, debitis aperiam eos cupiditate!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias vel dolorum quaerat. Id iusto cumque soluta ipsum ad corrupti hic dolorem dicta ab, mollitia ut praesentium, debitis aperiam eos cupiditate!</p>
</section>
</div>
<footer>
<p>copyright 2024 by 김보미</p>
</footer>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>솔로의 식탁</title>
<link rel="stylesheet" href="./css/solo.css">
</head>
<body>
<div id="container">
<header>
<h1>솔로의 식탁</h1>
</header>
<section id="menus">
<div id="menu1">
<h2>밥/죽</h2>
</div>
<div id="menu2">
<h2>샐러드</h2>
</div>
<div id="menu3">
<h2>반찬</h2>
</div>
<div id="menu4">
<h2>토스트</h2>
</div>
<div id="menu5">
<h2>음료/칵테일</h2>
</div>
</section>
<footer>
<p>솔로의 식탁</p>
</footer>
</div>
</body>
</html>#container {
width: 100%;
}
header {
width: 100%;
}
header > h1 {
text-align: center;
font-size: 3em;
}
#menus {
width: 100%
}
#menus > div {
height: 400px;
border: 1px solid black;
margin-bottom: 15px;
position: relative;
}
#menus h2 {
position: absolute;
right: 3%;
bottom: 10px;
font-size: 2em;
color: white;
text-shadow: 3px 3px 5px black;
}
#menu1, #menu2, #menu3, #menu4, #menu5 {
width: 100%;
}
#menu1 {
background: url(../images/dish1.jpg) no-repeat center/cover;
}
#menu2 {
background: url(../images/dish2.jpg) no-repeat center/cover;
}
#menu3 {
background: url(../images/dish3.jpg) no-repeat center/cover;
}
#menu4 {
background: url(../images/dish4.jpg) no-repeat center/cover;
}
#menu5 {
background: url(../images/dish5.jpg) no-repeat center/cover;
}
footer {
width: 100%;
background-color: black;
height: 100px;
}
footer > p {
font-size: 1.5em;
color: white;
text-align: center;
line-height: 100px;
}
@media screen and (min-width: 768px) {
#menus {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#menu1, #menu2, #menu3, #menu4 {
width: 49%;
}
}
@media screen and (min-width: 1024px){
#menu1, #menu2, #menu3, #menu4 {
width: 32%;
}
#menu5 {
width: 66%;
}
}
em과 rem 특징
상대적인 크기를 정하는 단위
em
- 부모 요소 크기의 몇 배 인지를 단위로 설정
pc의 일반 텍스트 크기: 16px = 1em
모바일의 일반 텍스트 크기: 12px = 1em
HTML
<div id='hello'> <!-- 32px -->
<div>안녕하세요!</div> <!-- 32px = 1em -->
</div>
CSS
#hello { font-size: 2em; }
rem
- 문서의 최상위 요소(html)의 몇 배 인지를 크기로 설정
HTML
<html>
<body>
<div id='hello'> <!-- 32px -->
<div>안녕하세요!</div> <!-- 32px = 1em -->
</div>
</body>
</html>
CSS
html { font-size: 2rem } /* 16 * 2 px */
