01_display_div
display 속성 : vlock <-> inline 변경 가능
inline 속성
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/01_display_div.css" />
</head>
<body>
<!-- 줄 복사 : ctrl + d -->
<div class="box">홍길동</div>
<div class="box2">홍길동</div>
<div class="box3">홍길동</div>
</body>
</html>
더보기
/* id선택자 : #변수명, class선택자 : .변수명,
* : 전체 선택자, 태그 선택자 */
/* div 특징 : 블럭(block) 속성, 줄바꿈 발생, p태그, h1~h6 태그 */
/* span 특징 : 인라인(inline) 속성, 줄바꿈 없음, input태그, img 태그 등 */
/* width, height 속성 무시, 안에 컨텐츠(글)에 따라 크기가 정해진다. */
/* TODO : display 속성 : vlock <-> inline 변경 가능 */
.box {
width: 50px;
height: 50px;
background-color: blue;
display: inline;
}
.box2 {
width: 50px;
height: 50px;
background-color: red;
display: inline;
}
.box3 {
width: 50px;
height: 50px;
background-color: yellow;
/* display: inline; */
}
02_display_span
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/02_display_span.css" />
</head>
<body>
<span class="box">홍길동</span>
<span class="box2">홍길동</span>
<span class="box3">홍길동</span>
</body>
</html>
더보기
/* span : inline 속성, width/height 속성 무시, 글만큼 크기가 정해짐 */
.box {
background-color: blue;
/* block 속성 지정 */
display: block;
/* 가로크기 */
width: 50px;
/* 세로크기 */
height: 50px;
}
.box2 {
background-color: red;
/* block 속성 지정 */
display: block;
/* 가로크기 */
width: 50px;
/* 세로크기 */
height: 50px;
}
.box3 {
background-color: yellow;
/* block 속성 지정 */
display: block;
/* 가로크기 */
width: 50px;
/* 세로크기 */
height: 50px;
}
03_display_inline_block
배경 블럭 만들기 세로배치 가로배치 인라인블럭
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>세로배치 inline-block(인라인블럭)</title>
<link rel="stylesheet" href="./css/03_display_inline_block.css" />
</head>
<body>
<div class="box">대상 객체</div>
<div class="box2">대상 객체</div>
<div class="box3">대상 객체</div>
</body>
</html>
더보기
/* 자동 정렬 : ctrl + alt + l */
/* inline-block(인라인블럭) : div 속성 + 줄바꿈 없음(속성) */
/* 활용 : 세로배치 -> 가로배치 디자인 적용하고자 할때 사용 */
/* 예) ul - li(block 속성, 세로메뉴) -> 가로메뉴(위의 속성 고려) */
.box {
/* 가로크기 */
width: 100px;
/* 세로크기 */
height: 100px;
/* 배경색 */
background-color: red;
/* 바깥여백 */
margin: 20px;
/* display 속성 */
display: inline-block;
}
.box2 {
/* 가로크기 */
width: 200px;
/* 세로크기 */
height: 100px;
/* 배경색 */
background-color: blue;
/* 바깥여백 */
margin: 20px;
/* display 속성 */
display: inline-block;
}
.box3 {
/* 가로크기 */
width: 200px;
/* 세로크기 */
height: 300px;
/* 배경색 */
background-color: yellow;
/* 바깥여백 */
margin: 20px;
/* display 속성 */
display: inline-block;
}
04_display_none
드롭다운 메뉴/더미객체 만들기
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/04_display_none.css" />
</head>
<body>
<span>더미 객체</span>
<div id="box">대상 객체</div>
<span>더미 객체</span>
</body>
</html>
더보기
/* id선택자 : #변수명 {} */
/* display: none <-> block (활용 : 드롭다운 메뉴) */
#box {
/* 배경색 */
background-color: yellow;
/* 가로 */
width: 100px;
/* 세로 */
height: 100px;
/* display 속성 */
/* 화면에서 보이지 않게 만듬 */
display: none;
}
05_exam_display
둥근 외곽선 이미지 가로 배치
더보기
<!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/05_exam_display.css">
</head>
<body>
<h3>이미지 갤러리</h3>
<ul>
<li><img src="./img/cat.jpg" alt="고양이"></li>
<li><img src="./img/bee.jpg" alt="벌"></li>
<li><img src="./img/rabit.jpg" alt="토끼"></li>
</ul>
</body>
</html>
더보기
ul {
/* 배경색 */
background-color: #f5f7e4;
/* 외곽선 */
/* border: 선두께 선스타일 선색상 */
border: 1px solid #cccccc;
/* 둥근 사각형(모서리) */
border-radius: 10px;
/* 가로 크기 */
width: 640px;
/* 안쪽 여백 */
padding: 30px;
}
li {
/* 앞에 목록 점 없애기 */
list-style-type: none;
/* 바깥여백 - 왼쪽 */
margin-left: 20px;
/* display : 가로 배치 */
display: inline-block;
}
06_exam_menu
세로 가로 메뉴
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>세로 가로 메뉴</title>
<link rel="stylesheet" href="./css/06_exam_menu.css" />
</head>
<body>
<h3>1. 세로 메뉴</h3>
<ul id="v_menu">
<li>CEO 인사말</li>
<li>조직도</li>
<li>전화번호 안내</li>
<li>찾아오시는 길</li>
</ul>
<h3>2. 가로 메뉴</h3>
<ul id="h_menu">
<li class="menus">회사소개</li>
<li>|</li>
<li class="menus">제품안내</li>
<li>|</li>
<li class="menus">고객센터</li>
<li>|</li>
<li class="menus">매장안내</li>
</ul>
</body>
</html>
더보기
li {
/* 앞에 점 없애기 */
list-style-type: none;
}
/* 세로 메뉴 디자인 */
#v_menu {
/* 가로 */
width: 150px;
}
/* 후손선택자 */
#v_menu li {
/* 안쪽 여백 */
padding: 5px;
/* 외곽선 : 아래 : 선크기 선스타일(점선) 선색상 */
border-bottom: 1px dotted black;
}
/* 가로 메뉴 디자인 */
/* 후손선택자 */
#h_menu li {
/* display : 가로배치 */
display: inline-block;
}
.menus {
/* 글자색 */
color: green;
/* 바깥여백 : 왼쪽/오른쪽 */
margin-left: 20px;
margin-right: 20px;
}
07_float
float 좌/우 배치 속성
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/07_float.css" />
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
더보기
/* float : 좌/우 배치 속성, div 박스들을 배치, 중앙배치없음 */
.box {
/* 가로 */
width: 100px;
/* 세로 */
height: 100px;
/* 배경색 */
background-color: red;
/* 바깥여백 */
margin: 10px;
/* 좌로 배치(왼쪽 정렬) */
float: left;
}
.box2 {
/* 가로 */
width: 100px;
/* 세로 */
height: 100px;
/* 배경색 */
background-color: blue;
/* 바깥여백 */
margin: 10px;
/* 우로 배치(오른쪽 정렬) */
float:right;
}
08_exam_float
float 사진 및 테두리 만들기
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>float 사진 및 테두리 만들기</title>
<link rel="stylesheet" href="./css/08_exam_float.css" />
</head>
<body>
<!-- 힌트 : #image - float:left -->
<!-- #desc - float:left -->
<!-- #menu - float:right -->
<div id="image">
<img src="./img/foxtail.jpg" alt="강아지풀" />
</div>
<div id="desc">
<h3>강아지풀</h3>
<p>길가나 들에서 자라는 풀로써 꽃은 9월에 피고 녹색 또는 자주색입니다.</p>
</div>
<ul id="menu">
<li>강이지풀</li>
<li>패랭이풀</li>
<li>할미꽃</li>
<li>코스모스</li>
</ul>
</body>
</html>
더보기
/* float 속성 특징 : float 걸린 태그는 떠 있음 */
/* float 밑에 있는 태그들이 높이가 없다고 가정하여 위로 말려 올라옴(겹침현상) */
/* 여백 초기화 */
* {
padding: 0;
margin: 0;
}
li {
/* 앞에 점에 없애기 */
list-style-type: none;
}
#image {
/* 외곽선 : border : 선두께 선스타일 선색상 */
border: 1px solid red;
/* 왼쪽 정렬 */
float: left;
}
#desc {
/* 가로 */
width: 300px;
/* 바깥여백 - 왼쪽 */
margin-left: 30px;
/* 외곽선 : border : 선두께 선스타일 선색상 */
border: 1px solid red;
/* 왼쪽 정렬 */
float: left;
}
#menu {
/* 외곽선 : border : 선두께 선스타일 선색상 */
border: 1px solid red;
/* 오른쪽 정렬 */
float: right;
}
09_exam_float2
더보기
<!-- 09_exam_float2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>float 로고 및 글자 정렬</title>
<link rel="stylesheet" href="./css/09_exam_float2.css" />
</head>
<body>
<div id="logo">
<img src="./img/logo2.png" />
</div>
<ul id="menu">
<li class="item">수목원소개</li>
<li>|</li>
<li class="item">방문안내</li>
<li>|</li>
<li class="item">고객센터</li>
<li>|</li>
<li class="item">공지사항</li>
</ul>
<div id="main_image">
<img src="./img/main.jpg" />
</div>
</body>
</html>
더보기
li {
/* 점 없애기 */
list-style-type: none;
}
/* 수목원 로고 : 왼쪽정렬 */
#logo {
/* 왼쪽 정렬 */
float: left;
}
/* 메뉴 : 오른쪽 정렬 */
#menu {
/* 오른쪽 정렬 */
float: right;
/* 글자크기 */
font-size: 14px;
/* 바깥여백 - 위쪽 */
margin-top: 20px;
}
/* 메뉴 - 가로배치 */
#menu li {
display: inline-block;
}
/* 본문 이미지 : float 효과 제거 */
#main_image {
/* float 효과 제거하는 속성 */
clear: both;
/* 안쪽 여백 - 위쪽 */
padding-top: 20px;
}
10_form_display
주문양식
더보기
<!-- 10_form_display.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>주문양식</title>
<link rel="stylesheet" href="./css/10_form_display.css" />
</head>
<body>
<div id="container">
<!-- 주문 정보 시작 -->
<form name="order">
<!-- fieldset : 외곽 박스를(그룹핑) 그려주는 html 태그 -->
<fieldset>
<!-- legend : 외곽 박스의 제목 html 태그 -->
<legend>주문 정보</legend>
<ul>
<!-- 이름 시작 -->
<li>
<!-- 유효성 체크 : 필수, 최대자리수(maxlength) 8자리 -->
<label class="field" for="billingName">이름 : </label>
<input
type="text"
class="input-box"
id="billingName"
name="billingName"
maxlength="8"
required
/>
</li>
<!-- 이름 끝 -->
<!-- 연락처 시작 -->
<li>
<!-- 유효성 체크 : 필수(required), 최소자리수(minlength) 8자리 -->
<label class="field" for="billingTel">연락처 : </label>
<input
type="text"
class="input-box"
id="billingTel"
name="billingTel"
minlength="8"
required
/>
</li>
<!-- 연락처 끝 -->
<!-- 주소 시작 -->
<li>
<label class="field" for="billingAddr">주소 : </label>
<input
type="text"
class="input-box"
id="billingAddr"
name="billingAddr"
/>
</li>
<!-- 주소 끝 -->
</ul>
</fieldset>
</form>
<!-- 주문 정보 끝 -->
<!-- 배송 정보 시작 -->
<form name="ship">
<fieldset>
<legend>배송 정보</legend>
<ul>
<!-- 배송정보 시작 -->
<li>
<input type="checkbox" id="shippingInfo" name="shippingInfo" />
<label for="bill_info" class="check"
>주문 정보와 배송 정보가 같습니다</label
>
</li>
<!-- 배송정보 끝 -->
<!-- 이름 시작 -->
<li>
<!-- 유효성 체크 : 필수(required), 최대자리수(maxlength) 8자리 -->
<label class="field" for="shippingName">이름 : </label>
<input
type="text"
class="input-box"
id="shippingName"
name="shippingName"
maxlength="8"
required
/>
</li>
<!-- 이름 끝 -->
<!-- 연락처 시작 -->
<li>
<!-- 유효성 체크 : 필수(required), 최소자리수(minlength) 8자리 -->
<label class="field" for="shippingTel">연락처 : </label>
<input
type="text"
class="input-box"
id="shippingTel"
name="shippingTel"
minlength="8"
required
/>
</li>
<!-- 연락처 끝 -->
<!-- 주소 시작 -->
<li>
<!-- 유효성 체크 : 필수(required) -->
<label class="field" for="shippingAddr">주소 : </label>
<input
type="text"
class="input-box"
id="shippingAddr"
name="shippingAddr"
required
/>
</li>
<!-- 주소 끝 -->
</ul>
</fieldset>
<!-- 결제 버튼 시작 -->
<button type="submit" class="order">결제하기</button>
<!-- 결제 버튼 끝 -->
</form>
<!-- 배송 정보 끝 -->
</div>
</body>
</html>
더보기
/* 주문 양식 css */
/* 여백 초기화 */
* {
margin: 0;
padding: 0;
}
/* 목록 점 없애기 */
ul {
list-style-type: none;
}
legend {
/* 1em(rem) == 16px (반응형 웹 디자인 요소) */
font-size: 1.2em;
font-weight: bold;
margin-left: 20px;
}
fieldset {
/* 외곽선 */
border: 1px solid lightgray;
/* 바깥여백 - 아래쪽 */
margin-bottom: 35px;
/* 안쪽여백(축약형) : 상 우 하 좌(시계방향) */
padding: 30px 20px 30px 30px;
}
form {
/* 가로 */
width: 520px;
/* 세로 : auto : 안에 컨텐츠 내용물만큼 자동 증가(자식요소만큼 자동증가) */
height: auto;
/* 안쪽 여백 - 왼쪽 */
padding-left: 10px;
/* TODO: 중앙 정렬 (div 등) */
/* 바깥여백 : 상/하 좌/우 */
/* 사용법 : margin: 숫자px auto */
margin: 50px auto;
}
/* 라벨 */
.field {
/* 가로 */
width: 60px;
/* margin(축약식2): 상/하 좌/우 */
margin-right: 15px;
/* 가로배치 */
display: inline-block;
/* 글자 크기 : 세로크기 */
font-size: 0.9em;
/* 굵은 글씨 */
font-weight: bold;
/* 글자 오른쪽 정렬 */
text-align: right;
}
/* 입력양식 */
.input-box {
/* 가로배치 */
display: inline-block;
/* 가로 */
width: 350px;
/* 세로 */
height: 35px;
/* 안쪽여백 */
padding: 5px;
/* 바깥여백(축약식2): 상/하 좌/우 */
margin: 10px 0;
}
/* 제출버튼 */
.order {
/* 가로 */
width: 100%;
/* 외곽선 */
border: 1px solid #aaaaaa;
/* 배경색 */
background-color: #e9e9e9;
/* 글자크기 */
font-size: 1em;
/* 굵은글씨 */
font-weight: bold;
/* 안쪽여백 */
padding: 20px;
}
11_exam_form_register
회원가입 양식
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>회원가입 양식</title>
<link rel="stylesheet" href="./css/11_exam_form_register.css" />
</head>
<body>
<!-- 힌트 : #container { width: 600px; margin:0 auto } -->
<!-- 라벨 .field { 그전에 샘플에 속성:값 } -->
<!-- 입력양식 .input-box { 그전에 샘플에 속성:값 } -->
<!-- 버튼 (#buttons > li) : 세로배치 -> 가로배치 (display:inline-block) -->
<div id="container">
<h1>회원 가입</h1>
<form action="#" id="register">
<!-- 입력란 시작 -->
<ul id="user-info">
<li>
<!-- label 클릭하면 input 양식에 포커스가 옴 -->
<!-- input - required : 필수입력 -->
<label for="user-id" class="field">아이디</label>
<input
type="text"
id="user-id"
class="input-box"
placeholder="영문과 숫자로 입력"
required
/>
</li>
<!-- ctrl + d : 줄복사/블록복사 -->
<!-- ctrl + y : 줄삭제 -->
<!-- ctrl + alt + l : 자동 정렬 -->
<li>
<!-- 비밀번호 -->
<!-- 유효성 체크 : 자리수, 필수입력 -->
<label for="user-pw1" class="field">비밀번호</label>
<input
type="password"
id="user-pw1"
class="input-box"
placeholder="8자리 이상 비밀번호 적기"
minlength="8"
required
/>
</li>
<li>
<!-- 비밀번호 -->
<!-- 유효성 체크 : 자리수, 필수입력 -->
<label for="user-pw2" class="field">비밀번호 확인</label>
<input
type="password"
id="user-pw2"
class="input-box"
placeholder="8자리 이상 비밀번호 적기"
minlength="8"
required
/>
</li>
<li>
<!-- email -->
<!-- input type = email -> 유효성체크 -->
<label for="user-id" class="field">이메일</label>
<input type="email" id="user-id" class="input-box" required />
</li>
<li>
<!-- 전화번호 입력 -->
<!-- 숫자입력 : input type="number" -->
<label for="phone" class="field">전화번호</label>
<input type="number" id="phone" class="input-box" required />
</li>
</ul>
<!-- 입력란 끝 -->
<!-- 서브밋/리셋 버튼 시작 -->
<ul id="buttons">
<!-- 서브밋 버튼 -->
<li>
<button type="submit" class="btn btnBlack">가입하기</button>
</li>
<!-- 리셋 버튼 -->
<li>
<button type="reset" class="btn btnGray">취소</button>
</li>
</ul>
<!-- 서브밋/리셋 버튼 끝 -->
</form>
</div>
</body>
</html>
더보기
/* 문제 풀이 */
#container {
/* 가로 */
width: 600px;
/* 중앙 정렬 */
margin: 50px auto;
/* 글자 중앙 정렬 */
text-align: center;
}
ul {
/* 목록 점 없애기 */
list-style-type: none;
}
/* 라벨 디자인 */
.field {
/* 가로 */
width: 60px;
/* margin(축약식2): 상/하 좌/우 */
margin-right: 15px;
/* 가로배치 */
display: inline-block;
/* 글자 크기 : 세로크기 */
font-size: 0.9em;
/* 굵은 글씨 */
font-weight: bold;
/* 글자 오른쪽 정렬 */
text-align: right;
}
/* 입력양식 디자인 */
.input-box {
/* 가로배치 */
display: inline-block;
/* 가로 */
width: 350px;
/* 세로 */
height: 35px;
/* 안쪽여백 */
padding: 5px;
/* 바깥여백(축약식2): 상/하 좌/우 */
margin: 10px 0;
}
/* 버튼 디자인 */
/* 자식선택자 사용 */
#buttons > li {
/* 세로 -> 가로 배치 */
display: inline-block;
}
button {
/* 가로 */
width: 250px;
/* 세로 */
height: 50px;
/* 외곽선 */
border: 1px solid white;
/* 글자크기 */
font-size: 0.9em;
/* 바깥여백 - 오른쪽 */
margin-right: 10px;
}
12_position_absolute
절대 좌표 겹치기
더보기
<!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/12_position_absolute.css" />
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
더보기
/* position: absolute(절대좌표) , */
/* 특징 : 웹브라우저 화면에 좌표가 생김,
left/top 이용해서 태그를 이동시킬 수 있음 */
/* 참고 : position:static(기본, 생략, 좌표없음),
html 기본 속성 : 태그가 코딩된 순서대로 밑으로 밀려서 화면에 표시됨
*/
.box {
/* 가로 */
width: 100px;
/* 세로 */
height: 100px;
/* 배경색 */
background-color: red;
/* 절대좌표(absolute) */
position: absolute;
/* 왼쪽(x좌표) */
left: 0;
/* 위쪽(y좌표) */
top: 0;
/* 겹칠때 위에 올라오도록 우선순위를 정하는 속성 */
/* 규칙 : 수치가 클수록 위, 수치가 작을수록 아래 */
z-index: 30;
}
.box2 {
width: 100px;
height: 100px;
background-color: yellow;
/* 절대 좌표 */
position: absolute;
/* 왼쪽(x좌표) */
left: 40px;
/* 위쪽(y좌표) */
top: 40px;
z-index: 20;
}
.box3 {
width: 100px;
height: 100px;
background-color: blue;
/* 절대 좌표 */
position: absolute;
/* 왼쪽(x좌표) */
left: 80px;
/* 위쪽(y좌표) */
top: 80px;
z-index: 10;
}
13_position_relative
상대 좌표
더보기
<!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/13_position_relative.css" />
</head>
<body>
<p>안녕하세요. 홍길동입니다.</p>
<p>안녕하세요. 홍길동입니다.</p>
<p>안녕하세요. 홍길동입니다.</p>
<div class="abox"></div>
<div class="rbox"></div>
</body>
</html>
더보기
/* 상대좌표(relative) 예제 */
/* 특징 : 현재 태그가 있는 위치부터 (0,0) 시작됨 */
/* vs 절대좌표 : 0,0 (웹브라우저 왼쪽/위 모서리) */
/* 절대좌표로 설정된 박스 */
.abox {
/* 가로 */
width: 100px;
/* 세로 */
height: 100px;
/* 배경색 */
background-color: red;
/* 절대좌표 */
position: absolute;
/* 왼쪽 */
left: 0;
/* 위쪽 */
top: 0;
}
/* 상대좌표로 설정된 박스 */
.rbox {
/* 가로 */
width: 100px;
/* 세로 */
height: 100px;
/* 배경색 */
background-color: blue;
/* 상대좌표 */
position: relative;
/* 왼쪽 */
left: 0;
/* 위쪽 */
top: 0;
}
14_pos_relative_absolute
절대 좌표 박스 예제
더보기
<!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/14_pos_relative_absolute.css" />
</head>
<body>
<!-- 줄복사 : ctrl + d -->
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<div class="parent">
<div class="box"></div>
<div class="box2"></div>
</div>
</body>
</html>
더보기
/* 부모(relative) + 자식(absolute) 같이 사용하면 현상? */
/* TODO: 자식 div 태그에 absolute 의 (0,0) 웹브라우저가 아니라,
TODO: 부모 div 박스의 왼쪽/위 모서리로 (0,0) 변경됨
*/
/* 부모 박스 */
.parent {
/* 가로 */
width: 500px;
/* 세로 */
height: 500px;
/* 외곽선 */
border: 1px solid gray;
/* 상대좌표 : 부모 */
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: red;
/* 절대좌표 */
position: absolute;
/* 왼쪽(x좌표) */
left: 50px;
/* 위쪽(y좌표) */
top: 50px;
}
15_position_fixed
fixed 메뉴 고정 본문 글자 띄우기
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>fixed 메뉴 고정 본문 글자 띄우기</title>
<link rel="stylesheet" href="./css/15_position_fixed.css" />
</head>
<body>
<!-- 메뉴 -->
<div class="top-bar"></div>
<!-- 본문 -->
<div class="container">
<!-- 줄복사 : ctrl + d -->
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
</div>
</body>
</html>
더보기
/* fixed (메뉴 고정으로 많이 사용) */
/* 주의점 : 고정되면 아래 태그가 위로 말려 올라옴(본문과 겹침 현상) */
/* 메뉴 */
.top-bar {
/* 세로 */
height: 50px;
/* 배경색 */
background-color: red;
/* 고정(fixed), 좌표 사용 가능(left/top/right/bottom) */
position: fixed;
/* 왼쪽(x좌표) */
left: 0;
/* 위쪽(y좌표) */
top: 0;
/* 오른쪽(-x좌표) */
right: 0;
}
/* 본문 */
.container {
/* 바깥여백 - 위 */
margin-top: 100px;
}
16_position_sticky
position : sticky 고정 좌표
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>position : sticky 고정 좌표</title>
<link rel="stylesheet" href="./css/16_position_sticky.css" />
</head>
<body>
<!-- 메뉴 -->
<div class="top-bar"></div>
<!-- 본문 -->
<div class="container">
<!-- 줄복사 : ctrl + d -->
<!-- 자동정렬 : ctrl + alt + l -->
<p>안녕하세요 장길산입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
<p>안녕하세요 홍길동입니다.</p>
</div>
</body>
</html>
더보기
/* position : sticky (고정) */
.top-bar {
/* 세로 */
height: 50px;
/* 배경색 */
background-color: blue;
/* 고정 , 좌표 부활(left/top/right/bottom) */
position: sticky;
/* 위쪽(y좌표) */
top: 0;
}
17_center
애니메이션 함수 transform 중앙 배치
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>애니메이션 함수 transform 중앙 배치</title>
<link rel="stylesheet" href="./css/17_center.css" />
</head>
<body>
<div class="container">
<h1>요소의 중앙 배치</h1>
</div>
</body>
</html>
더보기
body {
/* 배경색 */
background-color: pink;
}
.container {
/* 가로 */
width: 500px;
/* 세로 */
height: 250px;
/* 배경색 */
background-color: orange;
/* 절대좌표 */
position: absolute;
/* 왼쪽(x좌표) */
left: 50%;
/* 위쪽(y좌표) */
top: 50%;
/* 애니메이션 함수 : div 를 위치 이동시키는 함수 */
/* 보정 : 박스의 가로/세로 크기의 반만큼 위치 이동해야 중심이 중앙에 위치함 */
/* 사용법 : transform: translate(가로크기, 세로크기) */
transform: translate(-50%, -50%);
}
18_exam_menu
최상단 메뉴
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>최상단 메뉴</title>
<link rel="stylesheet" href="./css/18_exam_menu.css" />
</head>
<body>
<!-- 최상단 메뉴(좌 로고 , 우 소메뉴) 시작-->
<!-- float 쓰면 공간이 없는것으로 html 간주 -->
<div id="head">
<!-- 좌측 로고 이미지 -->
<div id="logo">
<img src="./img/logo.png" alt="회사로고" />
</div>
<!-- 우측 소메뉴 -->
<div id="top">로그인 | 회원가입 | 공지사항</div>
</div>
<!-- 최상단 메뉴(좌 로고 , 우 소메뉴) 끝-->
<!-- 하단 대메뉴 시작 -->
<ul id="menu">
<li class="item">HTML</li>
<li>|</li>
<li class="item">CSS</li>
<li>|</li>
<li class="item">Javascript</li>
<li>|</li>
<li class="item">Python</li>
<li>|</li>
<li class="item">PHP</li>
<li>|</li>
<li class="item">Java</li>
</ul>
<!-- 하단 대메뉴 끝 -->
</body>
</html>
더보기
/* 여백 초기화 */
* {
padding: 0;
margin: 0;
}
/* 목록 점 없애기 */
li {
list-style-type: none;
}
/* 로고 디자인 */
#logo {
/* 왼쪽 배치 */
float: left;
/* 외곽선 */
border: 1px solid red;
/* 바깥여백 - 위 */
margin-top: 20px;
/* 바깥여백 - 아래 */
margin-bottom: 10px;
/* 바깥여백 - 왼쪽 */
margin-left: 20px;
}
/* 소메뉴 디자인 */
#top {
/* 오른쪽 배치 */
float: right;
/* 외곽선 */
border: 1px solid red;
/* 바깥여백 - 위 */
margin-top: 30px;
/* 바깥여백 - 오른쪽 */
margin-right: 20px;
}
/* 대메뉴 */
#menu {
/* float 영향 제거 */
clear: both;
/* 배경색 */
background-color: #443e58;
/* 글자색 */
color: white;
/* 글자 중앙 정렬 */
text-align: center;
/* 글자 크기 */
font-size: 20px;
/* 세로크기 */
height: 40px;
/* 안쪽 여백 - 위 */
padding-top: 15px;
}
/* 세로 -> 가로 배치 */
#menu li {
display: inline-block;
}
.item {
/* 바깥여백 - 오른쪽 */
margin-right: 30px;
/* 바깥여백 - 왼쪽 */
margin-left: 30px;
}
19_line_height_center
박스 안에 글자 중앙 정렬
더보기
<!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/19_line_height_center.css" />
</head>
<body>
<div class="wrapper">
<h1>Lorem Ipsum Dolor</h1>
</div>
</body>
</html>
더보기
/* 박스 안에 글자 세로 중앙 정렬 */
.wrapper {
/* 가로 */
width: 500px;
/* 외곽선 */
border: 1px solid lightgray;
}
h1 {
/* 글자 가로 중앙 정렬 */
text-align: center;
/* 배경색 */
background-color: lightskyblue;
/* 글자색 */
color: white;
/* 세로 */
height: 100px;
/* TODO: line-height(자간, 줄간격)
line-height == height (글자 세로 중앙 정렬)
*/
line-height: 100px;
}
20_vertical_align
이미지 + 텍스트 세로 중앙 정렬
더보기
<!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/20_vertical_align.css" />
</head>
<body>
<div class="cont3">
<img src="./img/bee.jpg" alt="벌" />
<span>텍스트, 이미지 둘다 적용</span>
</div>
</body>
</html>
더보기
img {
/* 가로 */
width: 100px;
/* 세로 */
height: 100px;
}
.cont3 img,
.cont3 span {
/* 이미지 + 텍스트 세로 중앙 정렬 */
/* TODO: 주의점 : 이미지 , 텍스트 모두 적용해야함 */
/* vertical-align: middle[top(위),bottom(아래)] */
vertical-align: middle;
}
21_exam_login_image
라벨 + 아이디 로그인 창
더보기
<!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/21_exam_login_image.css" />
</head>
<body>
<fieldset>
<label>아이디: <input type="text" id="user_id" size="10" /> </label>
<input
type="image"
src="./img/login.png"
class="img-button"
alt="로그인"
/>
</fieldset>
</body>
</html>
더보기
#fieldset {
/* 가로 */
width: 30vw;
/* 중앙 정렬 */
margin: 0 auto;
}
label,
input {
/* 라벨 + 이미지 모두 세로 중앙 정렬 */
vertical-align: middle;
}
23_exam_poster
상품 소개 페이지 + 이미지 첨부 + 동영상 첨부 + 테이블
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<link rel="stylesheet" href="./css/23_exam_poster.css">
</head>
<body>
<!-- TODO : 힌트 : #container{ 가로중앙정렬 , 가로크기 } -->
<!-- TODO : 힌트 : table, th, td{ 선긋기, 선사이간격붙이기 } -->
<!-- TODO : 힌트 : th, td{ 안쪽여백 } -->
<div id="container">
<img src="img/tangerines.jpg" alt="레드향">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
<hr>
<h2>레드향 샐러드 레시피</h2>
<p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
<ol>
<li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
<li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
<li>드레싱 재료를 믹서에 갈아줍니다.</li>
<li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
</ol>
<video src="medias/salad.mp4" width="700" autoplay muted loop></video>
<hr>
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<colgroup>
<col style="background-color:#eee;">
<col>
<col span="2" style="width:150px">
<!-- span 속성을 사용해 합치기 전
<col style="width:150px">
<col style="width:150px">
-->
</colgroup>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</t>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
더보기
#container {
/* 중앙 정렬 */
margin: auto;
}
table,
th,
td {
/* 외곽선 */
/* border: 선두께 선스타일 색깔 */
border: 1px solid #222;
border-collapse: collapse;
}
th,
td {
/* 안쪽 여백 */
padding: 10px;
}
24_notice_reporter
팝업 포스터 이미지 좌표 이동 및 중지 속성
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>팝업 포스터 이미지 좌표 이동 및 중지 속성</title>
<link rel="stylesheet" href="./css/24_notice_reporter.css" />
</head>
<body>
<div id="container">
<h1>대학언론사 수습기자 모집</h1>
<h2>신입생 여러분을 기다립니다</h2>
<h3>모집분야</h3>
<ul>
<li>아나운서(0명) : 학내 소식을 라디오 방송으로 보도</li>
<li>오프닝쇼프로듀서(0명) : 라디오 방송 기획, 제작</li>
<li>엔지니어(0명) : 라디오 방송 녹음 및 편집</li>
</ul>
<h3>혜택</h3>
<ul>
<li>수습기자 활동 중 소정의 활동비 지급</li>
<li>정기자로 진급하면 장학금 지급</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>연습문제 3 - 코드 완성하기</title>
<link rel="stylesheet" href="./css/24_notice_reporter.css" />
</head>
<body>
<div id="container">
<h1>대학언론사 수습기자 모집</h1>
<h2>신입생 여러분을 기다립니다</h2>
<h3>모집분야</h3>
<ul>
<li>아나운서(0명) : 학내 소식을 라디오 방송으로 보도</li>
<li>오프닝쇼프로듀서(0명) : 라디오 방송 기획, 제작</li>
<li>엔지니어(0명) : 라디오 방송 녹음 및 편집</li>
</ul>
<h3>혜택</h3>
<ul>
<li>수습기자 활동 중 소정의 활동비 지급</li>
<li>정기자로 진급하면 장학금 지급</li>
</ul>
</div>
</body>
</html>
더보기
body {
background-color: #02233b;
}
/* background-image: url("이미지경로")
backgrund-repeat, background-posirion (좌표이동)
*/
#container {
/* 중앙 정렬 */
margin: auto;
/* 가로 */
width: 600px;
/* 세로 */
height: 700px;
/* 외곽선 */
border: 1px dotted gray;
/* 안쪽 여백 */
padding: 20px;
/* 배경색 */
/* TODO ------------ 배경 이미지------------ */
background-color: white;
/* 배경 이미지 넣기 */
background-image: url(../img/container.png);
/* 반복 이미지 중지 속성 */
background-repeat: no-repeat;
/* 배경 이미지 위치 이동 */
/* background-position: 가로위치 세로위치; */
background-position: 100% 100%;
}
img {
margin: 30px 10px 30px 180px;
}
h1 {
background-color: #004344;
color: white;
text-align: center;
padding: 20px;
}
h2 {
text-align: center;
font-style: italic;
margin-bottom: 50px;
}
h3 {
color: #cf3b00;
}
ul {
margin: 20px;
list-style-type: none;
}
li {
line-height: 30px;
}
'Visual Studio Code' 카테고리의 다른 글
| [JavaScript] chapter_01 (0) | 2023.08.16 |
|---|---|
| [HTML&CSS] chapter_04 (0) | 2023.08.09 |
| [HTML&CSS] chapter_02 (0) | 2023.08.07 |
| [HTML&CSS] chapter_01 (0) | 2023.08.07 |
| [HTML] chapter_03 (0) | 2023.08.04 |