본문 바로가기
#도전일기/→ 코딩, 왕초보 탈출하기

[스파르타코딩 무료강의] 2022년도 덕담 공유 패캐지 완강 도전! (3강) - HTML 기본 내용

by 조하 (Joyhi) 2022. 2. 1.
반응형

조하! 조이 하고 싶은 것 다하는 블로그입니다!

오늘은 제가 예전부터 해보고 싶고 도전해보고 싶던 코딩에 처음으로 입문을 합니다! 

첫 입문으로는 스파르타코딩에서 진짜 찐! 무료강의로 진행되는 2022년도 덕담 공유 패키지에 도전을 하고자 합니다! 

실은,, 제가 2021년도에도 수강신청을 했는데 완주를 못해서 다시 재도전입니다! 응원 부탁드립니다 >_< ! 

 

03. HTML 기본 내용

    1. HTML 기초
    • HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다.
    • head 안에 들어가는 대표적인 요소들: meta, script, link, title 등</aside>
    • <aside> 👉 페이지의 속성을 정의하거나, 필요한 스크립트들을 부릅니다. 즉, 눈에 안 보이는 필요한 것들을 담는 것. 나중에 body 작업을 하면서 필요한 정보들을 넣어보겠습니다.
    • body 안에 들어가는 대표적인 요소들!
      • [코드스니펫] - HTML 기초
      • 나는 구역을 나누죠
        • bullet point!1
        • bullet point!2
        h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.h3~h6도 각자의 역할이 있죠. 비중은 작지만..

        a 태그입니다: 하이퍼링크

        img 태그입니다:

        input 태그입니다:

        button 태그입니다:

        textarea 태그입니다:
      • h2는 소제목입니다.
      • 나는 문단이에요
      <aside> 👉 이 외에도 아주 많으며, 개발자들도 모두 외우고 있지 않습니다. 필요할 때마다 찾아서 넣어보세요! 코딩은 구글링이 필수랍니다!<aside> 👉 잠깐! 정렬의 중요성 코드의 정렬이 제대로 되어있지 않으면, 코드의 생김새를 파악할 수 없어 오류를 해결하기가 무척 어려워집니다. VSCode에선 ctrl+K+F(맥은 cmd+K+F)로 자동정렬이 가능하답니다!
    • </aside>
    • </aside>

내가 직접 정리하는 덕담 공유 패키지 3강 

 

body는 우리 눈에 보이는 것들 (디자인적인 요소) 

head는 우리에게 주로 안 보이는 것들 (기능적인 부분들?) 
-> 주로 meta 관련된 것들이 들어가 있음! 마케팅이 저의 전문분야에서 평소에 태그를 왜 head 헤더 영역에 썼는 지 알겠네요! 

 

div는 구역을 나누는 것

p는 문단 

h1은 큰글씨 = 제목 

h2는 소제목 

h3는 조금씩 작아지는구나 

hr은 하이퍼링크! 

img 태그 

input, button 태그 등등이 있다!

 

굳이 외우지 않고 그 때 그 때마다 찾아서 쓰자! 

alt+b 로 눌러서 보기! 

 

 

 

꼭..! 에어팟 당첨되고 싶다!

태어나 처음듣는 문과생의 코딩무료수업추천! 

조하! 조이 하고 싶은 것, 코딩 도전기! 




반응형

댓글