소스코드
<!DOCTYPE html>
<html>
<head>
<title>CAT</title>
<style>
body{
background-image: url("./images/bg.png");
}
h1{
color : rgb(201, 11, 11);
border-bottom : 5px solid rgb(201, 11, 11);
width : 100px;
margin-left : auto;
margin-right : auto;
}
p{
color : rgb(5, 177, 5);
margin: 30px;
padding : 40px;
border : 2px solid rgb(181, 218, 181);
background-color: #EEEEEE;
}
div{
background-color: white;
height : auto;
width : 500px;
text-align: center;
border-radius: 50px;
border-bottom-left-radius: 0%;
border-bottom-right-radius: 0%;
margin : 100px auto;
border-bottom : 50px solid rgb(201, 11, 11);
}
</style>
</head>
<body>
<div>
<img src="./images/cat02.png">
<h1>CAT</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa</p>
</div>
</body>
</html>
코드리뷰
head 태그
타이틀 태그, css를 입력할 style 태그 작성 (style 태그의 셀렉터별 설명은 하단)
body 태그
div를 이용해 모든 컨텐츠를 하나로 묶어준다.
- img 태그에서 cat02.png 이미지 불러오기
- h1 태그를 이용하여 제목 붙여주기 "CAT"
- p 태그를 이용하여 내용 텍스트 삽입하기
head태그 -> style태그
- body 태그 : background-image 를 통해 배경 이미지 불러오기
- h1태그
- 폰트 컬러 붉은색
- border-bottom 을 통해 하단 밑줄 효과를 준다.
- 하단 밑줄 길이를 조절하기 위해 width 100px
- margin left, right : auto 설정을 통해 중앙 정렬
- p태그
- 폰트 컬러 그린
- margin 을 통해 외곽선 이후로 여백을 준다.
- padding 을 통해 외곽선 안쪽으로 여백을 준다.
- 외곽선 표시 녹색
- 배경색상은 #EEEEEE
- div 태그
- 전체 상자의 색상은 흰색
- 높이는 auto를 줘서 컨텐츠에 맞춘다.
- width는 500px
- 텍스트정렬을 중앙으로
- 외곽 부드럽게 효과를 준다. border-radius : 50px
- 아래 외곽은 뾰족하게 원복하기 위해 border-bottom-left-radius : 0% 로 준다. (오른쪽 동일)
- margin : 100px auto 를 통해 상하 마진을 주고 좌우 여백은 auto로 좌우정렬한다.
- border-bottom 아래 외곽선에 색상을 주어 하단 포인트를 완성한다.
'HTML+CSS' 카테고리의 다른 글
| html/css #3 - 프로필 사이트 index 2 (class, descendant selector) (0) | 2023.12.07 |
|---|---|
| html/css #2-1 프로필 사이트 index (1) | 2023.12.07 |
| html/css #2 - html/css 작성 순서 (1) | 2023.12.06 |
| html/css #1- fruits 페이지 만들기 (0) | 2023.12.05 |
| html/css 정리하기 (2) | 2023.12.04 |
