Week1-2 HTML 기초(Using Pycharm)

Step1 - Intro

HTML 즉 뼈대 (문서 형태 기반)
HTML 안에는 Head와 Body로 구성되어 있다.

Step2 - 본격 파이참 이용

스파르타 코딩 클럽에서 제공하는 코드스니펫 (샘플 코드 제공)
강사님이 코드는 가져가 쓰는 거라고 하심 (외우는 거 아니라고!)
여기서부터는 코드가 입력되서 수정할 때 열어서 확인해야 함!

**파이참에 코드를 넣고 옆에 조그만 Chrome표시를 누르면 이렇게 웹페이지를 표현해 줌!!!

나는 문단이에요

• bullet point!1
• bullet point!2

<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>

Step3- HTML 코드를 이용한 Quiz1

저 위의 로그인 페이지를 똑같이 만들기 위해서는 스파르타에서 제공한 코드를 찾아서 복붙을 해야한다.
Head에는 로그인 페이지가 들어가야 되고
Body에
맨 첫 줄은 큰 글자로 로그인 페이지가 적혀야 한다. (h1)
그 밑 줄은 ID: 와 텍스트 박스가 들어가고
그 다음 줄은 PW: 와 텍스트 박스
맨 마지막은 로그인하기가 적힌 버튼이 들어간다.
4가지 모두 다른 줄에 위치하므로 이것 또한 각각 명시한다.