2020년 12월 02일
업데이트:
웹문서 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05_웹문서구조2</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="header">
<div id="header-1" class="header-float">
<!-- img, a -->
<a href="05_웹문서구조2.html">
<img id="home-logo" src="logo1.jpg">
</a>
</div>
<div id="header-2" class="header-float">
<form id="search-form" action="#" method="get">
<!-- 내부에 작성된 input 태그의 값을 지정된 주소로 전달하는 역할 -->
<div id="search-text-area">
<input type="text" id="search-input" name="search-input">
</div>
<div id="search-btn-area">
<button type="submit" id="search-btn">검색</button>
</div>
</form>
</div>
<div id="header-3" class="header-float"></div>
</div>
<div class="nav">
<!-- 메인 메뉴 목록 -->
<ul id="main-menu">
<li> <a href="#">Home</a> </li>
<li> <a href="#">Front-End</a>
<!-- 서브 메뉴 -->
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</li>
<li>
<a href="#">게시판</a>
<ul>
<li><a href="#">공지사항</a></li>
<li><a href="#">자유게시판</a></li>
<li><a href="#">질문게시판</a></li>
</ul>
</li>
<li> <a href="#">Q&A</a> </li>
</ul>
</div>
<div class="content">
<div id="content-1" class="content-float"></div>
<div id="content-2" class="content-float">
</div>
<div id="content-3" class="content-float">
<div id="content-login">
<form id="login-form" name="login-form" method="get">
<!-- ID/PWD 입력창을 묶는 div -->
<div id="login-input-id-pwd">
<!-- 아이디 입력 영역 -->
<div id="login-input-id">
<input type="text" id="input-id" name="input-id"
placeholder="ID를 입력하세요.">
</div>
<!-- 비밀번호 입력 영역 -->
<div id="login-input-pwd">
<input type="password" id="input-pwd" name="input-pwd"
placeholder="PWD를 입력하세요.">
</div>
</div>
<!-- 로그인 버튼 영역 -->
<div id="login-input-btn">
<button type="submit" id="login-btn">로그인</button>
</div>
</form>
<!-- 회원가입, ID/PWD 찾기 영역 -->
<div id="siginUp-find">
<a href="#">회원가입</a>
<a href="#">ID/PWD 찾기</a>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
/* 05_웹문서구조2.html에 사용할 css 파일 */
/* div 경계선 확인 + box-sizing 조정 */
div{
/* border: 1px solid rgb(206, 139, 131); */
box-sizing: border-box;
}
/* 전체를 감싸고 있는 div */
.wrapper{
width: 1000px;
height: 800px;
/* 해당 요소를 가로 가운데 정렬 */
margin: auto;
}
/* header */
.header{
width: 100%;
height: 20%;
}
/* header 내부 div 수평 분할 */
.header-float{
height: 100%;
float: left;
}
/* header 내부 div 영역 크기 지정 */
#header-1{
width: 20%;
position : relative;
/* 자식 요소에 top, bottom, left, right를 이용한 상대적 위치 지정 가능 */
}
#header-2{
width: 65%;
position: relative;
}
#header-3{ width: 15%; }
/* 홈 로고 스타일 */
#home-logo{
width : 50%;
height : auto;
/* 기존 이미지 크기에서 width가 절반으로 감소
-> heigth는 width 감소 비율 만큼 자동으로 감소 */
position : absolute;
margin : auto;
top: 0; /* 부모 요소 상단에서 0px 만큼 떨어져라 */
bottom : 0;
left : 0;
right : 0;
}
/* nav */
.nav{
width : 100%;
height : 5%;
}
/* content */
.content{
width : 100%;
height : 55%;
}
.content-float{
height : 100%;
float : left;
}
/* content 영역 크기 지정 */
#content-1 { width : 15%; }
#content-2 { width : 65%; }
#content-3 { width : 20%; }
/* footer */
.footer{
width : 100%;
height : 20%;
}
/*************** 검색창 관련 스타일 ********************/
/* 검색창 전체 */
#search-form {
/* border : 1px solid red; */
width : 80%;
height: 20%;
position: absolute;
margin : auto;
top : 0;
bottom : 0;
left : 0;
right : 0;
}
/* 검색 입력 영역 */
#search-text-area{
width : 80%;
height: 100%;
float : left; /* 수평 분할, 왼쪽 정렬 */
}
/* 검색 input 창 */
#search-input {
width : 100%;
height: 100%;
box-sizing : border-box;
/* input 태그는 기본적으로 고유한 border, padding 값이 존재하여
width, height를 그냥 지정할 경우 영역을 초과하게 된다.
-> box-sizing : border-box;를 이용하여 문제 해결. */
}
/* 검색 버튼 영역 */
#search-btn-area{
width : 20%;
height: 100%;
float : left; /* 수평 분할, 왼쪽 정렬 */
}
/* 검색 버튼 */
#search-btn{
width : 100%;
height : 100%;
box-sizing: border-box;
}
/* 로그인 영역 */
#content-login{
width: 100%;
height: 30%;
}
#login-form{
width: 100%;
height: 80%;
}
#siginUp-find{
width: 100%;
height: 20%;
text-align: center;
}
#login-input-id-pwd{
width: 65%;
height: 100%;
float:left;
}
#login-input-btn{
width: 35%;
height: 100%;
float:left;
}
#login-input-id{
width:100%;
height:50%;
}
#login-input-pwd{
width:100%;
height:50%;
}
#input-id{
width:100%;
height:100%;
box-sizing: border-box;
}
#input-pwd{
width:100%;
height:100%;
box-sizing: border-box;
}
#login-btn{
width:100%;
height:100%;
}
/* ********************nav 스타일 *******************************/
/* 메인 메뉴(ul) 스타일 지정 */
#main-menu{
/* ul 태그 고유의 margin, padding 제거 */
padding : 0;
margin : 0;
/* nav 전체에 맞는 크기 지정 */
width : 100%;
height : 100%;
/* 메인 메뉴 불렛 기호 삭제 */
list-style-type: none;
}
/* 메인 메뉴(li) 스타일 지정 */
#main-menu > li{
/* 메인 메뉴 왼쪽 정렬 */
float : left;
/* 메인 메뉴 카테고리 사이즈 지정 */
width : 25%;
height : 100%;
background-color: rgba(161, 154, 224, 0.527);
/* 메인 메뉴 글씨 상하 가운데 조정*/
line-height: 40px;
position: relative;
}
#main-menu li a{
/* #main-menu의 후손 중
li태그의 후손 중 a 태그 선택 */
/* a 태그의 형식을 inline-block으로 변경하여 width, height 지정을 가능하도록 함 */
display : inline-block;
width : 100%;
/* 글씨 가운데 정렬 */
text-align: center;
/* a 태그 밑줄 지우기 */
text-decoration: none;
/* font 스타일 지정 */
font-size : 16px;
font-weight: bold;
font-family: "굴림";
color : white;
}
#main-menu li:hover{
/* #main-menu 요소 후손 중 li 태그에 마우스가 올라갔을 때 */
/* li 태그 배경색 변경 */
background-color: #3A263A;
}
/* 서브메뉴(ul) 스타일 지정*/
#main-menu > li > ul {
/* ul 태그 고유 영역 제거 */
padding : 0px;
margin : 0px;
/* 서브메뉴 불렛 제거 */
list-style-type: none;
/* 배경색 추가 */
background-color: #804F69;
/* 서브메뉴를 투명하게 */
opacity: 0;
position : absolute;
width : 100%;
}
/* 서브 메뉴에 있는 a 태그 숨기기 */
#main-menu ul > li > a {
opacity: 0;
/* opacity : (투명)0 ~ 1(불투명) */
}
/* 서브메뉴 숨기기 */
#main-menu ul > li {
height : 0;
line-height: 0;
}
#main-menu > li:hover ul, #main-menu > li:hover ul a {
/* 마우스가 올라간 메인 메뉴의 후손 중
ul 태그가 있고 그 ul의 후손 중 a 태그를 선택 */
opacity: 1;
}
#main-menu li:hover ul li {
/* 서브 메뉴의 영역 크기를 지정하여 눈에 보이게 하기 */
height: 40px;
line-height: 40px;
}
/* 서브메뉴 슬라이드 효과*/
#main-menu li {
transition-duration: 0.2s;
}
/* 서브메뉴 배경 fade in-out 효과 */
#main-menu li ul {
transition-duration: 0.2s;
}
트랜지션
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>19_트랜지션</title>
<style>
.test{
width : 100px;
height : 100px;
border : 1px solid black;
background-color: rgb(235, 156, 156);
}
/* 마우스 오버(:hover) 시 2초의 시간동아
배경색을 노란색으로 변경 */
.tran1:hover{
background-color: yellow;
transition-duration: 5s;
}
/* 마우스 오버 해제 시 2초의 시간동안
원래색인 빨간색으로 변경 */
.tran1{
transition-duration: 10s;
}
/* 마우스 오버 시 배경색을 2초 동안 파란색
너비를 3초 동안 200px, 높이를 1초 동안 200px
한바퀴 회전을 3초동안 변형 */
.tran2:hover{
background-color: blue;
width : 200px;
height: 200px;
transform : rotateZ(3600deg);
/* 트랜지션을 지정할 속성을 선택 */
transition-property: background-color, width, height, transform;
/* 지정된 속성 순서대로 시간 지정 */
transition-duration: 2s, 3s, 1s, 3s;
}
.tran2{
/* 트랜지션을 지정할 속성을 선택 */
transition-property: background-color, width, height, transform;
/* 지정된 속성 순서대로 시간 지정 */
transition-duration: 2s, 3s, 1s, 3s;
}
/* 트랜지션 진행시간별 속도 지정 */
.tran3:hover{
width : 200px;
background-color: hotpink;
transition-duration: 5s;
transition-timing-function: ease-in-out;
}
/* 트랜지션 시간 지연 */
.tran4:hover{
transition-duration: 2s;
transform: rotateZ(1800deg);
transition-delay: 1s;
}
</style>
</head>
<body>
<h1>트랜지션</h1>
<p>시간에 따라 웹 요소의 스타일 속성이 조금씩 변화하게 하는 속성</p>
진행 시간 지정
<div class="test tran1"></div>
<hr>
속성별 진행 시간 지정
<div class="test tran2"></div>
<hr>
트랜지션 진행 별 속도 지정
<pre>
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cublic-bezier(n,n,n,n)
</pre>
<div class="test tran3"></div>
<hr>
트랜지션 시간 지연
<div class="test tran4"></div>
</body>
</html>
공유하기
Twitter Google+ LinkedIn
댓글남기기