반응형
예제1.
index6.html
<!DOCTYPE html>
<html>
<head>
<title>06 vertical align</title>
<link rel="stylesheet" href="style6.css">
</head>
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
</html>
style6.css
body{
background-color: #999;
}
.wrapper{
background-color: blanchedalmond;
width: 960px;
height: 400px;
line-height: 400px; /*한 줄 height를 전체 height로 잡아주면 vertical-align 세로 middle 성공!*/
text-align: center; /*여기서 text-align으로 좌우 center로도 만들어주기*/
margin: 0 auto;
}
.box{
display: inline-block; /*inline 속성을 포함해야 vertical-align의 middle이 의미 있어짐*/
background-color: green;
width: 100px;
height: 100px;
vertical-align: middle;
}
예제2.
index6.html
<div class="wow">
<span class="text">Apple 애플 Macbook 맥북 Pro 프로</span>
<span class="badge">NEW</span>
</div>style6.css
body{
background-color: #999;
}
.wow{
background-color: white;
}
.text{
background-color: orange;
font-size: 30px;
}
.badge{ /*badge 위치*/
background-color: orangered;
color: white;
font-size: 0.3em;
vertical-align: middle; /*정확히 middle에 오는게 아니고, eng text의 middle에 위치.
따라서 아래와 같은 작업을 해줘야 함.*/
padding: 0.2em 0.8em 0.2em;
display: inline-block;
border-radius: 30px;
margin-top: -1.2em;
}
아래 강의를 수강하고 개인적으로 정리하는 글입니다.
https://programmers.co.kr/learn/courses/4521
한 걸음 더 CSS: 코딩가나다 | 프로그래머스
× 본 강의 시리즈는 총 14개의 자음 개수에 따라 순차적으로 제작됩니다. 7/13 기준으로 8강까지 업로드 되어있으며, 하나씩 순차적으로 업데이트 됩니다. 한 걸음 더 CSS: 코딩가나다 부트스트랩 없으면 CSS는 쳐다도 안보는 분들께 추천! 한글 자음 순서대로, 각 자음으로 시작하는 CSS 속성들에 대해 부담없이 알아보는 빔캠프의 동영상 강의. 라이브 코딩을 구경하며 CSS에 대해서 조금씩, 조금씩 알아갈 수 있습니다. CSS는 디자이너들의
programmers.co.kr
반응형
'Programming > FrontEnd' 카테고리의 다른 글
| [CSS] 한 걸음 더 CSS: 코딩가나다 오버플로우(overflow) (0) | 2019.12.17 |
|---|---|
| [CSS] 한 걸음 더 CSS: 코딩가나다 상속(Inheritance) (0) | 2019.12.17 |
| [CSS] 한 걸음 더 CSS: 코딩가나다 마진 병합(Margin Collapsing) (0) | 2019.12.16 |
| [CSS] 한 걸음 더 CSS: 코딩가나다 라인하이트(줄 간격, line-height) (0) | 2019.12.16 |
| [CSS] 한 걸음 더 CSS: 코딩가나다 디스플레이(Display Property) (0) | 2019.12.16 |
댓글