728x90
반응형
<목차>
1) 로그인 form
1-1) display: flex;
1-2) form 태그
1-3) 로그인 form 구현
2) menu
2-1) 가상 선택자
2-2) menu 구현
3) media query
4) 코드 실습
1) 로그인 form
1-1) display: flex;
display: flex;를 적용할 시 두 가지 축이 있는데, 하나는 중심축(main axis)이고 다른 하나는 반대축(cross axis)이다.
그리고 이 축은 수평 방향이냐 수직 방향이냐에 따라 바뀔 수 있다.
<주요 속성>
- flex-direction: row / column / row-reverse / column-reverse ; → 아이템들(자식 element의 영역)의 정렬을 row 방향( inline 속성과 동일하다고 이해하면 됨 )으로 하거나 column 방향( block 속성과 동일하다고 이해하면 됨 )으로 할 수 있다. 기본값은 row;
- flex-wrap: wrap; → wrap: 부모 element 영역의 넓이를 기준으로 자식 element의 영역이 이보다 넘칠 시 자동으로 다음 라인으로 넘어감( block 속성과 동일 ) / nowrap: 부모 element 영역의 넓이를 기준으로 자식 element의 영역이 이보다 넘치더라도 다음 라인으로 넘어가지 않고 한 줄에 다 담음( inline 속성과 동일 ). 기본값은 nowrap;
- flex-flow: row nowrap; 위의 두 가지를 한번에 사용하게 해주는 속성( inline 속성과 동일 ).
- justify-content: flex-start / flex-end / center / space-around( 각 element마다 양쪽으로 동일한 간격으로 벌림 >> 마치 각 element마다 동일한 크기로 좌우 padding을 먹인 것과 효과가 동일함 ) / space-evenly( 각 element 간의 간격을 동일한 간격으로 벌림 ) / space-between( 양쪽 끝 정렬 ) ; 중심축 기준 아이템들을 어떻게 배치할지 결정하는 속성.
- align-items: flex-start / flex-end / center / baseline ; 반대축에서 아이템들을 어떻게 배치할지 결정하는 속성.
1-2) form 태그
<form 태그 동작 방법>
- form이 있는 웹 페이지를 방문함
- form 내용을 입력함
- form 안에 있는 모든 데이터를 웹 서버로 보냄
- 웹 서버는 전달받은 form 데이터를 처리하기 위해 웹 프로그램으로 넘김
- 웹 프로그램은 form 데이터를 처리함
- 처리결과에 따른 새로운 html 페이지를 웹 서버에 보냄
- 웹 서버는 전달받은 html 페이지를 브라우저에 보냄
- 브라우저는 전달받은 html 페이지를 보여줌
<form 태그 속성>
- action: form을 전송할 url 혹은 서버 쪽 스크립트 파일을 지정함
- method: form을 전송할 http 메서드를 정함( get / post )
- name: form을 식별하기 위한 이름을 지정함
+) name : form element의 이름을 지정해주는 속성으로 데이터를 넘겨줄 때 사용함
+) id: 해당 element에 고유한 이름을 부여하고, CSS 선택자 역할을 함
+) method
◆ get
- get: url에 표시됨
- get이 url에 표시될 때는 querystring 형태로 표시됨!!
- url 주소 다음에 “?”를 쓰면 “?” 이후부터 값이 querystring 형식으로 들어감(이때 “&”는 속성과 속성 간의 구분값임) → “?”는 querystring이 시작됨을 표시하는 역할
- ex) naver.com?userid=web7722&userpw=1234
◆ post
- url에 안보임
- get은 url에 보이고, post는 url에서 안보이지만 post 역시 데이터는 개발자 도구에서 확인 가능함
- ex) userid=web7722&userpw=1234
(중요!!)
input 태그의 속성 중 type=”hidden”
→ 해당 속성을 쓴 상태에서 name과 value에 각각 값을 지정하면 해당 값들이 url에 표현됨!!
<input type="hidden" name="where" value="nexearch" />
<!-- ex) naver.com?where=nexearch&userid=web7722&userpw=1234 -->
(핵심 요약)
웹 페이지가 링크로 연결되어 있으며, 페이지 이동 시 html과 css는 다시 처음부터 받아와야 함!!
1-3) 로그인 form 구현
index.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>Document</title>
<link rel="stylesheet" href="./public/css/index.css" />
</head>
<body>
<input type="checkbox" id="layer_btn" />
<div id="layer">
<div id="content">
<h2>
<span>로그인</span>
<span>
<label for="layer_btn">X</label>
</span>
</h2>
<div class="login_form">
<form action="http://naver.com" method="get">
<input type="hidden" name="where" value="nexearch" />
<span class="int">
<input
type="text"
name="user_id"
id="uid"
placeholder="아이디를 입력해주세요."
/>
</span>
<span class="int">
<input
type="password"
name="user_pw"
id="upw"
placeholder="비밀번호를 입력해주세요."
/>
</span>
<!-- submit은 혼자서는 아무것도 못하고 form element 안에 있어야 한다. 그리고 해당 버튼을 클릭할 시 링크를 타고 이동하게 된다. -->
<button type="submit">로그인</button>
<!-- 위와 동일하지만 디자인을 입히는 데에 있어 submit button이 훨씬 편하기에 위의 형태를 사용하는 것을 적극 권장함 -->
<!-- <input type="submit" value="로그인2" /> -->
<span>
아직도 회원이 아니신가요?
<a href="#">회원가입</a>
</span>
</form>
</div>
</div>
</div>
<div id="wrap">
<div id="header">
<h1>logo</h1>
<ul>
<li>
<label for="layer_btn">menu</label>
</li>
</ul>
</div>
</div>
</body>
</html>
index.css
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
}
#layer_btn {
display: none;
}
#layer {
position: absolute;
display: none;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.35);
}
#layer_btn:checked + #layer {
display: flex;
}
#layer > #content {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
height: 300px;
box-shadow: 5px 5px 15px 0px #666;
background: #fff;
}
#content > h2 {
display: flex;
justify-content: space-between;
width: 100%;
height: 20%;
padding: 15px;
box-sizing: border-box;
border-bottom: 1px solid #ddd;
}
#content > .login_form {
width: 400px;
height: 80%;
}
#content > .login_form > form {
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
}
#content > .login_form > form > .int > input {
width: 100%;
padding: 7px 14px;
margin-bottom: 5px;
box-sizing: border-box;
}
#content > .login_form > form > button[type="submit"] {
width: 100%;
padding: 7px 14px;
border-radius: 0;
border: none;
background: #ddd;
font-size: 14px;
font-weight: bold;
}
※ checkbox가 체크되었을 때 로그인 form이 나타나고, 체크가 풀리면 로그인 form이 사라지게 하기 위해서는 클릭 할 때마다 체크가 되었다 풀렸다 할 수 있는 “checkbox”로 <input> 태그 type을 지정해야 함!!
2) menu
2-1) 가상 선택자
<div id="content">
<div>
<div></div>
Hello World!
</div>
</div>
위에서 "div::before"와 같이 가상 선택자를 이용한 경우, 기존의 id가 content인 div 태그의 자식 태그인 div 태그는 현재 Hello World!라는 텍스트만 가지고 있지만 가상 선택자 "::before"를 통해 HTML 코드 상에 Hello World! 바로 윗 줄에 위와 같이 가상의 div 태그를 만들어 Hello World! 텍스트 앞에 새로운 텍스트를 붙이고 디자인을 수정하기 용이하도록 해줌!!
만일 "::after"를 쓴다면 위의 상황처럼 가상의 태그를 생성해주는 것은 동일하지만 HTML 코드 상 Hello World! 아래 줄에 가상의 div 태그를 생성하여 Hello World! 텍스트 바로 뒤에 새로운 텍스트를 붙이고 디자인을 수정하기 용이하도록 해줌!!
단, 가상 선택자 사용 시 content 속성에 어떤 값도 넣지 않는다 하더라도 해당 속성값을 비워둔 상태에서 반드시 content 속성을 써줘야 함!!
2-2) menu 구현
menu.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>Document</title>
<link rel="stylesheet" href="./public/css/menu.css" />
</head>
<body>
<div id="wrap">
<div id="header">
<h1>
<a href="#">Logo</a>
</h1>
<ul id="gnb">
<li>
<a href="#">Menu1</a>
<div class="sub">
<ul>
<li><a href="#">menu1-1</a></li>
<li><a href="#">menu1-2</a></li>
<li><a href="#">menu1-3</a></li>
<li><a href="#">menu1-4</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Menu2</a>
<div class="sub">
<ul>
<li><a href="#">menu2-1</a></li>
<li><a href="#">menu2-2</a></li>
<li><a href="#">menu2-3</a></li>
<li><a href="#">menu2-4</a></li>
</ul>
</div>
</li>
</ul>
<div id="util">X</div>
</div>
<div id="content">
<div>Hello World!</div>
</div>
</div>
</body>
</html>
menu.css
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
}
#wrap {
width: 100%;
}
#header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100px;
padding: 0 30px;
box-sizing: border-box;
border-bottom: 1px solid #ddd;
}
#header > #gnb {
display: flex;
}
#header > #util {
display: none;
}
@media (max-width: 800px) {
#header > #gnb {
display: none;
}
#header > #util {
display: block;
}
}
#header > #gnb::before {
content: "";
display: none;
position: absolute;
left: 0;
top: 100px;
width: 100%;
height: 85px;
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 15px -10px #000;
}
#header > #gnb:hover::before {
display: block;
}
#header > #gnb > li {
width: 200px;
}
#header > #gnb > li > .sub {
/* position: absolute;는 부모 태그의 높이 혹은 넚이를 건드리지 않기 위해 사용함 */
position: absolute;
padding-top: 40px;
display: none;
}
#header > #gnb > li:hover > .sub {
display: block;
}
#content > div {
font-size: 30px;
}
#content > div::before {
content: "-";
padding: 0 20px;
}
#content > div::after {
content: "*";
padding: 0 20px;
}
3) media query
@media (max-width: 800px) {
#header > #gnb {
display: none;
}
#header > #util {
display: block;
}
}
media query를 통해 기준값을 정한 뒤 아래와 같이
웹 페이지의 크기를 늘리거나 줄일 때 페이지의 넓이가 800px을 안 넘으면 Menu들이 전부 안보이게 함과 동시에 "X"가 나오게 하고,
넓이가 800px을 넘어갈 시에는 Menu들을 전부 보이게 함과 동시에 "X"가 안 보이게 처리함!!
4) 코드 실습
clone.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="./public/css/clone.css" />
</head>
<body>
<div id="wrap">
<!-- start header -->
<div id="header_wrap">
<div id="header">
<h1>
<a href="#">
<img
src="http://www.kiweb.or.kr/images/main_new/logo_new_2018.png"
alt="logo"
/>
</a>
</h1>
<div id="gnb">
<ul>
<li>
<a href="#">학교소개</a>
<div class="sub">
<ul>
<li><a href="#">인사말</a></li>
<li><a href="#">연혁</a></li>
<li><a href="#">교직원소개</a></li>
<li><a href="#">시설소개</a></li>
<li><a href="#">오시는길</a></li>
</ul>
</div>
</li>
<li>
<a href="#">교육과정</a>
<div class="sub">
<ul>
<li><a href="#">과정안내</a></li>
</ul>
</div>
</li>
<li>
<a href="#">취업정보</a>
<div class="sub">
<ul>
<li><a href="#">취업자인터뷰</a></li>
<li><a href="#">취업현황</a></li>
<li><a href="#">포트폴리오</a></li>
</ul>
</div>
</li>
<li>
<a href="#">커뮤니티</a>
<div class="sub">
<ul>
<li><a href="#">공지사항</a></li>
<li><a href="#">수강후기</a></li>
<li><a href="#">KI이야기</a></li>
<li><a href="#">KI기자단</a></li>
<li><a href="#">교수칼럼</a></li>
</ul>
</div>
</li>
<li>
<a href="#">상담신청</a>
<div class="sub">
<ul>
<li><a href="#">상담게시판</a></li>
<li><a href="#">지원하기</a></li>
<li><a href="#">자주묻는질문</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- end header -->
<!-- start visual -->
<div id="visual_wrap">
<div id="visual">
<ul>
<li class="visual_img">
<!-- 여기서 name 속성은 radio(하나의 요소만 선택 가능, 중복 선택 불가능)에 해당하는 element를 그룹화해주는 용도 -->
<input type="radio" id="tab1" checked="checked" name="visual" />
<img
src="http://www.kiweb.or.kr/nBoard/upload/file/main/1663647850_20800_1.jpg"
alt="visual1"
/>
</li>
<li class="visual_img">
<input type="radio" id="tab2" name="visual" />
<img
src="http://www.kiweb.or.kr/nBoard/upload/file/main/1661838619_28666_1.png"
alt="visual2"
/>
</li>
<li class="visual_img">
<input type="radio" id="tab3" name="visual" />
<img
src="http://www.kiweb.or.kr/nBoard/upload/file/main/1661838512_01844_1.png"
alt="visual3"
/>
</li>
<li class="visual_img">
<input type="radio" id="tab4" name="visual" />
<img
src="http://www.kiweb.or.kr/nBoard/upload/file/main/1661838462_26399_1.png"
alt="visual4"
/>
</li>
<li class="visual_img">
<input type="radio" id="tab5" name="visual" />
<img
src="http://www.kiweb.or.kr/nBoard/upload/file/main/1666596927_56073_1.jpg"
alt="visual5"
/>
</li>
</ul>
<div id="blind_bar">
<ul>
<li class="visual_tab1">
<label for="tab1">4.0기술융합캠프</label>
</li>
<li class="visual_tab2">
<label for="tab2">왜 돈내고 배워?</label>
</li>
<li class="visual_tab3">
<label for="tab3">취업 솔루션</label>
</li>
<li class="visual_tab4">
<label for="tab4">함께 만듭니다</label>
</li>
<li class="visual_tab5">
<label for="tab5">우수 훈련기관</label>
</li>
</ul>
</div>
</div>
</div>
<!-- end visual -->
<!-- start contents -->
<div id="contents_wrap">
<div id="contents">
<div id="main_contents">
<div id="lecture">
<ul>
<li class="con1">
<h2>
<span>Game Architecture</span>
게임 기획
</h2>
<p>게임기획자를 위한 정석 Class</p>
<a href="#">바로가기</a>
</li>
<li class="con2">
<h2>
<span>Game Programming</span>
게임 프로그래밍
</h2>
<p class="con">게임프로그래밍을 위한 정석 Class</p>
<a class="right_now" href="#">바로가기</a>
</li>
<li class="con3">
<h2>
<span>Game Artworks</span>
게임 원화
</h2>
<p class="con">게임 원화를 위한 정석 Class</p>
<a class="right_now" href="#">바로가기</a>
</li>
<li class="con4">
<h2>
<span>Progamer Coaching</span>
프로게이머 코칭
</h2>
<p class="con">프로게이머 데뷔 Class</p>
<a class="right_now" href="#">바로가기</a>
</li>
<li class="con5">
<h2>
<span>AR/VR</span>
AR/VR
</h2>
<p class="con">증강현실/가상현실 Class</p>
<a class="right_now" href="#">바로가기</a>
</li>
<li class="con6">
<h2>
<span>Block Chain</span>
블록체인
</h2>
<p class="con">블록체인 Class</p>
<a class="right_now" href="#">바로가기</a>
</li>
<li class="con7">
<h3>공지사항</h3>
<ul>
<li>
<a href="#">게임프로그래밍 37기 모집</a>
<span>10-17</span>
</li>
<li>
<a href="#">게임 프로그래밍 38기 모집</a>
<span>10-17</span>
</li>
<li>
<a href="#">블록체인 8기 모집 임박!</a>
<span>09-15</span>
</li>
<li>
<a href="#">게임프로그래밍 37기 모집</a>
<span>09-15</span>
</li>
</ul>
</li>
<li class="con8">
<h3>상담/문의</h3>
<span>
<img
src="http://www.kiweb.or.kr/images/main_new/customer_tel.png"
alt="call"
/>
</span>
<span>
<img
src="http://www.kiweb.or.kr/images/main_new/customer_kakao.png"
alt="kakao"
/>
</span>
<button>
<img
src="http://www.kiweb.or.kr/images/main_new/customer_kakao_btn.png"
alt="plus"
/>
</button>
</li>
</ul>
</div>
<div id="community">
<ul>
<li class="interview">
<a href="#" class="preview"><</a>
<div id="interview_whole">
<h3>
취업자인터뷰
<a href="#">
<img
src="http://www.kiweb.or.kr/images/main_new/btn_more.gif"
alt="더보기"
/>
</a>
</h3>
<div id="interview_image">
<img
src="http://www.kiweb.or.kr/nBoard/upload/file/interview//1662365058_18358_2.png"
alt="취업자"
/>
</div>
</div>
<a href="#" class="next">></a>
</li>
<li class="review">
<h3>
수강후기
<a href="#">
<img
src="http://www.kiweb.or.kr/images/main_new/btn_more.gif"
alt="더보기"
/>
</a>
</h3>
<div id="review_actual">
<ul>
<li class="left_rv">
<a href="#">생초보에서 개발자까지</a>
<p class="right_rv">[플밍 34기 조호진] 2022-10-17</p>
</li>
<li class="left_rv">
<a href="#">정말 많은 신세를 지고 갑니다.</a>
<p class="right_rv">[플밍 34기 김진호] 2022-10-17</p>
</li>
<li class="left_rv">
<a href="#">백번 천번 추천드립니다.</a>
<p class="right_rv">[플밍 35기 박지용] 2022-09-01</p>
</li>
<li class="left_rv">
<a href="#"
>비전공자인 저도 했습니다. 모두 취업하세요!</a
>
<p class="right_rv">[플밍 35기 이지우] 2022-08-23</p>
</li>
<li class="left_rv">
<a href="#"
>처음엔 걱정했지만 많이 배웠고 취업까지했어요.</a
>
<p class="right_rv">[플밍 35기 권기석] 2022-08-23</p>
</li>
<li class="left_rv">
<a href="#"
>6개월이라는 짧지만 긴 시간이 아깝지 않았어요.</a
>
<p class="right_rv">[플밍 35기 최윤화] 2022-08-23</p>
</li>
</ul>
</div>
</li>
</ul>
<div id="youtube">
<h3>
미디어센터
<a href="#">
<img
src="http://www.kiweb.or.kr/images/main_new/btn_more.gif"
alt="더보기"
/>
</a>
</h3>
<div id="youtube_video">
<iframe
width="560"
height="440"
src="https://www.youtube.com/embed/ZIAuAWALOKc"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen=""
></iframe>
</div>
</div>
</div>
</div>
<div id="bottom">
<ul>
<li class="ki_story">
<h2>
<span>KI.Story</span>
경일이야기
</h2>
<ul class="main">
<li>
<a href="#">
<img
src="http://www.kiweb.or.kr/nBoard/upload/file/kistory//1661914721_76966_1.png"
alt="ki_image"
/>
</a>
</li>
<li class="center_con">
<a class="main_con" href="#"
>블록체인 2기 프로젝트 발표회 ψ(｀∇´)ψ</a
>
</li>
</ul>
<ul class="details">
<li>
<a href="#">우수훈련기관</a>
</li>
<li>
<a href="#">함께하는 교육</a>
</li>
<li>
<a href="#">취업솔루션</a>
</li>
</ul>
</li>
<li class="useful_info">
<h2>
<span>useful information</span>
유용정보
</h2>
<ul class="main">
<li>
<a href="#">
<img
src="http://www.kiweb.or.kr/nBoard/upload/file/reporter//1661242815_42805_1.jpg"
alt="useful_image"
/>
</a>
</li>
<li class="center_con">
<a class="main_con" href="#"
>직장인 필수 지식, 개발자 용어 모음집</a
>
</li>
</ul>
<ul class="details">
<li>
<a href="#">【경일게임아카데미 생활관 소개】</a>
</li>
<li>
<a href="#">Blockchain이란?</a>
</li>
<li>
<a href="#"
>멀티 디바이스 메타버스 플랫폼 개발·기획자 1기 훈련생
모집</a
>
</li>
</ul>
</li>
<li class="column">
<h2>
<span>column</span>
교수칼럼
</h2>
<ul class="main">
<li>
<a href="#">
<img
src="http://www.kiweb.or.kr/nBoard/upload/file/professor//1595562552_11880_1.jpg"
alt="column_image"
/>
</a>
</li>
<li class="center_con">
<a class="main_con" href="#"
>멘토링별 학생 유형과 개발자의 자세</a
>
</li>
</ul>
<ul class="details">
<li>
<a href="#"
>프리 부트캠프 ≪공간 기반의
게임/어트랙션/메타버스/콘...</a
>
</li>
<li>
<a href="#">왜 블록체인인가?</a>
</li>
<li>
<a href="#">"학생이 미래다" 게임원화 이진호교수님 인터뷰</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- end contents -->
<!-- start footer -->
<div id="footer_wrap">
<div id="footer">
<ul>
<li>
<a class="after_mn" href="#">학교소개</a>
</li>
<li>
<a class="after_mn" href="#">교육과정</a>
</li>
<li>
<a class="after_mn" href="#">공지사항</a>
</li>
<li>
<a class="after_mn" href="#">상담신청</a>
</li>
<li>
<a class="personal" href="#">개인정보처리방침</a>
</li>
</ul>
<div id="footer_info">
<h1 id="footer_logo">
<img
src="http://www.kiweb.or.kr/images/main_new/logo_bottom_2018.png"
alt="footer_logo"
/>
</h1>
<div id="company_info">
<p>
서울특별시 강동구 천호대로 995 금복빌딩 3,4층
경일게임아카데미(지하철 5,8호선 1번출구 10m이내)
</p>
<p>
TEL : 02-479-4050 FAX : 02-479-4056 대표자 : 박병준
개인정보관리책임자 : 서혁준
</p>
<p>
사업자번호 : 212-81-89247 통신판매허가번호 :
제2020-서울강동-1360호
</p>
<p class="copyright">
Copyright © 2016. Kyungil Technical College. All rights
reserved.
</p>
</div>
</div>
</div>
</div>
<!-- end footer -->
</div>
</body>
</html>
clone.css
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
}
#wrap {
width: 100%;
}
#header_wrap {
display: flex;
justify-content: center;
}
#header {
width: 1200px;
height: 100px;
display: flex;
justify-content: space-between;
}
#header > h1 {
display: flex;
align-items: center;
}
#header > #gnb > ul {
width: 900px;
height: 100%;
display: flex;
}
#header > #gnb > ul > li {
width: 20%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
padding: 40px 0;
box-sizing: border-box;
}
#header > #gnb > ul > li > a {
font-size: 19px;
font-weight: bold;
color: #004385;
}
#header > #gnb::before {
content: "";
position: absolute;
left: 0;
top: 100px;
width: 100%;
height: 0;
background: url(http://www.kiweb.or.kr/images/common/snb_img.png) no-repeat
rgba(60, 60, 60, 0.95) top 50px left 180px;
box-shadow: 0 5px 15px -10px #000;
z-index: 2;
}
#header > #gnb:hover::before {
height: 200px;
transition: all 0.35s;
}
#header > #gnb > ul > li > .sub {
/* position: absolute;는 부모 태그의 높이 혹은 넚이를 건드리지 않기 위해 사용함 */
position: absolute;
display: none;
margin-top: 60px;
z-index: 3;
}
#header > #gnb > ul > li > .sub > ul > li {
padding: 10px 0;
box-sizing: border-box;
text-align: center;
}
#header > #gnb > ul > li > .sub > ul > li > a {
color: #fafafa;
}
#header > #gnb:hover > ul > li > .sub {
display: block;
}
#header > #gnb > ul > li:hover > .sub {
display: block;
}
#visual_wrap {
width: 100%;
height: 500px;
}
#visual {
position: relative;
max-width: 1900px;
height: 100%;
overflow: hidden;
}
#visual > ul {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}
#visual > ul > li {
/* 각 visual 이미지를 쌓아주는 용도 */
position: absolute;
}
#visual > ul > li > input {
display: none;
}
#visual > ul > li > img {
/* 각각의 이미지를 모두 안 보이게 초기화(단, html 상 default 값을 지정한 checked 보유 이미지 제외) */
opacity: 0;
}
/* 특정 이미지를 클릭했을 시 해당 이미지가 3초의 시간을 두고 나타나게 함 */
#visual > ul > li > input:checked + img {
opacity: 1;
transition: all 3s;
}
#visual > #blind_bar {
display: flex;
justify-content: center;
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 50px;
text-align: center;
}
#visual > #blind_bar > ul {
display: flex;
}
#visual > #blind_bar > ul > li {
color: #a8b4be;
font-size: 18px;
font-weight: bold;
padding: 15px 40px;
box-sizing: border-box;
}
#visual > #blind_bar > ul > li > label {
cursor: pointer;
}
#contents_wrap {
width: 100%;
display: flex;
justify-content: center;
margin-top: 30px;
}
#contents {
width: 1200px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#main_contents {
width: 1200px;
min-height: 900px;
display: flex;
flex-wrap: nowrap;
}
#lecture {
width: 600px;
border-left: 1px solid #ececec;
border-top: 1px solid #ececec;
}
#lecture > ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#lecture > ul > li {
width: 50%;
height: 230px;
border-right: 1px solid #ececec;
border-bottom: 1px solid #ececec;
padding: 20px;
box-sizing: border-box;
}
#lecture > ul > li > h2 > span {
display: block;
font-size: 12px;
color: #4689e1;
}
#lecture > ul > li > p {
margin-top: 30px;
width: 50%;
min-height: 80px;
font-size: 12px;
}
#lecture > ul > li > a {
display: block;
width: 100px;
height: 30px;
background: #81b4f2;
border-radius: 15px;
line-height: 30px;
font-size: 14px;
color: #fff;
text-align: center;
}
#community > ul {
width: 600px;
height: 415px;
display: flex;
flex-direction: row;
}
#community > ul > li {
width: 50%;
border-top: 1px solid #ececee;
border-right: 1px solid #ececee;
box-sizing: border-box;
}
#community > ul > .interview {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#community > ul > .interview > #interview_whole > h3 {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
#community > ul > .interview > #interview_whole > #interview_image {
text-align: center;
}
#community > ul > .interview > #interview_whole > #interview_image > img {
width: 238px;
height: 330px;
border: 1px solid #ececec;
}
#community > ul > .interview > a {
width: 20px;
height: 30px;
background: #eee;
line-height: 30px;
color: #fff;
text-align: center;
}
#community > ul > .review {
display: flex;
flex-direction: column;
align-items: center;
background: #fafafa;
}
#community > ul > .review > h3 {
width: 259.5px;
height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 18px;
}
#community > ul > .review > #review_actual {
width: 300px;
height: 330px;
display: flex;
justify-content: center;
}
#community > ul > .review > #review_actual > ul > li {
margin-bottom: 5px;
padding: 5px 10px;
background: #fff;
border: 1px solid #ececec;
font-size: 12px;
line-height: 20px;
box-sizing: border-box;
}
#community > ul > .review > #review_actual > ul > li > a {
color: #666;
}
#community > ul > .review > #review_actual > ul > li > p {
color: #666;
text-align: right;
}
#community > #youtube {
display: flex;
flex-direction: column;
align-items: center;
width: 600px;
height: 506px;
box-sizing: border-box;
border-bottom: 1px solid #ececec;
border-top: 1px solid #ececec;
border-right: 1px solid #ececec;
}
#community > #youtube > h3 {
width: 559px;
height: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 20px;
}
#bottom {
width: 1200px;
height: 430px;
margin: 30px 0;
display: flex;
}
#bottom > ul {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#bottom > ul > li {
padding: 20px;
box-sizing: border-box;
border: 1px solid #ececec;
background: #fafafa;
}
#bottom > ul > .ki_story {
margin-right: 15px;
}
#bottom > ul > .ki_story > h2 {
background: url(http://www.kiweb.or.kr/images/main_new/main_bbs_ic_01.png)
279px -5px no-repeat;
height: 52px;
}
#bottom > ul > li > h2 > span {
display: block;
font-size: 12px;
color: #4689e1;
}
#bottom > ul > li > .main {
margin: 15px 0 10px 0;
}
#bottom > ul > li > .main > .center_con {
text-align: center;
}
#bottom > ul > li > .main > li > .main_con {
color: #666;
font-size: 12px;
display: block;
padding: 5px 0 10px 0;
box-sizing: border-box;
}
#bottom > ul > li > .details > li > a {
display: block;
color: #666;
font-size: 12px;
padding: 8px 0;
box-sizing: border-box;
}
#bottom > ul > li > .details > li > a::before {
content: "- ";
}
#bottom > ul > .useful_info {
margin-right: 15px;
}
#bottom > ul > .useful_info > h2 {
background: url(http://www.kiweb.or.kr/images/main_new/main_bbs_ic_02.png)
275px -4px no-repeat;
height: 52px;
}
#bottom > ul > .column > h2 {
background: url(http://www.kiweb.or.kr/images/main_new/main_bbs_ic_03.png)
272px -4px no-repeat;
height: 52px;
}
#footer_wrap {
width: 100%;
height: 200px;
display: flex;
margin-top: 20px;
background: #323233;
}
#footer {
width: 1200px;
height: 100%;
display: flex;
flex-direction: column;
padding: 10px 0;
box-sizing: border-box;
margin: 0 auto;
}
#footer > ul {
width: 100%;
display: flex;
flex-direction: row;
padding: 10px 0 30px 0;
box-sizing: border-box;
}
#footer > ul > li > a {
color: #aeaeae;
font-size: 12px;
}
#footer > ul > li > .after_mn::after {
content: "|";
font-size: 11px;
font-weight: lighter;
padding: 0 20px;
box-sizing: border-box;
}
#footer > ul > li > .personal {
font-weight: bold;
}
#footer > ul > li > span {
font-weight: lighter;
color: #aeaeae;
font-size: 11px;
padding: 0 10px;
box-sizing: border-box;
}
#footer > #footer_info {
width: 100%;
display: flex;
}
#footer > #footer_info > h1 {
padding-left: 25px;
box-sizing: border-box;
}
#company_info {
padding-left: 70px;
box-sizing: border-box;
}
#company_info > p {
color: #aeaeae;
font-size: 12px;
padding-bottom: 10px;
box-sizing: border-box;
}
#company_info > .copyright {
padding: 10px 0 10px 0;
box-sizing: border-box;
}
/* etc */
.con1 {
background: url(http://www.kiweb.or.kr/images/main_new/main_con_ic_01.png)
178px 109px no-repeat;
}
.con2 {
background: url(http://www.kiweb.or.kr/images/main_new/main_con_ic_02.png)
178px 109px no-repeat;
}
.con3 {
background: url(http://www.kiweb.or.kr/images/main_new/main_con_ic_04.png)
178px 109px no-repeat;
}
.con4 {
background: url(http://www.kiweb.or.kr/images/main_new/main_con_ic_05.png)
178px 109px no-repeat;
}
.con5 {
background: url(http://www.kiweb.or.kr/images/main_new/main_con_ic_07.jpg)
178px 109px no-repeat;
}
.con6 {
background: url(http://www.kiweb.or.kr/images/main_new/main_con_ic_06.jpg)
178px 109px no-repeat;
}
.con7 > ul {
width: 256px;
height: 150px;
display: flex;
flex-direction: column;
justify-content: space-around;
margin-top: 30px;
}
.con7 > ul > li {
width: 100%;
height: 25%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.con7 > ul > li > a {
color: #666;
cursor: pointer;
}
.con7 > ul > li > a::before {
content: "- ";
}
.con7 > ul > li > span {
color: #666;
}
.con8 > span {
display: block;
margin-top: 30px;
}
.con8 > button {
margin-left: 65px;
border: none;
}
'HTML & CSS > HTML & CSS(2022 version)' 카테고리의 다른 글
| HTML & CSS 실습 및 추가 skill(2) (0) | 2022.10.26 |
|---|---|
| HTML & CSS 실습 및 추가 skill (0) | 2022.10.25 |
| CSS 복습(2) - 위치 조절 방법 및 기타 사항 (0) | 2022.10.24 |
| CSS 복습 - 적용 방법 및 선택자, 주요 속성 (0) | 2022.10.21 |
| HTML 복습 - 개념 및 기본 문법, 자주 쓰이는 태그/속성 (0) | 2022.10.20 |
