Daily Coding from A to Z

03. HTML, CSS 기본 내용

codingdaddy 2022. 12. 27. 09:47

03. HTML, CSS 기본 내용

<aside> 💡 바탕화면에 sparta 폴더 → frontend 폴더를 만들고 시작할게요!

</aside>

    1. HTML과 CSS의 개념
    <aside> 👉 HTML은 뼈대, CSS는 꾸미기!
    • HTML은 구역과 텍스트를 나타내는 코드로, CSS는 잡은 구역을 꾸며주는 것으로 생각합니다. HTML 내 style 속성으로 꾸미기를 할 수 있지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS 파일이 탄생하게 되었습니다. HTML 코드 내에 CSS 파일을 불러와서 적용합니다.
    • 또한 CSS를 잘 사용할 줄 아는 것과, '예쁘게' 만드는 것은 다른 영역이기 때문에(붓을 잡을 줄 아는 것과 그림을 잘 그릴 줄 아는 것의 차이), 많은 경우 웹디자이너나 퍼블리셔에게 의존하게 됩니다.
  • </aside>
    1. HTML 기초
  • <aside> 👉 HTML은 크게 head와 body로 구성된답니다.
    • head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다.
    • head 안에 들어가는 대표적인 요소들: meta, script, link, title 등</aside>
    • <aside> 👉 페이지의 속성을 정의하거나, 필요한 스크립트들을 부릅니다. 즉, 눈에 안 보이는 필요한 것들을 담는 것. 나중에 body 작업을 하면서 필요한 정보들을 넣어보겠습니다.
    • body 안에 들어가는 대표적인 요소들!
      • [코드스니펫] HTML기초
      • 나는 구역을 나누죠
        • bullet point!1
        • bullet point!2
        h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.h3~h6도 각자의 역할이 있죠. 비중은 작지만..
        span 태그입니다: 특정 글자를 꾸밀 때 써요
        a 태그입니다: 하이퍼링크
        img 태그입니다: 
        input 태그입니다: 
        button 태그입니다: 버튼입니다
        textarea 태그입니다: 
      • h2는 소제목입니다.
      • 나는 문단이에요
      <aside> 👉 이 외에도 아주 많으며, 개발자들도 모두 외우고 있지 않습니다. 필요할 때마다 찾아서 넣어보세요!<aside> 👉 잠깐! 정렬의 중요성 코드의 정렬이 제대로 되어있지 않으면, 코드의 생김새를 파악할 수 없어 오류를 해결하기가 무척 어려워집니다. Pycharm에서 ctrl+alt+L (맥은 cmd+alt+L) 로 자동정렬 기능을 사용해보세요.
    • </aside>
    • </aside>
  • </aside>

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

    1. ✍간단한 로그인 페이지 만들기
    <aside> 🔥 앞으로 실습이 필요한 부분이 나오면 "✍"모양으로 알려줄게요! 퀴즈설명 영상을 먼저 보고 → 정해진 시간동안 혼자 한다음 → 함께하기 영상을 보세요!
    • Q. 퀴즈설명
      • 모습 보기
      <aside> 👻 힌트: 위의 HTML기초에서 봤던 코드들을 적절히 조합해보세요! ctrl+c,v 신공을 사용해보세요!
    • </aside>
    • A. 함께하기(완성본)</aside>
      • [코드스니펫] 로그인HTML
      • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>로그인페이지</title> </head> <body> <h1>로그인 페이지</h1> <p>ID: <input type="text"/></p> <p>PW: <input type="text"/></p> <button>로그인하기</button> </body> </html>
    • <aside> 💡 어때요, 할만했나요? 다만 조금씩 다른 방법으로 해결하셨더라도, 다음 강의 진행을 위해 아래 코드를 복사→붙여넣기 해주세요!
  • </aside>

05. CSS 기초

    1. HTML 부모-자식 구조 살펴보기
    <aside> 👉 html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요합니다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받지요!
    • 빨간색 div 안에, 초록색/파란색 div가 들어있습니다. 아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/파란 div도 모두 함께 이동하겠죠!
    • 즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리입니다.
    • 같은 원리로, 초록 div의 글씨색을 바꾸면, 나는버튼1의 글씨색도 바뀐답니다!
  • </aside>
    1. CSS 기초
    • CSS는 어떻게 사용하나요?mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억하세요!
    • </aside>
    • <aside> 👉 <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성합니다. 아래 코드를 통해 간단한 사용 방법을 알아봅니다.
    • 모든 CSS들을 다 알 수는 없겠죠~~ 오늘 쓰는 것만 알아도 굿! 나머지는 검색해서 쓰시면 된답니다~!사이즈 width height간격 margin padding
    • </aside>
    • 폰트 font-size font-weight font-family color
    • <aside> 👉 배경관련 background-color background-image background-size

06. 자주 쓰이는 CSS 연습하기 (1)

  •  

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

    1. ✍간단한 로그인 페이지 만들기
    <aside> 🔥 앞으로 실습이 필요한 부분이 나오면 "✍"모양으로 알려줄게요! 퀴즈설명 영상을 먼저 보고 → 정해진 시간동안 혼자 한다음 → 함께하기 영상을 보세요!
    • Q. 퀴즈설명
      • 모습 보기
      <aside> 👻 힌트: 위의 HTML기초에서 봤던 코드들을 적절히 조합해보세요! ctrl+c,v 신공을 사용해보세요!
    • </aside>
    • A. 함께하기(완성본)</aside>
      • [코드스니펫] 로그인HTML
      • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>로그인페이지</title> </head> <body> <h1>로그인 페이지</h1> <p>ID: <input type="text"/></p> <p>PW: <input type="text"/></p> <button>로그인하기</button> </body> </html>
    • <aside> 💡 어때요, 할만했나요? 다만 조금씩 다른 방법으로 해결하셨더라도, 다음 강의 진행을 위해 아래 코드를 복사→붙여넣기 해주세요!
  • </aside>

05. CSS 기초

    1. HTML 부모-자식 구조 살펴보기
    <aside> 👉 html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요합니다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받지요!
    • 빨간색 div 안에, 초록색/파란색 div가 들어있습니다. 아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/파란 div도 모두 함께 이동하겠죠!
    • 즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리입니다.
    • 같은 원리로, 초록 div의 글씨색을 바꾸면, 나는버튼1의 글씨색도 바뀐답니다!
  • </aside>
    1. CSS 기초
    • CSS는 어떻게 사용하나요?mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억하세요!
    • </aside>
    • <aside> 👉 <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성합니다. 아래 코드를 통해 간단한 사용 방법을 알아봅니다.
    • 모든 CSS들을 다 알 수는 없겠죠~~ 오늘 쓰는 것만 알아도 굿! 나머지는 검색해서 쓰시면 된답니다~!사이즈 width height간격 margin padding
    • </aside>
    • 폰트 font-size font-weight font-family color
    • <aside> 👉 배경관련 background-color background-image background-size

06. 자주 쓰이는 CSS 연습하기 (1)

  •