HTML CSS로 짭 구글 만들기

13912 단어 코딩구글CSShtmlCSS

유튜버 조코딩 님 강의 보면서 쫌쫌따리 짭 구글 만들기 성공!

오늘 배운 것들

span 도 어디 쓰냐에 따라서 글자 배치가 달라진다. 처음에는 옆에 쭉 늘여서 안 쓰고, 밑으로 나열되게 썼는데 그렇게 하니까 G o o g l e 이런 식으로 글자가 다 떨어지게 나왔다...

부트스트랩에서 쓰이는 단축키? 를 사용하니까 훨씬 코드의 양이 줄어든다. 효율적으로 작성하기 위해서 참고하는 게 좋겠다.

Emmet 단축키도 마찬가지!

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Google</title>

    <style>

        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: #fabd05;
        }

        h1 span:nth-child(4) {
            color: #4285f4;
        }

        h1 span:nth-child(5) {
            color: #33a853;
        }

        h1 span:nth-child(6) {
            color: #ea4336;
        }

        .search-bar{
            width: 500px;
        }


    </style>

</head>
<body>
<h1>
    <span>G</span><span>o</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 input-group mb-3">
        <input name= "q" type="text" class="form-control rounded-pill" placeholder="Google 검색 또는 URL 입력" aria-label="Recipient's username"
               aria-describedby="basic-addon2">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button">검색</button>
        </div>
    </div>
</form>
</body>
</html>
유니티 대화 시스템 구현2
FPGA Modelsim 연관 타사 편집기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage