서론
글 3개 만에 13,000자를 넘겼다. 대충 글 하나당 3,000자~6,000자 정도 쓰고 있는 것 같다. 다행히 이번 일차는 좀 그러한 부담이 덜할 것 같다.
그리고 티스토리 자체 편집기를 쓰는 건 이번 일차로 끝내야 할 것 같다. 그냥 사용하려니 글자 색이 이상해져서 다크 모드에서 이상하게 보이는 문제가 있다. 사람들이 괜히 마크다운을 쓰는 게 아닌 것 같다.
역시 이럴 줄 알았으면 개츠비로 블로그를 만들어보는 건데. 프로그래머스 데브코스가 벌써부터 살짝 걱정된다. 쓰으으으으으읍.
일단 데브코스 강의에서 배운 내용과 내가 따로 조사한 내용을 합쳐서 TIL을 작성해 봤다. (즉, 내가 적고 있는 내용 일부는 따로 조사해서 추가한 내용들이다.)
이번 일차는 HTML 학습이다.
<HTML>
HTML 기본 문법
HTML의 기본 문법은 부등호(<, >) 사이에 적절한 태그의 이름을 넣는 것이다. 여기서 태그는 HTML 특유의 구문으로, 콘텐츠의 구조를 지정하고 정의하는 데 사용될 수 있다. 이러한 태그는 콘텐츠의 여부에 따라 2종류로 나눌 수 있다.
콘텐츠를 가지는 태그
콘텐츠를 가지는 태그에는 다음과 같은 예시가 있다.
<div> 콘텐츠 </div>
<p> 콘텐츠 </p>
<a> 콘텐츠 </a>공통적으로 태그가 열리고(시작 태그), 내부적인 내용(콘텐츠) 이후, 태그가 닫히는(종료 태그)로 구성이 되어 있다. 이러한 3종 구성 세트를 묶어서 요소(Element)라고 부르기도 한다.
- 시작 태그: 부등호 사이에 태그가 적혀있다. 요소의 시작이며, 여는 태그라고도 한다.
시작 태그 예시 - <div>, <p>, <a> - 콘텐츠: 내부의 내용.
콘텐츠 예시 - 상단의 코드블럭에 '콘텐츠'라고 적힌 부분. - 종료 태그: 시작 태그와 비슷하나, 첫 부등호 뒷부분에 슬래시('/')가 있다. 요소의 끝이며, 닫는 태그라고도 한다.
종료 태그 예시 - </div>, </p>, </a>
콘텐츠를 가지지 않는 태그
콘텐츠를 가지지 않는 태그에는 다음과 같은 예시가 있다.
<br>
<br />
<input type="text">
<input type="text" />시작 태그 & 닫는 태그와 다르게 하나의 태그로만 구성되어 있다. 이렇게 하나로만 구성된 태그는 '단일 태그(Single Tag)'로 불린다.
그리고 단일 태그는 코드 블럭 예시에 보이는 것처럼, 끝에 슬래시('/')를 붙일 수 있다. 이러한 기법을 '셀프 클로징(Self-Closing)'이라고 한다. 즉, 자기 자신을 닫아주는 기법이다. 당연하게도 셀프 클로징 기법을 이용해 닫아진 태그는 셀프 클로징 태그라고 불린다. 단일 태그에 셀프 클로징은 선택 사항이지만, 가독성 향상을 위해 사용되는 경우가 많다.
참고로 JSX 혹은 React에서는 이러한 단일 태그라도 반드시 셀프 클로징을 하거나, 종료 태그를 이용해 통째로 닫아줘야 한다.
속성과 값
태그는 속성(Attribute)과 속성에 따른 값(Value)을 가질 수 있다. 이는 어떤 태그를 쓰느냐에 따라서 각기 다른 고유의 속성과 넣어야 하는 값을 가진다.
<div title="제목"> 콘텐츠 </div>위의 코드 블럭 예시처럼, '<태그 속성="값">'의 구조를 가진다.
div가 태그, title이 속성, "제목"이 값이다. 물론 그 옆에 있는 콘텐츠는 그냥 콘텐츠이다.
HTML 기본 문서
HTML 기본 문서의 구조는 다음과 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>문서의 제목</title>
</head>
<body>
안녕하세요!
</body>
</html>
<!DOCTYPE html>
문서 버전. 항상 최상단에 있어야 한다. 그리고 여기서 DOCTYPE은 Document Type의 약자이다. 이전 버전과의 구분을 브라우저에게 알려주기 위해 별도의 선언을 하게 되었다. 해당 선언이 있으면 W3C 등의 웹 표준을 지키는 HTML5 '표준 모드'로 웹이 렌더링 된다. 이러한 표준 모드 유지를 크로스 브라우징(Cross Browing)이라고 부른다.
반면 위의 버전 선언이 없으면 이전 버전과의 하위 호환성을 보장하는 '쿼츠 모드'로 작동된다. 쿼츠 모드에서는 문서의 내용이 개발자의 의도와는 다르게 꼬일 가능성이 크다. 그리고 HTML 이전 버전들을 위한 별도의 선언법도 있는데, DOCTYPE 선언법이 아주 간결한 HTML5와 다소 다르다.
<html lang="ko"> </html>
HTML 문서 시작 선언. 그리고 lang="ko"에서 알 수 있다시피 문서의 기본 언어를 설정하는 곳이다.
이러한 기본 언어 설정의 이유는 웹 접근성을 보다 원활하게 하기 위해서다. 정확하게는 시각장애인 같은 사람들이 문서에 들어왔을 때, 이 lang을 기반으로 문서의 내용을 음성으로 변환하여 알려준다.
또한 자동번역 인터페이스에서 언어 구분을 보다 편하게 하기 위해서 사용하는 이유도 있다. 다시 생각해 보면 번역기의 웹페이지 번역 기능을 사용할 때 종종 언어를 지정해줘야 할 때가 있는데, 그게 실은 이러한 인터페이스가 달라서 그런 게 아닐까 싶다... 물론 이 부분은 내 뇌피셜이다.
<head></head>
Head는 문서에 필요한 정보가 기입되는 곳이다. 사람 눈에 보이지 않는 문서의 정보가 담기는 영역이기도 하다. head에는 head만이 가질 수 있는 태그가 있다.
- <title>
문서의 제목을 담당함. 프로그래머스 사이트가 있으면 '프로그래머스'라는 글자를 브라우저 상단에 표기. - <style>
문서의 스타일링을 담당함. CSS 문서 없이, HTML 내에서 CSS를 작성할 수 있도록 도와준다. 다만, 길어지면 따로 파일을 분리하는 것이 권장된다. - <link>
각종 파일을 해당 문서와 이어주는 역할을 한다. HTML, CSS, 외부 JS 라이브러리, 각종 폰트를 연결해서 사용하는데 이용된다. - <meta>
인코딩 종류인 UTF-8이나 키워드, 페이지 설명, 작성자 등을 명시하는 데 사용되는 말 그대로 '메타' 데이터 태그이다.- 인코딩 정보
charset은 문서에서 허용되는 문자의 집합이다. charset에는 보편적으로 쓰이는 UTF-8 외에 다양한 종류의 인코딩이 있다. 이러한 인코딩 정보에 따라 한글, 한자, 일본어 등의 비영어권 문자가 문서 내에서 사용불능해질 수도 있다. 이러한 인코딩 정보의 작성 이유는 브라우저마다 기본적인 인코딩 방식, 폰트가 다르기 때문이다.
- 인코딩 정보
- <script>
HTML 페이지 내에서 자바스크립트를 따로 선언하고자 사용되는 태그이다. script 시작 태그와 닫힌 태그 사이에 자바스크립트 내용을 넣어주면 된다. style과 마찬가지로 지나치게 길어지면 따로 분리하는 것이 나을 수도 있다.
또한, 링크를 이용해 특정 경로에 있는 자바스크립트를 가져올 수도 있다. 그리고 링크 형태의 script는 몇 가지 선언법(일반, async, defer)이 존재한다. 파일을 불러오는 방식에 따른 차이가 있다.
어쨌거나 script 태그 내에 모든 내용을 넣어주는 걸 콘텐츠 방식, 별도의 경로를 통해 가져오는 방식을 링크 방식이라고 한다. 참고로 링크 방식이라고 해도 셀프 클로징을 사용해서는 안 된다.
<body> 안녕하세요! </body>
body는 실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳이다. 눈에 보이는 HTML 문서 내용의 대부분은 이곳에서 기반한다. 그리고 body는 다양한 요소로 구성되는데, 이러한 요소의 '레이아웃'을 결정하는 부분이 바로 블록 레벨 요소와 인라인 레벨 요소이다.
- 블록 레벨 요소(block-level Elements)
새로운 줄에서 시작하여, 레고 블록처럼 차곡차곡 쌓이고 화면 너비가 꽉 차는 요소.
즉, 혼자서 좌우 너비 100%를 차지하여 양옆에 다른 요소가 오지 못하도록 한 줄을 잡아먹는 요소이다.- 블록의 크기와 내/외부에 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타낸다.
- 인라인 요소를 안에 포함할 수 있으나, 인라인 요소 안에 블록 요소가 포함될 수 없다.
- width, height, padding, border, margin 등의 속성을 자유롭게 사용할 수 있다.
- 보통 레이아웃을 잡는 용도로 쓰인다.
- 예시는 다음과 같다.
<div>,<table>,<h1>~<h6>,<p>,<form>,<ul>,<ol>,<li>,<dl>,<dt>,<dd> 등
- 인라인 레벨 요소(inline-level Elements)
새로운 줄을 만들지 않고, 블록 요소 내에만 포함되는 요소
줄을 완전히 차지하지 않는 요소로, 자신의 콘텐츠만큼의 필요 공간만 잡아먹는다.
- 주로 문장, 단어 같은 작은 부분에 사용되며 한 줄에 나열된다.
- 좌/우에 여백(margin)을 넣는 것만 허용된다. 줄 높이 설정(line-height) 속성을 사용해야 한다.
- width, height 속성이 적용되지 않는다.
- 인라인 요소 내부에 인라인 요소가 있을 수 있다.
- 보통 텍스트를 다루는 용도로 쓰인다.
- 예시는 다음과 같다.
<span>,<a>,<br>,<em>,<strong>,<input>,<label>,<img> 등
참고로 CSS의 display: inline-block 속성을 이용하면 블록과 인라인의 하이브리드에 가까운 형태로 바꿀 수 있다. 이를 '인라인-블록(inline-block) 요소'라고 한다. 인라인의 단점이 보강된 인라인으로 보면 된다. 즉, width, height, margin 등을 쓸 수 있다. 물론 그런 만큼 고려해야 할 것도 늘어난다. 역시 큰힘에는 큰책임이 따른다.
부모요소 자식요소
상위가 하위를 감싸고 있으면 부모, 하위에 있으면 자식이다. 그리고 이러한 부모-자식 구조를 트리(Tree) 구조라고도 한다. 이러한 구조는 내용에 큰 영향을 끼치며, 트리 구조 형태로 계속해서 내려가다 보면 부모 아래의 자식이 또 다른 자식의 부모가 될 수도 있다.
표기(구분) 상으로는 내어쓰기가 부모요소, 들여쓰기가 자식요소이다. 다만, 내어쓰기와 들여쓰기는 렌더링 상으로 별 영향이 없다. 오직 코드를 작성하고 관리하는 개발자에게만 영향이 있을 뿐이다.
<!-- 올바른 부모-자식 코드 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<title>문서의 제목</title>
</head>
<body>
안녕하세요!
</body>
</html>
<!-- 개판...이 나버린 부모-자식 코드 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<title>문서의 제목</title>
</head>
<body>
안녕하세요!
</body>
</html>
그러나 그렇기에 내어쓰기와 들여쓰기가 중요하다. 이게 중요한 이유는 위 코드 블럭 예시를 보면 알 수 있다.
올바른 코드는 구분하기가 쉽지만, 그렇지 않은 코드는 제3자가 자신이 작성한 코드를 수정할 때, 부모요소와 자식요소의 깊이를 착오하여 코드를 잘못 수정할 가능성이 기하급수적으로 늘어날 여지가 많아 보인다. 당연하지만, 코드 수정에 많은 시간이 걸리는 등의 문제가 발생할 수도 있다.
HTML 주석
HTML 주석은 개발자가 코드 내에 입력한 메모다.
<!-- 주석 내용이 이곳에 들어간다. -->
<!-- 콘텐츠<!--주석 내부에 주석은 안 된다. --> -->
<!-- (대충 개인정보 혹은 회사정보) -->기본적으로 '<!--'로 시작하고 '-->'로 끝난다. 여기에는 몇 가지 주의사항이 있다.
첫 번째는 주석 내에 주석은 제대로 작동하지 않는다는 점이다. 위 코드블럭 예시의 2번 줄을 보면 알겠지만, 끝에 있는 '-->' 중 하나의 색이 묘하게 다르다는 걸 알 수 있다. 즉, 주석이 제대로 안 닫힌다.
두 번째는 개인정보 혹은 회사정보를 입력 시 제3자가 브라우저에 내장된 개발자 도구로 해당 내용을 볼 수 있다는 점이다. 개인정보/회사정보가 털리거나 AWS 요금 폭탄이 떨어지는 일이 없게 민감한 내용은 넣지 말자.
그리고 솔직하게 말하자면 HTML 주석은 너무 불편하다. 대체 언제쯤 더 나은 주석 방식이 나올까.
레이아웃 태그
인터넷의 거대화로 수많은 웹문서가 생겨나고 이에 따라, 일관적이지 않은 구조의 문서들이 난립했다. 당연하게도 원하는 정보를 찾는 게 이에 따라 점점 더 어려워져 갔다.
시멘틱 태그(sementic tag)는 해당 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그들이다. 시멘틱이라는 단어의 뜻이 '의미~'라는 느낌인 걸 생각하면 '의미 있는 태그'를 뜻한다고 해석할 수 있다. 즉, HTML 구조에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와주는 걸 목적으로 창조된 태그들이다.
HTML5 이전에는 <div>, <span>이 이러한 역할을 했으나, HTML5부터는 시멘틱 태그의 등장으로 좀 더 명시적이면서 직관적인 구조의 설계가 가능해졌다. 이러한 시멘틱 태그의 장점은 검색 가산점을 통한 검색엔진 최적화(SEO), 소스코드의 구조화, 코드 가독성 향상, 로딩속도 향상 등이 있다.
<div>
가장 흔히 사용되는 레이아웃 태그로, 단순히 구역을 나누기 위한 태그이다.
위에서 나왔다시피, 이 녀석은 아래의 다른 녀석들과 다르게 사실 시멘틱 태그가 아니라 그냥 레이아웃 태그이다.
<header>
블로그의 글 제목, 작성일, 내비게이션 바, 검색 등의 주요 정보를 담는 태그이다. 참고로 <head>와는 다르다!
<footer>
페이지의 바닥줄에 사용되며 저작권 정보, 연락처 등의 부차적인 정보를 담는 태그.
쉽게 말해서 아래에 달아놓는 그다지 중요하지 않는 정보 전용 레이아웃이다.
<nav>
일반적으로 메뉴, 목차에 사용된다. 그냥 내비게이션을 만들 때 쓰이는 태그이다.
<main>
페이지의 가장 큰 부분으로 사이트의 내용. 즉, 주요 콘텐츠를 담는 태그이다.
<section>
콘텐츠의 구역을 나누는 태그다.
신문지를 보면 여러 기사가 각자의 구역에서 각자의 정보를 전달하는데 이러한 그룹화-분리 역할을 수행한다.
<article>
블로그 포스트, 뉴스 기사와 같은 독립적인 문서를 전달하는 태그이다.
다른 페이지나 다른 영역에서 언제든지 독립적으로 가져다 붙일 수 있는 영역을 그룹화할 때 사용한다.
<aside>
문서의 주요 내용에 간접적인 정보를 전달하는 태그이다.
쉽게 말하자면 메인 콘텐츠와 별 관련이 없는 영역을 의미하는 태그이다.
쇼핑몰 오른쪽에 따라다니는 오늘 본 상품 같은 곳에 사용할 수 있다.
기타 태그
외에도 address, hgroup, details, figure, time 등의 시멘틱 태그가 존재한다.
절대경로와 상대경로
절대경로는 최상위 폴더부터 파일까지의 모든 경로를 나타낸 표기법이다.
상대경로는 현재 파일(문서)의 위치를 기준으로 나타내는 상대적인 경로 표기법이다.
참고로 경로 설정에 사용하는 슬래시의 의미는 다음과 같다.
| / | 최상위 폴더 (또는, 루트 디렉토리) |
| ./ | 현재 폴더 |
| ../ | 현재 파일 위치의 상위 폴더 |
다시 돌아와서, 절대경로는 처음부터 끝까지의 경로를 표기하면 된다.
[절대경로 예시]
/sample/assets/javascript/mode.js
반면 상대경로는 자기가 어디에 있고, 원하는 파일이 어디에 있느냐에 따라 다르다.
보통 현재 파일과 같이 있거나, 같이 있는 폴더면 그에 맞춰서 따라 내려가면 된다.
[동일 혹은 하위폴더 - 상대경로 예시 2개]
./mode.js
./setting/config.js
문제는 이런 경우가 아니고 상위 폴더. 즉, 현재 파일 바깥에 있는 파일일 때다.
이런 경우에는 슬래시('/')를 이용하여 상위 폴더로 넘어간 다음 따로 파일이나 문서를 찾아야 한다.
그리고 이를 이용한 상대경로 예시는 다음과 같다.
[상위 폴더 - 상대경로 예시]
../html/tab.html
../css/nav/light_nav.css
일반적으로 개발을 할 때는 상대경로를 사용한다. 이는 개발물의 위치가 바뀌어도 그대로 작동할 수 있게 하기 위해서다. 비록 조금 힘들 수도 있지만, 상대경로가 익숙해질 수 있도록 연습하는 습관을 기를 필요가 있을 것 같다.
사족
이렇게 2일 차 TIL이 끝났다. 나는 이번 2일 차에 8,700자 이상을 작성했다. 심지어 시간도 3일 차가 돼서야 작성이 완료되었다. 이렇게 계속 작성했다간 수강 완료 전에 손가락이 나가버리지 않을까. 조금은 효율적으로 작성할 필요를 뼈저리게 느낀다.
그래도 이렇게 작성을 하니 머릿속에는 쏙쏙 들어오기는 한다. 만약 아직 블로그를 만들지 않은 사람이라면 나처럼 해보는 걸 추천한다. 학습 효과는 확실하다. 좀 귀찮을 뿐이지.
그리고 이걸 작성하면서 다른 수강생 분들의 블로그와 깃허브도 살펴보았는데... 능력자분들이 많으셨다. 난 웹에 대해 제대로 아는 게 없는데, 제대로 알다 못해 고-급 지식을 알고 있거나, 백준 플래티넘 되시는 분까지도 있으셨다. 계속 노력하고 정진하지 않으면 진짜로 큰일이 날 지도 모른다는 상념이 자꾸만 든다.
일단 내일 강의를 전부 듣고 자투리 시간을 어떻게 활용할지를 고민해봐야 할 것 같다. 코딩 테스트, React 선행 학습 정도로 생각해 봐야 겠... 잠깐, 강의 수가 좀 많다. 자투리 시간이 있기는 하려나?
'💻 종합 개발 주제 > 📚 웹앱 데브코스' 카테고리의 다른 글
| 4일차 데브코스 pt.2 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2023.12.22 |
|---|---|
| 4일차 데브코스 pt.1 - 클라우딩 어플리케이션 엔지니어링 TIL (0) | 2023.12.21 |
| 3일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2023.12.21 |
| 1일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2023.12.19 |
| NULL일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2023.12.19 |
