1. VS CODE 를 이용해 HTML 에 대해 알아보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
<hr>
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>
- HTML은 크게 head 와 body 로 이루어진 뼈대 라고 할 수 있다.
2. 로그인 페이지 만들기
1) 기본 뼈대 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인 페이지 만들기</title>
</head>
<body>
<h1>로그인 페이지</h1>
<hr>ID : <input type="ID" />
<p>PW : <input type="PW" /></p>
<hr><button>로그인하기</button>
</body>
</html>
- <hr> 태그, <hr> 요소 : <hr> 태그는 콘텐츠 내용에서 주제가 바뀔 때 사용하는 수평 가로선을 그리기 위한 태그로,
태그로 감싸진 내용 전체를 요소라고 한다. (HTML에서 둘 다 페이지에 수평선을 표시하기 위해 사용하며 같은 개념 )
- 각 역할을 하는 태그는 자주 쓰는 것들만 알아두고 상황에 맞게 찾아쓸 수 있도록 하자.
- HTML은 줄을 맞춰 가독성을 높여주는 것이 필수이다! Alt + Shift + F 키로 줄을 맞춰줄 수 있다.
2) CSS로 뼈대를 꾸며보기
<body>
<h1 class="mytitle">로그인 페이지</h1>
<hr>ID : <input type="ID" />
<p>PW : <input type="PW" /></p>
<hr><button>로그인하기</button>
</body>
</html>
- <h1>태그에 class 속성을 이용해 mytitle이라고 특정 이름 부여
<style>
.mytitle {
color : purple;
}
</style>
- <head> 내에 <style> 태그를 이용해 mytitle의 텍스트를 보라색으로 변경
- class="mytitle"을 PW 앞에 붙여넣기 하면 PW의 텍스트로 내가 정한 style로 변경되는 것을 확인
★<style>태그는 <head>내에 위치한다!
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인 페이지 만들기</title>
<style>
.mytitle {
width : 300px;
height : 200px;
background-color: rgb(212, 130, 236);
color: white;
text-align: center; //제목의 위치를 맞출 때
padding-top: 30px; //안 쪽에 여백이 생긴다 margin : 바깥 쪽으로 여백이 생긴다
border-radius: 8px; //로그인페이지가 있는 상자의 모서리를 둥글게
background-position: center;
background-size: cover; //이 세 개는 항상 붙어다닌다!
}
</style>
</head>
<body>
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
- 로그인 페이지가 있는 상자를 가운데로 옮기려고 할 때, <div>태그로 구역을 나눈 뒤 class로 이름을 정해주고 <style>에서 꾸며준다.
<style>
* {
font-family: "Noto Serif KR", serif;
}
- 구글폰트에서 원하는 폰트를 찾아 get embed code를 하면 html에 붙여넣을 수 있는 코드가 나온다.
- * : 모든 태그
- 1) https://getbootstrap.com/ -> 부트스트랩에서 이미 만들어진 테마를 가져와서 사용할 수 있다.
3. [프로젝트] 추억 앨범 만들기
}
.mytitle > button {
}
</style>
</head>
<body>
<div class="mytitle">
<h1>나만의 추억앨범</h1>
<button>추억 저장하기</button>
-> class를 이용해 이름을 정해줄 수 있지만 > 를 이용해 .mytitle 안에 있는 button를 지정하듯 입력해줄 수도 있다.
display: flex;
flex-direction: column; //row는 가로 정렬
align-items: center;
justify-content: center;
-> 어떠한 박스 안에 있는 내용물을 정렬할 때 세트로 정렬한다.
-> 완성된 모습!
누른다고 어떤 상호작용이 되진 않지만 처음으로 페이지를 만들어봤다.
확실히 자바를 배울 때와는 달리 어떤 결과물이 바로 나오니까 훨씬 재미있다..
사실 저런 화면에 얼마나 많은 코드가 들어가는 지는 생각해본 적이 없는데 실제로 만들어보니
작은거 하나하나 직접 설정해야해서 시간이 꽤 걸렸다.
※위 파일은 내일배움캠프 웹 개발 강의 수강 후 개인이 만든 페이지로 무단 도용이나 사용을 금지합니다.
처음으로 웹 개발 강의를 들어봤는데 코드를 입력하면 내가 원하는 그대로 결과가 바로 보인다는 게 가장 재밌었다.
백엔드와 더불어 프론트엔드 강의도 열심히 들어봐야지 !
