- background 다중 이미지
- 선택자(first-child, last-child, nth-child(), first-of-type)
- ::before ,::after
- vertical-align
- w00p=width: 100%;
- h100p=height: 100%
1) background 다중 이미지
background 한 줄만으로 여러 사진을 각각 다른 위치에 불러올 수 있다.
부모 박스의 크기가 서로 다른 배경에 총 3가지 이미지를 조합해 만들어 보았다.
background:
url(images/img1.png) 0 0 no-repeat,
url(images/img3.png) right 0 no-repeat,
url(images/img2.png) 0 0 repeat-x;img1은 0 0 위치에서 부터 반복 없이 한 번만(no-repeat), img3은 x축을 오른쪽에 두고 마찬가지로 반복 없음
그리고 img2는 가운데 부분인데 repeat-x 를 사용해 x축(가로)으로 부모의 박스 크기만큼 반복되어 채워지게 했다.
2) 선택자(first-child, last-child, nth-child(), first-of-type)
<ul class="list">
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
<li>list5</li>
</ul>
만약 위의 상황에서 원하는 list만 효과를 주고 싶다면 선택자를 사용하면된다.
first-child {} : 첫 번째
last-child {} : 마지막
nth-child() {} : () 안에 넣은 숫자
*nth-child는 odd(홀수), even(짝수) 뿐만 아니라 2n+1(3, 5, 7... 번째), n+2(3, 4, 5... 번째) 등과 같이 수식도 사용 가능하다
.list li:first-child {
background: orange;
}
.list li:last-child {
background: skyblue;
}
.list li:nth-child(3) {
background: gray;
}
.list li:nth-child(4) {
background: aqua;
}
하지만 예시처럼 ul과 li로만 이루어진 것이 아닌 다른 형제 요소가 있다면 nth-child 사용이 힘들어진다.
<div class="con-box">
<h2>타이틀</h2>
<h3>타이틀2</h3>
<p>설명입니다</p>
<p>설명입니다</p>
</div>
p의 형제가 h2와 h3가 있는 경우 첫 번째 p에만 따로 효과를 위에 방식(nth-child)대로 할 경우
.con-box p:nth-child(1) {
background-color: yellow;
}
.con-box p:nth-child(2) {
background-color: orange;
}
nth-child(1)을 h2인 타이틀로, nth-child(2)를 h3인 타이틀2로 인식하기 때문에 생각대로 적용이 되지 않는다.
이처럼 다른 형제 요소도 있을 땐 같은 타입 중에서 고를 수 있는 nth-of-type를 사용한다.
.con-box p:nth-of-type(1) {
background: yellow;
}
.con-box p:nth-of-type(2) {
background: orange;
}
*first-of-type, last-of-type도 사용 가능하다.
3) ::before , ::after
위 사이트처럼 사이에 점 혹은 네모 박스, 세로줄이 있는 경우가 있다. 이를 구현하는 방법 중 이미 다 만들어진 틀 앞, 뒤에 새로운 요소를 추가하는 방법인 ::before ,::after를 배웠다.
<ul class="top-menu">
<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>
이후 ::after를 사용하여 세로줄을 만들어 보았다.
*둘 다 inline성격을 띠며 content:""가 필수이다. 그래서 아래처럼 텍스트 없이 단순히 색만 넣고 싶더라도 공백으로 두어야 한다.
.top-menu li::after {
content:"";
display: inline-block;
width: 1px;
height: 10px;
background-color: indianred;
margin-left: 15px;
}
이렇게 되면 마지막 li인 사이트맵 뒤에도 ::after가 적용이 되는데 이를 지우려면 위에서 배웠던 :last-child를 사용하면 된다.
.top-menu li:last-child::after {
display: none;
}
4) vertical-align
수직 가운데 정렬
<p>
<img src="images/GS.jpg" alt="">
<strong>test</strong>
</p>
<p>
<img src="images/GS.jpg" alt="">
<strong>test</strong>
</p>
<p>
<img src="images/GS.jpg" alt="">
<strong>test</strong>
</p>
<p>
<img src="images/GS.jpg" alt="">
<strong>test</strong>
</p>
css에서 img와 strong의 부모인 p를 박스로 잡아주고, 이미지와 텍스트를 넣었을 때, 각각 다른 p의 텍스트의 수직 정렬을 하고 싶을 때 사용하면 된다.
우선 nth-child를 사용해 몇 번째 이미지의 텍스트를 정렬할지 정하고 vertical-align를 적용시켰다.
*img를 통해 순서를 찾고 p의 위치를 변경한다는 게 잘 이해가 되지 않고 직접 적용하기에도 어려움이 많은 부분이었다.
.box p:nth-child(1) img{
vertical-align: top;
}
.box p:nth-child(2) img{
vertical-align: middle;
}
.box p:nth-child(3) img{
vertical-align: bottom;
}
.box p:nth-child(4) img{
vertical-align: -50px;
}
5) tips
- w00p=width: 100%;
- h100p=height: 100%