Home
Top

030 html css 연습

Daily Study/Web Dev

2021. 3. 23.

반응형
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Red Velvet</title>
	<link rel="stylesheet" href="css/all.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div id="bg">
		<div class="pink">
			<div class="button">
				<p class="quit"></p>
				<p class="small"></p>
				<p class="big"></p>
			</div>
			<div class="ico">
				<p class="icon"><i class="fas fa-arrow-left"></i></p>
				<p class="icon"><i class="fas fa-arrow-right"></i></p>
				<p class="icon"><i class="fas fa-redo"></i></p>
				<div class="url">
					<p>irene.redvelvet.com</p>
				</div>
			</div>
			<div class="pic">
				<div class="irenepic"></div>
			</div>
		</div>
		<div class="orange">
			<div class="button">
				<p class="quit"></p>
				<p class="small"></p>
				<p class="big"></p>
			</div>
			<div class="ico">
				<p class="icon"><i class="fas fa-arrow-left"></i></p>
				<p class="icon"><i class="fas fa-arrow-right"></i></p>
				<p class="icon"><i class="fas fa-redo"></i></p>
				<div class="url">
					<p>seulgi.redvelvet.com</p>
				</div>
			</div>
			<div class="pic">
				<div class="seulgipic"></div>
			</div>
		</div>

		<div class="blue">
				<div class="button">
				<p class="quit"></p>
				<p class="small"></p>
				<p class="big"></p>
			</div>
			<div class="ico">
				<p class="icon"><i class="fas fa-arrow-left"></i></p>
				<p class="icon"><i class="fas fa-arrow-right"></i></p>
				<p class="icon"><i class="fas fa-redo"></i></p>
				<div class="url">
					<p>wendy.redvelvet.com</p>
				</div>
			</div>
			<div class="pic">
				<div class="wendypic"></div>
			</div>
		</div>

		<div class="green">
				<div class="button">
				<p class="quit"></p>
				<p class="small"></p>
				<p class="big"></p>
			</div>
			<div class="ico">
				<p class="icon"><i class="fas fa-arrow-left"></i></p>
				<p class="icon"><i class="fas fa-arrow-right"></i></p>
				<p class="icon"><i class="fas fa-redo"></i></p>
				<div class="url">
					<p>joy.redvelvet.com</p>
				</div>
			</div>
			<div class="pic">
				<div class="joypic"></div>
			</div>
		</div>
		<div class="purple">
				<div class="button">
				<p class="quit"></p>
				<p class="small"></p>
				<p class="big"></p>
			</div>
			<div class="ico">
				<p class="icon"><i class="fas fa-arrow-left"></i></p>
				<p class="icon"><i class="fas fa-arrow-right"></i></p>
				<p class="icon"><i class="fas fa-redo"></i></p>
				<div class="url">
					<p>yeri.redvelvet.com</p>
				</div>
			</div>
			<div class="pic">
				<div class="yeripic"></div>
			</div>
		</div>
	</div>
</body>
</html>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html,body {
	height: 100%;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* background */
#bg {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: rgba(255,182,159,.5);
}
/* widow bg */
.pink {
	position: absolute;
	top: 15%;
	left: 20%;
	width: 400px;
	height: 480px;
	background-color: #f7cbf6;
	border: 4px solid black;
	border-radius: 30px;
	box-shadow: 0 0 20px 5px rgba(0,0,0,.4);
}
.orange {
	position: absolute;
	top: 25%;
	left: 38%;
	width: 400px;
	height: 480px;
	background-color: #f4b271;
	border: 4px solid black;
	border-radius: 30px;
	box-shadow: 0 0 20px 5px rgba(0,0,0,.4);
}
.blue {
	position: absolute;
	top: 50%;
	left: 25%;
	width: 400px;
	height: 480px;
	background-color: #86a7ea;
	border: 4px solid black;
	border-radius: 30px;
	box-shadow: 0 0 20px 5px rgba(0,0,0,.4);
}
.green {
	position: absolute;
	top: 18%;
	left: 55%;
	width: 400px;
	height: 480px;
	background-color: #88e2c6;
	border: 4px solid black;
	border-radius: 30px;
	box-shadow: 0 0 20px 5px rgba(0,0,0,.4);
}
.purple {
	position: absolute;
	top: 50%;
	left: 60%;
	width: 400px;
	height: 480px;
	background-color: #a782e0;
	border: 4px solid black;
	border-radius: 30px;
	box-shadow: 0 0 20px 5px rgba(0,0,0,.4);
}
.button {
	display: flex;
	padding-top: 15px;
	padding-left: 15px;
}
.quit {
	margin-right: 5px;
	width: 15px;
	height: 15px;
	border: 3px solid black;
	border-radius: 50%;
	background-color: #ff6158;
}
.small {
	margin-right: 5px;
	width: 15px;
	height: 15px;
	border: 3px solid black;
	border-radius: 50%;
	background-color: #ffc130;
}
.big {
	width: 15px;
	height: 15px;
	border: 3px solid black;
	border-radius: 50%;
	background-color: #2aca42;
}
.ico {
	margin-top: 10px;
	margin-left: 15px;
	display: flex;
}
.ico .icon {
	padding-top: 5px;
	padding-right: 10px;
}
.url {
	width: 290px;
	border: 3px solid black;
	border-radius: 15px;
	background-color: white;
}
.url p {
	padding-top: 2px;
	padding-left: 10px;
}

