HTML (Hyper Text Markup Language)
: 웹 페이지를 만들기 위한 기본적인 마크업 언어를 의미합니다.
이 마크업 언어를 사용하여 작성한 HTML 문서는 웹 브라우저에서 렌더링 되어 사용자에게 보여집니다.
먼저 간단한 예시를 들어보겠습니다.
이런식으로 VScode를 사용하여 작성한 HTMl 문서는 아래와 같이 보여집니다.
문서와 브라우저 상에서 보여진 화면을 비교하여 보면
<body> 와 </body> 사이에 있는 것들이 브라우저에 표기된 것을 확인할 수 있습니다.
HTML 은 크게 <head>와 <body>로 구분할 수 있는데,
<head>: 웹 문서에 필요한 설정, <body>: 실제로 사용자에게 보여지는 부분 입니다.
이처럼 웹 문서는 요소(element)로 구성되어 있는데요.
예를 들어 <body>와 </body> 를 묶어 <body> 요소라고 칭합니다.
위의 예시에는 <body>와 </body> 사이에 <h1> 요소와 <p> 요소가 있는걸 볼 수 있습니다.
추가로 <body> 요소를 <h1> 요소와 <p> 요소의 부모요소,
<h1> 요소와 <p> 요소를 <body>요소의 자식 요소라고 칭하기도 합니다.
요소는 여는 태그(요소의 시작점)과 닫는 태그로 구성되어 있는데요.
위의 예시를 보면 <h1> 은 여는 태그, </h1> 은 닫는 태그입니다.
요소의 종류는 매우 다양하며, 필요할 때마다 검색해서 사용하는 습관을 먼저 들여야 합니다.
참고할 수 있는 사이트로는 MDN, W3school 두 웹 사이트가 있습니다.
오즈코딩스쿨에서 제공해주는 가이드라인과 미션을 수행해보겠습니다.
제공 되는 HTML 문서 내용을 이용하여 추가적으로
1. 제목을 하이퍼링크로 변경하기: <a href="주소">________</a>
2. 순서가 없는 list 를 만들고 작성하기: <ul>_________</ul>
을 이용하여 수행하였습니다.
'[오즈코딩스쿨] AI 헬스케어 > 👍🏻 베이스캠프 미션' 카테고리의 다른 글
| [AI헬스캠프] CSS 이론 (2) (0) | 2025.09.10 |
|---|---|
| [AI 헬스캠프] CSS 이론 (1) (0) | 2025.09.09 |
| [AI 헬스캠프] Git 과 GitHub (0) | 2025.09.07 |
| [AI 헬스캠프] CLI 환경 알아보기 (0) | 2025.09.03 |
| [AI 헬스캠프] VS code 설치 (0) | 2025.09.02 |