개발 공부 일지/웹

HTML 기초 학습 head와 body

HTML은 크게 head와 body로 구성된다.

Pycharm에서 html 파일을 생성하면 위 스샷처럼 head, body로 구분하고 html로 끝나는 것을 볼 수 있다.

head 부분에는 title 내용이 있고 body에는 내용이 없다.

브라우저를 열어 보면 페이지 상단 파비콘 옆에 Title이라는 내용을 확인할 수 있다.

브라우저에서 title의 노출 부분을 확인할 수 있는 부분이다.

Pycharm에서 head 안에 있는 Title을 welcome으로 수정하였다.

브라우저에서 어떠한 변화가 있는지 알아보자!

브라우저를 보면 Title에서 welcome으로 변화된 것을 확인할 수 있다.

head에는 meta 태그를 이용해 정보를 입력하고 검색엔진이 정보를 더 쉽게 찾을 수 있도록 해준다.

그럼 이제 body 안에 내용을 입력했을 때의 변화를 알아보자.

Pycharm에서 body 안에 여기에 오신 것을 환영합니다.라는 내용을 입력하였다.

그럼 다시 브라우저로 가서 확인 해보자.

body에 입력한 내용은 브라우저 페이지 안에 표현된 다는 것을 확인하였다.

head와 body를 잘 보면 시작은 <head>와 <body> 마무리는 </head>와 </body>로 정리하는 것도 확인!

위 스샷 위에서 부터 차례대로 보면서 명령어에 대해 알아보자.

div는 구역을 나누는 명령어!

p는 문단!

h1은 제목을 나타내고, h2는 소제목 등, 그리고 h1에서 h6까지 있다.

span 태그 위 스샷에서 글자처럼 특정한 부분을 꾸밀 때 사용!

a 태그 하이퍼링크를 사용할 때

input 태그 입력 형식을 구현하기 한 태그

button 태그 텍스트나 기호 문자로 버튼을 만들기.

textarea 태그 여러 줄의 문장을 입력할 수 있는 영역

head와 body의 입력 시 노출 내용을 확인하면서 내가 표현하고자 하는 내용을 어느 부분에 입력을 해야 하는지를 이해하는 것이 중요했던 것 같다.

Contents

새소식