728x90
html과 css 공부 한 것을 기반으로 구글 웹페이지를 똑같이 따라해볼 것이다.
#html 코드
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset='UTF-8'>
<title>zzuzzu의 웹사이트</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="./goostyle.css">
<style>@import url('https://fonts.google.com/specimen/Edu+VIC+WA+NT+Beginner');</style>
</head>
<body>
<div class = 'title'>
<p><span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span></div></body></p>
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">🔍</span>
<form class="form-control" action = "https://www.google.com/search" method="GET">
<input type="text"class="form-control" placeholder="Google 검색 또는 url 검색" >
</form>
</div>
<div class = 'container'>
<div class = 'box box1'>
<p><img src = 'youtube.png'></p>
<a href = 'https://www.youtube.com/' target = '_blank'>유튜브</a>
</div>
<div class = 'box box2'>
<p><img src = 'naver.png'></p>
<a href = 'https://www.naver.com/' target = '_blank'>네이버</a>
</div>
<div class = 'box box3'>
<p><img src = 'blog.png'></p>
<a href = 'https://zzuzzu-99.tistory.com/' target = '_blank'>블로그</a>
</div>
</div>
<div class = 'container2'>
<div class = 'box box4'>
<p><img src = 'co.png'></p>
<a href = 'https://codemate.kr/' target = '_blank'>코뮤니티</a>
</div>
<div class = 'box box5'>
<p><img src = 'insta.png'></p>
<a href = 'https://www.instagram.com/' target = '_blank'>인스타그램</a>
</div>
<div class = 'box box6'>
<p><img src = 'jun.png'></p>
<a href = 'https://www.acmicpc.net/' target = '_blank'>백준</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>#css 코드
.body{
background-color: white;
}
.title{
position: relative;
top : 150px;
font-size: 100px;
text-align: center;
font-family: 'Edu VIC WA NT Beginner' , cursive;
}
span:nth-child(1),span:nth-child(4){
color: blue;
}
span:nth-child(2),span:nth-child(6){
color: red;
}
span:nth-child(3){
color: yellow;
}
span:nth-child(5){
color: green;
}
.input-group{
top : 150px;
width : 45%;
left: 30%;
}
.container{
height: 45vh;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
width: 40%;
}
.container2{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
width: 40%;
margin : auto;
}
img{
width: 70px;
height: 70px;
}
코드 분석하기
<div class = 'title'>
<p><span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span></div></body></p>
css
}
.title{
position: relative;
top : 150px;
font-size: 100px;
text-align: center;
font-family: 'Edu VIC WA NT Beginner' , cursive;
}
span:nth-child(1),span:nth-child(4){
color: blue;
}
span:nth-child(2),span:nth-child(6){
color: red;
}
span:nth-child(3){
color: yellow;
}
span:nth-child(5){
color: green;
}google이라는 text를 각각 span이라는 태그를 넣어주고, nth-child를 사용하여 각각 다른 색깔을 지정해주었다.
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">🔍</span>
<form class="form-control" action = "https://www.google.com/search" method="GET">
<input type="text"class="form-control" placeholder="Google 검색 또는 url 검색" >
</form>
</div>
css
.input-group{
top : 150px;
width : 45%;
left: 30%;bootstrap에서 검색창 코드를 가지고 왔고 위치를 지정해주었다.
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
<div class = 'container'>
<div class = 'box box1'>
<p><img src = 'youtube.png'></p>
<a href = 'https://www.youtube.com/' target = '_blank'>유튜브</a>
</div>
<div class = 'box box2'>
<p><img src = 'naver.png'></p>
<a href = 'https://www.naver.com/' target = '_blank'>네이버</a>
</div>
<div class = 'box box3'>
<p><img src = 'blog.png'></p>
<a href = 'https://zzuzzu-99.tistory.com/' target = '_blank'>블로그</a>
</div>
</div>
<div class = 'container2'>
<div class = 'box box4'>
<p><img src = 'co.png'></p>
<a href = 'https://codemate.kr/' target = '_blank'>코뮤니티</a>
</div>
<div class = 'box box5'>
<p><img src = 'insta.png'></p>
<a href = 'https://www.instagram.com/' target = '_blank'>인스타그램</a>
</div>
<div class = 'box box6'>
<p><img src = 'jun.png'></p>
<a href = 'https://www.acmicpc.net/' target = '_blank'>백준</a>
</div>
</div>
css
.container{
height: 45vh;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
width: 40%;
}
.container2{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
width: 40%;
margin : auto;
}
img{
width: 70px;
height: 70px;
}container를 통해 구글의 바로가기 기능을 구색해보았다.
두줄로 구색할 것이라 박스를 총 2개를 만들었고 거기에 3가지의 item을 넣었다.
#출력결과
728x90
'Web 개발 > [HTML,CSS]' 카테고리의 다른 글
| [HTML/CSS] 미니홈피 만들기 (0) | 2022.07.25 |
|---|---|
| [HTML/CSS] 8. Flex (0) | 2022.07.08 |
| [HTML/CSS] 7. 도형만들기 (0) | 2022.07.08 |
| [HTML/CSS] 6. 단위와 위치 (0) | 2022.07.03 |
| [HTML/CSS] 5. 클래스 , 패딩과 마진 (0) | 2022.07.01 |
