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으로 처리합니다. 자식 요소는 부모 요소와 같이 움직입니다.
CSS / Flex / order / 아이템의 순서 정하는 속성
Flex로 아이템을 배치할 때, 입력한 순서대로 출력됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; margin: 0px; ...
CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. text-align: center; 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. margin-left: auto; margin-right: auto; 그렇다면 다음처럼 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 방법 1 - padding 속성 이용하기 바깥쪽 요소에 padding 속성을 추가해서 세로 정렬을 가운데로 할 수 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성
개요 background-size로 배경 이미지의 가로 크기와 세로 크기를 정할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 background-size: auto | length | cover | contain | initial | inherit auto : 이미지 크기를 유지합니다. length : 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기입니다. 값을 한 개 ...
CSS / line-height / 줄 높이 정하는 속성
개요 line-height는 줄 높이를 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 line-height: normal | length | number | percentage | initial | inherit normal : 웹브라우저에서 정한 기본값입니다. 보통 1.2입니다. length : 길이로 줄 높이를 정합니다. number : 글자 크기의 몇 배인지로 줄 높이를 정합니다. percentage : 글자 크기의 몇 %로 줄 ...
CSS / Grid / IE에 적용시키는 방법 / Autoprefixer CSS online
CSS의 Grid는 인터넷 익스플로러에서 작동하지 않습니다. 최신 버전인 IE 11에서도 마찬가지입니다. 예를 들어 아래의 HTML 문서는 크롬이나 엣지 등 웹브라우저에서 의도한 대로 잘 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...
CSS로 특정 요소에 마우스를 올렸을 때 보이지 않던 특정 요소가 보이게 할 수 있다. 아래는 문단에 마우스를 올렸을 때 div 요소가 나오게 하는 예제이다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능하다. 마우스 올렸을 때 모양 만들기 마우스를 올렸을 때 보이길 원하는 모양을 먼저 만든다. .jb-title에 마우스를 올리면 .jb-text가 ...
유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용한다. 코드는 유튜브 영상 공유에서 를 클릭하여 구할 수 있다. 아래와 같은 코드인데, 고정폭이다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정하다. <iframe width="560" height="315" src="https://www.youtube.com/embed/ybhXVSAdIRE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 이를 반응형으로 만들고 싶다면 아래처럼 한다. 16:9 크기의 div로 감싸고, iframe에 style을 추가하여 ...
글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 한다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제이다. 예제 문서 <div class="jb-division-line"></div>를 꾸며서 구분선을 만들 것이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다. 기본 모양 아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다. th 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...
CSS / letter-spacing, word-spacing / 글자 사이 간격, 단어 사이 간격
letter-spacing, word-spacing 글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다. 예제 값의 변화에 따른 간격의 변화를 보여주는 예제입니다. 글자 사이의 간격을 변화시키면 단어 사이의 간격도 변합니다. 단어 사이의 간격을 변화시켜도 글자 사이의 간격은 변하지 않습니다. <!doctype html> <html lang="ko"> <head> ...