안녕하세요!

FE 개발자 유진주입니다.

Web/HTML

클론코딩 | 미니 홈페이지 레이아웃 #1 with. 빔캠프 CSS

ypearl 2023. 7. 21. 23:01

🔉💻

오랜만에 HTML, CSS 공부를 다시 하게 되었다.

이번 클론코딩을 통해서, 레이아웃을 구성에 있어

스스로 많이 해맨다는 것을 느꼈다.

(이론으로는 많이 배워왔으나, 실제로 만들어보는 그 과정이 아직 익숙하지 않은 듯하다.)

내가 머리 속에 그리고 있는대로 화면이 나오지 않아 답답한 기분이 들었고,

알고 있는 것만을 활용하기 보다는 새로운 자료나 코드를 새롭게 많이 배우며

똑똑하게 코딩해야겠다는 생각이 들었다.

 

또 작성은 했지만, 제대로 정리가 되지 않은 코드들도

많이 보기 지저분하였고 가독성이 떨어졌다.

코드를 보기 좋게 정리하는 것에 대한 필요성도 많이 느낄 수 있었다.

매우 뚝딱거리는 내 미니 홈페이지...😂😱

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Coffee Website</title>
<style>
body {
	height: 100%;
	width: 100%;
}

body div {
	display: inline-block;
}

body .side {
	background: black;
	color: white;
	height: 500px;
}

span.r {
	background: #EAEAEA;
	display: inline-block;
	height: 300px;
	width: 200px;
	margin: 10px;
	padding: 20px;
	border-radius: 10px;
}

span .side h2 {
	width: 25%;
	height: 100%;
	background-color: skyblue;
	color: white;
}

.main {
	width: 75%;
	height: 100%;
	padding: 30px;
}

#aside {
	color: white;
	background-color: black;
	height: 600px;
	width: 250px;
}

.main .title {
	color: gray;
	font-weight: bold;
	font-size: 30px;
}

.side .title {
	color: white;
	font-weight: bold;
	font-size: 30px;
}

.side span {
	margin: 20px
}

.box {
	color: gray;
	height: 10px;
	width: 50%;
	display: flex;
	margin: 10px;
}

div .line {
	background: #EAEAEA;
	height: 15px;
	margin-top: 5px;
	margin-bottom: 5px;
}

div .reviewtxt {
	display: inline-block;
}

button {
	/*background-color: #4CAF50;*/
	border: none;
	/*color: white;*/
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 10px;
	width: 90%;
	margin: 4px 2px;
	cursor: pointer;
}

#location {
	color: white;
	background-color: blue;
	font-weight: bold;
}

#share {
	color: gray;
	background-color: #EAEAEA;
	font-weight: bold;
}

.mbutton {
	border-radius: 10px;
}
</style>
</head>

<body>
	<div class="side">
		<div id="aside">
			<span>
				<p class="title">MugApp</p>
				<p style="color: #9F9F9F">Lorem ipsum dolor
					stisadfajklfdsfjdlafakflx</p>
				<div>
					<button id="location">LOCATION</button>
					<button id="share">SHARE</button>
				</div>
			</span> <img src="shadow.jpg" style="height: 300px; width: 250px;">

		</div>
	</div>

	<div class="main">
		<div id="coffee">
			<p class="title">All About Coffee</p>
			<button class="mbutton">view all</button>
			<div class="line"></div>
			<div class="box"></div>
			<img src="1.png"
				style="margin-left: 10px; margin-right: 10px; display: inline-block; width: 100px; height: 100px;" />
			<img src="2.png"
				style="margin-left: 10px; margin-right: 10px; display: inline-block; width: 100px; height: 100px;" />
			<img src="3.png"
				style="margin-left: 10px; margin-right: 10px; display: inline-block; width: 100px; height: 100px;" />
			<img src="4.png"
				style="margin-left: 10px; margin-right: 10px; display: inline-block; width: 100px; height: 100px;" />
			<img src="5.png"
				style="margin-left: 10px; margin-right: 10px; display: inline-block; width: 100px; height: 100px;" />
			<img src="6.png"
				style="margin-left: 10px; margin-right: 10px; display: inline-block; width: 100px; height: 100px;" />
		</div>

		<div id="review">
			<p class="title">Reviews</p>
			<button class="mbutton">view all</button>
			<div class="line"></div>
			<div class="box"></div>
			<div class="reviewtxt">
				<span class="r"> </span> <span class="r"> </span> <span class="r">
				</span>
			</div>
		</div>
	</div>

