레이아웃짜기

sisun·2023년 4월 14일
0

HTML연습

목록 보기
4/8

본문 > https://velog.io/@si9138/block-display

display속성값의 이해

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>01_display속성값의 이해</title>
	<style>
		body{/*벤더 프리픽스 : 각 브라우저마다 css3를 가동시키는 엔진의 이름*/
		}
		*{margin: 0;
			padding: 0;}
			.box{
				width: 100px;
				height: 100px;
				border:1px solid red;
				background-color: pink;
				display: inline-block;
			}
			span{
				background-color: lightblue;
				border:1px solid blue;
				width: 100px;
				height: 100px;
				padding:5px;
			/*display: block;
			float: left;*/
			display: inline-block;
		}
		.clear{
			width: 100px;
			height: 100px;
			border:1px solid green;
			background-color: green;
			/*clear: both;*/
		}
		nav{
			width: 80%;
			border:1px solid red;
			margin:10px auto;
			height: 50px;
		}
		nav ul{
			width: 100%;
			height: 100%;
			border:1px solid blue;
			overflow: hidden;
		}
		nav ul li{
			width: 20%;
			height: 100%;
			background-color: beige;
			float: left;
			list-style: none;
			text-align: center;
			line-height: 50px;
			border:1px solid blue;
			box-sizing: border-box;

		}
		nav ul li a{
			text-decoration: none;
			color:white;
			/*background-color: hotpink;*/
			width: 100%;
			height: 100%;
			display: block;
			/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cb60b3+0,bf63a6+30,a80077+65,db36a4+100 */
			background: rgb(203,96,179); /* Old browsers */
			background: -moz-linear-gradient(45deg,  rgba(203,96,179,1) 0%, rgba(191,99,166,1) 30%, rgba(168,0,119,1) 65%, rgba(219,54,164,1) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(45deg,  rgba(203,96,179,1) 0%,rgba(191,99,166,1) 30%,rgba(168,0,119,1) 65%,rgba(219,54,164,1) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(45deg,  rgba(203,96,179,1) 0%,rgba(191,99,166,1) 30%,rgba(168,0,119,1) 65%,rgba(219,54,164,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#db36a4',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		}
	</style>
</head>
<body>
	<h1>대표적인 블럭요소인 div태그도 inline-block요소로 바꾸면 가로로 배치되는 속성값인 inline요소의 특징을 갖게된다.</h1>
	<!-- div.box{box$}*3 -->
	<div class="box">box1</div>
	<div class="box">box2</div>
	<div class="box">box3</div>
	<h1>대표적인 인라인 요소인 span태그를 inline-block요소로 바꾸면 width,height의 설정값도 인식하면서 인라인 특유의 가로로 배치되는 속성값도 유지한다.</h1>
	<!-- span{span$}*3 -->
	<span>span1</span>
	<span>span2</span>
	<span>span3</span>
	<h1>display속성을 inline혹은 inline-block으로 바꾸었을 때 그 다음에 오는 요소는 전혀 영향을 받지 않아서 clear:both속성값을 활용할 필요가 없다!</h1>
	<div class="clear">box</div>
	<!-- nav>ul>li*5>a{menu$} -->
	<nav>
		<ul>
			<li><a href="#">menu1</a></li>
			<li><a href="#">menu2</a></li>
			<li><a href="#">menu3</a></li>
			<li><a href="#">menu4</a></li>
			<li><a href="#">menu5</a></li>
		</ul>
	</nav>
	<h1>네비게이션을 짤 때 li안에 a태그를 넣게 되는데 사용자가 li요소를 클릭하면 링크가 바로 동작하도록 하기 위해서는 a태그의 width, height를 li에 꽉 차게 주어야 한다. 그런데 a태그는 inline요소라서 width, height속성값이 적용되지 않으므로 display:block으로 바꾼후, width, height값을 설정해야 한다!!!</h1>
</body>
</html>

03_네비게이션

<!DOCTYPE html>
<html lang="ko">
<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>03_네비게이션_selfEX</title>
    <style>
        *{margin: 0; padding: 0;}
        ul li{
            list-style: none;
        }
        #wrapper{
            border: 2px solid lightgray;
            width: 700px;
            margin: 20px auto;
            overflow: hidden;
            padding: 20px;
        }
        ul{
            margin: 0 auto;
            width: 650px;
            border: 1px solid lightgray;
            box-sizing: border-box;
            overflow: hidden;
        }
        li{
            border: 1px solid lightgray;
            background: orange;
            
            font-size: 1.5em;
            font-weight: bold;
            text-align: center;

            
            width: 20%; height: 50px;
            line-height: 50px;
            float: left;
            box-sizing: border-box;
        }
        a{ 
            width: 100%; height: 100%;
            display: block;
            text-decoration: none;
            color: white;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <ul>
            <li><a href="#">menu1</a></li>
            <li><a href="#">menu2</a></li>
            <li><a href="#">menu3</a></li>
            <li><a href="#">menu4</a></li>
            <li><a href="#">menu5</a></li>
        </ul>
    </div>
</body>
</html>

레이아웃 실습

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>03_레이아웃 실습</title>
	<style>
		/*reset css*/
		*{margin: 0;
			padding: 0;}
			ul li, ol li{
				list-style: none;
			}
			div{
				border:1px solid gray;
			}
			/*#wrapper style*/
			#wrapper{
				width: 80%;
				margin:0 auto;
				padding:5px;
			}
			/*#header style*/
			div#header{
				width: 100%;
				height: 150px;
				line-height: 150px;
				padding-top:50px;
			}
			div#header h1{
				text-align: center;
				text-transform: uppercase;
				border:1px solid red;
				width: 100px;
				height: 100px;
				line-height: 100px;
				margin:0 auto;
				border-radius: 50px;
			}
			div#header h1 a, div#nav a{
				text-decoration: none;
				color:black;
			}
			/*#nav style*/
			div#nav{
				width: 100%;
				margin:5px 0;
				text-align: center;
				padding-top: 20px;
			}
			div#nav h3, div#section h3, div.article h2, div#aside h3, div#footer h3{
				text-transform: uppercase;
			}
			div#nav ul{
				width: 80%;
				border:1px solid red;
				margin:20px auto;
				overflow: hidden;
			}
			div#nav ul li{
				border:1px solid purple;
				width: 20%;
				float: left;
				box-sizing: border-box;
				height: 40px;
				line-height: 40px;
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2ec4d+12,fd89d7+72,ff7cd8+100 */
				background: rgb(242,236,77); /* Old browsers */
				background: -moz-linear-gradient(left,  rgba(242,236,77,1) 12%, rgba(253,137,215,1) 72%, rgba(255,124,216,1) 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(left,  rgba(242,236,77,1) 12%,rgba(253,137,215,1) 72%,rgba(255,124,216,1) 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to right,  rgba(242,236,77,1) 12%,rgba(253,137,215,1) 72%,rgba(255,124,216,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2ec4d', endColorstr='#ff7cd8',GradientType=1 ); /* IE6-9 */
			}
			/*#section style*/
			div#section{
				width: 100%;
				text-align: center;
				padding: 5px;
				box-sizing: border-box;
				overflow: hidden;
			}
			#section div#main{
				width: 79%;
				float: left;
				box-sizing: border-box;
				height: 400px;
				margin-right: 1%;
			}
			#section div#aside{
				width: 20%;
				float: left;
				box-sizing: border-box;
				height: 400px;
				background-color: yellow;
			}
			/*.article style*/
			div#section div.article{
				width: 48%;
				border-color: blue;
				float: left;
				box-sizing: border-box;
				margin: 0 1%;
			}
			/*#footer style*/
			div#footer{
				text-align: center;
				padding:50px;
				margin-top: 5px;
			}
		</style>
	</head>
	<body>
		<!-- div#wrapper>(div#header>h1>a>{logo})+(div#nav>h3{navigation}+ul>li*5>a>{menu$})+(div#section>div#main>h3{content}+div.article*4>h2{title$}+img^^div#aside)+(div#footer>h3{footer}) -->
		<div id="wrapper">
			<div id="header">
				<h1><a href="">logo</a></h1>
			</div>
			<div id="nav">
				<h3>navigation</h3>
				<ul>
					<li><a href="">menu1</a></li>
					<li><a href="">menu2</a></li>
					<li><a href="">menu3</a></li>
					<li><a href="">menu4</a></li>
					<li><a href="">menu5</a></li>
				</ul>
			</div>
			<div id="section">
				<div id="main">
					<h3>content</h3>
					<div class="article">
						<h2>title1</h2>
						<img src="https://via.placeholder.com/200x100/eda917/f5f5f5?text=200x100" alt="">
					</div>
					<div class="article">
						<h2>title2</h2>
						<img src="https://via.placeholder.com/200x100/eda917/f5f5f5?text=200x100" alt="">
					</div>
					<div class="article">
						<h2>title3</h2>
						<img src="https://via.placeholder.com/200x100/eda917/f5f5f5?text=200x100" alt="">
					</div>
					<div class="article">
						<h2>title4</h2>
						<img src="https://via.placeholder.com/200x100/eda917/f5f5f5?text=200x100" alt="">
					</div>
				</div>
				<div id="aside">
					<h3>banner</h3>
				</div>
			</div>
			<div id="footer">
				<h3>footer</h3>
			</div>
		</div>
	</body>
	</html>

