6강 - 박스띄우기
position
position - relative
- 자기 자신을 기준으로 움직임
-> left를 주게되면 왼쪽선이 기준이 되기때문에 오른쪽으로 이동, 반대로 right하면 왼쪽으로 이동하게 된다. 마찬가지로 top이면 윗면이 기준이기때문에 아래로 내려오게 되고, bottom이면 위로 올라가게된다. - 원래 있던 자리 지켜주기 때문에 다른 요소들이 침범하지 않는다.
.box:nth-child(2) {
position: relative;
left: 10px;
}
absolute
- abosolute를 쓰려면 조상에
position: xxxx;가 있어야 그 요소를 기준으로 움직이게 되고 가장 가까운 것이 기준이됨 (position: static은 제외 !) - 원래 있던 자리를 뺏어서 다른 것이 들어갈 수 있음 !
- absolute, fixed 걸면 가로길이 화면크기 100%가 깨지므로 100% 할꺼면 수동으로 입력해주어야 함
width: 100%;
position: absolute;fixed
- position을 fixed하게되면 스크롤을 내려도 그 자리에 고정되어 있음 !
요소 쌓임 순서 (Stack order)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
width: 80%;
margin: 50px auto;
}
.box {
width: 100px;
height: 100px;
background: tomato;
border: 4px solid red;
border-radius: 15px;
font-size: 2em;
display: flex;
justify-content: center;
align-items: center;
float: left;
color: #fff;
/* x축 y축 블러크기 색상 */
box-shadow: 2px 2px 20px #000;
text-shadow: 1px 1px 10px #000;
margin-right: -30px;
}
.box2 {
position: relative;
left: 100px;
z-index: 1;
}
.box4 {
position: relative;
z-index: -1;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
</div>
</body>
</html>.box2,.box4가 position을 가지기 때문에 다른 숫자들보다 우위에 있게되었다.- z-index가 0으로 같으므로 나중에 작성한
.box4요소가.box2보다 위에 있게 된다.
.box2 {
position: relative;
left: 100px;
}
.box4 {
position: relative;
}
2..box2, .box4 가 position을 가지면서 다른 숫자들보다 우위에 있을 수 있다. 하지만 .box2 에는 z-index를 1을 주어 다른 값들보다 위에, .box4에는 z-index값을 -1로 주면서 가장 후위로 밀리게 된다.
.box2 {
position: relative;
left: 100px;
z-index: 1;
}
.box4 {
position: relative;
z-index: -1;
}
연습문제 1
- html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="prac(1).css">
</head>
<body>
<section>
<h1>동물병원 24시</h1>
<ul>
<li>밥 먹이는 시간 지킬 것</li>
<li>길고양이 주사 맞히기</li>
<li class="blue">눈 아픈 동물 목에 깔때기
씌우기</li>
<li>매일 목욕 시킬 것</li>
<li>이름없는 애들 이름 짓지 말기</li>
<li class="blue manywatch ">더보기</li>
</ul>
</section>
</body>
</html>- css
@import url("../../common.css");
section {
width: 60%;
background: pink;
border: 3px solid lightgray;
padding: 10px;
margin: 30px auto;
position: relative;
}
section h1 {
color: green;
font-size: 1.5em;
font-weight: 700;
margin-bottom: 20px;
}
section ul {
font-size: 1.3em;
padding-left: 18px;
line-height: 30px;
color: gray;
}
section ul .manywatch {
position: absolute;
top: 20px;
right: 20px;
}
section ul .blue {
color: blue;
text-decoration: underline
}- 내 결과물
 - 더보기가 있는 코드에 position: absolute를 주고 기준이 될 부모에 position: relative를 준 다음 top, right를 설정하여 오른쪽 위에 위치하게했다.
연습문제 2
- 2개의 초록색 박스에는 각각
float: left를 걸어주는 것이 포인트 - css에 주석으로 header, main, footer 등을 구분해주면 가독성이 좋다.
- html
<!DOCTYPE html>
<html lang="ko">
<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>
<!-- custom css -->
<link rel="stylesheet" href="prac(2).css">
</head>
<body>
<div id="wrapper">
<header>
<h1>
<strong>호랑이</strong>를 <span>주제</span>로 한 <em>민화</em>
</h1>
</header>
<div class="container clearfix">
<ul class="menu">
<!-- float -->
<li><a href="#">그림의 작가</a></li>
<li><a href="#">그림의 시대</a></li>
<li><a href="#">그림의 재료</a></li>
<li><a href="#">그림의 주인공</a></li>
<li><a href="#">그림의 활용</a></li>
</ul>
<div class="content">
<h2>승운용호도</h2>
<p>사람 이름 같기도 한 이 그림을 처음 보았을 때 티셔츠에 새길 그림을 일러스트레이터로 작업 중이었다. 비록
그림을 보며 원본대로 그려내는 작업이었지만 즐거웠다. 용과 겨루는 황금빛 호랑이의 모습이 용맹하기도 했지만 내게는 약간
귀여워 보였고 무엇보다 순수해 보였다. 어둠 속에서 나타난 비겁한 용보다는 맑은 물을 튀며 신성한 기운을 드러내는 우리
호랑이에서 무한한 애정을 느꼈기 때문이다.</p>
<h2>길상백호</h2>
<p>호랑이 그림은 예로부터 아래로 내려오는 것보다 위로 올라가는 형상이 더 좋다고 하였다. 하지만 이 그림은
달랐다. 아래로 내려오고 있기는 하지만 윤기나는 등의 털과 그윽하게 쳐다보는 두 눈은 백호의 여유로움을 충분히 공감할 수
있게 해주었기 때문이다. 채도가 내려앉아 버린 백호의 그림이지만 건조해 보이기보다는 은빛으로 촉촉해 보이는 호랑이의
자태에 반했다고 할까? 알록달록함이 주는 아기자기함은 없지만 세련된 무채색에 다부지게 밟아 짚은 앞발에서 오히려 나를
지켜주는 든든함까지 느껴진다. 호랑이가 밟은 풀잎들에서도 우리를 한 공간 안에 무사히 존재하게 하는 안정감이 있는
듯하다. 그림을 감상할 때 그 시대적 배경과 소재의 재질 등을 함께 감상하여 아는 즐거움을 늘려야 하겠지만 나는 아무
부수적인 요소들을 제하고 오로지 내 눈과 그림이 서로 교감하여 빚어내는 상상의 공간을 좋아한다. 시대를 알고 의도를 아는
것도 중요하겠지만 작가가 우리에게 오로지 늘 같은 그것만 바라지는 않았을 것 같다. 심지어 바랬다고 해도 그냥 미안하게
생각하고 나만의 감상포인트를 놓치지 말아야겠다. 이것도 정체성을 잃지 않으려는 관객의 필사적인 노력으로 보아주기를
바래본다.</p>
</div>
</div>
<footer>
<address>Copyright © Allright Reserved.</address>
</footer>
</div>
</body>
</html>- css
@import url("../../common.css");
/* base style */
#wrapper {
width: 80%;
margin: auto;
background: lightgray;
}
/* header style */
header {
background: #123456;
padding: 30px 0;
text-align: center;
}
header h1 {
color: yellow;
font-size: 1.5em;
}
header h1 span {
color: yellow;
font-size: 2em;
}
header h1 em {
color: #fff;
font-size: 2.5em;
}
header h1 strong {
color: #fff;
font-size: 4em;
}
/* end header style */
/* begin container style */
#wrapper .container .menu {
background: lightgray;
padding: 20px 50px 20px 20px;
float: left;
line-height: 35px;
color: black;
text-decoration: underline;
width: 25%;
}
#wrapper .container .menu li a:hover {
color: #662;
border: 1px dashed #662;
}
#wrapper .container .content {
background: #fff;
float: left;
width: 75%;
}
#wrapper .container .content h2 {
background: brown;
color: yellow;
font-size: 1.8em;
font-family: serif;
font-weight: 700;
padding: 10px 20px;
}
#wrapper .container .content p {
padding: 20px;
line-height: 20px;
}
/* end container style */
/* begin footer style */
#wrapper footer {
background: darkgrey;
}
#wrapper footer address {
font-weight: 700;
padding: 20px 0 20px 20px;
}
/* end footer style */연습문제 3
-html
<!DOCTYPE html>
<html lang="ko">
<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="prac(3).css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Musée d'Orsay<span>Musée d'Orsay Musée d'Orsay
Musée d'Orsay Musée d'Orsay Musée d'Orsay</span>
</h1>
<h2 class="stit">
Royal Academy of Arts, THE REAL VANGOGH THE ARTIST AND HIS LETTERS
</h2>
</header>
<!-- //end header -->
<div class="container clearfix">
<aside class="side-menu">
<h3>ARTIST</h3>
<ul>
<li><a href="#">작가의 작품</a></li>
<li><a href="#">작가의 시대</a></li>
<li><a href="#">작가의 일생</a></li>
</ul>
</aside>
<div class="main-content">
<div class="art-piece">
<h4 class="title"><a href="#">피리부는 소년</a></h4>
<div class="artist">에두아르마네</div>
<p class="detail">1866 캔버스에 유채, 161*97cm, 파리 오르세 Edouard MANET, Le Fifre, H.T, 161*97cm</p>
</div>
<div class="art-piece">
<h4 class="title"><a href="#">고흐의 방</a></h4>
<div class="artist">빈센트반고흐</div>
<p class="detail">1889 캔버스에 유채,57.5*74cm,파리 오르세 Vincent Van GOGH,La Chambre de Van Gogh, H/T,
57.5*74cm</p>
</div>
<div class="art-piece">
<h4 class="title"><a href="#">황색 그리스도가 있는 화가의 자화상</a></h4>
<div class="artist">폴 고갱</div>
<p class="detail">1890-1891 캔버스에 유채,38*46cm,파리 오르세 Paul Gauguin Portrait de I'artiste au Paul
Gauguin, H/T, 38*46cm</p>
</div>
<div class="art-piece">
<h4 class="title"><a href="#">오페라좌의 관현악단</a></h4>
<div class="artist">에드가 드가</div>
<p class="detail">1868-1869 캔버스에 유채,32*46cm,파리 오르세 Edgar Degas, L'orchestre de I'Opera H/T, 38*46cm
</p>
</div>
<div class="art-piece">
<h4 class="title"><a href="#">만종</a></h4>
<div class="artist">장 프랑수아 밀레</div>
<p class="detail">1857-1859 캔버스에 유채,55.5*66cm,파리 오르세 Jean-Franqois Millet, L'Angelus H/T, 55.5*66cm
</p>
</div>
<div class="art-piece">
<h4 class="title"><a href="#">제비꽃장식을 단 베르트모리조</a></h4>
<div class="artist">에두아르마네</div>
<p class="detail">1872 Eduouard Manet Berthe Morisot au bouquet de H/T, 55*38cm</p>
</div>
</div>
<aside class="banner">
<h3><span class="all">전세계인들에게</span><span class="love">제일 사랑받는</span><strong>서양미술사의 시대</strong></h3>
<ul class="link">
<li><a href="#">Workshop Go</a> <span>Life drowing workshop</span></li>
<li><a href="#">Summer exhibition</a> <span>A-level Summer Exhibition Online 2010</span></li>
<li><a href="#">RA collection</a> <span>RA Collections</span></li>
</ul>
</aside>
</div>
<!-- // end container -->
<footer>
<address>© 2012 Les Amis du Musée d'Orsay. All rights reserved.
<a href="#">amis@amis-musee-orsay.org</a>
<span>Legal status</span>
</address>
</footer>
</div>
<!-- // end wrapper -->
</body>
</html>- css
@import url("../../common.css");
body {
background: gray;
}
#wrapper {
width: 80%;
margin: auto;
}
#wrapper header {
text-align: center;
}
#wrapper header h1 {
background: orange;
color: #fff;
font-size: 80px;
font-weight: 700;
}
#wrapper header h1 span {
display: block;
font-size: 20px;
padding: 15px 0;
}
#wrapper header h2 {
background: lightgray;
padding: 4px 0;
}
#wrapper .container {
background: #fff;
}
#wrapper .container .side-menu {
float: left;
width: 25%;
/* height: 500px; */
font-weight: 700;
}
#wrapper .container .side-menu h3 {
background: brown;
color: #fff;
padding: 8px;
}
#wrapper .container .side-menu ul li {
line-height: 30px;
text-decoration: underline;
}
#wrapper .container .main-content {
width: 50%;
float: left;
background: lightsteelblue;
}
#wrapper .container .main-content .art-piece {
margin: 10px;
}
#wrapper .container .main-content .art-piece .title {
background: rgb(50, 50, 119);
color: white;
padding: 5px;
font-weight: 700;
}
#wrapper .container .main-content .art-piece .artist {
padding: 15px 5px;
font-weight: 700;
}
#wrapper .container .main-content .art-piece .detail {
padding: 15px 5px;
font-size: 12px;
}
#wrapper .container .banner {
width: 25%;
float: left;
padding-left: 12px;
}
#wrapper .container .banner h3 {
font-size: 20px;
line-height: 30px;
padding-top: 10px;
padding-bottom: 20px;
font-weight: 700;
}
#wrapper .container .banner h3 .all {
display: block;
color: gray;
text-decoration: underline;
}
#wrapper .container .banner h3 .love {
display: block;
color: orange;
text-decoration: underline;
}
#wrapper .container .banner .link li a {
font-size: 16px;
font-weight: bold;
text-decoration: underline;
}
#wrapper .container .banner .link li span {
display: block;
margin-bottom: 20px;
text-decoration: none;
z-index: ;
}
#wrapper footer {
background: rgb(50, 50, 119);
color: #fff;
text-align: center;
font-size: 13px;
padding: 8px 0;
}
백엔드 개발자