로그인창
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
<style>
input[type="image"] {
vertical-align: middle;
/* 콘텐츠 세로 중심으로 맞출 때 */
}
</style>
</head>
<body>
<form>
<fieldset>
<label>아이디: <input type="text" id="user_id" size="10"></label>
<label>비밀번호: <input type="password" id="user_pw" size="10"></label>
<input type="image" src="images/login.png" alt="로그인">
</fieldset>
</form>
</body>
</html>버튼 이동
<!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>
<form>
<input type="hidden" value="abcde">
<input type="button" value="공지창 열기" onclick="window.open('01.html')">
</form>
</body>
</html>간단한 주문창
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레드향 주문하기</title>
<link rel="stylesheet" href="css/form2.css">
</head>
<body>
<h1>레드향 주문하기</h1>
<form>
<fieldset>
<legend>배송정보</legend>
<ul id="shipping">
<li>
<label for="prod">주문 상품</label>
<input type="text" id="prod" value="상품용 3KG" readonly>
</li>
<li>
<label for="user-name">이름</label>
<input type="text" id="user-name" autofocus required>
</li>
<li>
<label for="addr">배송 주소</label>
<input type="text" id="addr" required>
</li>
<li>
<label for="mail">이메일</label>
<input type="email" id="mail">
</li>
<li>
<label for="phone">연락처</label>
<input type="tel" id="phone" placeholder="하이픈 빼고 입력해주세요.(01012345678)" required>
</li>
<li>
<label for="d-day">배송 지정</label>
<input type="date" id="d-day">
<small>(주문일로부터 최소 3일 이후)</small>
</li>
</ul>
</fieldset>
<fieldset>
<legend>이벤트와 새로운 소식</legend>
<input type="radio" name="mailing" id="mailing_y">
<label for="mailing_y">메일 수신</label>
<input type="radio" name="mailing" id="mailing_n" checked>
<label for="mailing_n">메일 수신 안 함</label>
</fieldset>
<div>
<input type="submit" value="주문하기">
<input type="reset" value="취소하기">
</div>
</form>
</body>
</html>간단한 주문창(2)
<!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>
<label for="meno">메모</label>
<textarea id="meno" cols="40" rows="4"></textarea>
<form action="">
<!-- 드롭 다운 목록 -->
<label for="prod1">상품 선택</label>
<select id="prod1">
<option value="special_3">선물용 3kg</option>
<option value="special_5">선물용 5kg</option>
<option value="family_3">가정용 3kg</option>
<option value="family_5">가정용 5kg</option>
</select>
<hr>
<label for="prod2">포장 여부</label>
<input type="text" id="prod2" list="pack">
<datalist id="pack">
<option value="package">선물 포장</option>
<option value="abc">abc</option>
<option value="nopackage">포장 안 함</option>
</datalist>
</form>
</body>
</html>Q1
회원 가입 창
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<style>
/* # -> id . -> class */
/* #container { */
/* } */
</style>
</head>
<body>
<h1>회원가입을 환영합니다</h1>
<form>
<fieldset>
<legend>사용자 정보</legend>
<ul>
<li><label for="user_id">아이디</label>
<input type="text" id="user_id"></li>
<li><label for="user_email">이메일</label>
<input type="email" id="user_email"></li>
<li><label for="user_pw">비밀번호</label>
<input type="password" id="user_pw"></li>
<li><label for="user_pwcheck">비밀번호 확인</label>
<input type="password" id="user_pwcheck"></li>
</ul>
</fieldset>
<fieldset>
<legend>이벤트와 새로운 소식</legend>
<ul>
<label>
<li><input type="radio" name="mail" value="yes">메일 수신</li>
</label>
<label>
<li><input type="radio" name="mail" value="no">메일 수신 안 함</li>
</label>
</ul>
</fieldset>
<div>
<input type="submit" value="가입하기">
<input type="reset" value="취소">
</div>
</form>
</body>
</html>Q2
예약 정보
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>예약 정보</title>
<h1>예약 정보</h1>
<style>
ul {
/* none: 아무것도 나오지 마 */
list-style: none;
}
li {
/* 라인 높이 */
line-height: 50px;
}
label {
/* 넓이, 쏠림(왼쪽배치) */
width: 60px;
float: left;
}
</style>
</head>
<body>
<form>
<ul>
<li><label for="user_name">이름</label>
<input type="text" id="user_name">
</li>
<li><label for="user_phone">휴대폰</label>
<input type="tel" id="user_phone">
</li>
<li><label for="user_email">이메일</label>
<input for="user_email" id="user_email">
</li>
</ul>
</form>
<div>
<input type="submit" value="예약하기">
</div>
</body>
</html>Q3
프론트엔드 개발자 지원서 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>프론트엔드 개발자 지원서</title>
<style>
#container {
width: 520px;
border: 1px solid black;
padding: 20px 40px;
margin: 0 auto;
}
fieldset {
margin-bottom: 15px;
}
legend {
font-weight: bold;
}
ul {
list-style-type: none;
}
li {
line-height: 30px;
}
</style>
</head>
<body>
<div id="container">
<h1>프론트엔드 개발자 지원서</h1>
<p>HTML, CSS, 자바스크립트의 기술을 이해하고 실무 경험이 있는 분을 찾습니다.</p>
<hr>
<form>
<h3>개인 정보</h3>
<ul>
<li>
<label for="name">이름</label>
<input type="text" id="name" autofocus placeholder="공백 없이 입력하세요.">
</li>
<li>
<label for="phone">연락처</label>
<input type="text" id="phone">
</li>
</ul>
<h3>개인 정보</h3>
<ul>
<!-- 라벨을 써도 되고 안써도 된다고 함 -->
<!-- <li><label><input type="radio" name="field" value="an">웹 퍼블리싱</li></label> -->
<li><input type="radio" name="=field" value="an">웹 퍼블리싱</li>
<li><input type="radio" name="field" value="pd">웹 애플리케이션 개발</li>
<li><input type="radio" name="field" value="ann">개발 환경 개선</li>
</ul>
<h3>개인 정보</h3>
<textarea id="motive" placeholder="본사 지원동기를 간략히 써주세요" rows="5" cols="50"></textarea>
<div>
<input type="button" value="접수하기">
<input type="button" value="다시 쓰기">
</div>
</form>
</div>
</body>
</html>CSS
style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상품 소개 페이지</title>
<link rel="stylesheet" href="css/style.css"> <!--외부 우선순위 :3-->
<!-- 내부 우선 순위:2 -->
<style>
p{
padding: 10px;
background-color: #222;
color: #fff;
}
</style>
</head>
<body>
<h1>레드향</h1>
<!-- 인라인 우선순위 :1 -->
<p style="color: blue;">껍질에 붉은 빛</p>
<p>레드향은 한라봉과 귤을 교배</p>
<p>비타민 C와 비타민 P가 풍부해 혈액 순환</p>
</body>
</html>마진과 패딩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상품 소개 페이지</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<img src="images/cat.jpg">
</body>
</html>맛보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상품 소개 페이지</title>
<style>
p {
font-style: italic;
/* 이텔릭체 */
}
.accent {
border: 1px solid #000;
/* 테두리 */
padding: 5px;
/* 테두리와 내용 사이의 여백 */
}
.bg {
background-color: red;
}
#container {
/* 넓이 */
width: 500px;
/* 좌우 10 상하 auto */
margin: 10px auto;
/* 보더라인 컨텐츠 영역 사이 크기를 줌 */
padding: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="container">
<h1 class="accent bg">레드향</h1>
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환</p>
</div>
</body>
</html>글씨 색 바꾸기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상품 소개 페이지</title>
<style>
p {
color: black;
}
h1 {
color: brown !important;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1 style="color: green;">레드향</h1>
<p style="color: red;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로</p>
<p>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>폰트(1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상품 소개 페이지</title>
<style>
body {
font-size: 20px;
/* 전체 글자 크기 */
}
h1 {
font-family: 바탕;
/* 글꼴 */
font-size: 3em;
/* 글자 크기 */
}
.accent {
font-size: larger;
/* 글자 크기 */
font-weight: 800;
/* 글자 굵기 */
}
.italic {
font-style: italic;
/* 글자 스타일 */
}
</style>
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로</p>
<p class="italic">일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>폰트(2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 폰트 사용하기</title>
<style>
@font-face {
font-family: 'Ostrich';
/* 폰트 이름 */
src: local('Ostrich Sans'),
url('fonts/ostrich-sans-bold.woff') format('woff'),
url('fonts/ostrich-sans-bold.ttf') format('truetype'),
url('fonts/ostrich-sans-bold.svg') format('svg');
}
.wfont {
font-family: 'Ostrich', sans-serif;
/* 웹 폰트 지정 */
}
p {
font-size: 30px;
/* 글자 크기 */
}
</style>
</head>
<body>
<p>Using Default Fonts</p>
<p class="wfont">Using Web Fonsts</p>
</body>
</html>폰트(3)
<!DOCTYPE html>
<!-- 웹 폰트 사용하기 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 폰트 사용하기</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Black+And+White+Picture&display=swap');
h2 {
font-size: 60px;
font-weight: bold;
font-family: "Black And White Picture", system-ui;
}
</style>
</head>
<body>
<h1>안녕하세요</h1>
<h2>안녕히가세요!!!!!!</h2>
</body>
</html>폰트(4)
<!DOCTYPE html>
<!-- 다운로드 폰트 사용해보기 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 폰트 사용하기</title>
<style>
@font-face {
font-family: '외할머니글씨';
src: local('외할머니글씨'),
url('fonts/나눔손글씨\ 외할머니글씨.ttf') format('truetype');
}
@font-face {
font-family: '동화또박';
/* 폰트이름 */
src: local('동화또박'),
url('fonts/NanumDongHwaDdoBag.ttf') format('truetype');
}
.wfont {
font-family: '외할머니글씨', sans-serif;
}
.wfont1 {
font-family: '동화또박', sans-serif;
}
p {
font-size: 30px;
}
</style>
</head>
<body>
<p>공부하세요</p>
<p class="wfont">오늘 폰트 배우는데 정말 쉽죠. 그냥 넣으면 나옵니다</p>
<p class="wfont1">오늘 폰트 배우는데 정말 쉽죠. 그냥 넣으면 나옵니다.</p>
</body>
</html>다양한 색상 표기법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상품 소개 페이지</title>
<style>
h1 {
color: 0000ff;
/* 16진수 표기법 */
}
p {
color: #8E89FF;
/* 색상 이름 */
}
.accent {
color: hsl(0, 100%, 50%);
/* hsl 표기법 */
font-weight: bold;
}
</style>
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로</p>
<p>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상품 소개 페이지</title>
<style>
body {
/* 백그라운드 이미지 url 반복 안한다 고정 */
background: url(images/bg.jpg) no-repeat fixed;
/* 커버 전체 다 덮어요 */
background-size: cover;
text-align: center;
}
h1 {
font-size: 160px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.color1 {
color: rgb(255, 255, 255);
/* 흰색 */
}
.color2 {
/* rgba -> 투명도 */
color: rgba(255, 255, 255, 1.5);
/* 반투명한 흰색 */
color: rgba(46, 237, 100, 0.7);
}
</style>
</head>
<body>
<h1 class="color1">HTML</h1>
<h1 class="color2">CSS</h1>
</body>
</html>text-align
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-align</title>
<style>
p {
width: 600px;
border: 1px solid #222;
padding: 10px;
margin: 10px;
}
.center {
text-align: center;
}
.justify {
text-align: justify;
}
</style>
</head>
<body>
<p>껍질에 붉은 빛이 돌아 <b><big>레드향</big>(감평甘平)</b>이라 불린다.
레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p class="center">껍질에 붉은 빛이 돌아 <b><big>레드향</big>(감평甘平)</b>이라 불린다.
레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p class="justify">껍질에 붉은 빛이 돌아 <b><big>레드향</big>(감평甘平)</b>이라 불린다.
레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>line height(1)
<!DOCTYPE html>
<!-- line-height -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
width: 600px;
border: 1px solid #222;
padding: 10px;
margin: 10px;
}
.small-line{
line-height: 0.7;
}
.big-line{
line-height: 2.5;
}
</style>
</head>
<body>
<p>껍질에 붉은 빛이 돌아 <b><big>레드향</big>(감평甘平)</b>이라 불린다.
레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p class="small-line">껍질에 붉은 빛이 돌아 <b><big>레드향</big>(감평甘平)</b>이라 불린다.
레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p class="big-line">껍질에 붉은 빛이 돌아 <b><big>레드향</big>(감평甘平)</b>이라 불린다.
레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>line height(2)
<!DOCTYPE html>
<!-- line-height -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>line-height</title>
<style>
h1 {
font-size: 60px;
/* 글자 크기 */
font-family: Verdana, Geneva, Tahoma, sans-serif;
/* 글꼴 */
}
.heading {
width: 100%;
/* 영역 너비 */
height: 100px;
/* 높이 */
background: #222;
/* 배경 색 */
color: #ffffff;
/* 글자 색 */
text-align: center;
/* 가로 정렬 - 가운데 */
line-height: 100px;
/* 세로 정렬 - 가운데. line-height값과 height 값을 같게 */
}
</style>
</head>
<body>
<h1 class="heading">HTML</h1>
</body>
</html>텍스트 그림자
<!DOCTYPE html>
<!-- 텍스트 그림자 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-shadow</title>
<style>
h1 {
font-size: 60px;
}
.shadow1 {
color: red;
text-shadow: 5px 5px orange;
}
.shadow2 {
text-shadow: 5px 5px pink;
}
.shadow3 {
color: red;
text-shadow: 7px -7px 20px green;
}
</style>
</head>
<body>
<h1 class="shadow1">HTML</h1>
<h1 class="shadow2">CSS</h1>
<h1 class="shadow3">자바스크립트</h1>
</body>
</html>텍스트 선긋기 속성
<!DOCTYPE html>
<!-- 텍스트 선긋기 속성 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-decoration</title>
</head>
<body>
<h1>text-decoration 속성</h1>
<p style="text-decoration:none">none</p>
<p style="text-decoration:underline">underline</p>
<p style="text-decoration:overline">overline</p>
<p style="text-decoration:line-through">line-though</p>
</body>
</html>마무리
오늘은 html과 css에 대해 배우는 시간을 가졌다.
확실히 html만 작성했을 때보다 css로 살을 붙이니 더 있어보이고 재미가 붙은 거 같다.