.pic {
	margin: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* window pic */
.pic .irenepic {
	width: 360px;
	height: 360px;
	border: 3px solid black;
	border-radius: 50%;
	background-image: url('img/irenecrop.png');
	background-size: cover;
}
.pic .seulgipic {
	width: 360px;
	height: 360px;
	border: 3px solid black;
	border-radius: 50%;
	background-image: url('img/seulgicrop.png');
	background-size: cover;
}
.pic .wendypic {
	width: 360px;
	height: 360px;
	border: 3px solid black;
	border-radius: 50%;
	background-image: url('img/wendycrop.png');
	background-size: cover;
}
.pic .joypic {
	width: 360px;
	height: 360px;
	border: 3px solid black;
	border-radius: 50%;
	background-image: url('img/joycrop.png');
	background-size: cover;
}
.pic .yeripic {
	width: 360px;
	height: 360px;
	border: 3px solid black;
	border-radius: 50%;
	background-image: url('img/yericrop.png');
	background-size: cover;
}

 

오늘부터 자바스크립트 강의를 듣기 시작했는데

무료강의라 그런지 아직은 포괄적인 개념 위주로만 듣고 있어서 잘 와닿지가 않는다.

 

그래서 강의 듣고나서 갑자기 크롬 창을 보고 있다보니까

CSS로 이런 느낌으로 만들어보면 어떨까 싶어서

만들어봤다.

 

일러스트에서 이런 식으로 색깔들을 잡아놓고

html을 어떻게 짤지 대충 머리속으로 그려보고 코드를 짰다.

 

근데 생각보다 말을 안들었고...

원래 float로 종료, 최소화, 최대화 버튼을 나열시키려고 했는데

말을 안들어서

이번 기회에 그냥 다시 flex를 정리했다.

 

1분코딩 페이지가 정리가 잘되어 있어서 그림도 있고 금방 이해되서 적용할 수 있었다.

확실히 기본 베이스에서만 적용하는게 아니고

아예 제로베이스에서 적용하다보니까 하던대로 안되는게 너무 많았다.

 

그래도 검색하다보니 하나하나 해결은 되서 다행이다.

 

결론적으로 만든 페이지는 이렇다.

사실상 박스 디자인한 수준밖에 없지만 그래도 생각하던대로 그려지니까 뿌듯하긴하다.

 

색깔들 자체가 워낙에 통통튀는 색깔들이다보니까

키치한 느낌도 나고

조금 더 색을 핑크 퍼플 톤으로 치우치게 만들면 베이퍼웨이브 느낌 도 낼 수 있겠다.

 

 

 

일러스트로 그리면 2~3분이면 될 작업이긴 하지만,

코드로 짜면 나중에 애니메이션이나 인터랙션도 적용할 수 있는

확장성 면에서는 말도 안되게 우위에 있는 작업일거다.

 

그게 내가 프론트엔드 개발을 배운 이유기도 하고,

 

오늘 초은씨랑 전화하면서도 얘기했던 이야기인데

 

독자, 이용자, 소비자 등등 만들어진 디자인을 이용하는 이들에게

컨트롤, 통제하고 있다는 느낌을 주는 것은

그 사람들에게 있어서 UX 측면에서 굉장히 좋은 경험으로 다가갈 것이다.

 

그런 의미에서 다양한 상호작용 가능성은

좋은 UX를 제공하기 위한 좋은 수단인 건 분명한 것 같다.

반응형
저작자표시

'Daily Study > Web Dev' 카테고리의 다른 글

032 javascript (2) 함수, 객체  (0) 2021.03.25
031 javascript 공부 (1) 비교연산자, boolean, 배열, 반복문 등  (0) 2021.03.23
029 웹페이지 예제 실습 (3) script 적용 및 호스팅  (0) 2021.03.18
028 웹사이트 예제 실습 (2) css 적용  (0) 2021.03.18
027 웹사이트 예제 실습 (1) html 마크업  (0) 2021.03.15

티스토리툴바