지난 겨울 방학, "웹/파이썬 프로그래밍"수업을 들으며 html을 짧게 배우고 끝난 것이 아쉬워 인터넷을 뒤져보던 중 [스파르타코딩클럽]이란 온라인 프로그래밍 강의사이트에서 무료 강의를 진행한 다는 것을 보고 신청해보았다.
비록 10여개의 짧은 강의였지만, 이 강의를 통해 html웹페이지 제작에 관심이 생겨 이후 한달 동안"온라인방탈출"사이트도 제작하게 될 만큼 내겐 무척 흥미있고, 재미있는 강의였다.
강좌의 진행순서는 다음과 같았다.
01. 주제
✉ 웹 카드 만들기 ✉
02. 봉투 HTML 틀 만들기
03. 웹폰트 적용하기
--------------> 로그인 페이지 만들기
04. 편지 HTML 만들기
05. 모바일 버전 처리
06. 간단한 Javascript 맛보기
07. 눈오는 효과 붙이기
08. 히든메시지 넣어보기
09. 공유를 위한 기초작업
------------------> 웹 카드 만든 후 공유하기
이번 포스팅에서는 "로그인페이지 만들기"까지 진행해보고자 한다.
본격적인 설명에 들어가기 앞서, 오늘의 결과물을 살펴보면 아래와 같다.
🎉 결과물 🎉
시작하기에 앞서...
웹페이지는 크게 "html 영역/ css영역, java영역으로 나누어 살펴볼 수 있는데
- html은 웹페이지의 뼈대를 담당하는 부분
- css는 색상, 폰트 등 꾸미기를 담당하는 부분
- java는 웹페이지에 동적 움직임을 담당하는 부분
이라고 볼 수 있다.
html의 기본 태그들
먼저, 웹페이지의 뼈대를 제작하기 위해선 html에 있는 기본 태그<tag>들을 알아야 한다.
html에는 수많은 태그들이 있지만, 이번에 만든 크리스마스카드 웹페이지를 제작하기 위해선 다음의 태그들이 사용된다.
title : 웹페이지 상단바의 타이틀을 지정해주는 태그
사용예시
|
1
|
<title>스파르타코딩클럽 | HTML 기초</title>
|
cs |
div, p, (ul, li) : 구역을 나누는 태그들
<div> </div> : 구역을 나누는 역할 (상하좌우에 여백을 생성함)
<p> </p> : 하나의 문단을 나타내는 역할
<ul> & <li> : 목록을 생성한다.
(이때, <ul> </ul>은 이것이 하나의 목록임을 나타내고, <li> </li>은 목록의 한 줄을 나타낸다.)
사용예시
|
1
2
3
4
5
6
7
8
|
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
|
cs |
h1~6, hr, span, a-href, img-src, input-type, button, textarea : 콘텐츠 태그들
- <h1> </h1> ~<h6> </h6> : 제목을 쓸 때 쓰는 태그로, h1의 글자크기가 가장 크며, h6의 글자크기가 가장 작다.
- <hr> : 줄띄움 태그이다. (html파일에서 줄을 띄웠다 하더라도, hr태그를 넣지 않으면 웹페이지에선 한 줄로 인식된다.)
- <span> </span> : 글자를 꾸미기 위해 사용되는 태그이다. 글자의 크기, 폰트, 색 등 꾸미기 요소를 바꾸고 싶을 때에는 span 태그 내에 을 추가하여 글자를 꾸밀 수 있다.
- <a href = "주소"> </a> : 하이퍼링크를 삽입하는 태그이다. =뒤에 이동을 원하는 웹페이지 주소를 작성해주면, 해당 객체를 클릭하였을 때 작성한 웹페이지 주소로 이동된다.
- <img src = "사진주소"> : 이미지를 삽입하는 태그이다. (이때, 사진의 주소는 웹페이지 주소를 넣어줘도 되고 자신의 컴퓨터내에 사진이 저장된 경로를 입력해줘도 된다. 하지만, 후자의 경우 웹페이지를 공유할 시 다른 컴퓨터에서는 이미지가 보이지 않는 다는 단점이 있다.)
- <input type = "요소"> : 중간에 어떠한 요소를 넣고싶을 때 사용하는 태그
- <button> </button> : 버튼을 생성하는 태그이다. 이때, 태그사이에 들어간 text가 버튼에 표시된다.
- <textarea> </textarea> : 글자를 입력할 text창을 생성하는 태그이다. 이때 태그사이에 들어간 문구가 초기 입력 text값이 된다.
사용예시
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<h1>h1은 제목을 나타내는 태그입니다. </h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr> 줄띄움 태그입니다.
<span style="color:red">글자</span>를 꾸밀 때 써요
<a href="http://naver.com/"> 하이퍼링크 </a>
<img src= "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<input type="text" />
<button> 버튼입니다</button>
<textarea>나는 무엇일까요?</textarea>
|
cs |
간단한 로그인 페이지만들기
어느정도 태그를 살펴보았으니 앞서 배운 태그를 활용하여 간단한 웹페이지를 제작해보자.
html_뼈대 만들기
아래는 간단한 로그인 페이지의 모습과 이것에 해당하는 html코드이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
------------ 예제 코드 -------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>
|
cs |
위 예제코드를 간단히 설명해보자면,
먼저 <html> </html>태그가 전체를 감싸는 것을 볼 수 있다. html로 웹페이지를 작성할 때 필수적인 태그이다.
다음으로 <html> 태그안에 <head> </head>와 <body> </body>로 영역이 나뉘어진 것을 볼 수 있다.
<head> </head>태그안에서는
- <meta> : HTML 문서의 문자 인코딩 방식
- <title> </title> : 상단바에 표시되는 웹페이지의 이름
등 웹페이지 화면밖 영역의 것들을 주로 설정하는 부분이다.
<body> </body>태그안에서는 웹페이지 화면에 보여지는 기본 골격들을 모두 작성해주는 부분이라고 보면 된다.
body안의 태그를 하나하나 살펴보자면
- <h1> </h1> : 웹페이지의 제목을 가장 큰 글씨로 적어주었다.
- <p> </p> : 각각 하나의 문단으로 지정하여 ID, PW 텍스트를 삽입하였다.
- <input type = "text"> : ID, PW를 사용자가 입력할 수 있도록 입력 text창을 중간에 삽입해 주었다.
- <button> </button> : 로그인 버튼을 만들어 주었다.
이때, 위 코드를 그대로 복사하여 붙여넣은 후 해당 파일을 웹페이지로 열어보면 위 사진과는 조금 다를 것이다.
정확히 말하면, 로그인 페이지 뒷배경의 사진과 로그인하기 버튼의 색깔이 지정되어 있지 않을 것이며 글자 폰트도 다를 것이다.
앞서, html은 웹페이지의 "뼈대"를 만들고, 웹페이지를 꾸미는 것은 css라 하였다.
이제부터 css를 이용해 배경 사진을 넣고, 폰트를 바꾸고, 색깔을 바꾸는 법을 알아보자
css_꾸미기
css는 정말 방대하여 하나하나 설명하기엔 우리가 배운 지식이 너무 얕다.
따라서 아래의 그림을 하나하나 따라가는 것이 초보자인 우리가 쉽고 빠르게 웹페이지를 제작하는 데에 도움이 될 것이다.
class이름 설정하기
css로 스타일을 주기 위해선,
1. 각 태그의 class이름을 설정하여
2. <style> </style> 태그 내에서 해당 클래스의 스타일을 설정해주면 된다.
배경꾸미기
배경의 색, 크기, 사진삽입, 경도 등은 style태그 내에서 위와 같은 코드를 사용해 바꿔줄 수 있다.
div이용하여 하나로 묶어내기
어떠한 태그들에 모두 동일한 style을 설정하고자 할 땐 해당 태그의 상위태그로 <div>를 만들어 하나로 묶어준 후
이 <div>의 style을 지정해주면 된다.
위와 같이 설정해주는 경우 <div> </div>내에 있는 h1, p, button태그에 모두 .wrap에 해당하는 스타일이 적용된다.
🚩참고 : margin과 padding의 차이
폰트 변경하기
구글 제공 폰트 : Browse Fonts - Google Fonts
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
웹페이지에 사용되는 폰트는 구글에서 제공해주고 있다. 위 사이트에서 원하는 폰트를 찾아 아래의 순서를 따라가보자.
이렇게 모든 과정을 따라간 후 html+css를 모두 합친 코드는 아래와 같다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
<style>
*{
font-family: 'Do Hyeon', sans-serif;
}
.mytitle {
background-color: green;
width: 300px;
height: 200px;
color: white;
text-align: center;
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top: 20px;
}
.wrap{
width: 300px;
margin:auto;
}
.mybtn{
width: 300px;
height: 50px;
background-color:darkred;
color:white;
border-radius: 10px;
}
</style>
</head>
<body>
<div class='wrap'>
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요.</h5>
</div>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button class="mybtn">로그인하기</button>
</div>
</body>
</html>
|
cs |
여기까지, 이번시간에 우리는 html의 다양한 태그와 css를 이용해 웹페이지를 꾸미는 방법까지 알아보았다!
오늘까지 배운 지식을 기억하여 다음에 본격적으로 웹 편지만드는 법을 알아보자!!
-ㄲㅡㅌ-
'프로그래밍 독학 > html' 카테고리의 다른 글
| [html] 다양한 태그_01 (0) | 2021.02.03 |
|---|