37-1. 화면 구조 잡기
<!DOCTYPE html>
<html lang="en">
<head>
<title>화면을 나누자~</title>
<style>
div{
border : 1px solid red;
box-sizing : border-box;
}
/* 전체를 감싸는 div */
#wrap{
width : 1000px;
height : 800px;
margin : auto;
}
/* 크게 4등분 */
#wrap > div{width : 1000px;}
#header, #footer{height : 20%;}
#navigator{height : 5%;}
#content{height : 55%;}
/* 세부 div를 속성 */
/* 공통속성 */
#header > div, #content > div{
height : 100%;
float : left;
}
/* 각각의 요소들 가로길이를 정해주기 */
#header_1{width : 20%;}
#header_2{width : 65%;}
#header_3{width : 15%;}
#content_1{width : 15%;}
#content_2{width : 60%;}
#content_3{width : 25%;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="header_1"></div>
<div id="header_2"></div>
<div id="header_3"></div>
</div>
<div id="navigator"></div>
<div id="content">
<div id="content_1"></div>
<div id="content_2"></div>
<div id="content_3"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>37-2. footer 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<title>안녕 나는 footer야</title>
<style>
div{
box-sizing : border-box;
}
/* 전체를 감싸는 div속성 */
#footer{
width : 1000px;
height : 160px;
background-color : #FEE500;
}
/*----------------------------------------------------------------*/
/* 세부속성 */
#footer_1, #footer_2{
width : 100%;
}
#footer_1{
height : 20%;
background-color : #3A1D1DE7;
color : white;
}
#footer_2{
height : 80%;
}
/* footer_1의 a태그 속성 */
#footer_1 > a{
text-decoration : none;
font-weight : 650;
color : white;
margin : 15px;
vertical-align : middle; /* vertical-align은 안먹히는 요소가 있음 */
}
#footer_1 > a:hover{
color : forestgreen;
}
/* p태그에 대한 세부적인 속성들 */
#footer_2 > p{
width : 100%;
/* p태그의 특성상 두 개의 p태그 사이에 margin이 기본적으로 위, 아래 16px씩 들어가 있음 */
margin : 0;
box-sizing : border-box;
/* p태그의 테두리까지 부모의 20/80%로 지정해야 부모 영역안에 잘 담김 */
color : #000000 85%;
font-size : 12px;
font-weight : lighter;
}
#p1{
height : 80%;
padding-top : 12px;
padding-left : 15px;
}
#p2{
height : 20%;
text-align : center;
}
</style>
</head>
<body>
<div id="footer">
<div id="footer_1">
<a href="#">이용약관</a> |
<a href="#">개인정보처리방침</a> |
<a href="#">훈련비 게시</a>
</div>
<div id="footer_2">
<p id="p1">
강남지원 1관 : 서울특별시 강남구 테헤란로14길 6 남도빌딩 2F, 3F, 4F, 5F, 6F <br>
강남지원 2관 : 서울특별시 강남구 테헤란로10길 9 그랑프리 빌딩 4F, 5F, 7F <br>
강남지원 3관 : 서울특별시 강남구 테헤란로 130 호산빌딩 5F, 6F <br>
종로지원 : 서울특별시 중구 남대문로 120 그레이츠 청계(구 대일빌딩) 2F, 3F <br>
당산지원 : 서울특별시 영등포구 선유동2로 57 이레빌딩(구관) 19F, 20F
</p>
<p id="p2">
Copyright © 1998-2023 KH Information Educational Institute All Right Reserved
</p>
</div>
</div>
</body>
</html>37-3. 로그인영역만들기
<!DOCTYPE html>
<html lang="en">
<head>
<title>로그인영역 만들기 ㅎ.ㅎ</title>
<style>
div, form{
box-sizing : border-box;
}
/* 전체를 감싸는 div 속성 */
#content_3{
width : 250px;
height : 550px;
background-color : #FEE500;
}
/* 1번 */
#login_form{
width : 100%;
height : 30%;
}
/* 2_1번, 2_2번 */
#login_form > * {
width : 100%;
}
#login_form_input{
height : 80%;
}
#login_form_etc{
height : 20%;
}
/* 3_1번, 3_2번 */
#login_form_input > div{
height : 100%;
float : left;
}
#login_input_id_pwd{width : 70%;}
#login_input_btn{width : 30%;}
/* input태그 늘려주기 */
#login_input_id_pwd > input{
width : 100%;
height : 50%;
box-sizing: border-box;
border : 1px solid rgba(82, 82, 82, 0.5);
}
#login_input_btn > input{
width : 100%;
height : 100%;
background-color : #3A1D1D;
border : none;
color : white;
border-radius : 4px;
}
#login_form_etc > a{
text-decoration : none;
color : #000000;
font-size : 12px;
margin : 5px;
}
</style>
</head>
<body>
<div id="content_3">
<!-- 1. 로그인과 관련된 전체 내용을 감싸는 div -->
<div id="login_form">
<!-- 2_1. 입력받을 input태그들이 존재할 영역 -->
<form action="login.do" method="post" id="login_form_input">
<!-- 3_1. 왼쪽 : 아이디, 비밀번호 입력받을 text box 영역 -->
<div id="login_input_id_pwd">
<input type="text" name="userId" placeholder="아이디" required>
<input type="password" name="userPwd" placeholder="비밀번호" required>
</div>
<!-- 3_2. 오른쪽 : 요청전송을 보낼 수 있는 button 영역 -->
<div id="login_input_btn">
<input type="submit" value="로그인">
</div>
</form>
<!-- 2_2. 회원가입 / ID / PWD 찾기 페이지를 요청할 a태그들이 존재할 영역 -->
<div id="login_form_etc">
<a href="#">회원가입</a> |
<a href="#">아이디 / 비밀번호 찾기</a>
</div>
</div>
</div>
</body>
</html>37-4. 검색창만들기
<!DOCTYPE html>
<html lang="en">
<head>
<title>검색창</title>
<style>
div, form{
box-sizing : border-box;
}
/* 전체를 감싸는 div */
#header_2{
width : 650px;
height : 200px;
}
/*------------------------------------------------------------------*/
/* 자식요소를 부모요소 정중앙에 위치 */
#header_2{
position : relative;
}
#search_form{
width : 70%;
height : 20%;
position : absolute;
top : 0px;
bottom : 0px;
right : 0px;
left : 0px;
margin : auto;
}
/* 검색창 form 태그 내부 div 속성 */
#search_form > div{
height : 100%;
float : left;
}
#search_text{width : 90%;}
#search_btn{width : 10%;}
/* input태그 늘려주기 */
#search_form input{
width : 100%;
height : 100%;
box-sizing : border-box;
border : 1px solid #FEE500;
}
#search_form input[type=submit]{
background-color : #FEE500;
color : #3A1D1D;
font-weight : 600;
}
</style>
</head>
<body>
<div id="header_2">
<form action="search.do" method="get" id="search_form">
<div id="search_text">
<input type="text" name="query">
</div>
<div id="search_btn">
<input type="submit" value="검색">
</div>
</form>
</div>
</body>
</html>37-5. navi만들기
<!DOCTYPE html>
<html lang="en">
<head>
<title>Nav만들기</title>
<style>
div{
box-sizing : border-box;
}
#navigator{
width : 1000px;
height : 40px;
}
/*-----------------------------------------------------------------------*/
#navi{
list-style : none;
/* ul요소는 기본적으로 위, 아래 margin이 존재 + 왼쪽에는 padding도 있음 */
margin : 0;
padding : 0;
height : 100%;
}
#navi > li{
float : left;
height : 100%;
width : 13%;
text-align : center;
}
#navi a{
text-decoration : none;
color : #FEE500;
font-weight : 800;
width : 100%;
height : 100%; /* a태그는 인라인 요소기 때문에 width, height속성이 적용 X */
display : block; /* 인라인 요소를 블록으로 바꿔줌 */
/* vertical-align : middle; //블록에선 못씀 */
line-height : 35px; /* 줄간격 속성 px / % / em */
}
#navi a:hover{
font-size : 18px;
color : #FFE600;
}
#navi > li > ul{
list-style : none;
padding : 0;
display : none; /* 평소에는 안보이다가 마우스가 올라가는 순간 펼쳐지는 효과 1 */
}
#navi > li > a:hover + ul{
display : block; /* 평소에는 안보이다가 마우스가 올라가는 순간 펼쳐지는 효과 2 */
}
#navi > li > ul:hover{
display : block; /* 평소에는 안보이다가 마우스가 올라가는 순간 펼쳐지는 효과 3 */
}
#navi > li > ul a{font-size : 11px;}
#navi > li > ul a:hover{font-size : 14px;}
</style>
</head>
<body>
<div id="navigator">
<ul id="navi">
<li><a href="">Java</a></li>
<li><a href="">Oracle</a></li>
<li>
<a href="">FrontEnd</a>
<ul>
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">JavaScript</a></li>
<li><a href="">JQuery</a></li>
</ul>
</li>
<li>
<a href="">Server</a>
<ul>
<li><a href="">JDBC</a></li>
<li><a href="">Servlet</a></li>
<li><a href="">JSP</a></li>
<li><a href="">AJAX</a></li>
</ul>
</li>
<li>
<a href="">Framework</a>
<ul>
<li><a href="">MyBatis</a></li>
<li><a href="">Spring</a></li>
<li><a href="">Sprint Boot</a></li>
<li><a href="">React</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>37-6. 최종본
화면 통합 시 이슈 발생 : 메인메뉴의 a태그와 서브메뉴의 ul태그가 연결이 미세하게 끊겨있음
transform : 애니메이션 효과를 줄 수 있는 속성
scale() : 크기
=> transform : scale(1);
<!DOCTYPE html>
<html lang="en">
<head>
<title>화면을 나누자~</title>
<style>
div{
border : 1px solid red;
box-sizing : border-box;
}
/* 전체를 감싸는 div */
#wrap{
width : 1000px;
height : 800px;
margin : auto;
}
/* 크게 4등분 */
#wrap > div{width : 1000px;}
#header, #footer{height : 20%;}
#navigator{height : 5%;}
#content{height : 55%;}
/* 세부 div를 속성 */
/* 공통속성 */
#header > div, #content > div{
height : 100%;
float : left;
}
/* 각각의 요소들 가로길이를 정해주기 */
#header_1{width : 20%;}
#header_2{width : 65%;}
#header_3{width : 15%;}
#content_1{width : 15%;}
#content_2{width : 60%;}
#content_3{
width : 25%;
background-color : #FEE500;
}
/* --- 여기부터는 footer 영역 --- */
/* 세부속성 */
#footer_1, #footer_2{
background-color : #FEE500;
width : 100%;
}
#footer_1{
height : 20%;
background-color : #3A1D1DE7;
color : white;
}
#footer_2{
height : 80%;
}
/* footer_1의 a태그 속성 */
#footer_1 > a{
text-decoration : none;
font-weight : 650;
color : white;
margin : 15px;
vertical-align : middle; /* vertical-align은 안먹히는 요소가 있음 */
}
#footer_1 > a:hover{
color : forestgreen;
}
/* p태그에 대한 세부적인 속성들 */
#footer_2 > p{
width : 100%;
/* p태그의 특성상 두 개의 p태그 사이에 margin이 기본적으로 위, 아래 16px씩 들어가 있음 */
margin : 0;
box-sizing : border-box;
/* p태그의 테두리까지 부모의 20/80%로 지정해야 부모 영역안에 잘 담김 */
color : #000000 85%;
font-size : 12px;
font-weight : lighter;
}
#p1{
height : 80%;
padding-top : 12px;
padding-left : 15px;
}
#p2{
height : 20%;
text-align : center;
}
/* --- 여기부터는 login 영역 --- */
/* 1번 */
#login_form{
width : 100%;
height : 30%;
}
/* 2_1번, 2_2번 */
#login_form > * {
width : 100%;
}
#login_form_input{
height : 80%;
}
#login_form_etc{
height : 20%;
}
/* 3_1번, 3_2번 */
#login_form_input > div{
height : 100%;
float : left;
}
#login_input_id_pwd{width : 70%;}
#login_input_btn{width : 30%;}
/* input태그 늘려주기 */
#login_input_id_pwd > input{
width : 100%;
height : 50%;
box-sizing: border-box;
border : 1px solid rgba(82, 82, 82, 0.5);
}
#login_input_btn > input{
width : 100%;
height : 100%;
background-color : #3A1D1D;
border : none;
color : white;
border-radius : 4px;
}
#login_form_etc > a{
text-decoration : none;
color : #000000;
font-size : 12px;
margin : 5px;
}
/* --- 여기부터는 검색 영역 --- */
#header_2{
position : relative;
}
#search_form{
width : 70%;
height : 20%;
position : absolute;
top : 0px;
bottom : 0px;
right : 0px;
left : 0px;
margin : auto;
}
/* 검색창 form 태그 내부 div 속성 */
#search_form > div{
height : 100%;
float : left;
}
#search_text{width : 90%;}
#search_btn{width : 10%;}
/* input태그 늘려주기 */
#search_form input{
width : 100%;
height : 100%;
box-sizing : border-box;
border : 1px solid #FEE500;
}
#search_form input[type=submit]{
background-color : #FEE500;
color : #3A1D1D;
font-weight : 600;
}
/* --- 여기부터는 navi --- */
#navi{
list-style : none;
/* ul요소는 기본적으로 위, 아래 margin이 존재 + 왼쪽에는 padding도 있음 */
margin : 0;
padding : 0;
height : 100%;
}
#navi > li{
float : left;
height : 100%;
width : 13%;
text-align : center;
}
#navi a{
text-decoration : none;
color : #FEE500;
font-weight : 800;
width : 100%;
height : 100%; /* a태그는 인라인 요소기 때문에 width, height속성이 적용 X */
display : block; /* 인라인 요소를 블록으로 바꿔줌 */
/* vertical-align : middle; //블록에선 못씀 */
line-height : 35px; /* 줄간격 속성 px / % / em */
/* 화면 통합 시 이슈 발생 : 메인메뉴의 a태그와 서브메뉴의 ul태그가
연결이 미세하게 끊겨있음 */
/*
transform : 애니메이션 효과를 줄 수 있는 속성
scale() : 크기
*/
transform : scale(1);
}
#navi a:hover{
font-size : 18px;
color : #FFE600;
}
#navi > li > ul{
list-style : none;
padding : 0;
display : none; /* 평소에는 안보이다가 마우스가 올라가는 순간 펼쳐지는 효과 1 */
}
#navi > li > a:hover + ul{
display : block; /* 평소에는 안보이다가 마우스가 올라가는 순간 펼쳐지는 효과 2 */
}
#navi > li > ul:hover{
display : block; /* 평소에는 안보이다가 마우스가 올라가는 순간 펼쳐지는 효과 3 */
}
#navi > li > ul a{font-size : 11px;}
#navi > li > ul a:hover{font-size : 14px;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="header_1"></div>
<div id="header_2">
<form action="search.do" method="get" id="search_form">
<div id="search_text">
<input type="text" name="query">
</div>
<div id="search_btn">
<input type="submit" value="검색">
</div>
</form>
</div>
<div id="header_3"></div>
</div>
<div id="navigator">
<ul id="navi">
<li><a href="">Java</a></li>
<li><a href="">Oracle</a></li>
<li>
<a href="">FrontEnd</a>
<ul>
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">JavaScript</a></li>
<li><a href="">JQuery</a></li>
</ul>
</li>
<li>
<a href="">Server</a>
<ul>
<li><a href="">JDBC</a></li>
<li><a href="">Servlet</a></li>
<li><a href="">JSP</a></li>
<li><a href="">AJAX</a></li>
</ul>
</li>
<li>
<a href="">Framework</a>
<ul>
<li><a href="">MyBatis</a></li>
<li><a href="">Spring</a></li>
<li><a href="">Sprint Boot</a></li>
<li><a href="">React</a></li>
</ul>
</li>
</ul>
</div>
<div id="content">
<div id="content_1"></div>
<div id="content_2"></div>
<div id="content_3">
<!-- 1. 로그인과 관련된 전체 내용을 감싸는 div -->
<div id="login_form">
<!-- 2_1. 입력받을 input태그들이 존재할 영역 -->
<form action="login.do" method="post" id="login_form_input">
<!-- 3_1. 왼쪽 : 아이디, 비밀번호 입력받을 text box 영역 -->
<div id="login_input_id_pwd">
<input type="text" name="userId" placeholder="아이디" required>
<input type="password" name="userPwd" placeholder="비밀번호" required>
</div>
<!-- 3_2. 오른쪽 : 요청전송을 보낼 수 있는 button 영역 -->
<div id="login_input_btn">
<input type="submit" value="로그인">
</div>
</form>
<!-- 2_2. 회원가입 / ID / PWD 찾기 페이지를 요청할 a태그들이 존재할 영역 -->
<div id="login_form_etc">
<a href="#">회원가입</a> |
<a href="#">아이디 / 비밀번호 찾기</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_1">
<a href="#">이용약관</a> |
<a href="#">개인정보처리방침</a> |
<a href="#">훈련비 게시</a>
</div>
<div id="footer_2">
<p id="p1">
강남지원 1관 : 서울특별시 강남구 테헤란로14길 6 남도빌딩 2F, 3F, 4F, 5F, 6F <br>
강남지원 2관 : 서울특별시 강남구 테헤란로10길 9 그랑프리 빌딩 4F, 5F, 7F <br>
강남지원 3관 : 서울특별시 강남구 테헤란로 130 호산빌딩 5F, 6F <br>
종로지원 : 서울특별시 중구 남대문로 120 그레이츠 청계(구 대일빌딩) 2F, 3F <br>
당산지원 : 서울특별시 영등포구 선유동2로 57 이레빌딩(구관) 19F, 20F
</p>
<p id="p2">
Copyright © 1998-2023 KH Information Educational Institute All Right Reserved
</p>
</div>
</div>
</div>
</body>
</html>
- FIGMA html디자인 관련..
'FrontEnd > CSS' 카테고리의 다른 글
| #36. CSS(텍스트, 목록, 영역, 테두리, 배경, 레이아웃 관련 스타일) (0) | 2023.08.22 |
|---|