1. HTML 기본 틀
이전 게시물(1. HTML 기본 틀 작성)에서 HTML 문서 기본 틀에 대해서 이야기 했었다.
이번에는 필수적으로 작성해야하는 기본 틀이 아니라 실제로 사용하기 위해 작성하는 HTML의 기본적인 레이아웃과 기초적인 CSS에 대해서 이야기해보려고 한다.
참고) IntelliJ에서 HTML FIle, Stylesheet(CSS) 파일들을 생성할 수 있다.
생성하자마자 기본 틀을 제공하며, html 파일에서 !(느낌표)를 치고 Tab을 눌러도 틀을 제공한다.
아래는 기본적인 틀 예제 코드이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 문서 제목</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- <header>, <main>, <footer> 항목 참고 -->
</body>
</html>
1) 문서 레이아웃 설명
<link rel="" type="" href="">
- <link> : 해당 문서와 외부 소스(external resource) 사이의 관계를 정의할 때 사용
이러한 <link> 요소는 주로 외부 스타일 시트(external style sheet)를 연결할 때 사용된다.
<link> 요소는 빈 태그이며, 속성만을 포함한다.
또한 <head> 요소 내부에만 위치할 수 있으며, 그 개수에는 제한이 없다.
속성 설명
- rel (relation) : 필수 속성으로, 현재 문서와 외부 리소스 사이의 연관 관계를 명시
ex) rel="stylesheet" - 외부의 스타일시트 파일을 연결하는 것 - href (hyper reference) : 링크될 외부 리소스(external resource)의 URL를 명시 절대 주소와
상대 주소 둘 다 올 수 있다. - type : 링크된 외부 리소스의 미디어 타입을 명시하며, href 속성이 설정되어야 사용 가능
위 코드에는 작성되지 않았듯 HTML5에서는 적든 안적든 상관이 없다.
(노션에서 먼저 작성되어서 링크가 노션이다. 아래에 정리되어 있어서 아래 내려가서 봐도 무방)
<header>, <main>, <footer>
위 기본적인 틀 코드에 이 내용이 포함되어 있다고 생각하면 된다.
<body>
<header>
<h1>header</h1>
<p>머리말</p>
</header>
<main>
<h2>main</h2>
<p class="big-font">본문</p>
<!-- 로렘 입숨 참고-->
<p class="small-font">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<footer>
<p>footer</p>
</footer>
</body>
기존 HTML4에서 개발자들은 태그에 직접 클래스나 아이디로 이름을 부여했었다.
(header, top, bottom, footer, main, article 등등)
위와 같은 작업방식은 검색엔진이 웹페이지 컨텐츠를 검색하기 불가능하게 만들었지만, 이제는 HTML5의 ③ 시멘틱 태그를 (<header>,<footer>,<nav>,<section>,<article>) 이용해서 해당 작업이 보다 수월해졌다.
- <header> : 문서나 특정 섹션(section)의 헤더(header)를 정의할 때 사용
헤더(header)는 보통 도입부에 해당하는 콘텐츠나 네비게이션 링크의 집합 등과 같은 정보를 포함한다.- 하나 이상의 제목 요소(h1 ~ h6)
- 로고(logo)나 아이콘(icon)
- 저자(author) 정보
- <main> : 해당 문서의 <body> 요소의 주 콘텐츠(main content)를 정의할 때 사용
<main> 요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나
확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 반복되는 내용을 포함해서는 안 된다.
따라서 하나의 문서에는 단 하나의 <main> 요소만이 존재해야 하며,
<main> 요소는 <article>, <aside>, <footer>, <header>, <nav> 요소의 자손 요소가 되어서는 안 된다. - <footer> : 문서나 특정 섹션(section)의 푸터(footer)를 정의할 때 사용
푸터(footer)는 보통 <footer> 요소가 포함되어 있는 문서나 섹션에 대한 아래와 같은 정보를 포함한다.- 저자(author) 정보
- 저작권 정보
- 연락처
- 사이트맵(sitemap)
- 페이지 맨 위로 되돌아갈 수 있는 Top 버튼
- 연관 페이지 등
<class>, <id>
- <class> : 그룹으로 묶어 스타일을 지정할 때 사용하는 이름
CSS에서 표기방식은 .classname 의 형식이다. - <id> : 한 가지만 지정해서 스타일을 지정할 때 사용하는 이름
CSS에서 표기방식은 #classname 의 형식이다.
ID, CLASS 이름은 자유 형식이지만 숫자로 시작하면 안된다.
2) 부가 설명
① 사용하지 않아도 되는 속성을 명시하는 이유?
이전 게시물부터 봤다면 왜 사용하지 않아도 되는 속성(lang, type 등)을 굳이 명시할까?
이유는 검색 엔진이 더 많은 정보를 수집할 때 사용이 되어 사용자에게 더 정확한 검색 결과를 주는데 사용된다고 한다.
즉, SEO(검색엔진 최적화)에 영향을 미친다는 뜻.
② HTML도 구분자가 있을까?
태그 안 속성을 살펴보면 자바나 파이썬 등 프로그래밍 언어를 사용할 때랑 다르게 쉼표(Comma: ,)나 쌍반점(Semicolon: ;)으로 구분을 하지 않는다.
사실 크게 이야기할 건 없고 HTML에서 태그, 속성 사이 공백으로 구분한다고 생각하면 된다.
이전 게시물에도 작성해놨지만 대소문자도 구분하지 않는다. <tiTlE> ← 이런 식으로 작성해도 작동하지만 가독성 및 협업을 위해 소문자로 작성하는 것이 좋다.
③ 시멘틱태그(sementic tag)
사이트의 구조(레이아웃)를 설계하기 위한 태그
HTML의 구조를 설계하는데 있어 태그에 의미를 부여함으로써 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그이다.
이전 HTML4에서는 <div id=”header”> 식으로 사용하고 있었지만,
HTML5에서 시멘틱 태그를 이용할 수 있게되면서 해당 작업이 수월해졌다.
추가로 SEO 최적화, 효율적인 웹 접근성, 유지보수 용이 등의 장점이 있다.
HTML5는 웹페이지에서 각각의 부분을 시멘틱태그를 이용하여 다르게 정의하도록 요구한다.
그 종류는 다음과 같다.
<article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>
④ 로렘 입숨(Lorem Ipsum)
출판이나 디자인 분야에서 폰트나 레이아웃 등의 예시를 보여줄 때 사용하는 자리 표시자이다.
문서 디자인에 의미가 있는 글을 담으면 사람들은 양식을 보지 않고 글의 내용에 집중하는 경향이 있다.
이런 일을 막고 디자인을 보여주는 데 집중하고자 실질적인 의미가 없는 단어를 조합해서 만든 글이다.
영문 방식
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
한글 방식
사람들의 내 내 봅니다. 까닭이요, 벌레는 나는 듯합니다. 아무 우는 사람들의 잠, 다 별이 이름을 까닭입니다. 소녀들의 새겨지는 않은 하늘에는 버리었습니다. 이름과, 하나의 벌써 토끼, 새겨지는 별이 그리고 것은 없이 있습니다. 했던 위에 아름다운 덮어 밤을 그러나 이름과 까닭이요, 봅니다. 이름자를 어머니, 위에 별 나의 것은 계절이 버리었습니다. 나는 써 하나에 그리고 동경과 가을로 멀듯이, 계십니다. 위에 이네들은 가득 까닭입니다. 못 피어나듯이 아름다운 부끄러운 지나가는 잠, 봅니다. 이름과, 가을 별 아름다운 흙으로 별빛이 봅니다.
2. CSS 적용해보기
1) CSS란?
CSS는 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소이다.
HTML이 텍스트나 이미지, 표와 같은 구성 요소를 웹 문서에 넣어 뼈대를 만드는 것이라면
CSS는 색상이나 크기, 이미지 크기나 위치, 배치 방법 등 웹 문서의 디자인 요소를 담당한다.
지금까지 만든 코드를 바탕으로 웹으로 보게되면 아래 사진과 같다.
딱 봐도 꾸밈없이 그저 제목, 본문 등으로 이루어진 것을 확인할 수 있다.
그러면 여기서 CSS를 적용하면 어떻게 될까?
/* style.css */
p {
font-size: 30px;
}
.big-font {
font-size: 40px;
}
.small-font {
font-size: 15px;
}
footer {
text-align: center;
background-color: black;
color: white;
}우선 ‘index.html'에서 <link rel="stylesheet" href="style.css"> 라고 명시했기 때문에
HTML 파일에 CSS 파일을 적용하려면 ‘style.css’라는 이름으로 작성해야 한다.
또한 class=”classname” 속성을 주었기 때문에 .classname으로 작성해주어야 한다.
‘style.css’를 적용시켜 웹으로 보게되면 아래와 같다.
CSS에서 너무 많은 요소가 있어서 다 다루긴 어렵고 여기서 사용한 것만 정리하자면 아래와 같다.
- font-size : 글자 크기를 정하는 속성
default 값은 medium이며, xx-small 부터 xx-large 뭐 엄청나게 다양한 속성이 있다.
영문으로 크기를 적는 것은 웹브라우저에서 정한 기본 글자 크기들이다.
기본적으로 16px이 medium과 비슷하다고 한다.
또한, %, px, em, rem 등으로 글자 크기를 정하기도 한다.
px의 경우 pixel 값인데 고정적인 값을 매기며, 모니터가 바뀌지 않는 한 절대적이다.
em의 경우는 가변적인 단위이며, em은 상위 요소의 폰트 사이즈를 상속받는다.
여기서 font-size가 16px이라면 0.5em = 8px인 셈이다.
rem의 r은 root를 뜻하는데 최상위 요소의 폰트 사이즈를 상속받는다.
%도 em이랑 비슷하다.
너무 많아서 사실 이쁘게만 된다면 사용하고 싶은 것 자유롭게 사용해도 된다.
- text-align : 텍스트의 정렬 방향을 의미
left, right, center, justify가 있으며, justify는 양쪽 정렬이다. - color : 색을 정하는 것
- background-color : 배경의 색을 정하는 것
#000000, #FFFFFF 등 RGB값을 16진수로 0~255 범위로 작성할 수 있다.
Notion Link: https://solar-textbook-084.notion.site/HTML-CSS-2-HTML-CSS-2f41f1a5b8974a9ea891c8f5c29fb168
