Commit @2211013b39dff86f2ff778dd686520d5d16a77b4 - roakfwk30/2022단기집중

안효원 2022-01-14

헤더 스타일 완성

@2211013b39dff86f2ff778dd686520d5d16a77b4

e88b761

2211013

vscode/float/index.html

--- vscode/float/index.html

+++ vscode/float/index.html

...	...	@@ -10,31 +10,32 @@
10	10	<body>
11	11	<!-- HEADER -->
12	12	<header>
	13	+
13	14	<div class="top">
14	15	<div class="wrap">
15	16	<a class="bg" href="#">전체메뉴</a>
16	17	<ul class="gnb">
17		- <li><a href="#"></a>로그인</li>
18		- <li><a href="#"></a>회원가입</li>
	18	+ <li><a href="#">로그인</a></li>
	19	+ <li><a href="#">회원가입</a></li>
19	20	</ul>
20	21	</div>
21	22	</div>
	23	+
22	24	<nav>
23	25	<div class="wrap">
24	26	<div class="logo">
25		- <a href="#">
26		- <img src="image/logo1.png" alt="">
27		- </a>
28		- <ul class="lnb">
29		- <li><a href="#">학교소개</a></li>
30		- <li><a href="#">입학안내</a></li>
31		- <li><a href="#">교육과정</a></li>
32		- <li><a href="#">취업정보</a></li>
33		- <li><a href="#">커뮤니티</a></li>
34		- </ul>
	27	+ <a href="#"><img src="image/logo1.png" alt=""></a>
35	28	</div>
	29	+ <ul class="lnb">
	30	+ <li><a href="#">학교소개</a></li>
	31	+ <li><a href="#">입학안내</a></li>
	32	+ <li><a href="#">교육과정</a></li>
	33	+ <li><a href="#">취업정보</a></li>
	34	+ <li><a href="#">커뮤니티</a></li>
	35	+ </ul>
36	36	</div>
37	37	</nav>
	38	+
38	39	</header>
39	40	<!-- HEADER -->
40	41

e88b761

2211013

vscode/float/main.css

--- vscode/float/main.css

+++ vscode/float/main.css


 @charset 'utf-8';
-* {font-size: 14px;}
+/* 공통 */
+* {
+    font-size: 14px;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+/* 공통 */
 body {
     width: 100%;
     height: 100%;
     background-color: #fff;
 }
+a, a:hover, a:link, a:active {
+    text-decoration: none;
+    color: #222;
+}
+b, strong {
+    font-weight: 600;
+}
 .wrap {
     width: 100%;
     max-width: 800px;
-    background-color: tomato;
-    margin: 0 auto;}
+    margin: 0 auto;
+}
+ul, li {
+    list-style: none;
+}
+header {
+
+}
+.top {
+    background-color: #1b4fa0;
+    width: 100%;
+}
+.top .bg:hover{
+    color: #eee;
+}
+.top .bg {
+    float: left;
+    background-color: #143b78;
+    color: #fff;
+    font-size: 0.8rem;
+    padding: 10px 20px;
+}
+.top .gnb {
+    text-align: right;
+}
+.top .gnb li {
+    display: inline-block;
+
+}
+.top .gnb li:hover {
+    color: #eee;
+}
+.top .gnb li a {
+    color: #fff;
+    display: block;
+    padding: 10px 15px;
+    font-size: 0.8rem;
+}
+nav {
+    background-color: #eee;
+}
+nav .logo {
+    float: left;
+    padding: 16px 0;
+}
+nav .lnb li {
+    display: inline-block;
+    width: 14%;
+}
+nav .lnb li a {
+    display: block;
+    padding: 27px 0;
+    font-size: 1.2rem;
+    font-weight: 600;
+    text-align: center;
+}
+nav .lnb li a:hover {
+     color: #143b78;
+}

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,12 +1,83 @@
1	1	@charset 'utf-8';
2		-* {font-size: 14px;}
	2	+/* 공통 */
	3	+* {
	4	+ font-size: 14px;
	5	+ margin: 0;
	6	+ padding: 0;
	7	+ box-sizing: border-box;
	8	+}
	9	+/* 공통 */
3	10	body {
4	11	width: 100%;
5	12	height: 100%;
6	13	background-color: #fff;
7	14	}
	15	+a, a:hover, a:link, a:active {
	16	+ text-decoration: none;
	17	+ color: #222;
	18	+}
	19	+b, strong {
	20	+ font-weight: 600;
	21	+}
8	22	.wrap {
9	23	width: 100%;
10	24	max-width: 800px;
11		- background-color: tomato;
12		- margin: 0 auto;} (No newline at end of file)
	25	+ margin: 0 auto;
	26	+}
	27	+ul, li {
	28	+ list-style: none;
	29	+}
	30	+header {
	31	+
	32	+}
	33	+.top {
	34	+ background-color: #1b4fa0;
	35	+ width: 100%;
	36	+}
	37	+.top .bg:hover{
	38	+ color: #eee;
	39	+}
	40	+.top .bg {
	41	+ float: left;
	42	+ background-color: #143b78;
	43	+ color: #fff;
	44	+ font-size: 0.8rem;
	45	+ padding: 10px 20px;
	46	+}
	47	+.top .gnb {
	48	+ text-align: right;
	49	+}
	50	+.top .gnb li {
	51	+ display: inline-block;
	52	+
	53	+}
	54	+.top .gnb li:hover {
	55	+ color: #eee;
	56	+}
	57	+.top .gnb li a {
	58	+ color: #fff;
	59	+ display: block;
	60	+ padding: 10px 15px;
	61	+ font-size: 0.8rem;
	62	+}
	63	+nav {
	64	+ background-color: #eee;
	65	+}
	66	+nav .logo {
	67	+ float: left;
	68	+ padding: 16px 0;
	69	+}
	70	+nav .lnb li {
	71	+ display: inline-block;
	72	+ width: 14%;
	73	+}
	74	+nav .lnb li a {
	75	+ display: block;
	76	+ padding: 27px 0;
	77	+ font-size: 1.2rem;
	78	+ font-weight: 600;
	79	+ text-align: center;
	80	+}
	81	+nav .lnb li a:hover {
	82	+ color: #143b78;
	83	+}

Delete comment