[힙한취미코딩] 나홀로 코딩 개발일지 1

17538 단어 힙한취미코딩스파르타코딩클럽나홀로코딩나홀로코딩

강의자료 시작에 PDF파일을 올려두었어요!

[수업 목표]

  1. 서버와 클라이언트의 역할에 대해 이해한다.
  2. HTML, CSS의 기초 지식을 이해한다.
  3. Javascript 기초 문법을 익힌다.

[목차]

모든 토글을 열고 닫는 단축키
Windows : Ctrl + alt + t
Mac : ⌘ + ⌥ + t

01. 오늘 배울 것

  • 1) 나홀로 코딩 패키지가 끝나면 만들게 되는 것 - 구경하기!

    봉투를 누르면 편지가 나오는 카드! + 그리고, 르탄이도 눌러보세요! 🙈

    • [코드스니펫] 크리스마스 카드

  • 2) 서버/클라이언트/웹의 동작 개념

    크롬 창에서 보이는 웹페이지는 어떤 원리로 보여지는 것일까요?
    원리를 알기 위해서, 일단 해킹부터 해보죠! (응?)

    함께 해보아요 → '네이버 실시간 검색어'를 수정해보죠!

    • 우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서" → "그려주는" 것입니다.

    • 즉, 브라우저가 하는 일은 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 일 뿐이죠.

      근데, 어디에 요청을 보내냐구요? 좋은 질문입니다. 서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보내는 것이랍니다.

      예) https://naver.com/
      → 이것은 "naver.com"이라는 이름의 서버에 있는, "/" 창구에 요청을 보낸 것!

    • 하나만 꼭! 기억하고 가요!

       `HTML 은 뼈대`, `CSS 는 꾸미기`, `Javascript 는 움직이게` 하는 것!!

02. HTML, CSS 기본 내용

  • 3) HTML과 CSS의 개념

    • HTML은 뼈대, CSS는 꾸미기!

      HTML은 구역과 텍스트를 나타내는 코드로, CSS는 잡은 구역을 꾸며주는 것으로 생각합니다. HTML 내 style 속성으로 꾸미기를 할 수 있지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS 파일이 탄생하게 되었습니다. HTML 코드 내에 CSS 파일을 불러와서 적용합니다.

    • 또한 CSS를 잘 사용할 줄 아는 것과, '예쁘게' 만드는 것은 다른 영역이기 때문에(붓을 잡을 줄 아는 것과 그림을 잘 그릴 줄 아는 것의 차이), 많은 경우 웹디자이너나 퍼블리셔에게 의존하게 됩니다.

  • 4) HTML 기초

    • HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다.

    • head 안에 들어가는 대표적인 요소들: meta, script, link, title 등

      페이지의 속성을 정의하거나, 필요한 스크립트들을 부릅니다. 즉, 눈에 안 보이는 필요한 것들을 담는 것. 나중에 body 작업을 하면서 필요한 정보들을 넣어보겠습니다.

    • body 안에 들어가는 대표적인 요소들!

      • [코드스니펫] - HTML기초

        이 외에도 아주 많으며, 개발자들도 모두 외우고 있지 않습니다. 필요할 때마다 찾아서 넣어보세요!

        잠깐! 정렬의 중요성
        코드의 정렬이 제대로 되어있지 않으면, 코드의 생김새를 파악할 수 없어 오류를 해결하기가 무척 어려워집니다. VSCode에선 ctrl+K+F(맥은 cmd+K+F)로 자동정렬이 가능하답니다!

03. Quiz_간단한 로그인 페이지 만들어보기

  • 5) ✍간단한 로그인 페이지 만들기

    앞으로 실습이 필요한 부분이 나오면 "✍"모양으로 알려줄게요!
    퀴즈설명 영상을 먼저 보고 → 정해진 시간동안 혼자 한다음 → 함께하기 영상을 보세요!

    • Q. 퀴즈설명
    • A. 함께하기(완성본)

04. CSS 기초

  • 6) CSS 기초

    • CSS는 어떻게 사용하나요?

      ~ 안에 로 공간을 만들어 작성합니다. 아래 코드를 통해 간단한 사용 방법을 알아봅니다.

      mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억하세요!

    • 모든 CSS들을 다 알 수는 없겠죠~~ 오늘 쓰는 것만 알아도 굿!
      나머지는 검색해서 쓰시면 된답니다~!

      배경관련
background-color
background-image
background-size

사이즈
width
height

폰트
font-size
font-weight
font-famliy
color

간격
margin
padding

05. 자주 쓰이는 CSS 연습하기

  • 7) 자주 쓰이는 CSS 연습하기

    [연습할 것들]
    h1, h5, background-image, background-size, background-position
    color, width, height, border-radius, margin, padding

    • (1) 튜터와 함께 아래와 같은 화면을 만들어볼까요?
    • (2) 만들어둔 로그인 화면을 가운데로 가져오려면?

06. 폰트 입히기

  • 8) 구글 웹폰트 입히기

    • 구글 웹폰트
      - [코드스니펫] - 구글웹폰트

       (1) 마음에 드는 폰트를 클릭합니다.

 (2) [ + Select this style ]을 클릭합니다.

       (3) 우측 상단의 모음 아이콘을 클릭합니다.
 

    (4) link를 복사해서 <head> ~ </head>사이에, CSS를 복사해서 <style> ~ </style> 사이에 넣습니다.

   ![](https://media.vlpt.us/images/enfermera/post/c754f63a-c8b9-456a-8334-708bf929f996/image.png)

- 주아체 폰트를 예제로 추가해보면, 아래와 같은 코드를 복사하면 됩니다.

    ```html
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    ```

    ```css
    * {
    	font-family: 'Jua', sans-serif;
    }
    ```

07. 숙제 설명

로그인 버튼을 아래와 같이 만들어 볼까요? 🤓

  • 힌트

    버튼에 mybtn class를 지정하고! 아래 css 속성들을 적용해볼까요?

    (참고 - width는 300px, height는 50px, background-color는 brown 이에요!)

    border-radius, background-color, color, width, height

  • 예시 화면

HW. 숙제 해설

  • login.html

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | 로그인페이지</title>
    <style>
        .mytitle {
            color: white;
            width: 300px;
            height: 200px;
            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;

            border-radius: 10px;
            text-align: center;
            padding-top: 40px;
        }

        .wrap {
            margin: 10px auto;
            width: 300px;
        }

        .mybtn {
            width: 300px;
            height: 50px;
            border-radius: 10px;
            background-color: brown;
            color: white;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="mytitle">
            <h1>로그인 페이지</h1>
            <h5>아이디, 비밀번호를 입력해주세요</h5>
        </div>
        <div>
            <p>
                ID: <input type="text" />
            </p>
            <p>
                PW: <input type="password" />
            </p>
        </div>
        <button class="mybtn">로그인하기</button>
    </div>
</body>
</body>

</html>

    모야 너무 쉽고 재미있잖아? 순식간에 돌파해버렸다. 콧대가 으쓱으쓱 해질것 같은
    너무나 쉬운 설명 ㅠㅠㅜㅠㅜ

[백준] 17298번: 오큰수
TIL100. SQL 기초(3)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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