02_구조선택자

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>02_구조선택자</title>
	<style>
		*{margin: 0;
		padding: 0;}
		body{
			overflow: hidden;
		}
		nav{
			width: 30%;
			border:1px solid red;
			float: left;
			margin:50px;
		}
		nav li{
			width: 100%;
			list-style: none;
			text-align: center;
			background-color: yellow;
			height: 40px;
			line-height: 40px;
			border:1px solid red;
		}
		nav li a{
			text-decoration:none;
			color:orange;
			font-size: 1.5em;
			display: block;
			width: 100%;
			height: 100%;
		}
		/*nav li:nth-child(1){
			background-color: #C655F0
		}*/
		/*nav li:nth-of-type(1){
			background-color: green
		}*/
		nav li:first-child{
			background-color: red;
		}
		nav#left li:nth-child(3){
			background-color: green;
		}
		nav#right li:nth-of-type(3){
			background-color: green;
		}
		nav#left li:nth-child(5){
			background-color: blue;
		}
		nav#right li:nth-of-type(5){
			background-color: blue;
		}
		nav#left li:nth-child(even) a{
			color:aqua;
		}
		nav#right li:nth-child(2n+1) a{
			color:purple;
		}
		nav#left li:nth-child(3n+4){
			background-color: white;
		}
		nav li:nth-child(10){
			background-color: linen !important;
		}
		nav li:last-child a{
			color:red !important;
		}
	</style>
</head>
<body>
	<h1>구조 선택자는 부모를 기준으로 몇번째 자식인지를 선택할 수 있다. <br>
	1)nth-child는 태그와는 상관없이 몇번째 자식인지를 세어서 선택하고 <br>
    2)nth-of-type은 정확하게 선택한 태그만 세어서 몇번째 자식인지를 선택한다!</h1>
	<!-- nav>ul>li*10>a[href="#"]>{menu$$} -->
	<nav id="left">
		<ul>
			<li><a href="#">menu01</a></li>
			<li><a href="#">menu02</a></li>
			<div><a href="#">menu03</a></div>
			<li><a href="#">menu04</a></li>
			<li><a href="#">menu05</a></li>
			<li><a href="#">menu06</a></li>
			<li><a href="#">menu07</a></li>
			<li><a href="#">menu08</a></li>
			<li><a href="#">menu09</a></li>
			<li><a href="#">menu10</a></li>
		</ul>
	</nav>
	<nav id="right">
		<ul>
			<li><a href="#">menu01</a></li>
			<li><a href="#">menu02</a></li>
			<div><a href="#">menu03</a></div>
			<li><a href="#">menu04</a></li>
			<li><a href="#">menu05</a></li>
			<li><a href="#">menu06</a></li>
			<li><a href="#">menu07</a></li>
			<li><a href="#">menu08</a></li>
			<li><a href="#">menu09</a></li>
			<li><a href="#">menu10</a></li>
		</ul>
	</nav>
