1. HTML
1) 개요
웹 개발은 하나의 건물을 세우는 것에 비유할 수 있다.
HTML은 구조, CSS는 스타일, JS는 사용자와 상호작용하는 역할을 한다.
2) HTML의 기본 구조와 문법
HTML(HyperText Markup Language)은 웹페이지의 틀을 만드는 마크업 언어이다.
내부는 부등호로 묶인 HTML의 기본 구성 요소인 태그들의 집합으로 이루어져있으며 .html 확장자를 사용한다.
3) 시맨틱 태그
시맨틱 태그는 HTML5에서 처음으로 등장하는, 의미가 있는 태그들이다.
모든 요소를 <div> 태그에 css로 스타일링하면 어떤 작업도 가능하지만 그다지 효율적인 방법은 아니다.
그러나 시맨틱 태그를 사용하면, 브라우저도 개발자도 이 요소가 어떤 의미를 가지고 있는지 한 눈에 이해할 수 있다.
✅ 시맨틱 태그를 사용해야 하는 이유
1. SEO 최적화(검색 엔진 최적화)
SEO는 웹사이트가 검색 결과에 더 잘 보이도록 최적화 하는 과정이다. 검색 엔진은 시맨틱 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주하고 이 결과에 따라 작성된 콘텐츠가 검색결과의 상위에 노출되기 용이하다.
2. 웹 접근성
일반적인 브라우저에서는 차이가 없지만 스크린 리더(시각장애인읠 위한 웹 서핑 프로그램)와 같은 도구로 페이지를 탐색할때 의미론적 마크업을 푯말로 사용할 수 있다.
3. 유지보수의 용이성
시맨틱 태그로 마크업을 해두면 여러 개발자가 함께 작업할 때 의미 있는 코드블록을 찾는것이 편리하다. 또한 요소 안에 채워질 데이터의 유형을 예측하기 쉽고 요소에 적절한 이름을 붙이기에도 용이하다.
✅ 시맨틱 태그의 예시
<header>, <footer>, <aside>, <section>, <article>, <nav>, <main>, <figure>, <fiigcaption> ...
4) 웹 페이지의 구조 잡기
(1) 만들고자 하는 부분을 영역으로 나누어 구분한다.
(2) 각 영역의 태그가 무엇으로 구현되어 있을지 생각하며 표현한다.
5) id와 class
(1) id
- id를 불러올때는 값 앞에 # 표시를 한다. ex) id="userName" => #userName
- 중복 사용이 불가능하다. 동일한 아이디명은 한 페이지에서 한번만 사용해야 한다.
- 한개의 요소는 한개의 아이디만 적용할 수 있다. ex) id="userName userNickname"(X) id="userName"(O)
(2) class
- class를 불러올때는 값 앞에 . 표시를 한다. ex) class="btn-more" => .btn-more
- 중복 사용이 가능하다. 동일한 클래스명을 같은 페이지의 여러 곳에서 사용할 수 있다.
- 한개의 요소에서 여러개의 클래스를 적용할 수 있다. ex) class="input focus border"
💌 <script>
자바스크립트와 같은 클라이언트 사이드 스크립트(client-side script)를 정의할때 사용하는 태그.
스크립트 코드를 요소 내부에 직접 명시하거나, src 속성을 사용하여 외부 스크립트 파일을 참조 할 수 있다.
단, src 속성이 명시된 <script> 요소는 스크립트 코드를 직접 명시해서는 안됨.
💡 <script> 태그가 사용할 수 있는 속성
- async="async" : 스크립트가 비동기적으로 실행됨을 명시(외부 스크립트를 참조할 경우에만 사용가능)
- charset="문자셋" : 외부 스크립트 파일에서 사용되는 문자 인코딩 방식 명시(외부 스크립트를 참조할 경우에만 사용가능)
- defer="defer" : 페이지의 파싱이 모두 끝나면 스크립트가 실행됨을 명시(외부 스크립트를 참조할 경우에만 사용가능)
- src="URL" : 외부 스크립트 파일의 URL 명시
- type="미디어타입" : 스크립트의 미디어 타입 명시
// script를 내부에 명시
<script>
let text = '스크립트가 내부에 명시되는 방식';
</script>
// 외부 스크립트 파일을 참조
<script src="../js/script.js" />💡 외부 스크립트 파일이 실행될때
- async 속성이 명시된 경우 : 브라우저가 페이지를 파싱하는 동안 스크립트가 실행
- async 속성없이 defer 속성만 명시된 경우 : 브라우저가 페이지의 파싱을 모두 끝내면 스크립트가 실행
- async 속성과 defer 속성이 모두 명시되어 있지 않은 경우 : 브라우저가 페이지를 파싱하기 전에 스크립트를 가져와 바로 실행
🤔 <script> 태그의 올바른 위치?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 1. <head> 태그 내부가 올바른 위치?
</script>
</head>
<body>
<script>
// 2. <body> 태그 내부가 올바른 위치?
</script>
</body>
</html>1. <head> 태그 내부가 올바른 위치?
브라우저가 HTML 코드를 읽다 <script> 태그를 만나게 되면, 해당 파일을 다운로드 하고 실행하기 위해 HTML 코드 읽는것을 멈춘다. 그리고 해당 파일을 모두 다운로드 하고 실행시킨 이후 다시 나머지 HTML 코드를 읽기 시작한다.
=> script 파일 용량이 너무 크거나 갯수가 많다면 해당 파일을 다운로드 하고 실행시키는데 많은 시간이 소요되기 때문에 사용자가 화면을 보기까지 매우 긴 시간이 걸릴 수 있다. 또 파일 내부에 특정 html과 관련이 있는 부분이 있을 경우, 해당 부분을 실행할 수 있는 html 요소가 아직 읽히지 않아 오류가 생길 수 있다.
2. <body> 태그 내부가 올바른 위치?
컴퓨터가 HTML 코드를 처음부터 읽어내려오면서 모든 HTML 코드의 파싱이 끝났을 때 script 태그에 쓰인 파일을 다운로드 하고 완료되면 파일을 실행하게 된다.
=> HTML 코드를 읽은 뒤 script 파일을 실행하기 때문에 사용자가 화면의 콘텐츠를 빨리 볼 수 있다. 그러나 만약 HTML 코드가 js에 의존적인 코드일 경우, 다운로드가 늦어지면 사용자가 아직 완성되지 않은 콘텐츠를 보게 될 수도 있다.
***
오늘은 html의 개요를 정리했다. 시맨틱 태그는 잘 사용하는 편이긴 했지만 쓰던것만 쓰던 편이었는데 새로 알게된 태그들이 많다. 다음에 마크업 하게되면 써봐야지
또 마크업 하기전에는 역시 영역을 미리 나눠보고 작업을 하는게 좋은 것 같다. 한동안은 익숙해졌다고 그냥 슥 보고 아 이렇게 하지 뭐~~ 하면서 작업했었는데, 종종 변경사항이 생기거나 하면 수정하기가 힘들었다ㅎ 이제는 조금 더 꼼꼼히 작업하는 습관을 들여야겠다.
script와 관련된 부분도 새로 정리해보았다. 막연히 이랬던것 같은데.. 하고 생각하던 부분이 많았지만 다시 찾아보면서 알고 있던 것을 새롭게 정리하게 되었다. 관련된 내용이 있으면 공부하면서 한번 찾아보는 것도 좋을 것 같다.
'study > TIL' 카테고리의 다른 글
| 22.12.23 - 레이아웃, display: flex (0) | 2022.12.23 |
|---|---|
| 22.12.22 - CSS 개요, 박스모델, CSS 선택자 (0) | 2022.12.22 |
| 22.12.20 - 소수 판별, .slice(), 크기 판별 (0) | 2022.12.20 |
| 22.12.19 - 조건문 / 반복문 / 함수 (0) | 2022.12.19 |
| 22.12.16 (0) | 2022.12.16 |
