[코딩2] HTML 기본 구조 - title & body 실습

코딩의 즐거움/HTML 2020. 10. 6. 11:33

위에 적힌 구조가 html의 기본 구조이다.

생략할 수 없고 늘 적어줘야 한다.

색깔별로 짝이다.

순서도 위와 같이 적어야 한다.

짝별로 잘 보면 아래쪽 글에 "/"가 들어가 있다.

"/"가 들어가 있는 태그가 닫히는 태그이다.

저걸 빼먹으면 웹페이지가 이상하게 나타날 수 있으니, 꼭 신경써서 적어줘야 한다.

<title> 태그 안에 코딩의 즐거움이라는 글자를 입력했다.

에디트플러스나 아톰과 같은 html 편집기에 위 내용을 입력한 후

"구본구조.html"로 저장을 해준다.

파일이름은 달라도 되나 확장자 " .html " 틀리지말고 잘 적어준다.

저장한 파일을 더블클릭해서 열어준다.

나는 크롬으로 열었다.

웹페이지의 제목에 해당되는 부분에 입력한 내용이 나타나는 걸 볼 수 있다.

실습의 중요성.

정의를 읽는 것보다 실습 한번 해보는 게 더 기억에 남고 오래간다.

이번에는 <body>태그 안에 "안녕하세요. 반갑습니다 ^^" 내용을 입력했다.

마찬가지로 저장(ctrl + s)해준다.

웹페이지를 열면 브라우저 화면 안에 내용이 들어가 있는 걸 볼 수 있다.

이 <body> 태그 안에 내용을 입력해서 웹페이지를 만들 수 있다.

태그와 속성이 많아서 그렇지

코딩은 생각보다 재미있다.

다음번에는 배경색을 넣고

이미지를 넣는 방법을 포스팅해보겠다.

[코딩6] body 여백 (0)	2020.10.12
[코딩5] html 링크 걸기 & 텍스트 색 바꾸기 (0)	2020.10.10
[코딩4] html 제목 태그 <h1> ~<h6> & 문단태그 <p> & 줄바꿈 태그 <br> (0)	2020.10.09
[코딩3] html 배경색 + 배경이미지 추가 (0)	2020.10.07
[코딩1] HTML 편집기 - 에디트플러스 EditPlus & 아톰 Atom (0)	2020.10.05

COMIZLE COMIZLE