</body>
</html>

03_스타벅스 네비_selfEX

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>03_스타벅스 네비_selfEX</title>
	<style>
		*{margin: 0;
		padding: 0;}
		/*nav, li, a{
			border:1px solid red;
		}*/
		nav{
			width: 90%;
			margin:0 auto;
			overflow: hidden;
		}
		nav li{
			width: 16.666%;
			height: 40px;
			list-style: none;
			float: left;
			box-sizing: border-box;
			text-align: center;
			line-height: 40px;
		}
		nav li{
			text-decoration: none;
			background-color: #2A5907
		}
		nav li a{
			color:white;
			text-decoration: none;
			font-size: 0.8em;
		}
		nav li:nth-child(2n){
			background-color: #BB0F0F
		}
		nav li:first-child{
			border-radius: 10px 0 0 10px;
		}
		nav li:last-child{
			border-radius: 0 10px 10px 0;
		}
		nav li:hover{
			background-color: #570F8A;
		}
		nav a{
			display: block;
			width: 100%;
			height: 100%;
			font-family: "batang";
		}
	</style>
</head>
<body>
	<nav>
		<li><a href="http://www.naver.com">my starbucks</a></li>
		<li><a href="http://www.naver.com">coffee</a></li>
		<li><a href="http://www.naver.com">store</a></li>
		<li><a href="http://www.naver.com">reward</a></li>
		<li><a href="http://www.naver.com">what's new</a></li>
		<li><a href="http://www.naver.com">custom</a></li>
	</nav>
</body>
</html>

board_lnd_hover

<!DOCTYPE html>
<html lang="ko">
<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>
    <style>
        *{margin:0; padding:0;}
        ul li,ol li{list-style:none}
        body{
            background:yellow;
        }
        nav#lnb{
            width: 179px;height: 188px;/*이미지 실제크기*/
            /* border: 1px solid red;  가이드라인*/ 
            /*↓*/
            position:absolute;
            float: left; 
            left: 50%;
            margin-left: -89.5px ; /*or, margin-right*/
            /*컨텐츠를 중앙에 배치하기위해 position:absolute;를 설정한뒤
            왼쪽으로 문서의 절반 이동하고 컨텐츠(지금은 이미지) 너비의 반만큼 왼쪽으로 이동한다.*/
            bottom:0px;
            /*컨텐츠를 바닥에 붙이기위해 position:absolute;후 바닥값을 0으로 설정 */
            background-image: url(board.png);
        }
        nav li:nth-child(1){
            width: 134px;height: 14px;/*이미지 실제크기*/
            background-image: url(menu_01.png);
            position: absolute;
            left: 50%; margin-left: -67px;
            /*부모의 왼쪽상단을 기준으로 잡는다.nav#lnb의 부모는 body였기때문에 문서기준으로 움직였고 현재는 ul을 기준으로 움직인다.*/
            top: 20px;/*그림에 맞는 위치*/
        }
        nav li:nth-child(2){
            width: 104px;height: 18px;/*이미지 실제크기*/
            background-image: url(menu_02.png);
            position: absolute;
            left: 50%;
            margin-left: -52px;
            top: 65px;
        }
        nav li:nth-child(3){
            width: 97px; height: 14px;/*이미지 실제크기*/
            background-image: url(menu_03.png);
            position: absolute;
            left: 50%;
            margin-left: -48.5px;
            top: 95px;
        }
        nav#lnb a{
            display: block;
            text-indent: -1000px;
            /*text-indent= 들여쓰기
            안보이도록 멀리 보내서 없애버린다*/
        }
        nav#lnb li:nth-child(1):hover,nav#lnb li:nth-child(1):active{
            background-image: url(menu_hover_01.png);
        }
        nav#lnb li:nth-child(2):hover,nav#lnb li:nth-child(2):active{
            background-image: url(menu_hover_02.png);
        }
        nav#lnb li:nth-child(3):hover,nav#lnb li:nth-child(3):active{
            background-image: url(menu_hover_03.png);
        }
        


    </style>
