개발툴 : Sublime Text3 (메모장으로 하셔도 상관없습니다)
넷플릭스 로그인 후 나타나는 프로필 선택 화면을 구현해보겠습니다.
먼저, 설정한 style 부분 (CSS)를 설명하겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>netflix_test</title>
<meta charset="utf-8">
<!-- 모바일 화면을 위한 메타데이터 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
color: white;
}
p.logo {
background: transparent;
color: red;
text-align: left;
font-size: 40px;
margin-top: 0px;
margin-left: 10px;
}
div.profile-aria{
/*레이아웃 설정*/
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%)
}
p.tv {
text-align: center;
font-size: 48px;
margin-bottom: 10px;
margin-left: 25px;
}
li {
/*list 가로 배열*/
float: left;
/* 문장 앞에 있는 마커 설정을 없앰; */
list-style: none;
margin: 10px;
/* 줄바꿈 설정 */
display: block;
}
div.profile {
width: 150px;
height: 200px;
background: transparent;
}
div.profile-card{
width: 150px;
height: 150px;
background: white;
}
p.profile-card {
color: white;
text-align: center;
}
div.button {
width: 120px;
height: 30px;
margin-left: 45%;
margin-top: 30%;
text-align: center;
padding: 5px;
border: 1px solid white;
}
</style>
</head>먼저 스타일을 구분해줄 클래스명을 추가해 구분해줍니다.
ex) <태그이름>.클래스명
<div> 태그인 proflie-aria를 만들어 중간에 배치할 레이아웃을 만들어 줍니다. 이 레이아웃 안에는 "Netflix를 시청할 프로필을 선택하세요." 문구와 프로필 카드, 프로필 관리 버튼이 들어가게 됩니다.
list 태그인 <li>는 프로필 카드를 나열해줄 리스트이기 때문에 마커를 제외하였고, float 속성을 이용하여 가로 배열을 해주었습니다.
style 설정을 마쳤으면 body 안에서 style 클래스를 사용할 태그들에 class명을 설정해줍니다.
<body bgcolor="black">
<div>
<!-- 넷플리스 로고 -->
<div>
<p class="logo">Netflix</p>
</div>
<div class="profile-aria">
<!-- 텍스트 -->
<div>
<p class="tv">Netflix를 시청할 프로필을 선택하세요.</p>
</div>
<!-- 프로필 카드 리스트 -->
<div>
<ul>
<li>
<div class="profile">
<div class="profile-card"></div>
<p class="profile-card">선택 1</p>
</div>
</li>
<li>
<div class="profile">
<div class="profile-card"></div>
<p class="profile-card">선택 2</p>
</div>
</li>
<li>
<div class="profile">
<div class="profile-card"></div>
<p class="profile-card">선택 3</p>
</div>
</li>
<li>
<div class="profile">
<div class="profile-card"></div>
<p class="profile-card">선택 4</p>
</div>
</li>
<li>
<div class="profile">
<div class="profile-card"></div>
<p class="profile-card">선택 5</p>
</div>
</li>
</ul>
</div>
<!-- 프로필 관리 버튼 -->
<div class="button">
프로필 관리
</div>
</div>
</div>
</body>
</html><div> 태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용합니다.
이를 이용해 각각의 공간을 알맞게 배치할 수 있고 CSS를 활용하여 스타일을 적용할 수 있습니다.
▼<div> 태그 속성▼
| 태그 | 속성 | 설명 |
| <div> | style | 스타일 |
| width | 가로 크기 | |
| height | 세로 크기 | |
| border | 테두리 | |
| background-color | 배경색 | |
| float | 정렬 | |
| margin | 여백 |
실행 결과
