비바라기's
[HTML, CSS] 메타 태그란? & 선택자란? 본문
* 이 글은 생활코딩, TCP School, 스파르타코딩클럽의 웹개발 종합반 강의를 기반으로 개인 공부를 덧붙인 글입니다.
* 글에 오류가 있다면 부디 댓글을 달아주세요. 감사합니다 :)
목차
1. html 디폴트 양식 나눠 보기
2.메타 태그란?
3.CSS란?
4.선택자(Selector)를 구분해서 써야하는 이유
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
이것은 개발환경 중 하나인 파이참(Pycharm)을 사용해 HTML 파일을 생성하면 보여주는 디폴트 코드입니다.
기본적으로 HTML 파일은 head와 body로 나뉘어져 있습니다(head와 body는 한 html 코드에서 딱 하나씩만 존재할 수 있습니다).
head란 <head> 태그와 </head> 태그 사이에 위치한 코드를 가리킵니다. head에서 처리하는 정보는 웹 페이지에서 직접적으로 보이지는 않지만, 웹 페이지가 만들어지기 위해 필요한 여러 기능을 포함하고 있습니다. 반면 body는 웹 페이지에서 직접 눈에 보이는 사항들을 다룹니다.
다시 위의 코드로 돌아가서, head 부분과 body 부분을 따로 떼어서 보겠습니다.
head는 다음과 같이 구성되어 있네요.
<head>
<meta charset="UTF-8">
<title>Title</title>
</head><meta> 로 시작되는 코드가 한 줄, <title>로 시작되는 코드가 한 줄 있습니다.
<meta> 태그는 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용합니다.1.
여기서 메타데이터란 자기 자신을 가리키는 정보를 말하는 것으로, 이 웹 페이지에 대한 정보를 다른 웹 브라우저나 검색 엔진에게 소개하기 위한 정보를 가리킵니다.
예를 들어 <meta> 태그는 다음과 같이 사용될 수 있습니다.
<meta charset="UTF-8"> 이라는 코드는 이 웹 페이지의 문자 인코딩 방식을 "UTF-8"로 정하겠다는 선언문입니다. 문자 인코딩(character encoding) 또는 텍스트 인코딩(text encoding) 또는 줄여서 인코딩은 사용자가 입력한 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것을 말합니다2. UTF-8이란 인코딩 형식 중 하나로, 이 선언문이 존재하지 않는다면 웹 페이지에 한글 표시가 깨져보이게 됩니다.
<title>코드는 웹 페이지의 제목을 정하는 역할을 합니다. title을 정하게 되면, 이 title을 키워드로 검색 엔진이 우리의 웹 페이지를 찾을 수 있고, 또 브라우저 위의 바 부분에 title이 노출되게 됩니다. 매우 중요하고, 필수적인 태그라고 할 수 있겠습니다 :).
<body>태그에는 아직 아무것도 쓰여있지 않지만, 어떤 태그를 어떻게 사용하는지에 따라서 웹 페이지의 사용자에게 보이게 될 화면이 정해지게 됩니다. <body> 태그에서 자주 사용하는 내부 태그는 무엇이 있는지는 다음 포스트에서 별도로 살펴보겠습니다.
치트시트가 필요하시다면 다음을 참고하세요 :)
https://makeawebsitehub.com/the-html-5-mega-cheat-sheet/
HTML 5 Cheat Sheet - Including Free PDF Download - Make A Website Hub
Cheat sheets; don't you just love them?
makeawebsitehub.com
한글 자료는 다음을 참조하세요.
https://opentutorials.org/course/1058
HTML 사전 - 생활코딩
본 코스는 HTML의 사용법을 찾아 볼 수 있는 사전 입니다. 본 코스는 리체님의 HTML 5 Tag Dictionary 모듈을 사용하고 있습니다. 좋은 사전을 만들어주신 리체님 감사합니다. ^^
opentutorials.org
1지금까지 HTML 디폴트 파일의 구성을 살펴보았습니다. 이제 글자 크기를 변경하거나, 색을 입히거나, 배경 이미지를 넣는 등, 웹 페이지의 디자인을 담당하는 CSS는 무엇인지 같이 이야기 해보겠습니다.
CSS(Cascading Style Sheet)란, HTML과 같은 마크업 언어(태그를 사용하는, 프로그래밍 언어가 아닌 선언형 언어)의 스타일을 표현하는 언어입니다. CSS의 사용은 HTML 코드에 적용된 각각의 디자인 옵션을 일괄적으로 조정하는데 강점이 있습니다(inheritance, 상속). 이 때 어떤 선택자(Selector)나 스타일 속성(Style attribute)을 사용하는 지에 따라 디자인 효과를 적용하는 데 우선순위가 다르게 정해집니다(Cascading, 종속).
다음은 HTML에 CSS를 적용하여 로그인 페이지를 구현한 것 입니다3.
주의해서 보실 부분은 <head> 태그 안의 <style> 태그와, <body> 태그 내부의 class 표현입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link href="https://fonts.googleapis.com/css2?family=Gaegu&display=swap" rel="stylesheet">
<style>
*{
font-family: 'Gaegu', cursive;
}
.wrap{
margin: auto;
width: 300px;
}
.mytitle{
color: white;
width: 300px;
height: 200px;
border-radius: 10px;
text-align: center;
padding-top: 40px;
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-position:center;
background-size: cover;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>Login Page</h1>
<h5>Put your ID & Password</h5>
</div>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button>Login</button>
</div>
</body>
</html>
head 부분을 보시면, <style>이라는 태그가 있습니다. CSS는 이 <style> 태그 내부에서 작성됩니다. <body> 태그 안에서 각각의 태그마다 스타일 속성(style attribute)을 지정함으로써 디자인 옵션을 추가하는 것도 가능하지만, <body> 밖에 별도의 장소에 디자인 옵션을 몰아넣으면 HTML 문서의 가독성이 훨씬 좋아지게 되고, 디자인 효과의 일괄 조정도 쉽게 가능하게 된다는 장점이 있습니다. HTML 문서가 아닌 별도의 CSS 문서(style sheet)를 여기에 불러올 수도 있는데, 웹 디자이너와 웹 프로그래머가 HTML과 CSS 모두에 통달할 필요 없이, CSS 문서와 HTML 문서를 각각 작성 하여 하나의 웹 페이지를 만드는 방식으로 필요한 언어에 전문화 함으로서 협업을 촉진하는 효과도 있을 수 있습니다.
CSS를 사용하기 위해서는 몇가지 규칙을 지켜야합니다. 첫째, CSS는 <head> 태그 안의 <style> 태그 내부에 존재해야 합니다. 둘째, 웹 페이지 내부의 어떤 구역에 디자인 효과가 적용될 지 지정해야 합니다. CSS는 웹 페이지의 각 구역을 가리키는 이름인 선택자(Selector)를 통해 어떤 구역에 디자인 효과가 적용될 지 파악할 수 있습니다. 셋째, 어떤 디자인 효과가 적용될 지 정해야 합니다. 이것을 디자인의 속성(Attribute)을 정하여 선언(Declaration)한다고 합니다. 마치 팥 심은 데 콩 안나고 팥 나는 것 처럼, CSS는 속성의 선언과 효과가 매우 정형적입니다.
이제 선택자란 무엇인지 조금 더 자세히 살펴보겠습니다.아래 코드는 위의 로그인 페이지에서 일부분만을 잘라온 것입니다.
<style>
*{
font-family: 'Gaegu', cursive;
}
.wrap{
margin: auto;
width: 300px;
}
...
</style>
...
<body>
<div class="wrap">
...
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button>Login</button>
</div>
</body><div class="wrap">의 의미는 1. div를 통해 구역을 나누고, 2. 이 div 태그에 wrap이라는 임의의 이름표를 class 라는 선택자를 통해 붙이겠다는 뜻입니다(wrap이라는 이름은 제가 마음대로 정한 것으로, 어떤 이름이든 상관 없습니다 ^^). <body> 내부에서 지정된 이름표는, <style> 내부의 동일한 이름의 요소와 연결됩니다.
.wrap {...} 이라는 표현말이죠! class 선택자를 사용했기 때문에, 다른 선택자와의 구분을 위하여 온점(.)을 이름표 앞에 붙이고 있다는 것을 보실 수 있습니다. 바로 아래 나오겠지만, wrap 이름표가 Id 형식의 선택자로 선언되었다면, 온점 대신 #이 붙어 #wrap {...}과 같이 표현되었을 것입니다. 중괄호({...})는 모든 경우에 적용되는 공통적인 표현법입니다.
선택자의 형식은 한 가지만 존재하는 것이 아닙니다. class는 여러 선택자의 형식 중 하나로, 디자인 의도에 맞게 선택자를 다르게 선택해서 적용하는 것이 좋습니다. 선택자 형식은 1. 전체 선택자(Universal Selector), 2. 태그 선택자(Type Selector), 3. 클래스 선택자(Class Selector), 4. 아이디 선택자(Id Selector), 5. 하위/자식 선택자(Descendant/Child Combinator), 6. 가상클래스 선택자(psuedo classes) 등이 존재합니다. Id 선택자와 class 선택자 외의 다른 선택자의 사용법은 아래 페이지를 참조해주시면 더 자세하게 알 수 있을 것입니다 :)
참조: https://www.nextree.co.kr/p8468/
CSS: 선택자(Selector) 이해
웹 표준은 이제 더 이상 무시할 수 없는 키워드입니다. World Wide Web(WWW)의 의미대로 가능한 많은 사람이 웹을 이용하기 위해서는, 모든 브라우저에서 ‘똑같이 보이는 것’이 아니라 ‘각 브라우
www.nextree.co.kr
우리가 선택자의 형식을 구분하는 이유는, 선택자 별로 우선순위가 다르게 적용되기 때문입니다. 이것을 우리는 선택자 사이에 종속 관계가 있다(Cascading)고 표현합니다.
선택자 형식 별 우선 순위는 !important > style attribute > id > class > tag > 전역선택자(*) 순으로 높습니다.
여기서 !importance는 다음과 같이 사용할 수 있는데요.
#yourIdSelector{color: blue !importance}어떤 선택자를 사용했던지를 막론하고 가장 높은 우선순위를 부여하는 명령어입니다.
style attribute는 <body> 내부의 개별 태그에 선언하는 것으로서, 모든 선택자보다 우선하여 적용됩니다(!importance의 우선도가 더 높습니다). style ="..." 과 같이 표현합니다. 다음과 같이 적용할 수 있습니다.
<h1 style="color: blue"> Hello world! </h1>
이제 실제 예시를 통해서 종합적으로 선택자 형식간 종속관계를 살펴보겠습니다4!
<!DOCTYPE html>
<html>
<head>
<style>
li{color:red;}
#idsel{color:blue;}
#idsel{color:yellow;}
.classsel{color:green;}
</style>
</head>
<body>
<ul>
<li>html</li>
<li id="idsel" class="classsel">css</li>
<li>javascript</li>
</ul>
<ol>
<li>style attribute</li>
<li>id selector</li>
<li>class selector</li>
<li>tag selector</li>
</ol>
</body>
</html>다음과 같은 코드를 웹 페이지에 띄웠을 때, <ul> 태그 내부의 <li>로 표현된 "css"라는 단어는 무슨 색이 될까요?
정답은 yellow입니다(긁어보세용 ^^;).
이 코드에서 사용된 선택자는 순서대로 태그 선택자(li), 아이디 선택자(#idsel), 클래스 선택자(.classsel) 총 세 종류입니다.
아이디 선택자 > 클래스 선택자 > 태그 선택자 순으로 우선순위가 적용된다고 했으니, 아이디 선택자가 우선 적용될 것입니다. <style> 내부의 아이디 선택자가 두개라면, 아랫줄에 있는 아이디 선택자가 나중에 선언되므로, yellow를 선언한 아이디 선택자가 최종 적용될 것입니다. 만약 아이디 선택자를 지우면 클래스 선택자(green)가, 클래스 선택자도 지우면 태그 선택자(red)가 적용될 것입니다. 태그 선택자도 없다면 디폴트인 검은색이 됩니다.
'TIL > 웹개발 종합반' 카테고리의 다른 글
| [JS] 스코프와 호이스팅 (0) | 2022.08.17 |
|---|---|
| [CSS] 구글 폰트 / 부트스트랩 5.0 시작 템플릿(카피&페이스트) (0) | 2022.08.17 |
| 자주 쓰이는 HTML & CSS 태그 사전 링크 (0) | 2022.08.16 |
| HTML, CSS란 ? (0) | 2022.08.14 |
