semantic(시멘틱) html5를 사용할 때 기본적으로 사용되는 태그는, html, head, body 가 있다. html은 웹브라우저에 웹문서라는 것을 head는 웹문서의 정보를 body는 웹브라우저에 나타나는 모든 것을 작성한다. 이 3가지를 코드로 작성하고 확장자 .html 로 저장하면 웹브라우저에 내용이 표시된다.
🔍semantic html5 기본구조
semantic html5의 기본 구조는 전통적인 html의 기본 구조와 같다.
다만, html5로 버전이 업그레이드되면서 <!DOCTYPE html>으로 변경되었다.
html5의 기본구조에 필요한 필수적인 것은 4가지이다.
이것은 컨테이너( Container )와 같은 역할을 한다.
즉, html5에서 사용되는 모든 것을 담는 하나의 그릇 또는 상자와 같은 역할을 한다.
html5가 어떻게 동작하고, 문서의 정보를 담고, 실제 화면에 보여지는 부분을 구분하고
각각 해당하는 부분에 배치하게 된다.
말이 어렵다. 간단한 설명은 다음과 같다.
- <!DOCTYPE html>
- 표준모드 html5 사용 지정. - <html>
- html 모든 요소를 담고 있는 부분. - <head>
- html 문서 정보를 담고 있는 부분.
- 사용자에 보이지 않는다. - <body>
- html 문서 내용을 담고 있는 부분.
- 사용자가 보는 모든 부분.
이제 간단한 코드를 보자.
웹브라우저에 무엇하나 볼 수 없겠지만,
html5를 웹브라우저에서 실행되는 것은 확인할 수 있다.
🔍코드보기
가장 뼈대가 되는 기본 구조 3가지를 보자.
말이 3가지 지만 4가지 정도 적혀 있다.
선언문이기 때문에 크게 3가지 정도로 한 것이니 태클 노노여~
semantic html5 의 기본 구조는 아래의 코드 형식을 따른다.
<!DOCTYPE html> 과 <html> 부분은 웹브라우저에 현재 문서가 html 임을 알려주는 문장이다.
<head>는 현재 html 문서의 정보를 담고 있다. 화면에는 보여지지 않으며, 주로 SEO 적인 측면들과 연관되어 있기도 하자.
<body>는 실제로 사용자의 눈에 보여지는 부분으로, 전체적인 콘텐츠 내용이 들어간다.
블로그를 기준으로 포스팅의 내용들과 메뉴 등이 들어가는 부분이 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
</head>
<body>
</body>
</html> 🔍실행에 필요한 것
코드는 작성했지만, 실제로는 의미가 없는 코드이다.
뼈대라고 볼 수 없는 속 빈 강정이다.
알맹이가 없는 코드이기 때문이며, html 코드를 작성하기 위한 그릇만 준비되었을 뿐이다.
본격적으로 시작하려면 필요한 것들이 있다.
코드를 작성할 에디터와 html 실행을 위한 작은 서버이다.
에디터는 VSCode ( 비주얼스튜디오코드 ) 를 사용하고,
작은 서버는 VSCode 확장 기능의 Live Server 를 사용할 것이다.
이것에 대한 설치과정은 검색하면 많으니, 참고하자.
- VSCode ( 비주얼스튜디오 코드 )
- Live Server
- 웹브라우저
- 개발자도구
✨VSCode ( 비주얼스튜디오 코드 )
html 코드를 작성하기에 가장 적당한 것이 `비주얼스튜디오 코드`이다.
다른 개발에 필요한 에디터들도 있지만, 이것만큼 편한 것은 없다.
html 코드를 공부하기 좋고, 급하게 코딩하고 테스트하는 것도 좋다.
비주얼스튜디오 코드를 설치하기 위해선 홈페이지에서 다운로드한 후 그냥 설치하면 된다.
해당 홈페이지는 다음과 같다.
- 비주얼스튜디오 코드 [ 다운로드 ]
✨Live Server
Live Server는 VSCode 에서 제공하는 확장기능으로 작은 웹서버이다.
네트워크 환경을 구성해서 VSCode에서 작성한 html5 코드를 웹브라우저에서 볼 수 있도록 도와준다.
VSCode에 Live Server가 정상적으로 설치되면
화면 우측 하단에 `Go Live` 버튼이 생긴다.
이것을 클릭하면 웹브라우저가 자동으로 실행되며, 자신이 작성한 html5 코드의 결과를 보여준다.
✨ 웹브라우저
우리가 매일 사용하는 것 중 하나가 웹브라우저이다.
크롬 또는 엣지 브라우저 등을 사용할 것이다.
웹브라우저에서 보이는 모든 내용은 html5로 작성된 것들이다.
즉, html5로 웹페이지가 실행되는 모습을 볼 수 있는 것이 웹브라우저이다.
✨개발자도구
개발자도구는 웹개발을 하는 사람들에게 필요한 도구이다.
html과 자바스크립트, css 등과 네트워크 요청 등의 요소들을 볼 수 있다.
내가 만든 웹 페이지가 정확한 동작과 표현을 하고 있는지 확인하고,
잘못된 부분이 있다면 수정할 수 있다.
이런 일련의 과정은 디버깅이라 하고, 이를 통해 웹 페이지를 제작하고, 확인해 볼 수 있다.
댓글
댓글 쓰기