반응형
<!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>Document</title>
<link rel="stylesheet" href="google.css">
</head>
<body>
<h1>Google</h1>
<input type="text">
</body>
<div class = "bottom">
<button>Google 검색</button>
<button>I'm Feeling Lucky</button>
</div>
</html>
글씨 사이즈 키우기
h1{
font-size: 80px;
}
검색창 바꿔주기
input{
padding : 5px;
border: 1px solid lightgray;
border-radius:8px;
width: 320px;
}
.bottom{
margin-top : 10px;
}
.bottom button{
padding: 5px;
border: 1px solid lightgray;
border-radius : 5px;
}
margin-left와 margin-top을 사용해서 중앙으로 정렬하기
margin-left
margin-toph1{
font-size: 80px;
margin-left :180px;
margin-top :200px;
}
input{
margin-left :135px;
padding : 5px;
border: 1px solid lightgray;
border-radius:8px;
width: 320px;
}
.bottom{
margin-top : 10px;
}
.bottom button{
padding: 5px;
border: 1px solid lightgray;
border-radius : 5px;
}
.bottom button:nth-child(1){
margin-left :220px;
}
:nth-child(number)
사용해서 각 span으로 나눈 각 단어들에 색 입히기
HTML 코드 일부분
<h1>
<span>G</span> <span>o</span> <span>o</span> <span>g</span> <span>l</span> <span>e</span>
</h1>
CSS 코드 전체
h1{
font-size: 80px;
margin-left :180px;
margin-top :200px;
margin-bottom: 20px;
letter-spacing: -10px;
}
h1 span:nth-child(1){
color:#4184f4
}
h1 span:nth-child(2){
color:#ea4235;
}
h1 span:nth-child(3){
color:#fabc08;
}
h1 span:nth-child(4){
color:#4184f4;
}
h1 span:nth-child(5){
color:#34a852;
}
h1 span:nth-child(6){
color:#ea4235;
}
input{
margin-left :135px;
padding : 5px;
border: 1px solid lightgray;
border-radius:8px;
width: 320px;
}
.bottom{
margin-top : 10px;
}
.bottom button{
padding: 5px;
border: 1px solid lightgray;
border-radius : 5px;
}
.bottom button:nth-child(1){
margin-left :220px;
}
완성!!!
https://www.youtube.com/watch?v=PARfC-zEEfw&list=PLyebPLlVYXCgc3S1HcqOMr5MOrt3wDlb-&index=14
'개발 > 프론트엔드-HTML,CSS' 카테고리의 다른 글
| CSS 포지션 [static, relative, absolute, fixed, sticky] (0) | 2023.01.11 |
|---|---|
| [ CSS ] 블럭과 인라인 개념 (0) | 2023.01.10 |
| CSS dinner 게임 답안 및 설명 [1번 ~12번] (0) | 2023.01.10 |
| CSS 복합 셀렉터 연습하기 ( *, 내부 선택자, 동시 선택자, 상태별 선택자) (0) | 2023.01.10 |
| CSS 셀렉터 기본개념 실습해보기 (0) | 2023.01.10 |
