HTML과 CSS를 이용하여 카카오톡 화면 만들기
노마드코더 사이트에 있는 카카오톡 클론코딩 강의를 들으며 HTML과 CSS에 대한 기본 정보와 용어를 많이 배웠다. 실제 코딩용어나 내용들은 실습을 통해 연습해보며 익혔는데 글로만 보며 하는것 보단 실제로 웹을 구성하고 디자인을 짜며 코딩을 하는 것이 이론으로만 배웠을 때 보다 습득효과가 훨씬 좋은거 같다.
맨 첫 화면은 위 사진을 HTML과 CSS를 통해서 똑같이 만드는 작업을 배웠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Kokoa Talk</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="status-bar">
<div class="status-bar__column">
<span>No Service</span>
<i class="fas fa-wifi"></i>
</div>
<div class="status-bar__column">
<span>
18:43
</span>
</div>
<div class="status-bar__column">
<span>
11%
</span>
<i class="fas fa-battery-full fa-lg"></i>
<i class="fas fa-bolt"></i>
</div>
</div>
<header class="welcome-header">
<h1 class="welcome-header__title">Welcome to Kokoa Clone</h1>
<p class="welcome-header__text">If you have a Kokoa Account, log in with your email or phone number.</p>
</header>
<form action="friends.html" method="GET" id = "login-form">
<input name = "username" placeholder="Email or phone number" type="text" />
<input name = "password" placeholder="Password" type="password"/>
<input value= "Log In" type="submit"/>
<input value= "Sign Up" type="submit"/>
<a href="#">Fine Kokoa Account or Password</a>
</form>
<script src="https://kit.fontawesome.com/b7406506e4.js"
crossorigin="anonymous">
</script>
</body>
</html>여기까지가 HTML코딩을 짠 모습이다.
개인적으로는 class와 id로 태그정보를 보다 편리하게 명칭을 부여 할 수 있는데 id는 고유네임으로 한곳밖에 지정이 되지 않지만 class는 같은 class명을 여러 태그에 부여할 수 있다. 코딩을 짜면서 느낀 점은 굳이 id보단 class만 써서 코딩을 해도 되지 않나..? 라는 의문점이 발생하였는데 이건 어디까지나 아직 초반단계이다보니 좀 더 코딩을 많이 해보고 판단해봐야 할 거 같다고 생각이 들었다.
id는 css에서 #으로 시작된다.
ex)
<form action="friends.html" method="GET" id = "login-form">
<input name = "username" placeholder="Email or phone number" type="text" />
<input name = "password" placeholder="Password" type="password"/>
<input value= "Log In" type="submit"/>
<input value= "Sign Up" type="submit"/>
<a href="#">Fine Kokoa Account or Password</a>
</form>
위 코딩에서 id를 css로 적용시키기 위해서는
#login-form{
코딩내용
}class는 css에서 .으로 시작된다.
ex)
<div class="status-bar">
코딩내용
</div>
위 코딩에서 class를 css로 적용시키기 위해서는
.status-bar{
코딩내용
}으로 작성하면 된다.
또한 HTML의 태그들은 크게 두가지 형태가 있다.
첫 번째
block형식을 갖는 태그
block형식을 갖는 태그는 <div>, <header>, <footer>등 여러개가 있다. 이러한 블록형식의 특징은 박스형태이기 때문에 옆에 아무것도 올 수 없기 때문에 한 줄에 한 개만 배치가 가능하다.
box형태이기 때문에 크기값을 지정할 수 있으며 상하좌우 마진 모두 가질수 있다는 특징이 있다.두 번째
inline형식을 갖는 태그
inline형식을 갖는 태그는 <span>, <a>, <label>등 여러개가 있다. 이러한 인라인형식의 특징은 한 줄에 여러 개를 배치 할 수 있다는 특징이 있으며, 크기값을 지정할 수 없고 상하 마진을 가질 수 없다는 특징이 있다.위의 특성만 잘 파악한다면 HTML을 구성할 때 큰 도움이 되며, CSS를 적용할 때도 많이 유용하기 때문에 특성을 아는것이 CSS를 잘 활용하기 편할 거 같다.
개발자를 꿈꾸는 사람입니당