</body>
</html>

 

우선 스터디를 하면서 배웠던 점들을 정리해보면,

1. span 보다는 일반적으로 div 사용하기

- 굳이 span을 사용할 이유는 없다.

나는 span이 inline-block 태그이기에 span과 div를 나름 나누어 섞어 사용했지만,

사실 div 태그를 사용해도 스타일을 변경해주면 되기에

굳이 span을 사용해 나누기 보다는 통상적으로 div를 사용해 박스를 나눌 것!

2. display: flex 속성값

- flex를 이용하면 훨씬 깔끔하고 내가 원하는 모습으로 쉽게 디자인할 수 있다.

justi

3. 하나의 라인에 두 개의 블럭을 공백을 두고 표현하는 방법

- 1) display: flex; 의 경우,

내장 되어있는 margin~ 속성을 통해 두 요소 사이 공백을 만들어 준다.

- 2) margin-right: auto; margin을 auto로 설정하면,

오른쪽 요소를 부모 요소의 최대한 끝으로 이동시킨다.

따라서, 왼쪽 요소의 길이(컨텐츠)가 변화하더라도

오른쪽 요소의 위치는 변화하지 않는다는 장점을 가진다.

+ 기능적인 측면

- Lorem ipsum 을 치면 자동으로 긴 줄글 text가 생성된다.

(힘들게 하나하나 직접 타이핑할 필요가 없음!)

 

- <div>에 굳이 main, side 이렇게 class 이름을 주기 보다는,

기존에 있는 <header>, <aside> 이러한 HTML 시멘트 태그를 사용할 수도 있다.

이 시멘트 태그도 <div>와 같은 block 태그라는 것!

 

- VS code에서 굳이 Open Web Brower로 페이지를 열어

매번 새로고침하지 말고, Live Brower(?) 페이지로 열 것!

그러면 코드 수정 즉시, 결과가 바로 페이지에 적용되어 작업하기 용이하다.

 

- 부모 요소를 position: relative;로 하고,

자식 요소를 position: absolute;로 한 후,

right: 0(부모 요소의 오른쪽 끝으로부터의 거리);

bottom: 0(부모 요소의 아래 끝으로부터의 거리)

이런 식으로 맨 오른쪽 아래에 자식 요소를 위치 시킬 수 있다.

이는 하나의 예시일 뿐이고,

부모 요소 내에 원하는 곳에 자식 요소를 쉽게 배치할 수 있다는 장점을 가진다!

더보기

 

static
요소를 문서 흐름에 따라 배치, 기본값
relative
요소를 문서 흐름에 따라 배치,
자신을 기준으로 자식요소의 위치 적용
absolute
요소를 문서 흐름에서 제거,
가장 가까운 위치지정조상요소(relative가 적용된 조상)를 기준으로 위치를 지정
fixed
요소를 문서 흐름에서 제거,
브라우저(뷰포트)기준으로 기준을 삼아 배치
sticky
요소를 문서 흐름에 따라 배치,
가장 가까운 블록레벨 조상을 기준으로 배치

'Web > HTML' 카테고리의 다른 글

프론트엔드 개발자 되기 입문편! 16~21강  (0) 2022.05.17
프론트엔드 개발자 되기 입문편! 13~15강  (0) 2022.05.10
프론트엔드 개발자 되기 입문편! 07~12강  (0) 2022.05.02
프론트엔드 개발자 되기 입문편! 01~06강  (0) 2022.04.05
생활코딩 WEB1-HTML 14강~20강  (0) 2022.03.28

'Web/HTML'의 다른글

  • 현재글클론코딩 | 미니 홈페이지 레이아웃 #1 with. 빔캠프 CSS

관련글

티스토리툴바