그동안 웹개발을 하면서 프론트쪽 코드에서 HTML을 많이 접해봤는데요 정작 제대로 공부해본 적은 없어서 이참에 친해져(?) 보고자 HTML과 CSS에 대해 공부하는 시간을 가져보려고 합니다.
HTML이란?
HTML ?
HTML(Hypertext Markup Language)은 웹사이트의 프론트엔드를 구축하는 데 사용되는 코딩 언어입니다. 텍스트, 이미지, 링크 및 멀티미디어와 같은 요소를 통합하여 콘텐츠의 구조와 레이아웃을 제공합니다.
여기서 포인트는 HTML이 구조와 레이아웃을 제공한다는 점입니다. HTML, CSS, JS의 역할을 이해하기 쉽게 분류하자면 HTML은 웹의 구조, CSS 는 디자인적 요소, JS는 기능적 요소를 담당한다고 보면 됩니다.
VS Code 환경에서 실습
먼저 HTML 실습을 진행하기 위해 폴더를 생성한 후 index.html 파일을 생성해줍니다.
!+Enter 단축키로 HTML을 시작할 수 있습니다.
저장경로에 생성된 index.html 파일을 들어가줍니다.
아직은 아무 내용도 없습니다.
프로그래밍 처음 시작할때 국룰 아시죠?
body 부분에 Hello World! 입력해주고 다시 들어가보겠습니다.
파이썬을 처음 배울때가 생각나네요😊
이제 이런 느낌으로 구조를 만들어보려고 합니다.
먼저 위 텍스트를 복붙해서 body에 넣어줍니다.
역시 생각한대로 안나오네요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello HTML!</title>
</head>
<body>
<h1>헬스</h1>
<hr/>
<p> 위키백과, 우리 모두의 백과사전. </p>
<p>헬스(health)는 기본적으로
<a href="https://ko.wikipedia.org/wiki/%EA%B1%B4%EA%B0%95">건강</a>을
가리키며, 대한민국에서는 근력 트레이닝이나 웨이트 트레이닝을 의미하기도 한다.
그 외에 다음을 가리킨다.</p>
<ul>
<li>
의료
</li>
<li>
보건
</li>
<li>
체력 (게이밍)
</li>
<li>
패션 헬스(Fashion health)
</li>
<li>
헬스클럽(health club)
</li>
<li>
구글 헬스: 구글이 제공하는 개인 의료 정보 서비스
</li>
</ul>
</body>
</html><h1>,<hr/>,<p>,<ul>,<li> ,<a href>등의 태그를 사용해서 구조를 만들어보았습니다. 거의 비슷하죠?
다음시간에는 각 태그가 어떤 기능을 하는지 더 자세히 알아보도록 하겠습니다.
