CSS HTML 태그선택자, 전체전택자,아이디선택자,클래스선택자
HTML을 하다가 CSS를 처음 사용할때 혼동스럽다.
CSS를 왜 하는지 Cascading Style Sheet 이 무슨 뜻인지 와닿지가 않기 때문이다.
그건 IT용어 대부분이 생긴지 얼마 안되는 것들이라 사람들에게 익숙하지 않은 것도 한몫한다.
IT는 용어의 뜻만 이해해도 무엇이 목적인지 알 수 있도록 되어있다. 그렇지만 기술용어는 일단 공부를 해야 알 수 있다. 기술자들이 지은 용어들은 그렇게 인문학 적이지는 않다.
우선 Cascading 은 계단식의, 떨어지는 폭포라는 의미가 있다. style sheet은 말 그대로 스타일이 담겨있는 문서,기록이다. 이어 붙이면 계단식으로 구성한 스타일을 나타내는 문서이다. 계단식이라는 것은 상위요소와 하위요소가 존재한다는 뜻이다. 클래스라는 것이 나오는데 프로그래밍 언어에는 클래스의 계층도가 형성되어 있다. 아마 프로그래밍을 하지 않으면 처음에 클래스의 계층까지 이해하는 것은 쉽지 않다.
따라서 처음에는 스타일이라는 것에 초점을 맞추는 것이 좋다. MDN의 demistified CSS영상도 참고가 된다. 최대한 쉽게 설명해준다.
CSS는 LOOK AND FEEL과 메이크업(화장) 과 같다. MDN 링크
CSS 개념은 어렵지만 시작은 간단하다. CSS Selector 선택자를 사용해서 스타일을 꾸며주기만 하면 된다. 무엇을 선택하느냐? HTML의 태그를 선택한다.
<h1> 태그와 <p> 태그를 선택해본다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 자습하기</title>
<style>
h1{
color: blue;
background-color: yellowgreen;
}
p{
color: blueviolet;
}
</style>
</head>
<body>
<h1>제목과 주제 Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<h2>본문 내용</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dolores expedita
quisquam a temporibus nulla tempora eaque reiciendis, sapiente nostrum,
accusantium sit exercitationem deserunt dolorem autem cumque laboriosam harum! Impedit.</p>
<p>... </p>
<p>... </p>
</body>
</html>약간 길지만 처음엔 스타일 시트를 어디에 넣어야 하는지 확인할 필요가 있다.
html 파일안에 넣으려면 <head></head>에 넣으면 된다. 나중에는 css 태그를 별도의 파일로 분리할 것 이다. 코드가 길어지면 분리하는게 가독성이나 관리면에서 유리하다.
h1 태그에 색상과 배경색을 입혔다. p 태그에는 글자 색깔만 보라색으로 바꾸었다.
이것이 선택자다.
원래대로라면 html 개별 태그에서 속성을 지정해 줄 수 있다. 그런데 CSS 선택자를 적용함으로써 이 파일에서 사용되는 모든 h1과 p태그에 대하여 스타일 시트가 적용된다. html 은 매우 깔끔하게 보일 것이며 만일 변경사항을 적용하려면 style 태그로 가서 한번만 수정하면 모든 내용에 적용이 된다. 아주 편리하다.
이것을 읽을 때는 'h1 태그의 color 태그에 blue 키워드를 적용한다' 라고 읽는다.
h1을 선택할 수 있으면 같은 계열인 h2, h3 등 같은 계열에게도 적용이 가능하다. 콤마를 사용하여 여러개의 태그도 선택이 가능하다.
h2{
color: blue;
background-color: yellowgreen;
}
h2,h3{
color: blue;
background-color: yellowgreen;
}h1 선택자는 태그선택자의 하나이고 선택자에는 종류가 여러개 있다.
전체선택자
<style>
*{
color: royalblue;
}
</style>* 와일드카드 혹은 아포스트로피라 불리는 기호는 CSS에서 전체를 가리키는 용도가 있다. 모든 태그에 결과를 적용한다. h1이나 a 앵커 태그나 p태그나 적용한다. 예제는 모든 태그의 글자 색상을 바꾼다.
아이디 선택자
아이디 선택자와 클래스 선택자는 스타일시트에서 가장 많이 사용한다. 레이아웃을 나누면 하나의 페이지는 여러개로 나눠진다. 각각의 부분의 속성이 다른 것이 사람에게 더 직관적일 것 이다. 헤더는 로고나 검색창 타이틀 등이 들어가고 네비게이션(nav)에는 메뉴 이동 명령어가 담겨 있을 것이다.
페이지를 세부적으로 구성하다 보면 시맨틱 태그만으로 부족할 때가 있다. 전체 구조는 시맨틱웹으로 작성하고 세부적인 구성에 대하여 아이디와 클래스를 사용하면 좋을 것이다.
* 중요하니까 시맨틱 HTML의 장점은 아래 문서를 참고한다.
Use Semantic HTML5 tags to Improve Webpage SEO | Pluralsight | Pluralsight
The figure tag is used to mark up photos, code blocks, diagrams, charts, illustrations, and other graphic content. Generally, this tag encloses content that can be moved away into an appendix. Only images related to the content of a page should be within t
www.pluralsight.com
하나의 문서에 하나의 아이디만 허용하는 규칙이 있다. (단 스타일시트에선 문제가 없으나 JS작동에 문제가 생기니 결국 사용하면 안된다.)
# 기호를 사용한다.
<style>
#first{
color: royalblue;
background-color: antiquewhite;
}
#second{
color: green;
background-color: darkorange;
}
</style><body>
<div id = "first">
<h1>제목과 주제 Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
<div id="second">
<h2>본문 내용</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dolores expedita
quisquam a temporibus nulla tempora eaque reiciendis, sapiente nostrum,
accusantium sit exercitationem deserunt dolorem autem cumque laboriosam harum! Impedit.</p>
<p>... </p>
</div>
<a href="https://www.naver.com">앵커태그</a>
</body>
클래스 선택자
클래스 선택자는 아이디 선택자 처럼 중복에 제한이 없다. 도트연산자 . 을 사용한다. 하나의 태그에 두개의 클래스를 사용할 수도 있다.
<head>
<style>
.header{
color: royalblue;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div>
<h1 class="header">제목과 주제 Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
<div>
<h2 class="header">본문 내용</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dolores expedita
quisquam a temporibus nulla tempora eaque reiciendis, sapiente nostrum,
accusantium sit exercitationem deserunt dolorem autem cumque laboriosam harum! Impedit.</p>
<p>... </p>
</div>
<a href="https://www.naver.com">앵커태그</a>
</body>
다른 태그에서 같은 클래스 사용하면 . 도트연산자로 정확하게 지정할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 자습하기</title>
<style>
li.item1{
color: royalblue;
background-color: antiquewhite;
}
li.item3{
color: yellow;
background-color:chocolate;
}
</style>
</head>
<body>
<h3 class = "item3">HEAD 3 </h3>
<ul>
<li class="item1">ITEM1</li>
<li class="item2">ITEM1</li>
<li class="item3">ITEM1</li>
<li class="item4">ITEM1</li>
<li class="item5">ITEM1</li>
</ul>
<p class = "item1">Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Placeat cum iste voluptatibus harum nobis, quia eos inventore rem tempore
facilis labore amet aspernatur obcaecati, necessitatibus delectus quasi illo
voluptatem voluptas.</p>
</body>
</html>li 태그의 item1 과 item3 이다. li를 빼면 item 클래스의 태그에 모두 적용된다.
MDN 참고서 Selector (CSS)
Selector (CSS)
A CSS selector is the part of a CSS rule that describes what elements in a document the rule will match. The matching elements will have the rule's specified style applied to them.
developer.mozilla.org
