Google 홈페이지 만들어 보기

meegle

Meegle

Google 검색 또는 URL 입력

h1 { text-align: center; margin-top: 100px; font-size: 70px; } h1 span:nth-child(1) { color: #0076ff; } h1 span:nth-child(2) { color: #e00505; } h1 span:nth-child(3) { color: #fbc82c; } h1 span:nth-child(4) { color: #0076ff; } h1 span:nth-child(5) { color: #0b930d; } h1 span:nth-child(6) { color: #e00505; } .search-bar { width: 200px; }

구글 짝퉁 내 이름 넣은 미글 만들기

 

 

input 입력칸 만들기

form 정보를 전송

placeholder 입력창에 써져있는 지워지는 글자

 

 

<HTML과 CSS 파일 연결법>

head 태그 사이에 <link>+TAB키

->CSS형식에 맞게 HTML과 연결하는 <link>를 자동완성

 

*href="주소"

파일의 경로(주소)를 표시하는 곳

 

 

<F12개발자 도구로 미리 폰트나 이미지의 크기 조절 미리보기,색상선택>

width

 

css파일

h1{

text-alian: center; 가운데정렬

margin-top: 100px; 상단 간격

font-size: 50px; 폰트 크기

}

 

<Google의 글자 하나하나 색상입히기>

h1 span 

h1 태그 중 span 태그 선택

 

nth-child() - 특정 자식태그

 

 

*코드가 아랫줄에 있을 수록 css의 우선순위가 높다.

---

??? 검색창에 검색해서 연결하는 방법은 잘 모르겠다

google.com/search+?q 

 

HTML<form>

action 어디로 향할건가?

method 데이터 전송방식

 

GET/POST