<!DOCTYPE html>
ㄴ 리빙 스텐다드 (최신 버전)
<!DOCTYPE html>
<html>
<head>
<title>Orange</title>
<style>
body {
background-image: url("./orange_bg.jpg");
}
div{
background-color: white;
width : 400px;
height : auto;
margin: 50px auto;
padding : 60px;
border : 10px solid orange;
border-radius : 60px;
border-top-left-radius: 0%;
border-bottom-right-radius: 0%;
}
h1{
text-align: center;
color : orange;
}
</style>
</head>
<body>
<div>
<img src="./orange.png">
<h1>Orange</h1>
<ul> <!--unordered list 목록 부여-->
<li>orange</li>
<li>kiwi</li>
<li>strawberry</li>
</ul>
</div>
</body>
</html> div{
background-color: white;
width : auto;
height : auto;
}width : auto -> 상위요소의 컨텐츠만큼 차있음
height : auto -> div의 컨텐츠 만큼 차있음
margin-left : auto -> 사용가능한 왼편의 공간 확보 몰빵한다.
margin-right: auto -> 사용가능한 오른편의 공간 확보 몰빵한다.
ㄴ 두개를 같이 사용하면 공간을 균등하게 나눠갖는 것이기 때문에 컨텐츠를 중앙정렬할 수 있다.
<shorthands 사용해서 margin 조정하기>
margin : 0 auto
ㄴ 상, 하단은 0 좌,우는 auto로 좌우정렬
margin : 50 auto
ㄴ 상, 하단은 50 좌,우는 auto로 좌우정렬
주의사항 : div를 2개 연달아 작성하면 컨텐츠 영역 아래에 집을 짓는다. (옆x)
최종 완성본
png 이미지 다운로드는 pngegg라는 사이트에서 했다!
최종 코드
<!DOCTYPE html>
<html>
<head>
<title>Orange</title>
<style>
body {
background-image: url("./orange_bg.jpg");
}
div{
background-color: white;
width : 400px;
height : auto;
margin: 50px auto;
padding : 60px;
border : 10px solid orange;
border-radius : 60px;
border-top-left-radius: 0%;
border-bottom-right-radius: 0%;
}
h1{
text-align: center;
color : orange;
}
</style>
</head>
<body>
<div>
<img src="./orange.png">
<h1>Orange</h1>
<ul> <!--unordered list 목록 부여-->
<li>orange</li>
<li>kiwi</li>
<li>strawberry</li>
</ul>
</div>
</body>
</html>
첫 수업이었는데, 강사님이 참 좋으셨다.
복습 해봐야겠다! ㅎㅎ
'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-1 cat 페이지 만들기 (0) | 2023.12.05 |
| html/css 정리하기 (2) | 2023.12.04 |
