반응형
index.html
<!DOCTYPE html>
<html>
<head>
<title> 01 Centering in CSS.</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<img class="box-cover" src="burger.jpg">
<h1>Hamburger</h1>
<p>
햄버거(영어: hamburger, burger 또는 beefburger, 문화어: 고기겹빵, 다진 고기와 빵, 함버거)는 샌드위치의 일종인 음식이다. 양념, 빵가루 등에 고기를 갈아 넣고 버무린 뒤 구워낸 햄버그 스테이크(패티)와 채소, 양념 등을 두 장 이상의 동그랗거나 길쭉한 빵 사이에 넣어 만들며, 보통 손으로 쥐면서 들고 먹는다. 가정에서 직접 만들어 먹기도 하지만, 일반적으로 패스트푸드 식당에서 판매된다. 수많은 패스트푸드 식당들은 햄버거, 감자 튀김, 콜라를 하나로 묶어서 세트로 판매하기도 한다.
</p>
</div>
</body>
</html>style.css
body{
background-color:#ddd;
}
.box{
background-color: white;
width: 480px;
/*box module을 가운데 정렬하는 기초 방법 1.*/
margin-left: auto;
margin-right: auto;
/*box module을 가운데 정렬, 위아래 50px*/
margin: 50px auto;
/*box module 그림자 만들기*/
border-radius: 20px;
border-right: 5px solid #ccc;
border-bottom: 5px solid #999999;
/*box module 내부 이미지, 텍스트를 가운데 정렬하는 기초 방법 1.
text-align은 인라인만 컨트롤하지, h1과 같은 블럭요소는 컨트롤하지 못한다.
그래서 h1이 가운데 정렬된 이유는 블럭이 정렬된게 아니고 블럭 내 텍스트가 정렬되었기 때문이다.*/
text-align: center;
}
.box h1{
color: orangered;
border-bottom: 10px solid orangered;
background-color: aqua;
/*h1블록 자체를 정렬하려면 여기서 margin 사용*/
width: 300px;
margin: 40px auto;
/*만약 font-size가 커지면 width를 지정해줫기 때문에 블록 밖으로 삐져나오게 됨
-> 유지보수 용이하게 하려면, 나중에*/
font-size: 6rem;
}
.box p{
/*공간 주기*/
padding: 3rem;
}
아래 강의를 수강하고 개인적으로 정리하는 글입니다.
https://programmers.co.kr/learn/courses/4521
한 걸음 더 CSS: 코딩가나다 | 프로그래머스
× 본 강의 시리즈는 총 14개의 자음 개수에 따라 순차적으로 제작됩니다. 7/13 기준으로 8강까지 업로드 되어있으며, 하나씩 순차적으로 업데이트 됩니다. 한 걸음 더 CSS: 코딩가나다 부트스트랩 없으면 CSS는 쳐다도 안보는 분들께 추천! 한글 자음 순서대로, 각 자음으로 시작하는 CSS 속성들에 대해 부담없이 알아보는 빔캠프의 동영상 강의. 라이브 코딩을 구경하며 CSS에 대해서 조금씩, 조금씩 알아갈 수 있습니다. CSS는 디자이너들의
programmers.co.kr
반응형
'Programming > FrontEnd' 카테고리의 다른 글
| [CSS] 한 걸음 더 CSS: 코딩가나다 상속(Inheritance) (0) | 2019.12.17 |
|---|---|
| [CSS] 한 걸음 더 CSS: 코딩가나다 버티컬 얼라인(세로 정렬, vertical-align) (0) | 2019.12.16 |
| [CSS] 한 걸음 더 CSS: 코딩가나다 마진 병합(Margin Collapsing) (0) | 2019.12.16 |
| [CSS] 한 걸음 더 CSS: 코딩가나다 라인하이트(줄 간격, line-height) (0) | 2019.12.16 |
| [CSS] 한 걸음 더 CSS: 코딩가나다 디스플레이(Display Property) (0) | 2019.12.16 |
댓글