</head>
<body>
    <div id="wrapper">
        <nav id="lnb">
            <ul>
                <li><a href="#">menu1</a></li>
                <li><a href="#">menu2</a></li>
                <li><a href="#">menu3</a></li>
            </ul>
        </nav>
    </div>

</body>
</html>

엔젤리너스

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>엔젤리너스 레이아웃_selfEX</title>
	<style>
		*{margin: 0;
		padding: 0;}
		ul li, ol li{
			list-style: none;
			float: left;
		}	
		ul,ol{
			overflow: hidden;
		}
		ul li a, ol li a{
			display: block;
			text-decoration: none;
			width: 100%;
			height: 100%;
		}
		header, section, footer p{
			border:1px solid gray;
			width: 800px;
			margin:0 auto;
			padding:5px;
		}
		#wrapper{
			width: 100%;
		}
		/*header style*/
		header #gnb1{
			border:1px solid blue;
			overflow: hidden; /*자식에 float가 있으면 부모에 overflow:hidden을 꼭 처리하여 레이아웃을 맞춰준다.*/;
		}
		header #gnb1 ul{
			width: 60%;
			border:1px solid red;
			float: right; /*우측으로 이동*/
			padding: 5px;
		}
		header #gnb1 ul li{
			border:1px solid pink;
			width: 14.285%;
			box-sizing: border-box; /*border가 width값에 포함되도록 설정*/
			text-align: center;
		}
		header #gnb2{
			border:1px solid green;
			padding:2px;
		}
		header #gnb2 ul{
			border:1px solid red;
			padding:2px;
		}
		header #gnb2 ul li{
			width: 14.285%;
			border:1px solid pink;
			box-sizing: border-box;/*border가 width값에 포함되도록 설정*/
			text-align: center;
		}
		#carousel{
			border:1px solid gray;
			text-align: center;
			height: 50px;
			line-height: 50px; /*줄간격을 height와 동일하게 주어 세로기준으로 텍스트를 센터*/
			margin-top: 5px;
		}

		/*section#ad style*/
		#ad{
			border:1px solid orange;
			padding:5px;
			overflow: hidden;
		}
		#ad div{
			border:1px solid gray;
		}
		#ad>div{
			height:100px;
			float: left;
			box-sizing: border-box;
		}
		#ad>div:nth-child(1){
			width: 20%;
			border-color:red;
		}
		#ad>div:nth-child(2){
			width: 10%;
			border-color:blue;
			font-size: 0.7em; /*기본 폰트크기의 *0.7배*/
			padding:2px;
		}
		#ad>div:nth-child(2)>div{
			height: 25%;
			box-sizing: border-box;
			line-height: 0.8em; /*현재 lineheight의 *0.8배*/
		}
		#ad>div:nth-child(3){
			width: 70%;
			border-color:green;
		}

		/*section#main style*/
		#main h2, #main h3{
			text-align: center;
		}
		#main{
			overflow: hidden;
		}
		#main #contents{
			width: 75%;
			border:1px solid blue;
			float: left;
			box-sizing: border-box;
			height: 200px; /*부모의 height가 설정이 되면 자식의 height를 %로 설정이 가능*/
			padding: 5px;
		}
		#main #contents>div{
			border:1px solid gray;
			height: 33.333%;
			width: 50%;
			float: left;
			box-sizing: border-box;
			background-color: pink
		}
		#main #contents>div:nth-child(1){
			width: 100%;
			background-color: yellow
		}

		#main #aside{
			width: 25%;
			border:1px solid blue;
			float: left;
			box-sizing: border-box;
			height: 200px;/*부모의 height가 설정이 되면 자식의 height를 %로 설정이 가능*/
			padding:5px;
		}
		#main #aside>div{
			border:1px solid gray;
			box-sizing: border-box;
		}
		#main #aside>div:nth-child(1){
			height: 70%;
			background-color: lightblue;
		}
		#main #aside>div:nth-child(2){
			height: 30%;
		}

		/*#gnb_bottom style*/
		#gnb_bottom{
			border:1px solid gray;
		}
		#gnb_bottom ul{
			width: 800px;
			margin:0 auto;
			border:1px solid purple;
			padding:0 5px;/*0 5px 0 5px*/
		}
		#gnb_bottom ul li{
			border:1px solid orange;
			width: 14.285%;
			box-sizing: border-box;
			text-align: center;
		}

		/*footer style*/
		footer{
			width: 100%;
			background-color: lightgray;
		}
	</style>
