CSS / z-index / 요소의 수직 위치 정하는 속성
z-index
position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다.
예제 1
세 개의 div 요소를 겹치게 배치했습니다. 코드 상 나중에 입력한 것일 수록 위로 올라옵니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div {
width: 100px;
height: 100px;
position: absolute;
}
div.x {
background-color: #2196F3;
top: 20px;
left: 200px;
}
div.y {
background-color: #1976D2;
top: 50px;
left: 260px;
}
div.z {
background-color: #0D47A1;
top: 80px;
left: 230px;
}
</style>
</head>
<body>
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
</body>
</html>
z-index 속성을 추가해서 수직 위치를 역순으로 바꿔보겠습니다. z-index 속성이 없으면 0처럼 취급합니다.(z-index의 기본값은 auto입니다.)
div.x {
background-color: #2196F3;
top: 20px;
left: 200px;
z-index: 1;
}
div.y {
background-color: #1976D2;
top: 50px;
left: 260px;
}
div.z {
background-color: #0D47A1;
top: 80px;
left: 230px;
z-index: -1;
}
예제 2
여섯 개의 div 요소를 배치합니다. div.xx, div.yy, div.zz는 div.z의 자식 요소입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div {
width: 100px;
height: 100px;
position: absolute;
}
div.x {
background-color: #2196F3;
top: 20px;
left: 200px;
}
div.y {
background-color: #1976D2;
top: 50px;
left: 260px;
}
div.z {
background-color: #0D47A1;
top: 80px;
left: 230px;
}
div.xx {
background-color: #F44336;
top: 30px;
left: 50px;
}
div.yy {
background-color: #D32F2F;
top: 60px;
left: 110px;
}
div.zz {
background-color: #B71C1C;
top: 90px;
left: 70px;
}
</style>
</head>
<body>
<div class="x"></div>
<div class="y"></div>
<div class="z">
<div class="xx"></div>
<div class="yy"></div>
<div class="zz"></div>
</div>
</body>
</html>
코드를 입력한 순서대로 쌓입니다.
div.xx, div.yy, div.zz에 z-index 속성을 추가해서 순서를 바꾸었습니다.
div.xx {
background-color: #F44336;
top: 30px;
left: 50px;
z-index: 2;
}
div.yy {
background-color: #D32F2F;
top: 60px;
left: 110px;
z-index: 3;
}
div.zz {
background-color: #B71C1C;
top: 90px;
left: 70px;
z-index: 1;
}
div.x에 z-index 속성을 추가해서 제일 위로 올렸습니다.
div.x {
background-color: #2196F3;
top: 20px;
left: 200px;
z-index: 10;
}
div.x가 div.z보다 위에 위치시키므로, div.xx, div.yy, div.zz보다 위에 있게 됩니다.
div.z의 z-index 값에 큰 값을 넣어 제일 위로 올립니다.
div.z {
background-color: #0D47A1;
top: 80px;
left: 230px;
z-index: 9999;
}
하지만, div.z의 자식 요소인 div.xx, div.yy, div.zz보다 위로 올라오지는 못합니다.
즉, z-index는 형제 요소 간의 수직 위치를 정하고, 이 때 값이 없으면 0으로 처리합니다. 자식 요소는 부모 요소와 같이 움직입니다.
짧은 밑줄 만들기 밑줄은 보통 text-decoration이나 border 속성으로 만듭니다. 그런데 그렇게 만든 밑줄은 선택한 요소 전체에 적용됩니다. 즉, 요소가 길면 밑줄도 길게 만들어지고, 요소가 짧으면 밑줄도 짧게 만들어집니다. 요소보다 짧은 밑줄을 만드는 방법은 :after 선택자를 이용하는 것입니다. 요소 뒤에 선을 만들고 위치와 길이를 정해주면 됩니다. 예를 들어 h1 요소에 짧은 밑줄을 만들고 싶다면 다음과 ...
문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다. 하지만 CSS에는 그러한 정렬이 없습니다. text-align 속성의 justify가 있지만, 그건 빈 공간을 늘려서 양 끝으로 맞추는 게 아닙니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> ...
CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서
가상 요소(Pseudo-elements)를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다. 다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> h1:before ...
CSS / text-indent / 들여쓰기, 내어쓰기 만드는 속성
개요 들여쓰기와 내어쓰기는 text-indent 속성으로 만든다. 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 된다. 내어쓰기를 할 때는 왼쪽에 여백을 적절히 준다. 문법 text-indent: length | initial | inherit length : px, em, rem 등으로 크기를 정한다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. 예제 첫 번째 문단은 들여쓰기를 한 것이다. 두 번째 문단은 내어쓰기를 한 것이다. 내어쓰기한 부분이 영역을 ...
구글에서 많은 웹폰트를 제공하고 있다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아본다. 웹폰트 선택하기 웹브라우저로 Google Fonts에 접속한다. 왼쪽에서 적절히 필터한다. 한글 글꼴이 필요하다면 Language를 Korean으로 한다. 원하는 글꼴을 클릭한다. 사용할 스타일을 선택한다. 오른쪽에 선택한 글꼴과 스타일이 나오고, 웹폰트를 사용하기 위한 코드 예시가 나온다. 여러 글꼴과 스타일을 선택할 수도 있다. 웹폰트 사용하기 예를 들어 Noto Sans Korean 100과 400을 ...
CSS / text-transform / 대문자로 또는 소문자로 바꾸는 속성
개요 text-transform은 대문자로 또는 소문자로 바꾸는 속성입니다. 기본값 : none 상속 : Yes 버전 : CSS Level 1 한글에서는 의미가 없는 속성입니다. 문법 text-transform: none | capitalize | uppercase | lowercase | initial | inherit none : 입력된 그대로 출력합니다. capitalize : 단어의 첫번째 글자를 대문자로 바꿉니다. uppercase : 모든 글자를 대문자로 바꿉니다. lowercase : 모든 글자를 소문자로 바꿉니다. initial : 기본값으로 ...
HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 예를 들어 아래처럼 코드를 만들면...(각 줄 앞에 있는 빈 칸은 모두 탭입니다.) <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> pre { font-family: Consolas, monospace; font-size: 24px; } </style> </head> <body> <pre> Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </pre> </body> </html> 웹브라우저에서는 다음처럼 출력합니다. 탭 크기가 ...
CSS / font-weight / 글자 굵기 정하는 속성
개요 font-weight로 글자의 굵기를 정한다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 font-weight: normal | bold | bolder | lighter | number | initial | inherit normal : 보통 굵기이다. 숫자 400과 같다. bold : 굵은 굵기이다. 숫자 700과 같다. bolder : 상속된 값보다 굵은 굵기다. lighter : 상속된 값보다 얇은 굵기이다. number : ...
표와 셀의 기본 크기 표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다. 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다. <!doctype html> <html lang="ko"> ...
CSS / background-position / 배경 이미지의 위치를 정하는 속성
개요 background-position은 배경 이미지의 위치를 정하는 속성입니다. 기본값 : 0% 0% 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 background-position: x-position y-position | initial | inherit x-position y-position : 가로 위치와 세로 위치를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 위치 값으로 사용할 수 있는 것은 다음과 같습니다. 가로 위치 값 : left, center, right, 백분율, 길이 세로 위치 ...