추천시스템 페이지를 만드는 중 별점이 이상하게 표시되는 현상이 있었다… 책 Do it! 인터랙티브 웹 페이지 만들기에 나오는 템플릿 그대로 사용하다보니 이런 문제가 생겨도 해결하지 못하여 CSS 완전 쌩기초부터 정리해보려한다. 이 글은 Do it! 인터랙티브 웹 페이지 만들기 책을 읽고 공부한 내용입니다.
위 사진의 html코드는 다음과 같다.
<body>
<main>
<section>
</section>
</main>
</body>
배경이 되는 회색 별은 <p>태그 바로 아래의 별 다섯개이고, 노란색으로 채워지는 별은 span.rating_star태그이다. CSS 코드를 여기 적기엔 너무 길기 때문에 CSS를 공부하면서 왜 저렇게 되는지 알아보자..
아참 위 html 코드의 출처는 [JavaScript] 별점 드래그 기능 만들기이다. (감사합니다ㅠ)
전체 선택자
* {
border: 1px solid red;
}
body 태그를 포함해 태그 전체를 선택할 수 있다.
태그 선택자
특정 태그를 선택한다.
h1 {
border: 1px solid red;
}
h2 {
border: 1px solid blue;
}
자손 선택자
자식과 하위요소를 포함해 그 하위에 있는 모든 요소를 선택한다.
p strong {
border: 1px solid blue;
}
자식 선택자
직계 자식요소만 선택한다.
ul > li {
border: 1px solid blue;
}
속성 선택자
아래와 같은 HTML이 있다고 하자.
<body>
<form>
<input type="text">
<input type="password">
</form>
</body>
form 태그 안에 input 태그를 2개 작성하고 type 속성을 각각 지정하자.
input[type="text"] {
border: 1px solid blue;
}
input[type="password"] {
border: 1px solid red;
}
그럼 결과는 다음과 같다. input 태그의 type 속성마다 각각 적용된다.
가상 선택자
가상 선택자(virtual selector)는 특정 조건이 충족될 때 실행되도록 한다. 예를 들어 다음과 같은 HTML과 CSS가 있다고 하자.
<body>
<h1>HELLO</h1>
</body>
h1 {
border: 1px solid blue;
}
h1:hover {
border: 2px dashed red;
}
두번째 요소에는 h1에 :hover라는 가상 선택자를 붙였다.
마우스를 올려놓기 전엔 파란색 solid 선이다.
마우스를 올려놓으면 빨간색 dashed 선으로 바뀐다.
이번엔 가상선택자 :before와 :after에 대해 알아보자.
h1:before {
content: "before content";
color: blue;
}
h1:after {
content: "after content";
color: red;
}
그림처럼 :before와 :after는 ‘content’에 입력한 글자가 HELLO 앞뒤에 나타난다. 개발자도구에서 확인해보면 ::before와 ::after라는 가상의 요소가 생성되었다. HTML 파일에 입력하지 않아도 CSS파일에서 입력한 콘텐츠가 생기는 것이다.
클래스 선택자와 아이디 선택자
는 각각 .과 #를 사용하면 되니 넘어가자.
폰트 굵기
normal과 bold 두 가지가 있다.
h1 {
font-weight: normal; /*h1의 기본 굵기를 제거하고 normal을 적용한다.*/
}
p span {
font-weight: bold;
}
폰트 크기 바꾸기
웹페이지는 보통 픽셀로 구성되기 때문에 px를 주로 쓰지만 가끔 rem이나 em을 쓴다. rem은 최상위 부모인 <html>태그를 기준으로 폰트 크기를 설정한다. em은 부모 요소를 기준으로 폰트 크기를 설정한다.
픽셀은 다음과 같이 숫자로 설정한다.
articel h1 {
font-size: 60px;
}
rem 사용할 땐 다음과 같다.
html {
font-size: 16px;
}
article h1 {
font-size: 3rem;
}
최상위 요소인 html의 폰트 크기를 16px로 설정하고 h1태그는 3rem으로 설정했다. 즉 html요소 기준으로 3배 키우라는 뜻이다.
rem이 나온 후 em은 잘 쓰지 않는다고 한다. 부모태그 기준으로 설정된다.
폰트 모양 바꾸기
font-family 속성을 사용한다.
<body>
<ul>
<li>FONT FAMILY</li>
<li>Serif</li>
</ul>
</body>
ul li {
font-size: 40px;
}
ul li:nth-of-type(1) {
font-family: "돋움"
}
ul li:nth-of-type(2) {
font-family: "serif"
}
구글 웹 폰트를 사용하려면 fonts.google.com으로 접속해서 원하는 폰트의 웹폰트 코드와 font-family를 가져와 사용하면 된다.
<body>
<p id="txt">LOREM IPSUM</p>
</body>
@charset "utf-8";
@import url(url을
넣는다
)
;
p#txt {
font-size: 100px;
font-family: 'Monoton', 'cursive'
}
폰트 색상 바꾸기
영문명, 또는 #000000같은 16진수, 또는 rgb(0, 0, 0)같은 RGB로 입력한다.
<body>
<ul>
<li>색상명 표기법</li>
<li>16진수 표기법</li>
<li>RGB 표기법</li>
</ul>
</body>
li:nth-of-type(1) {
color: red;
}
li:nth-of-type(2) {
color: #ff0000;
}
li:nth-of-type(3) {
color: rgb(255, 0, 0);
}
셋 다 빨간색을 의미한다.
텍스트 줄 간격 바꾸기
font-size는 텍스트 자체의 높이를 의미한다. line-height는 줄 간격 전체 높잇값을 나타낸다. 실수 값으로 쓸 수도 있고, 픽셀값으로 쓸 수도 있다.
<body>
<p class="text1">
Hello. This is..
</p>
<p class="text2">
Hello. This is..
</p>
</body>
.text1 {
font-size: 20px;
line-height: 40px;
border: 1px solid red;
}
.text2 {
font-size: 20px;
line-height: 1.5;
border: 1px solid blue;
}
실수 1.5로 설정한 .text2의 경우 폰트 크기 20px을 기준으로 1.5배로 설정되었다.
텍스트 정렬 방향 지정하기
text-align이라는 속성을 사용하며 left, right, center, justifiy(양쪽정렬)이 있다.
텍스트 자간 지정하기
letter-spacing이란 속성을 사용하며 px로 설정한다.
너비와 높이 지정하기
태그 영역의 크기는 width, height 속성을 사용함으로써 정의되며, px, %(부모태그 기준), vw(웹브라우저 너비 기준 백분율), vh(웹브라우저 높이 기준 백분율)을 사용한다.
<body>
<article>
width, height 모두 100px로 했을 때
</article>
<article>
width, height 모두 20%로 했을 때
</article>
<article>
width, height 모두 10vw로 했을 때
</article>
<article>
width, height 모두 10vh로 했을 때
</article>
</body>
article {
border: 1px solid red;
}
article:nth-of-type(1) {
width: 100px;
height: 100px;
}
article:nth-of-type(2) {
width: 20%;
height: 20%;
}
article:nth-of-type(3) {
width: 10vw;
height: 10vw;
}
article:nth-of-type(4) {
width: 10vh;
height: 10vh;
}
px로 지정하면 웹브라우저 크기가 달라져도 영역 넓이가 변하지 않는 한편, %로 지정하면 웹브라우저 크기가 달라졌을 때 부모 태그인 <body>태그 기준으로 너빗값이 변한다.
그러나 body태그는 height가 변하지 않는다! 그래서 %를 사용한다면 높이는 변하지 않는다.
바깥쪽 여백 지정하기
margin 속성을 사용해 지정한다. px, %(부모 태그 기준), vw(웹브라우저 너비 기준), vh(웹브라우저 높이 기준)을 사용한다.
<body>
<article>
margin: 20px (상하좌우)
</article>
<article>
margin: 20px 50px (상하, 좌우)
</article>
<article>
margin: 20px auto (상하, 좌우중앙)
</article>
<article>
margin: 20px auto 40px (상, 좌우중앙, 하)
</article>
<article>
margin: 0px 10px 20px 30px (상, 우, 하, 좌)
</article>
<article>
margin-left: 20px (좌)
</article>
<article>
margin-right: 20px (우)
</article>
<article>
margin-top: 20px (상)
</article>
<article>
margin-bottom: 20px (하)
</article>
</body>
article {
width: 150px;
height: 40px;
border: 1px solid red;
}
article:nth-of-type(1) {
margin: 20px;
}
article:nth-of-type(2) {
margin: 20px 50px;
}
article:nth-of-type(3) {
margin: 20px auto;
}
article:nth-of-type(4) {
margin: 20px auto 40px;
}
article:nth-of-type(5) {
margin: 0px 10px 20px 30px;
}
article:nth-of-type(6) {
margin-left: 20px;
}
article:nth-of-type(7) {
margin-right: 20px;
}
article:nth-of-type(8) {
margin-top: 20px;
}
article:nth-of-type(9) {
margin-bottom: 20px;
}
일단 body 영역부터 확인하고 들어가보자.
실제론 상하 여백만 지정하고 좌우 여백은 중앙에 배치하도록 하는 방법을 가장 많이 사용한다고 한다.
안쪽 여백 지정하기
안쪽 여백은 padding 속성을 사용하며, 사용법은 px, %, vw, vh로 margin과 사용법이 같다.
<body>
<article>
box1
</article>
<article>
box2
</article>
</body>
article {
width: 100px;
height: 100px;
border: 1px solid red;
}
article:nth-of-type(1) {
padding: 0px;
}
article:nth-of-type(2) {
padding: 30px;
}
body 영역부터 확인해보자.
일단 box1과 box2는 동일하게 width 100, height 100이다.
box1은 안쪽여백(padding)을 0으로 줬기 때문에 box1이라는 텍스트가 박스 가장자리에 붙어있다.
그런데 box2는 안쪽여백에 30px을 주었기 때문에 box2라는 텍스트가 여백 안쪽에 위치한다. 박스 크기가 커진 것이다. 이처럼 padding은 기존 요소 크기에 안쪽 여백을 추가해준다. 결과적으로 box2의 너빗값과 높잇값은 160px이 된다.
그럼 기존 박스 크기는 유지하고 안쪽 여백만 있게 하려면? width와 height를 새로 작게 지정해줘서 padding까지 더한 값이 100이 되게 만들수도 있다. 하지만 box-sizing 속성을 이용하면 기존 너빗값과 높잇값을 자동으로 포함시킬 수 있다.
article {
width: 100px;
height: 100px;
border: 1px solid red;
}
article:nth-of-type(1) {
padding: 0px;
}
article:nth-of-type(2) {
padding: 30px;
box-sizing: border-box;
}
box-sizing: border-box 속성만 추가하면 기존 박스 크기를 유지하면서 여백을 지정할 수 있다.
100 x 100은 유지하면서 안쪽 여백인 padding 30px이 추가됐다.
블록 요소와 인라인 요소 태그
태그의 크기 및 테두리 등을 지정할 때는 해당 태그가 블록 요소인지 인라인 요소인지에 따라 다르게 적용된다.
블록 요소 : 웹페이지 영역을 구분하는 레이아웃과 관련된다. h1~h6, p, ol, ul, dl, div, header, footer, section, article, aside, nav 등. 줄을 자동으로 바꾼다. 넓이와 높이를 지정할 수 있다. 너비를 지정하지 않을 시 부모의 너빗값을 100% 상속받는다. 블록요소와 인라인요소 모두 묶을 수 있다.
인라인 요소 : 글의 서식과 관련된다. strong, em, a, span 등. 자동 줄바꿈 X, 옆으로 나열된다. 너비와 높이를 지정할 수 없다. 텍스트의 크기 자체가 해당 요소의 크기가 된다. 인라인 요소만 묶을 수 있다.
<body>
<p>
블록 요소 태그는 자동 줄 바꿈 됩니다. 현재 이 글은 p 태그입니다.
</p>
<p>
<span>
<strong>인라인 요소 태그</strong>들은 <em>좌우로</em> 배치됩니다.
</span>
</p>
</body>
p {
border: 1px solid red;
}
strong, em {
border: 1px solid blue;
}
블록 요소인 p태그에 width와 height를 설정하지 않아서 부모태그인 body태그의 width와 height를 상속받았다. 그리고 빨간색 테두리를 갖고있으며, 자기들 p태그끼리 자동 줄바꿈이 됐다. 반면 인라인 요소인 strong과 em태그는 줄바꿈되지 않았다. 그리고 border를 보면 딱 텍스트만큼만 생긴걸 알 수 있다.
블록요소와 인라인 요소의 크기를 지정해보자.
p {
border: 1px solid red;
height: 100px;
}
strong, em {
border: 1px solid blue;
height: 50px;
}
각각 height를 100px, 50px씩 지정해보았다.
p태그는 height가 제대로 적용되어 빨간색 박스의 높이가 커졌다. 그런데 strong, em태그에는 적용되지 않았다.
하지만 강제로 적용해야 할때는 display: inline-block이라는 속성을 추가하여 인라인, 블록 요소의 속성을 모두 사용하겠다고 하면 된다.
p {
border: 1px solid red;
height: 100px;
}
strong, em {
border: 1px solid blue;
height: 50px;
display: inline-block;
}
strong, em태그에도 height가 적용되었다.
인라인을 블록 요소로 강제 변환도 가능하다. display: block을 쓰면 된다. 만약 위의 strong, em태그에 이 display: block를 쓰면 어떻게 될까? 아마 height값이 적용될거고, 자동 줄바꿈이 될거고, 크기는 텍스트 크기가 아니라 body의 width와 height를 상속받을 것이다.
p {
border: 1px solid red;
height: 100px;
}
strong, em {
border: 1px solid blue;
height: 50px;
display: block;
}
심지어 ‘좌우로’의 em태그 크기는 두 번째 p태그를 넘어버렸다.
배경색 지정하기
backgound-color 속성을 사용한다. 영문명, rgb(0, 0, 0), #000000(16진수)같은 표현을 사용한다.
<body>
<ul>
<li>#000</li>
<li>#111</li>
<li>#222</li>
<li>#333</li>
<li>#444</li>
<li>#555</li>
</ul>
</body>
li {
color: #000
}
li:nth-of-type(1) {
background-color: #000
}
li:nth-of-type(2) {
background-color: #111
}
li:nth-of-type(3) {
background-color: #222
}
li:nth-of-type(4) {
background-color: #333
}
li:nth-of-type(5) {
background-color: #444
}
li:nth-of-type(6) {
background-color: #555
}
배경 이미지 삽입하기
- background-image : 이미지의 url
- background-repeat : repeat, repeat-x, repeat-y, no-repeat
- background-position : 가로축, 세로축 위치 지정. ‘center, center’로 지정하면 좌우 중앙, 상하 중앙이므로 정중앙에 위치한다.
- background-size : 배경이미지의 크기. contain으로 지정하면 이미지 비율은 유지시키면서 태그 안 영역을 비율에 맞게 가득 채운다. cover로 지정하면 이미지가 잘리더라도 영역을 꽉차게 가득 채운다.
- background-attachment : 배경이미지가 움직이지 않게 고정한다. fixed로 지정하면 어느 태그에 종속되어있든 상관없이 무조건 웹브라우저 기준으로 고정된다.
<body>
<section>
<article></article>
<article></article>
</section>
</body>
section {
width: 90vw;
height: 90vh;
margin: 4vh auto;
border: 1px solid #000;
}
section article {
width: 100%;
height: 50%;
background-repeat: no-repeat;
background-position: center center;
}
section article:nth-of-type(1) {
background-image: url('../img/car1.jpg');
}
section article:nth-of-type(2) {
background-image: url('../img/car2.jpg');
}
section 태그를 살펴볼까? width와 height를 vw, vh로 했기 때문에 웹브라우저의 크기가 변해도 비율을 유지한다. 각 이미지가 각 article 태그 안에 정중앙에 위치하고 있다. 만약 article의 height를 80%로 하면 어떻게 될까? 이미지가 section 범위를 넘어버린다.
article에 background-attachment: fixed 속성을 넣어볼까? 그럼 article 태그는 어느 태그에 종속되어있든 상관하지 않고, 무조건 웹브라우저 기준으로 고정된다.
레이아웃 구성하기
블록 요소를 이용하여 집안을 거실, 주방, 서재 등으로 나누듯이 웹페이지의 레이아웃을 구성해보자.
웹페이지의 레이아웃을 나누기 전에 css를 초기화해야 하는데, 그 이유는 모든 태그엔 기본 여백, 폰트가 설정돼있어서 원하는 값으로 조정하려면 불편하기 때문이다. 그래서 여백 및 크기 등을 미리 초기화해야한다. 초기화하지 않으면 어떤 문제가 있는지 확인해보자.
<body>
<article>
<ul>
<li>list1</li>
<li>list2</li>
</ul>
<a href="#">link</a>
</article>
</body>
article {
border: 1px solid red;
}
ul li {
border: 1px solid blue;
}
ul태그를 볼까? 상위 태그인 section에 이미 기본 여백 설정되어있고 li 태그엔 점(dot)이 기본적으로 설정되어 있어, li태그를 직접 조정하더라도 원하는대로 만들어지기 쉽지않다. link에는 기본적으로 밑줄이 들어가있다. 초기화를 해보자.
* {
margin: 0px;
padding: 0px;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
article {
border: 1px solid red;
}
ul li {
border: 1px solid blue;
}
전체 선택자 *를 이용해 모든 태그의 바깥쪽, 안쪽 여백을 0px로 만들고, ul, ol요소의 기본인 점을 없앤다. 그리고 a 태그의 밑줄을 제거한다.
float - 블록 요소를 좌우로 배치하기
블록 요소의 특징은 뭐였을까? 레이아웃 배치때 사용되며 자동 줄바꿈이 적용되어 한줄에 한 태그만 사용된다. 한 줄에 2개 이상의 블록 요소를 배치하려면 float 속성을 사용해야한다. 단어 그대로, 블록 요소를 그대로 띄워(?) 좌우로 배치한다. left, right 값을 사용하면 된다.
<body>
<div class="wrap">
<section class="left"></section>
<section class="right"></section>
</div>
</body>
.wrap {
width: 800px;
margin: 100px;
border: 5px solid black;
}
.wrap .left {
width: 300px;
height: 400px;
background-color: pink;
}
.wrap .right {
width: 400px;
height: 400px;
background-color: lightblue;
}
일단 float를 적용하기 전을 볼까? div.wrap 태그를 800px의 넓이를 주고 중앙에 위치시킨다. 자식인 section.left와 section.right에는 너비를 300px, 400px로 준다. 일반적으로, 블록 요소 안에서 자식요소를 넣으면 부모의 블록에는 높이를 지정하지 않는다. 왜냐면 자식들의 높이를 인지하여 감싸기 때문이다.
이제 section.left와 section.right에 float:left를 추가해보자.
.wrap {
width: 800px;
margin: 100px;
border: 5px solid black;
}
.wrap .left {
width: 300px;
height: 400px;
background-color: pink;
float: left;
}
.wrap .right {
width: 400px;
height: 400px;
background-color: lightblue;
float: left;
}
.wrap이 자식 요소의 높잇값을 인식하지 못했다! 테두리를 감싸지 못했다. 블록 요소에 float를 적용시키면 부모 요소는 자식 요소의 높이를 인식하지 못한다. 그렇다면 자식 요소에 float가 적용되어도 부모 요소가 자식 요소의 높잇값을 인식할 수 있도록 해보자.
.wrap {
width: 800px;
margin: 100px;
border: 5px solid black;
}
.wrap::after {
content: '';
display: block;
clear: both;
}
.wrap .left {
width: 300px;
height: 400px;
background-color: pink;
float: left;
}
.wrap .right {
width: 400px;
height: 400px;
background-color: lightblue;
float: left;
}
가상선택자 ::after를 생성하고 content는 빈 문자를, div.wrap을 block 속성으로 강제로 변경해버립니다. div는 이미 블록이니까 div가 아니라 ::after를 블록으로 변경한다는것 같습니다. 마지막으로 clear: both를 하면 float영향을 해제할 수 있다고 합니다.
position - 요소를 자유롭게 배치하기
position은 특정 영역 안에서 위치 조절을 더욱 자유롭게, 순서와 상관없이 화면에 가로세로 좌푯값을 직접 설정하여 배치할 수 있다.
값으로는 다음 값을 사용할 수 있다.
- relative : 원래 위치를 기준으로 상대 위치를 지정
- absolute : 부모 요소의 특정 구간을 기준으로 절대 위치를 지정
- fixed : 웹브라우저를 기준으로 절대 위치를 지정
<body>
<div>
<section></section>
<section></section>
</div>
</body>
section {
width: 600px;
height: 200px;
}
section:nth-of-type(1) {
background-color: pink;
}
section:nth-of-type(2) {
background-color: lightblue;
position: relative;
top: -100px;
left: 100px;
}
seection 중 두번째만 position: relative를 적용시키고 좌푯값을 입력했다. top은 -100을 입력했기 때문에 오히려 위로 올라가버렸다. 그리고 left는 해당 방향에서 바라보는 쪽으로, 즉 오른쪽으로 100px만큼 이동해버렸다. left, right, top, bottom으로 지정할 수 있다. 이제 abolute를 적용해보자.
<body>
<div class="wrap">
<div class="left">
</div>
<div class="right">
<p class="box"></p>
</div>
<div class="bottom">
</div>
</div>
</body>
.wrap {
width: 800px;
border: 5px solid black;
margin: 50px auto;
}
.wrap::after {
content: '';
display: block;
clear: both;
}
.wrap .left {
width: 400px;
height: 400px;
background-color: lightgreen;
float: left;
}
.wrap .right {
width: 400px;
height: 400px;
background-color: lightblue;
float: left;
}
.wrap .right .box {
width: 100px;
height: 100px;
background-color: red;
}
.wrap .bottom {
width: 800px;
height: 100px;
background-color: pink;
float: left;
}
일단 .left, .right, .bottom 요소를 배치했는데 각각 float 속성을 주어 가로로 배치했다. 이 때 wrap에는 ::after 가상 선택자를 줘서 float 영향을 해제한다. wrap은 자식 요소들의 높이를 인식할 수 있다.
이 float가 살짝 어려운데… 부모 요소는 현재 float가 해제된 상태다. 이 때 자식 요소 중 하나라도 float가 있다면, 모든 형제가 float를 설정해야 해당 요소의 높잇값을 인식한다고 한다. 지금은 bottom이 오른쪽에 공간이 없어서 자연스럽게 아래로 내려간 것이라고 한다.
다시 bottom에 float를 적용하고 가자. 현재 .right 안에 p가 있고, 색깔은 빨간색이다. p 태그를 오른쪽으로 20px, 아래로 30px 이동시켜보자. 이 때 padding과 margin으로 설정하려면 매우 불편하다. absolute를 사용해보자.
.wrap .right .box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 100px;
bottom: 30px;
}
p는 이제 부모(또는 조상) 요소 중 position이 적용된 요소를 기준으로 설정된다. 즉, 현재는 부모인 div.wrap에 poision이 없이 때문에 최상위 태그인 body 기준으로 오른쪽에서 100px 떨어진, 아래에서 30px 떨어진 곳에 위치한다. 현재는 부모, 조상 전부 뒤져봐도 Position 값이 없는 경우인데, 이때는 (다른 웹사이트에서 설명하기로는) viewport(현재 화면에 보여지고 있는 사각형)를 기준으로 한다고 한다.
이번에는 .box가 .right 영역을 기준으로 좌푯값이 설정되도록 position: relative를 넣어보자. 부모 태그인 .right에 넣는 것이다.
.wrap .right {
width: 400px;
height: 400px;
background-color: lightblue;
float: left;
position: relative;
}
.box가 부모인 .right 기준으로 좌푯값이 설정되었다. 이처럼 position: relative는 자식의 좌푯값 기준을 설정할때 사용된다.
이번엔 position: fixed를 해보자. fixed는 무조건 웹브라우저를 기준으로 좌푯값이 고정된다.
<body>
<section>
<article></article>
</section>
<section>
</section>
<section>
</section>
</body>
section {
width: 100%;
height: 100vh;
}
section article {
width: 200px;
height: 200px;
background-color: #000;
position: fixed;
bottom: 50px;
right: 50px;
}
section:nth-of-type(1) {
background-color: orange;
}
section:nth-of-type(2) {
background-color: lightblue;
}
section:nth-of-type(3) {
background-color: pink;
}
모든 section을 브라우저의 크기와 똑같이 설정한다. 1번째 article에는
스크롤을 아무리 내려도 position: fixed가 적용된 section article은 그 자리에 계속 있다.
z-index 속성 사용하기
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
.wrap {
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 100px auto;
position: relative;
}
.wrap .left {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 50px;
left: 50px;
}
.wrap .right {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
bottom: 50px;
right: 50px;
}
이제 left를 강제로 위로 올려보자.
.wrap .left {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 50px;
left: 50px;
z-index: 2;
}
.wrap .right {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
bottom: 50px;
right: 50px;
z-index: 1;
}
.left가 위로 올라왔다.