[수업 목표]
1. HTML, CSS을 통한 로그인 페이지 만들기
2. CSS기초와 부트스트랩
3. 포스팅 박스만들기
4. Javascript
==================================================================
웹 동작 개념
1) HTML을 받는 경우
2) 데이터만 받는 경우
1. HTML, CSS을 통한 로그인 페이지 만들기
☞ HTML로 뼈대를 잡고 CSS로 꾸민다.
☞ HTML은 head와 body로 구성되며, head에는 페이지의 속성 정보, body에는 페이지의 내용을 넣는다.
<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> 왼쪽 점을 나타낼때</li>
</ul>
<!-- 아래의 내용은 보통 div안에 들어가는 것들 -->
<h1>제목을 나타내는 태그</h1>
<h2>소제목을 나타내는 태그</h2>
<h3>h3~h6도 따로 있음</h3>
<hr> 줄을 나타냄
<span style="color:red">글자</span> 특정 글자를 꾸밀 때 사용함
<hr> 줄을 나타냄
<a href="http://naver.com/"> 하이퍼링크 </a> a태그는 하이퍼링크를 사용함
<hr> 줄을 나타냄
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /> img는 이미지를 넣을 때 사용함
<hr> 줄을 나타냄
<input type="text" /> 입력창을 나타냄
<hr> 줄을 나타냄
<button>버튼</button> 버튼창을 나타냄
<hr> 줄을 나타냄
<textarea> 텍스트 입력창 </textarea> 텍스트를 입력할 수 있는 창
</body>
2. CSS기초와 부트스트랩
👉 배경관련
background-color
background-image
background-size
사이즈
width
height
폰트
font-size
font-weight
font-family
color
간격
margin
padding
</aside>구글 웹폰트 링크 : https://fonts.google.com/?subset=korean
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
주석처리는 ctrl + / 하면 주석처리됨
=============================================================
부트스트랩은 CSS를 좀더 예쁘게 꾸밀수 있도록 하는 도구
https://getbootstrap.com/docs/5.0
https://getbootstrap.com/docs/5.0/getting-started/introduction/
getbootstrap.com
3. 포스팅 박스만들기
4. 연예인 방명록 만들기
댓글