HTML 기초
head와 body로 구성
head : 페이지 속성정보로 탭에 표시 됨
대표적인 요소 : meta, script, title, link 등
페이지의 속성을 정의하거나, 필요한 스크립트들을 부른다. 즉, 눈에 안 보이는 필요한 것들을 담는 것.
body : 페이지 안의 내용을 담는다.
대표적인 요소 : div, p, ul, li, h, img, input, button, textarea 등
<div>: 구역을 나눔
<p> : 문단을 나눔
<img> : 사진 삽입
Q) 간단한 로그인 페이지 만들기
<!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>
<p>
<button>로그인하기</button>
</p>
</body>
</html><h1> 태그로 로그인 페이지 라는 제목을 작성해준다.
<p> 태그로 문단을 나눠 주고 <input> 태그에 type은 text로 해서 ID와 PW를 작성할 수 있는 텍스트 박스를 만들어준다.
<button>태그로 로그인하기 버튼을 만들어준다.
CSS 기초
css는 div를 꾸미는 것.
<head> 안에 <style>로 공간을 만들어 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<style>
.mytitle {
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: 40px;
}
.wrap {
width: 300px;
margin: auto;
}
</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>로그인하기</button>
</div>
</body>
</html><div> 박스를 만들어 로그인 페이지 박스를 만들어준다.
로그인 페이지 <div>에 mytitle이라는 이름을 준다.
<style> 태그로 가서 mytitle. {} 라는 css 꾸미는 공간을 만들어준다.
color : 글자 색
width : <div>의 가로 길이
height : <div>의 세로 길이
background-imge : 배경에 사진 넣기 url("")
background-position : 배경의 위치
border-raidus : 모서리 둥글기
padding : 상자 안 간격
margin : 상자 밖 간격
<button>태그까지 포함하는 <div>를 만들어 wrap이라는 이름을 준다
가운데로 위치시키기위해 가로 넓이를 주고 상자 밖 간격 margin을 auto로 작성해 상하좌우를 최대한 밀어준다
가운데로 정렬하고 싶을 때
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
댓글