[CSS] Google 앞 페이지 따라만들기

WEB-Front end/*CSS

by 주초위왕 2023. 5. 24. 23:48

내가 따라 할 구글 앞 화면

1. html로 틀을 잡고 (div가 몇개 들어갈 것인지)

2. flex로 레이아웃 짜기

3. 하단을 position으로 고정 시키기

4. 개발자 도구로 로고 가려오기

<body>
	<!--전체 잡기-->
	<div>
		<!--상단 헤더-->
		<div class="header">
			<div class="header-left">
				<a class="lbtn1"
					href="https://about.google/?fg=1&utm_source=google-KR&utm_medium=referral&utm_campaign=hp-header">Google
					정보</a>
				<a class="lbtn2"
					href="https://store.google.com/KR/?utm_source=hp_header&utm_medium=google_ooo&utm_campaign=GS100042&hl=ko-KR&pli=1">스토어</a>
			</div>
			<div></div>
			<div class="header-right">
				<a class="lbtn2" href="https://mail.google.com/mail/u/0/?tab=rm&ogbl#inbox">Gmail</a>
				<a class="lbtn2" href="https://www.google.co.kr/imghp?hl=ko&tab=ri&ogbl">이미지</a>
				<a href="https://accounts.google.com/SignOutOptions?hl=ko&continue=https://www.google.com%3Fhl%3Dko">
					<button class="lbtn3-2">로그인</button></a>
			</div>
		</div>
		<!--가운데 틀-->
		<div class="section">

			<!--구글 로고-->
			<div class="content1">
				<div class="con-logo">
					<img class="logoImg" alt="Google"
						src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
						height="100" width="300">
				</div>
			</div>

			<!--검색 창-->
			<div class="content2">
				<div class="searchbar-wrap">
					<i class="fas fa-search"></i>
					<input class="search-input" type="search" />
					<i class="fas fa-keyboard"></i>
				</div>
				<!-- 검색창 버튼 -->
				<div class="Buttons">
					<button type="submit" value="" class="btn1">Google 검색</button>
					<button type="submit" value="" class="btn2">I'm Feeling Luck</button>
				</div>
			</div>

			<!-- 빈 박스 -->


			<!--하단-->
			<div class="footer">
				<div class="foo1">대한민국</div>
				<div class="foo2">
					<div class="foo3">
						<a class="fbtn-1"
							href="https://ads.google.com/intl/ko_kr/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2m--ahpm-0000000133-0000000001&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1">광고</a>
						<a class="fbtn-2" href="https://www.google.com/intl/ko_kr/business/">비즈니스</a>
						<a class="fbtn-3" href="https://www.google.com/search/howsearchworks/?fg=1">검색의 원리</a>
					</div>
					<div></div>
					<div class="foo4">
						<a class="fbtn-4" href="https://policies.google.com/privacy?hl=ko&fg=1">개인정보처리방침</a>
						<a class="fbtn-5" href="https://policies.google.com/terms?hl=ko&fg=1">약관</a>
						<span>설정</span>
					</div>
				</div>
			</div>

		</div>
</body>

CSS

* {
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
	box-sizing: border-box;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 14px;
}

.header {
	display: flex;
	justify-content: space-between;
}

.header .header-left,
.header-right {
	flex-direction: row;
	margin: 6px;
	padding: 20px;
	text-decoration: none;
}

.header .header-left,
.header-right {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
}

.header .header-left, .lbtn1 {
	color: #202124;
	text-decoration-line: none;
	font-weight: 700;
	margin: 5px;
}

.header .header-right, .lbtn2 {
	color: #202124;
	text-decoration-line: none;
	font-weight: 700;
	margin: 6px;
}

.lbtn3-2 {
	font-size: 12px;
	padding: 9px 23px;
	margin-left: 10px;
	margin-right: 8px;
	color: white;
	border-radius: 4px;
	background-color: #4285f4;
	border: none;
	font-weight: 400;

}

.lbtn3-2:hover {
	background-color: rgb(78, 74, 143);
	box-shadow: 1px 1px 20px #bbb;
}

.section {
	display: flex;
	flex-direction: column;
}

.content1 {
	display: flex;
	justify-content: center;
	flex-shrink: 0;
	align-items: center;
}

.content1 .con-logo {
	margin-top: 50px;
}

.content2 {
	display: flex;
	align-items: center;
	width: 100%;
	/*max-height: 300px;*/
	flex-direction: column;
}

.content2 .searchbar-wrap {
	border: solid 1px #dee0e5;
    width: 490px;
    height: 50px;
    border-radius: 25px;
    display: flex;
    justify-content: space-evenly;
    align-content: center;
    padding-left: 8px;
    padding-right: 8px;
}

.content2 .searchbar-wrap i {
	line-height: 50px;
    color : #999fa6;
}

/*검색 창 스타일 설정*/
.content2 .searchbar-wrap .search-input {
	width: 400px;
    height: 45px;
    font-size: 16px;
    border: none;
    outline: none;
}

.content2 .searchbar-wrap, .button, .btn1, .btn2 {
	margin: 15px;
}

.buttons, .ButtonWrapper{
	color: #3c4043;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	margin: 11px 4px;
	
	line-height: 27px;
	height: 36px;
	min-width: 54px;
	text-align: center;
	cursor: pointer;
	user-select: none;
	font-weight: bold;
}


.btn1 {
	height: 40px;
	width: 130px;
	border: none;
	/* border: 1px solid black; */
	line-height: none;
	outline: none;
	border-radius: 4px;
	padding: 0 16px;
}

.btn1:hover {
	border: 1px solid silver;
}

.btn2{
	height: 40px;
	width: 140px;
	border: none;
	/* border: 1px solid black; */
	line-height: none;
	outline: none;
	border-radius: 4px;
	padding: 0 16px;
}


.btn2:hover {
	border: 1px solid silver;
	
}
.footer {
	position: fixed;
	background: #f2f2f2;
	left: 0;
	right: 0;
	bottom: 0;
}

.footer .foo1 {
	flex-grow: 1;
	padding: 15px 30px;
	border-bottom: 1px solid #dadce0;
	font-size: 15px;
	color: #70757a;
}

.footer .foo2 {
	flex-grow: 1;
	justify-content: space-evenly;
}

.footer .foo2, .foo3, .foo4 {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	color: #202124;
	padding: 7px;
	font-size: 15px;
	font-family: 'Roboto', sans-serif;
}

.footer .foo2, .foo3, .fbtn-1, .fbtn-2, .fbtn-3, .fbtn-4, .fbtn-5 {
	text-decoration: none;
	color: #202124;
}

'WEB-Front end > *CSS' 카테고리의 다른 글

[CSS] 깃허브 클론코딩 (1) (0)	2023.05.13
[CSS] CSS 박스모델 (0)	2023.04.22
[CSS] Padding(패딩) 속성 (0)	2023.04.22
[CSS] 여백(margin)속성 (0)	2023.04.21
[CSS] CSS font-size에 대해서 알아보자. (0)	2023.04.20