Commit @e5f1a891c9321f440bc86f942ac0fa580ef6c8f0 - roakfwk30/2022단기집중

안효원 2022-01-19

lastCommit

@e5f1a891c9321f440bc86f942ac0fa580ef6c8f0

46d7e76

e5f1a89

vscode/float/index.html

--- vscode/float/index.html

+++ vscode/float/index.html

...	...	@@ -44,6 +44,38 @@
44	44	<!-- MAIN -->
45	45	<main>
46	46
	47	+ <!-- SECTION1 -->
	48	+ <section id="section1">
	49	+ <div class="wrap">
	50	+ <ul>
	51	+ <li id="box1" class="box">
	52	+ <a href="#">
	53	+ <h3>원서<br>접수</h3>
	54	+ <p>자세히보기</p>
	55	+ </a>
	56	+ </li>
	57	+ <li id="box2" class="box">
	58	+ <a href="#">
	59	+ <h3>입학<br>상담</h3> <p>자세히보기</p>
	60	+ </a>
	61	+ </li>
	62	+ <li id="box3" class="box">
	63	+ <a href="#">
	64	+ <h3>입시자료<br>신청</h3>
	65	+ <p>자세히보기</p>
	66	+ </a>
	67	+ </li>
	68	+ <li id="box4" class="box">
	69	+ <a href="#">
	70	+ <h3>수강<br>신청</h3>
	71	+ <p>자세히보기</p>
	72	+ </a>
	73	+ </li>
	74	+ </ul>
	75	+ </div>
	76	+ </section>
	77	+ <!-- SECTION1 -->
	78	+
47	79	</main>
48	80	<!-- MAIN -->
49	81
...	...	@@ -52,5 +84,10 @@
52	84
53	85	</footer>
54	86	<!-- FOOTER -->
55		-</body>
56		-</html> (No newline at end of file)
	87	+</body>
	88	+</html>
	89	+
	90	+
	91	+
	92	+
	93	+

46d7e76

e5f1a89

vscode/float/main.css

--- vscode/float/main.css

+++ vscode/float/main.css

...	...	@@ -1,4 +1,13 @@
1	1	@charset "utf-8";
	2	+
	3	+/* 변수 선언 */
	4	+:root{
	5	+ --img-box1: url('https://www.icqa.or.kr/images/cn/box1_1_bg.png');
	6	+ --img-box2: url('https://www.icqa.or.kr/images/cn/box1_2_bg.png');
	7	+ --img-box3: url('https://www.icqa.or.kr/images/cn/box1_3_bg.png');
	8	+ --img-box4: url('https://www.icqa.or.kr/images/cn/box1_4_bg.png');
	9	+}
	10	+
2	11	/* 공통 */
3	12	* {
4	13	box-sizing: border-box;
...	...	@@ -96,9 +105,82 @@
96	105	color: #005baa;
97	106	}
98	107
	108	+/* MAIN */
	109	+section {
	110	+ width: 100%;
	111	+ margin-top: 25px;
	112	+}
99	113
	114	+section:after {
	115	+ content: '';
	116	+ display: block;
	117	+ clear: both;
	118	+}
100	119
	120	+/* SECTION1 */
	121	+#section1 ul li {
	122	+ background-color: #333;
	123	+ float: left;
	124	+ min-height: 225px;
	125	+ text-align: center;
	126	+ width: 23%;
	127	+ margin-left: 2%;
	128	+}
101	129
	130	+#section1 ul li a{
	131	+ color: #fff;
	132	+ display: block;
	133	+ padding: 50px 0;
	134	+ width: 100%;
	135	+}
	136	+
	137	+#section1 ul li h3 {
	138	+ font-size: 1.6rem;
	139	+ font-weight: 600;
	140	+}
	141	+#section1 ul li p {
	142	+ font-size: 0.8rem;
	143	+ margin-top: 15px;
	144	+ border: 1px solid white;
	145	+ padding: 5px 15px;
	146	+ display: inline-block;
	147	+}
	148	+
	149	+#section1 .box {
	150	+ background-position: right bottom;
	151	+ background-size: contain;
	152	+ background-repeat: no-repeat;
	153	+}
	154	+
	155	+#section1 #box1 {
	156	+ margin-left: 0;
	157	+ background-color: #00a882;
	158	+ background-image: var(--img-box1)
	159	+}
	160	+#section1 #box1:hover {
	161	+ background-color: #00c29a;
	162	+}
	163	+#section1 #box2 {
	164	+ background-color: #2263c8;
	165	+ background-image: var(--img-box2)
	166	+}
	167	+#section1 #box2:hover {
	168	+ background-color: #2875db;
	169	+}
	170	+#section1 #box3 {
	171	+ background-color: #2083cb;
	172	+ background-image: var(--img-box3)
	173	+}
	174	+#section1 #box3:hover {
	175	+ background-color: #2592df;
	176	+}
	177	+#section1 #box4 {
	178	+ background-color: #ff893e;
	179	+ background-image: var(--img-box4)
	180	+}
	181	+#section1 #box4:hover {
	182	+ background-color: #ff944c;
	183	+}
102	184
103	185
104	186

Add a comment

Open 0
Closed 0

List

Delete comment