</head>
<body>
	<!-- div#wrapper>(header>(nav#gnb1>ul>li*7>a[href="#"]>{menu$})+(nav#gnb2>ul>li*7>a[href="#"]>{menu$})+div#carousel{carousel image}) -->
	<div id="wrapper">
		<header>
			<nav id="gnb1">
				<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>
					<li><a href="#">angel's mall</a></li>
					<li><a href="#">language</a></li>
				</ul>
			</nav>
			<nav id="gnb2">
				<ul>
					<li><a href="#">menu1</a></li>
					<li><a href="#">menu2</a></li>
					<li><a href="#">menu3</a></li>
					<li><a href="#">menu4</a></li>
					<li><a href="#">menu5</a></li>
					<li><a href="#">menu6</a></li>
					<li><a href="#">menu7</a></li>
				</ul>
			</nav>
			<div id="carousel">carousel image</div>
		</header>
		<!-- (section#ad>div{share}+div#sns>div{sns$}*4^div{banner_advertisement})+(section#main>h2{take your time angel-in-us}+h3{당신을 미소 짓게 하는 천사의 커피}+div#contents>div{content$}*5^div#aside>div{content$}*2)+(nav#gnb_bottom>ul>li{menu$}*7)+(footer>p) -->
		<section id="ad">
			<div>share</div>
			<div id="sns">
				<div>facebook</div>
				<div>twitter</div>
				<div>kakao <br> story</div>
				<div>instagram</div>
			</div>
			<div>banner_advertisement</div>
		</section>
		<section id="main">
			<h2>take your time angel-in-us</h2>
			<h3>당신을 미소 짓게 하는 천사의 커피</h3>
			<div id="contents">
				<div>content1</div>
				<div>content2</div>
				<div>content3</div>
				<div>content4</div>
				<div>content5</div>
			</div>
			<div id="aside">
				<div>content1</div>
				<div>content2</div>
			</div>
		</section>
		<nav id="gnb_bottom">
			<ul>
				<li>menu1</li>
				<li>menu2</li>
				<li>menu3</li>
				<li>menu4</li>
				<li>menu5</li>
				<li>menu6</li>
				<li>menu7</li>
			</ul>
		</nav>
		<footer>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Molestias, ut excepturi necessitatibus laboriosam, impedit, veritatis ad beatae aliquid expedita, nobis quibusdam. Non architecto, suscipit ab, pariatur molestiae libero officia numquam.</p>
		</footer>
	</div>
</body>
</html>
profile
풀스택 국비수강중

0개의 댓글