반응형
1) 레이아웃 스타일
1-1)블럭요소라인
1-2) position
1-3) z-index
1-4) visibility
1-5)float
1-6) 배치
1-7) 실습
1-8) 순서선택자+실습
1-9) flex 관련 실습 , \
1-10) 시맨틱태그 예제
1-11) 예제2
1-12) 로그인 예제
1-13)세부사항 예제
1-14) 통합 예제
1)레이아웃 스타일
.size-test{
border: 10px solid red;
}
#test1{
width: 400px; /*가로*/
height: 200px;/*높이*/
}
#test2{
width: 50%;
/*창의크기에 따라 가로길이가 바뀜*/
height: 150px;
} <h1>레이아웃 관련 스타일</h1>
<h3>width, height </h3>
<p>기본적으로 content영역의 가로 세로 길이 지정</p>
<h4>고정크기(px)</h4>
<div class="size-test" id="test1"></div>
<h4>가변크기(%)</h4>
<div class="size-test" id="test2"></div>
1-1)블럭요소 라인
display : inline(크기반영X) | inline-block(가로) | block(세로)
.display-test{
border: 1px solid black;
width: 150px;
height: 150px;
}
.inline{
display: inline;/*크기가 제대로반영안됨*/
}
.inline-block{
display: inline-block;
}
.block{
display: block;/*세로로 배치*/
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
.pink{
background-color: pink;
}
.green{
background-color: green;
}
.purple{
background-color: purple;
}
<h4>블럭요소(div)를 인라인요소로 바꾸기</h4>
<div class="display-test inline red">첫번째</div>
<div class="display-test inline yellow">두번째</div>
<div class="display-test inline pink">세번째</div>
<div class="display-test inline green">네번째</div>
<div class="display-test inline purple">다섯번째</div>
<br>
<b>** display:inline 하게되면 width, height 스타일 속성은 제대로 반영되지 않음</b>
<br><br><br><hr>
<h4>블럭요소를 인라인요소로 바꾸되 크기는 그대로 유지하도록(display:inline-block)</h4>
<div class="display-test inline-block red">첫번째</div>
<div class="display-test inline-block yellow">두번째</div>
<div class="display-test inline-block pink">세번째</div>
<div class="display-test inline-block green">네번째</div>
<div class="display-test inline-block purple">다섯번째</div>
<br><br><br><hr>
<h4>인라인 요소를 블럭요소로 바꾸는 방법(display:block)</h4>
<span class="display-test block red">첫번째</span>
<span class="display-test block yellow">두번째</span>
<span class="display-test block pink">세번째</span>
<span class="display-test block green">네번째</span>
1-2) position :
상대위치(relative)와 절대위치(absolute)
/*absolute : 부모태그가 relative로 세팅된 경우
부모 요소로부터 위 : 50px 왼쪽 50px위치에 배치하란 뜻*/
<style>
.outer{
border: 2px solid black;
position: relative; /*상대 위치*/
}
.positioning{
border: 1px solid red;
}
#first{
width: 300px;
height: 300px;
background-color:yellow;
}
#second{
width: 200px;
height: 200px;
background-color:yellowgreen;
position: absolute;
/*부모태그가 relative로 세팅된 경우
부모 요소로부터 위 : 50px 왼쪽 50px위치에 배치하란 뜻*/
top: 50px;
left: 50px;
}
#third{
width: 100px;
height: 100px;
background-color:aquamarine;
position: absolute;
top: 100px;
left: 100px;
}
</style><h1>배치 관련 스타일</h1>
<h3>position : 상대위치(relative)와 절대위치(absolute)</h3>
<div class="outer">
<div class="positioning" id="first">첫번째자식</div>
<div class="positioning" id="second">두번째자식</div>
<div class="positioning" id="third">세번째자식</div>
</div>
고정위치(fixed)
position : fixed ;
(해당위치에 딱 고정.)
#fixed-area{
width: 100px;
height: 100px;
background-color: red;
bottom: 10px;
left: 50px;
position: fixed;
/*해당 위치에서 움직이질않음
scroll을 해도 위치변경X*/
}<h3>position: 고정위치(fixed)</h3>
<div class="positioning" id="fixed-area"></div>
<hr>1-3) z-index
(숫자가 높을수록 위쪽에 배치 )
<h3>z-index: 요소들을 순서대로 위로 쌓는 스타일 속성</h3>
<div class="outer"> <!--position:relative-->
<div class="z-test" id="z1">요소1</div>
<div class="z-test" id="z2">요소2</div>
<div class="z-test" id="z3">요소3</div>
</div>#z1{
background-color: red;
top: 70px;
left: 70px;
z-index: 2;
/* 숫자가 높을 수록 위쪽에 배치 */
}
#z2{
background-color: yellow;
z-index: 1;
}
#z3{
background-color: green;
top: 50px;
left: 50px;
z-index: 0;
}
1-4) visibility
특정 요소를 보이거나 보이지 않게 하는 스타일 속성
display: none | visibility: hidden;
<h3>visibility : 특정 요소를 보이거나 보이지 않게 하는 스타일 속성</h3>
<div class="vis-test" >첫번째div</div>
<div class="vis-test" id="vis">두번째div</div>
<div class="vis-test">세번째div</div> #vis{
display: none;
visibility: hidden;
/*
display:none (공간도 존재X)
visibility: hidden; (공간존재 , 내용안보임)
화면에서 숨겨지게 됨!
*/
}
1-5) float
페이지 내의 요소들을 화면으로부터 띄워서
왼쪽 또는 오른쪽으로 정렬하는 속성
<h3>float</h3>
<p>페이지 내의 요소들을 화면으로부터 띄워서 왼쪽 또는 오른쪽으로 정렬하는 속성</p>
<div class="float-test">요소1</div>
<div class="float-test">요소2</div>
<div class="float-test">요소3</div>
<div class="float-test">요소4</div>
<div class="float-test">요소5</div> .float-test{
border: 1px solid black;
width: 70px;
height: 30px;
float: left;/* | right*/
}
1-6) 배치
1 배치를 가로로 하는 방식1
-부모요소를 overflow:hidden 으로 처리
-자식요소를 folat:left | right
2 배치를 가로로하는 방식2
-display : flex로 배치치
.wrap1{
overflow: hidden;
}
.wrap1 > div{
width: 100px;
height: 100px;
border: 1px solid gray;
float: left;
}
div{
box-sizing: border-box;
}
.wrap2{
display: flex;
flex-wrap: nowrap;
/*nowrap(기본값):부모영역에 자식들을 모으는방식
wrap : 부모영역을 벗어날 수 있는 방식*/
flex-direction: row;/*
배치방식 :
row(기본값) : 가로
row-reverse: 순서가바뀜
column : 아래로배치
*/
justify-content: space-between;
/*배치방식 : center , space-between(꽉차게 한 후 남는공간은 space) */
width: 600px;
height: 100px;
background-color: antiquewhite;
}
.wrap2>div{
width: 100px;
height: 100px;
border: 1px solid gray;
}flex-wrap : nowrap | wrap(부모영역을 벗어날 수 있는 방식)
flex-direction : row(가로) | row-reverse | column(세로) | column-reverse
justify-content : space-between , center(가운데배치)
<body>
<div class="wrap1">
<div>BOX1</div>
<div>BOX2</div>
</div>
<div class="wrap2">
<div>BOX1</div>
<div>BOX2</div>
<div>BOX3</div>
<div>BOX4</div>
<div>BOX5</div>
</div>
</body>
1-7) 실습)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.test{
border: 20px solid blue;
width: 400px;
height: 200px;
padding: 10px;
}
.wrap{
border: 5px solid blue;
width: 400px;
height: 200px;
position: relative;
}
.test1,.test2{
border: 5px solid blue;
height: 50%;
box-sizing: border-box;
}
.test3,.test4{
float: left;
border: 5px solid blue;
height: 100%;
box-sizing: border-box;
}
.test3{
width: 70%;
}
.test4{
width: 30%;
}
.test3>div{
border: 5px solid blue;
width: 100%;
height: 50%;
box-sizing: border-box;/*꽉 차게*/
}
.test_center{
border: 5px solid blue;
box-sizing: border-box;
width: 80%;
height: 70%;
/*요소를 가운데에 배치하기 위해 margin:auto*/
margin: auto;
position: absolute;
/*상위태그가 relative인 경우에
부모요소로부터 0,0,0,0에 위치*/
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<h1>영역관련 속성</h1>
<div class="test">
1) content영역 : 요소내의 내용물 영역 <br>
2) border 영역 : 요소의 테두리 영역 <br>
3) padding 영역 : content와 border 사이의 영역(여백) <br>
4) margin 영역 : 요소의 바깥쪽 영역
</div>
<hr>
<h2>div 안에 또다른 div 넣기</h2>
<h3>상하 2등분</h3>
<div class="wrap">
<div class="test1"></div>
<div class="test2"></div>
</div>
<h3>좌우 2등분</h3>
<div class="wrap">
<div class="test3">
<div class="test3_top"></div>
<div class="test3_bottom"></div>
</div>
<div class="test4"></div>
</div>
<h3>div 안에 div를 정 가운데에 놓기</h3>
<div class="wrap">
<div class="test_center"></div>
</div>
</body>
</html>
1-8) 순서선택자 + 실습
ntc-child(n)
.item:nth-child(1){font-size: 20px;}
.item:nth-child(2){font-size: 40px;}
.item:nth-child(3){font-size: 10px;}
/*3이넘어가면 3으로 나눈 나머지를 활용(순환)*/
CODE(HTML)
<body>
<div class="container container1">
<div class="item red item1">이미지1</div>
<div class="item blue item1">이미지2</div>
<div class="item green item1">이미지3</div>
</div>
<hr>
<div class="container container2">
<div class="item red item2">아이템1</div>
<div class="item blue item2">아이템2</div>
<div class="item green item2">아이템3</div>
</div>
</body> <style>
.red{background-color: red;}
.blue{background-color: blue;}
.green{background-color: green; }
.container{
border: 1px solid black;
height: 200px;
}
.item{
color: white;
font-weight: bold;
margin: 2px;
}
/*순서 선택자 ntc-child(n)*/
.item:nth-child(1){font-size: 20px;}
.item:nth-child(2){font-size: 40px;}
.item:nth-child(3){font-size: 10px;}
/*3이넘어가면 3으로 나눈 나머지를 활용(순환)*/
.container1,.container2{
display: flex;
/*가로로 배치*/
align-items: center;
}
.item2{
/*아이템의 기본길이*/
flex-basis: 200px;
}
/*flex-grow flex-shrink flex-basis
flex-grow : 0 : flex-basis 보다 커지지않음(기본값)
1 : 컨테이너사이즈에맞게 flex-basis보다 커질수있음
flex-shrink : 0 : flex-basis보다 작아지지않겠다
1 : flex-basisc보다 작아질수있음(기본값)
*/
.item2:nth-child(1){flex: 1 0 200px;}
.item2:nth-child(2){
flex-grow: 1;
flex-shrink: 1;
}
.item2:nth-child(3){
flex-grow: 0;
flex-shrink: 0;
}
</style>
1-9) flex 관련 실습
<style>
*{
box-sizing: border-box;
}
div{
border: 1px solid black
}
.wrap{
width: 100%;
max-width: 1300px;
margin: auto;
/*하위요소(.header,.content,.footer)들을 배치*/
display: flex;
flex-direction: column;
/*column : 세로로 배치*/
}
.header,.footer{
height: 150px;
}
.content{
min-height: 500px;
}
.header{
display: flex;
}
.header_1 , .header_3{
width: 20%;
}
.header_2{
width: 60%;
}
.content{
display: flex;
}
.content_1 , .content_3{
width: 30%;
}
.content_2{
width: 40%;
}
.footer{
display: flex;
flex-direction: column;
/*(열기준정렬)세로로 정렬*/
}
.footer_1{
height: 40%;
}
.footer_3{
height: 60%;
}
</style><body>
<div class="wrap">
<div class="header">
<!-- 가로 정렬되어야됨 -->
<div class="header_1"></div>
<div class="header_2"></div>
<div class="header_3"></div>
</div>
<div class="content">
<!-- 가로 정렬되어야됨 -->
<div class="content_1"></div>
<div class="content_2"></div>
<div class="content_3"></div>
</div>
<div class="footer">
<!-- 세로 정렬되어야됨 -->
<div class="footer_1"></div>
<div class="footer_2"></div>
</div>
</div>
</body>
1-10) 위에 실습을 기반으로 한 시맨틱 예제
시맨틱 태그 설명
시맨틱 태그 : HTML5 이후부터 가능
IE8 이하에서는 인라인요소를 인식
블럭요소를 처리(display:block 처리 안전)
div구조 동일. 영역별 구분 가능
타인도 해석 가능
header : 가장위쪽(머릿말)
nav : 메뉴바
section : 본문
article : 내용 중 따로 분할해 묶는 태그
aside : 본문 이외의 내용 , 광고 , 링크 등
footer : 가장아래쪽(끝 말)코드
<!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="ex04.css">
<!-- ex04.css 사용-->
</head>
<body>
<div class="wrap">
<header class="header">
<div class="header_top">
<div class="header_logo">header_logo</div>
<!-- 검색창 영역 따로 진행 -->
<div class="header_search">header_search</div>
<!-- ------------------- -->
<div class="header_alarm">header_alarm</div>
</div>
<!-- 메뉴바 영역 따로 진행 -->
<nav class="header_nav">header_nav</nav>
<!-- -------------------- -->
</header>
<section class="content_wrap">
<div class="content_news">
content_news
</div>
<div class="content_side">
<!-- 로그인 폼 영역 따로 진행 -->
<div class="content_side_myinfo">content_side_myinfo</div>
<!-- ---------------------- -->
<div class="content_side_ad">content_side_ad</div>
</div>
</section>
<!-- 푸터바 영역 따로 진행 -->
<footer class="footer">
<div class="footer_link">
footer_link
</div>
<div class="footer_info">
footer_info
</div>
</footer>
<!-- ------------------- -->
</div>
</body>
</html>CSS
*{
box-sizing: border-box;
font-weight: bold;
}
div{
border: 1px solid red;
}
.wrap{
width: 80%;
margin: auto;
display: flex;
flex-direction: column;
}
.header,.footer{
height: 200px;
}
.content_wrap{
min-height: 500px;
display: flex;
}
.header{
display: flex;
flex-direction: column;
}
.header_top{
height: 90%;
display: flex;
}
.header_nav{
height: 10%;
border-bottom: 2px solid red;
}
.header_top>.header_logo,.header_alarm{
width: 20%;
}
.header_top>.header_search{
width: 60%;
}
.content_news{
width: 65%;
}
.content_side{
width: 35%;
display: flex;
flex-direction: column;
}
.content_side>.content_side_myinfo{
height: 30%;
}
.content_side>.content_side_ad{
height: 70%;
}
.footer>.footer_link{
height: 20%;
}
.footer>.footer_info{
height: 80%;
}1-11)예제2
<!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="ex05.css">
</head>
<body>
<!-- 푸터바 영역 따로 진행 -->
<footer class="footer">
<div class="footer_link">
<a href="">이용약관</a> |
<a href="">개인정보취급방침</a> |
<a href="">인재채용</a> |
<a href="">고객센터</a>
</div>
<div class="footer_info">
<ul class="footer_info_company">
<li>상호명 : GooDee Academy</li>
<li>대표자 : 이승엽</li>
<li>전화 : 02-818-7950</li>
<li>개인정보책임자 : 주승재 / jsj@goodee.co.kr</li>
<li>본관 : (08505) 서울특별시 금천구 가산디지털2로 95 (가산동, km타워) 2층, 3층</li>
</ul>
<div class="footer_info_copyright">
Copyright ⓒ GooDee Academy. All rights reserved.
</div>
</div>
</footer>
<!-- ------------------- -->
</body>
</html>*{
box-sizing: border-box;
}
div , footer{
border: 1px solid red;
}
.footer{
display: flex;
flex-direction: column;
height: 250px
}
.footer_link{
height:20%;
display: flex;
align-items: center;
}
.footer_link>a{
text-decoration: none;
font-weight: bold;
margin: 10px;
color : black;
}
.footer_info{
display: flex;
flex-direction: column;
height: 80%;
}
.footer_info_company{
height: 80%;
list-style-type: '-';
padding-left: 20px;
margin-top:5px;
}
.footer_info_copyright{
height: 20%;
text-align: center;
padding: 10px;
}1-12) 로그인 예제
<body>
<!-- 로그인 폼 영역 따로 진행 -->
<div class="content_side_myinfo">
<form action="login.me" class="login_form">
<div class="login_input_wrap">
<input type="text" name="userId" placeholder="아이디 입력" required>
<input type="password" name="userPwd" placeholder="비밀번호 입력" required>
</div>
<div class="login_btn">
<button type="submit">로그인</button>
</div>
</form>
<div class="login_etc">
<a href="">회원가입</a> |
<a href="">ID/PWD 찾기</a>
</div>
</div>
<!-- ---------------------- -->
</body>
CSS부분
<style>
div , form , input , button{
border: 1px solid red;
box-sizing: border-box;
}
.content_side_myinfo{
width: 300px;
height: 150px;
display: flex;
flex-direction: column;/*상 하*/
justify-content: center;
align-items: center;
}
.login_form{
width: 90%;
height: 70%;
display: flex;/*좌우*/
}
.login_input_wrap{
width: 70%;
display: flex;
flex-direction: column;
}
.login_input_wrap > input{
height: 100%;
}
.login_btn{
width: 30%;
}
.login_btn > button{
/*로그인버튼을 분할한 창에 딱 맞게함*/
width: 100%;
height: 100%;
}
.login_etc{
width: 90%;
height: 20%;
display: flex;
justify-content: center;
align-items: center; /*가운데정렬*/
gap: 5px;/*해당 태그 하위에 gap을 준다*/
}
.login_etc>a{
text-decoration: none;
color : black;
font-size: 14px;
}
</style>
1-13) 세부사항 예제
<body>
<!-- 메뉴바 영역 따로 진행 -->
<nav class="header_nav">
<div class="menu_wrap">
<div class="main_menu"><a href="">Java</a></div>
<div class="main_menu"><a href="">Mariadb</a></div>
<div class="main_menu">
<a href="">Front-End</a>
<div class="sub_wrap">
<div class="sub_menu"><a href="">HTML</a></div>
<div class="sub_menu"><a href="">CSS</a></div>
<div class="sub_menu"><a href="">JavaScript</a></div>
<div class="sub_menu"><a href="">jQuery</a></div>
</div>
</div>
<div class="main_menu">
<a href="">Server</a>
<div class="sub_wrap">
<div class="sub_menu"><a href="">JDBC</a></div>
<div class="sub_menu"><a href="">Servlet</a></div>
<div class="sub_menu"><a href="">JSP</a></div>
<div class="sub_menu"><a href="">AJAX</a></div>
</div>
</div>
<div class="main_menu">
<a href="">Framework</a>
<div class="sub_wrap">
<div class="sub_menu"><a href="">MyBatis</a></div>
<div class="sub_menu"><a href="">Spring</a></div>
</div>
</div>
</div>
</nav>
<!-- -------------------- -->
</body>CSS
<style>
div,nav{
box-sizing: border-box;
border: 1px solid red;
}
.header_nav{
height: 20%;
}
.menu_wrap{
width: 100%;
height: 100%;
display: flex;
}
.main_menu{
width: 30%;/*각 각menu_wrap 길이의30프로*/
display: flex;
justify-content: center;
align-items: center;
position: relative;
/*하위 태그들이 딱 붙어서나옴*/
}
.main_menu>a{
font-size: 20px;
font-weight: bold;
color: orange;
}
a{
text-decoration: none;
}
.sub_wrap{
position: absolute;
top: 30px;
width: 100%;
display: none;
}
.main_menu:hover> div{
display: block;
/*마우스를 가져다대면 하위 div를 세로방향으로 보여줘*/
}
.sub_menu{
display: flex;
font-size: 18px;
font-weight: bold;
justify-content: center;
align-items: center;
}
.sub_menu>a{
color: darkblue;
}
</style>
1-14) 통합예제
<style>
div , header,section,article,aside,footer,div{
display: block;
border: 1px solid gray;
box-sizing: border-box;
}
.wrap{
width: 100%;
max-width: 1300px;
margin: auto;
display: flex;
flex-direction: column;
}
.header{
height: 200px;
display: flex;
flex-direction: column;
}
.header_top{
height: 80%;
display: flex;
}
.header_nav{
height: 20%;
}
.header_logo,.header_alarm{
width: 20%;
}
.header_logo{
display: flex;
justify-content: center;
align-items: center;/*가운데배치를 위한*/
}
.header_logo img{
width: 100px;
height: 100px;
}
.header_search{
width: 60%;
display: flex;
justify-content: center;
align-items: center;/*가운데배치를 위한*/
}
.search_form{
width: 80%;
height: 20%;
display: flex;
}
.search_form > input{ width: 80%;}
.search_form > button{width: 20%;}
/*----------------------------------메뉴바----------------------------*/
.header_nav{
height:20%;
}
.menu_wrap{
width: 100%;
height: 100%;
display: flex;
}
.main_menu{
width: 20%;
display: flex;
justify-content: center;
align-items: center;
position: relative;/*sub를 붙여야함*/
}
.main_menu>a{
text-decoration: none;
font-size: 20px;
font-weight: bold;
color: orange;
}
.sub_wrap{
top: 40px;
width: 100%;
text-decoration: none;
position:absolute;
display: none;/*보이지않게가려놓음*/
}
.main_menu:hover > div{
display: block;
/*.main_menu에 마우스를 대면
숨겨진 div 가 보임*/
}
.sub_menu{
font-size: 20px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.sub_menu>a{
color: pink;
}
/*-----------------------------------------------------*/
.content_wrap{
min-height: 500px;
display: flex;
}
.content_news{
width: 70%;
}
.content_side{
width: 30%;
display: flex;
flex-direction: column;
}
.content_side_myinfo{/*로그인 부분들*/
height: 150px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.login_form{
width: 90%;
display: flex;
height: 70%;
}
.login_input_wrap{
width: 70%;
display: flex;
flex-direction: column;
}
.login_input_wrap>input{
height: 100%;
}
.login_btn{
width: 30%;
}
.login_btn> button{
height: 100%;
width: 100%;
}
.login_etc{
display: flex;
width: 100%;
height: 30%;
justify-content: center;
align-items: center;
gap: 10px;
}
.login_etc>a{
font-size: 12px;
text-decoration: none;
color:black
}
.content_side_ad{
height: 350px;
}
/*----------------------------------------------------=*/
.footer{
height: 200px;
display: flex;
flex-direction: column;
}
.footer_link{
height:20%;
display: flex;
align-items: center;
justify-content: center;
}
.footer_link > a{
text-decoration: none;
color : black;
font-weight: bold;
margin: 15px;
}
.footer_info{
height: 80%;
display: flex;
flex-direction: column;
}
.footer_info_company{
height: 80%;
list-style-type: '-';
padding-left: 20px;
margin-top: 5px;
display: flex;
flex-direction: column;
gap: 5px;
}
.footer_info_company>li{
font-size: 12px;
}
.footer_info_copyright{
text-align: center;
height: 20%;
}
</style><body>
<div class="wrap">
<header class="header">
<div class="header_top">
<div class="header_logo">
<img src="../icon.png" alt="">
</div>
<!-- 검색창 영역 따로 진행 -->
<div class="header_search">
<form action="search.do" class="search_form">
<input type="search" name="keyword">
<button type="submit">검색</button>
</form>
</div>
<!-- ------------------- -->
<div class="header_alarm"></div>
</div>
<!-- 메뉴바 영역 따로 진행 -->
<nav class="header_nav">
<div class="menu_wrap">
<div class="main_menu"><a href="">Java</a></div>
<div class="main_menu"><a href="">Mariadb</a></div>
<div class="main_menu">
<a href="">Front-End</a>
<div class="sub_wrap">
<div class="sub_menu"><a href="">HTML</a></div>
<div class="sub_menu"><a href="">CSS</a></div>
<div class="sub_menu"><a href="">JavaScript</a></div>
<div class="sub_menu"><a href="">jQuery</a></div>
</div>
</div>
<div class="main_menu">
<a href="">Server</a>
<div class="sub_wrap">
<div class="sub_menu"><a href="">JDBC</a></div>
<div class="sub_menu"><a href="">Servlet</a></div>
<div class="sub_menu"><a href="">JSP</a></div>
<div class="sub_menu"><a href="">AJAX</a></div>
</div>
</div>
<div class="main_menu">
<a href="">Framework</a>
<div class="sub_wrap">
<div class="sub_menu"><a href="">MyBatis</a></div>
<div class="sub_menu"><a href="">Spring</a></div>
</div>
</div>
</div>
</nav>
<!-- -------------------- -->
</header>
<section class="content_wrap">
<div class="content_news">
</div>
<div class="content_side">
<!-- 로그인 폼 영역 따로 진행 -->
<div class="content_side_myinfo">
<form action="login.me" class="login_form">
<div class="login_input_wrap">
<input type="text" name="userId" placeholder="아이디 입력" required>
<input type="password" name="userPwd" placeholder="비밀번호 입력" required>
</div>
<div class="login_btn">
<button type="submit">로그인</button>
</div>
</form>
<div class="login_etc">
<a href="">회원가입</a> |
<a href="">ID/PWD 찾기</a>
</div>
</div>
<!-- ---------------------- -->
<div class="content_side_ad"></div>
</div>
</section>
<!-- 푸터바 영역 따로 진행 -->
<footer class="footer">
<div class="footer_link">
<a href="">이용약관</a> |
<a href="">개인정보취급방침</a> |
<a href="">인재채용</a> |
<a href="">고객센터</a>
</div>
<div class="footer_info">
<ul class="footer_info_company">
<li>상호명 : GooDee Academy</li>
<li>대표자 : 이승엽</li>
<li>전화 : 02-818-7950</li>
<li>개인정보책임자 : 주승재 / jsj@goodee.co.kr</li>
<li>본관 : (08505) 서울특별시 금천구 가산디지털2로 95 (가산동, km타워) 2층, 3층</li>
</ul>
<div class="footer_info_copyright">
Copyright ⓒ GooDee Academy. All rights reserved.
</div>
</div>
</footer>
<!-- ------------------- -->
</div>
</body>
2 ) 오늘의예제)
다음과같은 페이지를 생성해보자
이미지는 주어짐
먼저 HTML
<!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="test1.css">
</head>
<body>
<div class="wrap">
<header class="header">
<div class="header_logo_mini">
<a href=""><img src="t1/logo.jpg" alt=""></a>
</div>
<div class="header_logo_big">
<a href=""><img src="t1/mainlogo.jpg" alt=""></a>
</div>
<div class="header_etc"></div>
</header>
<nav class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Board</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section class="content_wrap">
<div class="content_side">
<img src="t1/left_img.jpg" alt="">
</div>
<div class="content_img">
<div class="content_img_top">
<div>
<img src="t1/main_img1.jpg" alt="">
<p>나무를 심는 사람들</p>
</div>
<div>
<img src="t1/main_img2.jpg" alt="">
<p>아이들에게 녹색 미래를..</p>
</div>
</div>
<div class="content_img_bottom">
<div>
<img src="t1/main_img3.jpg" alt="">
<p>설악산 살리는 길</p>
</div>
<div>
<img src="t1/main_img4.jpg" alt="">
<p>사라지는 북극곰들</p>
</div>
</div>
</div>
<div class="content_etc">
<div class="content_login">
<form action="" class="login_form">
<div class="login_input_wrap">
<input type="text" name="userId" placeholder="ID를 입력하세요">
<input type="password" name="userPwd" placeholder="PWD를 입력하세요">
</div>
<div class="login_btn">
<button type="submit">로그인</button>
</div>
</form>
<div class="login_etc">
<a href="">회원가입</a>
<a href="">ID/PW 찾기</a>
</div>
</div>
<div class="content_poster">
<img src="t1/right_img.jpg" alt="">
</div>
<div class="content_message">
<img src="t1/me_chat.jpg" alt="">
</div>
</div>
</section>
<footer class="footer">
<img src="t1/footer.JPG" alt="" width="100%" height="100%;">
</footer>
</div>
</body>
</html>
CSS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wrap{
width: 80%;
height: 100%;
min-height: 1000px;
min-width: 1500px;
}
header{
height: 20%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
position: relative;
}
.nav{
height: 10%;
width: 100%;
margin-bottom: 2px;
}
.content_wrap{
height: 60%;
width: 100%;
}
footer{
height: 10%;
width: 100%;
}
/*----------------큰구역나누기 끝-------------------------*/
.header_logo_mini{
width: 40%;
}
.header_logo_big{
width: 60%;
}
.header_logo_mini>a{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-right: 20%;
}
.nav>ul{
width: 100%;
display: flex;
list-style-type: none;
padding-left: 10px;
}
ul>li {
width: 25%;
display: flex;
background-color: rgb(68, 100, 16);
}
li>a{
width: 100%;
font-size: 30px;
text-decoration: none;
text-align: center;
color: white;
}
/*----------------------------header , nav 태그 끝------*/
.content_wrap{
display: flex;
margin-top: 1%;
}
.content_side{
width: 20%;
height: 100%;
margin-top: 0%;
}
.content_side>img{
display: flex;
justify-content: center;
align-items: center;
}
.content_img{
width: 60%;
height: 100%;
display: flex;
flex-direction: column;
}
.content_etc{
width: 20%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.content_img_top{
width:100%;
height: 50%;
display: flex;
margin-top: 0%;
}
.content_img_bottom{
width: 100%;
height: 50%;
display: flex;
gap: 5px;
}
.content_img_top > div{
width: 50%;
height: 100%;
}
.content_img_bottom > div{
width: 50%;
height: 100%;
}
.content_login{
height: 30%;
width: 100%;
display: flex;
flex-direction: column;
}
.login_form{
height: 80px;
width: 100%;
display: flex;
}
.login_input_wrap{
width: 60%;
height: 100%;
display: flex;
flex-direction: column;
}
.login_btn{
width: 40%;
height: 100%;
}
.login_input_wrap>input{
height: 50%;
width: 100%
}
.login_btn>button{
width: 100%;
height: 100%;
font-size: 12px;
}
.login_etc{
height: 20%;
font-size: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.login_etc>a{
text-align: center;
}
.content_poster{
height: 60%;
width: 100%;
}
.content_message{
height: 20%;
width: 100%;
}'부트캠프(HTML,CSS)' 카테고리의 다른 글
| 부트캠프33일차 (CSS media, bootstrap) (0) | 2025.03.19 |
|---|---|
| 부트캠프31일차(CSS) (0) | 2025.03.17 |
| 부트캠프30일 (HTML,CSS) (0) | 2025.03.14 |
| 부트캠프29일차(HTML) (0) | 2025.03.13 |