#6.1 Sign Up Screen part One이전 포스트/코코아 html css2020. 12. 12. 18:40
Table of Contents
처음은 위에 상태바를 만들어 줘야하기 때문에
div를 만들고 id를 status-bar로 하자
그다음 와이파이, 시간, 배터리 등 3가지 항목이 있는데 각항목마다 표시하기 위해 div를 만들자
div클래스를 "status-bar__column"이라고 했는데 이는 부모요소의 id와 자신의 class이름을 같이 적어 줌으로써
나중에 구별하고 코드를 보면 어떤 상자인지 바로알기 위해서 이렇게 길게 썼다.
맨처음 html기본양식은 '!'를 누른후 enter를 누르면 vsc에서 자동으로 기본뼈대를 만들어준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="status-bar">
<div class="status-bar__column">
<span>No Service</span>
<!-- To Do: Wifi Icon-->
</div>
<div class="status-bar__column">
<span>18:43</span>
</div>
<div class="status-bar__column">
<span>110%</span>
<!-- Battery ICon-->
<!-- Lightning ICon-->
</div>
</div>
</body>
</html>'이전 포스트 > 코코아 html css' 카테고리의 다른 글
| #6.3 Font Awesome (0) | 2020.12.12 |
|---|---|
| #6.2 BEM (0) | 2020.12.12 |
| #6.0 Introduction (0) | 2020.12.12 |
| #5.3 Making Our First Commits (0) | 2020.12.12 |
| #5.2 Creating a Github Repository (0) | 2020.12.12 |
@병고라니 :: 컴퓨터공학과 고인물
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!