내가 만든 사이트: http://127.0.0.1:5500/index.html
주말을 활용해서 구글 클론 코딩을 했다
배운점
1. 부트스트랩 사용법 익힘
Borders
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
getbootstrap.com
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">2. 코드펜에서 라이브러리 가져올 수 있음을 알게됨
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
3. css할 때 색을 f12눌러서 스포이트 가져오면 편함
4. html에서 class와 id의 차이점 확실히 알게됨
class는 여러가지 속성을 할 때, id는 한가지 속성을 지정할 때 사용
5. htmltag 이라는 프로그램 사용하면 편함
https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap
각종 태그를 <alt+w>로 지정하면 편함
맥북은 option키+W를 사용하면 됨
6. 자식 속성 css지정하기
h1 span:nth-child(3) {
color: #fbbd0b;
}
7. 가져오는 method
<form action="https://www.google.com/search" method="GET">get, post등등 이론으로 공부했던걸 직접 사용함
style.css
h1 {
text-align: center;
margin-top: 230px;
font-size: 90px;
}
h1 span:nth-child(1) {
color: #4285f4;
}
h1 span:nth-child(2) {
color: #ea4336;
}
h1 span:nth-child(3) {
color: #fbbd0b;
}
h1 span:nth-child(4) {
color: #4285f4;
}
h1 span:nth-child(5) {
color: #34a853;
}
h1 span:nth-child(6) {
color: #ea4336;
}
.search-bar{
width: 500px;
}
index.html
<!DOCTYPE html>
<html lang="en">
<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>mogle</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>
<span>m</span><span>o</span><span>g</span><span>l</span><span>e</span>
</h1>
<form action="https://www.google.com/search" method="GET">
<div class="mx-auto mt-5 search-bar form-floating mb-3">
<div class="input-group mb-3">
<input name="q" type="text" class="form-control rounded-pill" placeholder="Goole 검색 또는 URL 입력" aria-label="Recipient's username" aria-describedby="basic-addon2">
<!-- <span class="input-group-text" id="basic-addon2">@example.com</span> -->
</div>
</div>
</form>
</body>
</html>'프로그래밍 > 프로젝트' 카테고리의 다른 글
| 프로젝트 경험 설명 (0) | 2022.07.28 |
|---|---|
| 번들링과 웹팩(web-pack) (0) | 2022.07.25 |
| [Backend] 인증/보안 auth-basic-cookie (0) | 2022.07.15 |
| StatesAirline Client part1 (0) | 2022.06.14 |
| React Twittler SPA (0) | 2022.06.03 |
댓글