**코드 쓸 때 ;랑 /> 잊지 말기
HTML
*연습코드 (1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KAKAO TALK</title>
</head>
<body>
<div>
<span>
No service
<i class="fa-solid fa-wifi"></i>
</span>
<span>
18:43
</span>
<span>
11%
<i class="fa-solid fa-battery-quarter"></i>
<i class="fa-solid fa-bolt"></i>
</span>
<span>
Welcome to KakaoTalk
</span>
<span>
If you have a Kakao Account,
log in with your email or phone number.
</span>
<form>
<input type="text" id="joinid" placeholder="Email or Phone number" />
<input type="text" id="pwid" placeholder="Password" />
<input type="submit" value="Log in" />
<input type="submit" value="Password" />
<a href="#">Find Kakao Account or Password</a>
</form>
</div>
</body>
</html>
- 정형화되지 않고 깔끔하지 않음
| name | id | class |
| - form 컨트롤 요소의 값을 서버로 전송하기 위해 필요한 속성 - jsp등 외부로 값을 던질 때 사용 |
- 고유값 사용 - class보다 우선값으로 적용 - 로고, 상단메뉴, 하단 등 스타일 정의 - 블로그의 구조적인 꾸밈을 설명 ex) 카카오톡 채팅 화면 ⇒ 자바스크립트에서 html 태그 값을 가져오거나 내보낼 때 (확인용) |
- 반복적으로 사용되는 스타일 ex) 카카오톡 말풍선 ⇒ CSS 쿼리문 및 재사용 목적 |
| div | span |
| - 한 문단을 사용 - 한 영역을 가짐 |
- 하나의 요소 |
*연습코드 (2)_수정 1차..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KAKAO TALK</title>
</head>
<body>
<div id="column">
<span>
No service
<i class="fa-solid fa-wifi"></i>
</span>
<span>
18:43
</span>
<span>
11%
<i class="fa-solid fa-battery-quarter"></i>
<i class="fa-solid fa-bolt"></i>
</span>
</div>
<div>
<h1>Welcome to Kakato Talk</h1>
</div>
<div>
If you have a Kakao Account,
log in with your email or phone number.
</div>
<form>
<input type="text" id="joinid" placeholder="Email or Phone number" />
<input type="text" id="pwid" placeholder="Password" />
<input type="submit" value="Log in" />
<input type="submit" value="Password" />
<a href="#">Find Kakao Account or Password</a>
</form>
</body>
</html>
*연습코드 (3)_수정 2차_class 작성
<body>
<div id="status-bar">
<div class="status-bar__column">
<span>No service</span>
<i class="fa-solid fa-wifi"></i>
</div>
<div class="status-bar__column">
<span>18:43</span>
</div>
<div class="status-bar__column">
<span>11%</span>
<i class="fa-solid fa-battery-quarter"></i>
<i class="fa-solid fa-bolt"></i>
</div>
(상태바 영역자체를 구현) > 그 속에서도 넘으면 안대는 영역 3가지 div로 나눠줌
1) 큰 틀은 div 그 자체 하나 Block
2) 작은 틀 3개의 Block은 div의 동일한 속성과 영역
3) 그 안의 작은 요소 inline 들은 한 라인안에서 조화롭게 이어지는 영역이라고 이해할 것
∴ CSS를 세부적으로 읽기 편하게 만들기 위한 코드 그림을 그린다고 생각하면 됨
*연습코드 (4)_수정 3차_form에 id부여 및 header 작성
<header>
<h1>Welcome to Kakato Talk</h1>
<p>If you have a Kakao Account,
log in with your email or phone number.</p>
</header>
<form id="login-form">
<input type="text" placeholder="Email or Phone number" />
<input type="text" placeholder="Password" />
<input type="submit" value="Log in" />
<input type="submit" value="Password" />
<a href="#">Find Kakao Account or Password</a>
</form>
1) html의 큰 구조 header로 구조화하기
2) 사이트 자체에 form이 중복적으로 나타나지 않을 것 확인하였기 떄문에 id 부여
3) CSS를 쉽게 이해하기 위해서 BEM 구조 __, -- 사용
*구현되어야 할 최종 코드
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoom Talk</title>
</head>
<body>
<div id="status-bar">
<div class="status-bar__column">
<span>No service </span>
<i class="fa-solid fa-wifi" style="color: #4f5354;"></i>
</div>
<!--to do : wifi icon-->
<div class="status-bar__column"
<span>18:43</span>
</div>
<div class="status-bar__column">
<span>88%</span>
<i class="fa-solid fa-battery-three-quarters fa-fade" style="color: #5ff320;"></i>
<i class="fa-solid fa-bolt fa-fade" style="color: #17ed07;"></i>
</div>
<!--batery icon-->
<!--lightning icon-->
</div>
<header class="welcom-header">
<h1 class="welcome-header__title">Welocme to Zoom talk</h1>
<p class="welcome-header__text">If you have a Zoom talk Account,
Log in with your email or phone number.</p>
</header>
<form id="Login-form">
<input type="text" placeholder="Email or phone number"/>
<input type="text" placeholder="Password"/>
<input type="submit" value="Log in"/>
<input type="submit" value="Sign up"/>
<a href="#">Find Zoom talk Account of Password</a>
</form>
</body>
</html>
> 어떤 것을 구체적으로 보여주고 싶어하는지 명확한 느낌
==
CSS
: https://blog.naver.com/leeminwok/222482570193 (완벽한 이해를 도와주는 사이트)
CSS - display (Flex)
https://studiomeal.com/archives/197 정말 설명이 잘되어 있다. 무조권 한번 들어가보자. 전설의 table 코...
blog.naver.com
*1번쨰 코드
#status-bar{
display:flex;
justify-content: center;
}
.status-bar__column {width:33%}
.status-bar__column:first-child span {
margin-right:5px;}
.status-bar__column:nth-child(2) {
display: flex;
justify-content: center;}
.status-bar__column:last-child {
display: flex;
justify-content: flex-end;
align-items: baseline;
}
.status-bar__column .fa-battery-quarter {
margin:0px 5px;
}
Q.의문점 : span에는 왜 display:flex를 적용 안하고, nth-child , last-child에는 적용을 할까?
※ display : flex >> flex container 항목인 것(부모)
justify-content : flex-end >> flex item 항목(자식)이라서 !
*구현되어야 할 최종 코드
body
{font-family: 'Roboto Mono', monospace;}
#status-bar {
display:flex;
justify-content: center;
}
.status-bar__column{
width:33%;
}
.status-bar__column :first-child span {
margin-right:5px;
}
.status-bar__column:nth-child(2) {
display: flex;
justify-content: center;
}
.status-bar__column:last-child {
display: flex;
justify-content: flex-end;}
.status-bar__column .fa-battery-quarter {
margin :0px 5px;
}
==
*css reset 사이트
https://meyerweb.com/eric/tools/css/reset/
728x90
'html, css' 카테고리의 다른 글
| [css] 속성 이해하기_6-6, 6-7, 6-8 (0) | 2023.08.04 |
|---|---|
| [css] CSS BOX MODEL (0) | 2023.08.03 |
| [html/css] Zoom talk 만들기_노마드코더보고 따라하기(CSS.5) (0) | 2023.07.30 |
| [css] BEM 사용하기 (0) | 2023.07.30 |
| [html] Div, Span의 차이 그리고 부수적 요소 (0) | 2023.07.29 |