혼자서 공부를 시작하다가 드디어 기회가 생겨 강의를 하나 듣게되었다.
스파르타 코딩클럽의 내일배움단(국비지원)으로 웹개발 단과 교육이다.
HTML, CSS기초
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID : <input type="text"></p>
<p>PW : <input type="text"></p>
<p><input type="button" value="로그인하기"></p>
</body>
</html>html은 웹을 구성하는 기본 '뼈대'이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.body {
text-align:center;
}
.title {
color:red;
}
</style>
</head>
<body>
<div class="body">
<h1 class="title">로그인 페이지</h1>
<p>ID : <input type="text"></p>
<p>PW : <input type="text"></p>
<p><input type="button" value="로그인하기"></p>
</body>
</html>html은 웹의 기본 뼈대 였다면 css는 html을 꾸며주는 역활을 한다.
css를 이용하여 로그인페이지를 빨간색 글씨로 바꿔보았다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.mytitle {
background-image: url('iu.jpeg');
width: 300px;
height: 200px;
color: white;
text-align: center;
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top: 60px;
margin-top: 30px;
}
.body {
width: 300px;
margin: auto;
padding: 30px;
}
.button {
display: block;
margin: auto;
}
</style>
</head>
<body>
<div class="body">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 패스워드를 입력해주세요</h5>
</div>
<p>ID : <input type="text"></p>
<p>PW : <input type="text"></p>
<p><input type="button" class="button" value="로그인하기"></p>
</div>
</body>
</html>css를 이용하여 조금 더 꾸며보았다.
제목을 묶어 background-color로 이미지를 삽입하고 모서리를 라운드 처리 해주었다.
전체 내용을 페이지 가운데로 이동시켰다.
끝마치며
오타를 주의하자 다 알고 있는 부분도 오타덕에 걸리는 시간이 배로 늘어난다.
하나 하나 뜯어서 언제는 이게 오고 언제는 이게온다 하고 기억하지말고 통째로 구문을 기억하자.
외우지 마라 인터넷 검색을 적극 활용하여 복사/붙여넣자.
강의에서는 스파르타코딩클럽이라고 스파르타 병사 사진을 붙여넣었는데 내 맘대로 바꾸어 넣었다.
이런 재미라도 있어야 하지 않겠는가?
newb