엘리스 SW 엔지니어 트랙 2기
TIL(Today I Learned)이지만, 미루다 미루다 이제서야 조금씩 써봅니다.
기본적인 HTML 코드 구조
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
head 태그
- head 태그는 문서의 머리를 나타내는 태그입니다. 브라우저 화면에 직접 보이는 내용은 아니지만, 숨은 데이터를 정의하는 태그들이 들어가게 됩니다.
- title, meta 태그 등이 들어갈 수 있으며, css 파일을 링킹하는 link 태그나 js 파일을 링킹하는 script 태그도 포함될 수 있습니다.
- title 태그 : 웹 페이지의 탭에 들어갈 제목
- meta 태그 : 해당 문서에 대한 정보인 메타데이터(metadata)를 정의
- link 태그 : 주로 외부 스타일 시트(external style sheet)를 연결할 때 사용
- script 태그 : 자바스크립트와 같은 스크립트를 정의할 때 사용
body 태그
- body 태그는 문서의 몸통 부분입니다. 실제 웹 사이트에 보이는 내용들이 들어가게 됩니다.
VSCode 에서 빠르게 HTML 기본 구조를 완성하는 법
- html>(head+body) 라 적고 Tab키를 누르면 자동으로 기본 구조가 생성됩니다.
기본적인 HTML 코드 구조 예시
<!-- ctrl+f5 누르면 open with live server 처럼 브라우저 열 수 있다. -->
<!-- body 태그 : 본문(실제로 보이는 것들)은 body 태그 내에 있는 것들 -->
<!-- head 태그 : 본문을 설명하는 것들(메타 데이터)은 head 태그 내에 있는 것들 -->
<!-- html 태그 : head 태그와 body 태그를 묶어주는 태그 -->
<!-- <!DOCTYPE html> : 관용적인 표현. 항상 html 파일의 최상단에 적는다 -->
<!-- 소스코드에 나와있는 태그들 숙지하기 -->
<!DOCTYPE html>
<html>
<head>
<!-- 페이지의 title -->
<title>WEB - Welcome!</title>
<!-- utf-8 로 코딩하는 것 => utf-8로 정의한다는 뜻 => 인코딩 => meta 태그로 나타냄 -->
<meta charset="utf-8" />
<!-- 참고) utf-8 로 코딩 되어 있는 것을 해독하는 것 => utf-8로 디코딩 -->
<!-- 데이터를 설명하는 데이터 => 메타데이터 -->
</head>
<body>
<h1><a href="welcome.html">WEB</a></h1>
WWW is <strong>World <u>Wide</u> Web!</strong><br />
<img
src="https://images.unsplash.com/photo-1648737154547-b0dfd281c51e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt=""
width="100"
/>
<ol>
<!-- 이 li 태그를 누르면, id 속성값이 html인 곳으로 scroll 되어 이동함 -->
<li><a href="1.html">html</a></li>
<li><a href="2.html">css</a></li>
<li><a href="3.html">javascript</a></li>
</ol>
</body>
</html>'Log > Elice' 카테고리의 다른 글
| [엘리스 SW 엔지니어 트랙 2기] 엘리스 SW 엔지니어 트랙 2기 최종 후기, 3기 레이서 TIP (2) | 2022.07.29 |
|---|---|
| [엘리스 SW 엔지니어 트랙 2기] 알고리즘 문제 풀이 스터디를 마치며.. (0) | 2022.07.03 |
| [TIL] 웹, 웹의 동작원리, 웹 호스팅 (0) | 2022.06.28 |
| [TIL] 선택자와 CSS 스타일링 (0) | 2022.06.26 |
| [엘리스 SW 엔지니어 트랙 2기] 역량테스트 점수 공개 (0) | 2022.03.18 |
