Computer Security

#4 CSS 이해하기 (선택자) 본문

프로그래밍/HTML & CSS

#4 CSS 이해하기 (선택자)

쿠리 Kuri 2022. 5. 23. 18:30

CASCADING STALE SHEETS

-HTML(마크업 언어)을 꾸며주는 언어

-html이 웹페이지의 정보를 표현한다면, CSS는 html을 보기 좋게 디자인 하는 역할

 

h1 {color: yellow; font-size:2em;}
  • 선택자(selector) - "h1"
  • 속성(property) - "color"
  • 값(value) - "yellow"
  • 선언(declaration) - "color: yellow", "font-size: 2em"
  • 선언부(declaration block) - "{ color: yellow; font-size:2em; }"
  • 규칙(rule set) - "h1 { color: yellow; font-size:2em; }"

 

선택자와 선언부 사이, 선언과 선언 사이는 앞뒤로 개행을 해도 상관이 없다.

하지만 속성 이름과 속성값 사이에는 개행을 하면 안된다.

 

ex)

올바른 개행

h1
{color:yellow;font-size:2em;}

h1{
 color:yellow;
 font-size:2em;

}

 

잘못된 개행

h1{
   color:
   yellow;

}

 

CSS의 속성(Property)   ,   HTML의 속성(Attribute) 로 다르다.

 

CSS 주석은   /*  주석 내용 */ 으로 선언한다.

 

 

1. Inline

-Inline은 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법이다.

-해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않게 되고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 됨.

-Inline 스타일 방식이라고 부른다.

<div style="color:red;"> 내용 </div>

Inline 스타일 방식은 코드의 재활용이 되지 않기 때문에 자주 사용하지 않는다.

 

2. Internal

-Internal은 문서에 <style>을 활용한 방법이다.

-<style>은 <head>내부에 들어가며 <style>안에 스타일 규칙이 들어간다.

<style> div {color: red;} </style>

-위의 코드로 모든 <div>에 같은 스타일을 줄 수 있다.

-하지만 이것도 한계가 있는데 많은 페이지가 있는 경우에는 모든 페이지에 저마다의 규칙을 선언해줘야 한다.

-페이지가 많고 스타일 규칙 내용이 많아지면 힘들다.

 

3. External

-External은 외부 스타일 시트 파일을 이용한 방법이다.

-외부 스타일 시트는 스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식이다.

-외부 파일은 확장자가 .css가 되며 css 파일이라고 부른다.

div {color: red;}

-우선 CSS 파일을 하나 만들고 스타일 규칙을 선언한다.

-그다음 <link>을 이용해서 CSS 파일을 연결하면 된다.

<link rel="stylesheet" href="css/style.css">

-<head> 내부에 <link>를 선언한 후 href 속성을 이용해 CSS 파일의 경로를 적는다.

-rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로, CSS 파일은 'stylesheet' 라고 적어야 한다.

-외부 스타일 시트 방식으로 스타일을 선언하면 많은 페이지가 있더라도 이 한 줄로 모든 페이지에 같은 스타일을 적용할 수 있다.

-또한, 수정이 필요할 때도 CSS 파일을 수정하면 연결된 모든 페이지에 반영할 수 있다.

-외부 스타일 시트 방식은 파일 관리가 편하면서도 용량이 작기 때문에 주로 사용되는 방법이다.

 

4. Import

Import는 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식이다.

@import url("css/style.css");

-<style> 내부 상단이나 외부 스타일 시트 파일 상단에 선언하는데 성능상 좋지 않아서 거의 쓰이지 않다.

요소 선택자

-선택자 중에 가장 기본이 되는 선택자이며, 태그 선택자라고도 한다.

h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }
h4 { color: yellow; }
h5 { color: yellow; }
h6 { color: yellow; }

-요소 선택자는 위 코드처럼 선택자 부분에 태그 이름이 들어간다.

-문서 내에 선택자에 해당하는 모든 요소에 스타일 규칙이 적용된다.

 

그룹화

-선택자는 쉼표를 이용해서 그룹화를 할 수 있다.

h1, h2, h3, h4, h5, h6 { color: yellow; }

-위 코드는 요소 선택자의 예제 코드와 같은 코드다.

-전체 선택자 라고 불리는 간단한 선택자도 있다.

* { color: yellow; }

-*(별표, asterisk) 기호로 문서 내에 모든 요소를 선택할 수 있다.

-이렇게 선언하면, 한 번의 선언만으로 문서 내에 모든 요소에 스타일 규칙이 적용된다.

-전체 선택자는 매우 편리하지만, 성능에 좋지 않으므로 될 수 있으면 사용을 지양한다.

-선택자뿐만 아니라 선언들도 그룹화가 가능하다.

 

h1 { color: yellow; font-size: 2em; background-color: gray; }

-마지막으로 선택자와 선언이 동시에 그룹화도 가능하다.

h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; }

class 선택자

-요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법은 class 선택자를 활용하는 것이다.

-class 선택자를 사용하기 위해서는 HTML을 수정해 class 속성을 추가해야 한다.

-class 속성은 글로벌 속성이므로 어느 태그에서도 사용할 수 있다.

-class 속성에 값을 넣게 되면, class 선택자를 이용해서 해당 요소에 스타일 규칙을 적용할 수 있다.

.foo { font-size: 30px; }
<p class="foo"> ... </p>

-위 코드처럼 <p>의 class 속성의 값으로 "foo"라는 값을 넣었다면, CSS에서 그 값("foo")을 선택자로 지정하면 된다.

-클래스 선택자를 쓸 때는, 맨 앞에 .(마침표)를 찍어줘야 한다.

-이렇게 되면 어느 요소든지 class 속성값이 "foo"로 선언된 요소가 있다면 해당 스타일 규칙을 적용받게 된다.

 

 

다중 class

-class 속성은 꼭 하나의 값만 가질 수 있는 것은 아니다.

-공백으로 구분하여 여러 개의 class 값을 넣을 수 있다.

.foo { font-size: 30px; }
.bar { color: blue; }
<p class="foo bar"> ... </p>

-위의 <p>에 class 속성에 "foo" 와 "bar" 2개의 값을 넣었다.

-그리고 foo class 선택자에는 폰트의 크기를 30px로, bar class 선택자에는 글자를 파란색으로 적용하는 스타일 규칙이 선언되어있다.

-그렇게 되면 이 <p>에는 2개의 규칙이 모두 적용이 된다.

 

id 선택자

-id 선택자는 class 선택자와 비슷하다.

-선택자를 쓸 때는, .(마침표) 기호 대신 #(해시) 기호를 써주시면 되고,

-요소에는 class 속성 대신 id 속성만 써주면 된다.

#bar { background-color: yellow; }
<p id="bar"> ... </p>

이 <p>는 id 선택자의 스타일 규칙이 적용된다.

 

class 선택자와의 차이점

  1. .기호가 아닌 #기호 사용
  2. 태그의 class 속성이 아닌 id 속성을 참조
  3. 문서 내에 유일한 요소에 사용
  4. 구체성 

-가장 큰 차이점은 class와 달리 id는 문서 내에서 유일해야 한다는 점이다.

-클래스 선택자는 여러 요소에 같은 클래스를 넣고 같은 규칙을 적용 할 수 있었다.

-그리고 그것이 클래스 선택자의 장점이기도 하다.

-하지만 id 속성값은 문서 내에 유일하게 사용이 되어야 한다.

-결국, id 선택자로 규칙을 적용할 수 있는 요소는 단 하나뿐이다.

-그리고 마지막으로 구체성의 값이 다르다.

 

 

선택자의 조합

/* 요소와 class의 조합 */
p.bar { ... }

/* 다중 class */
.foo.bar { ... }

/* id와 class의 조합 */
#foo.bar { ... }

1. 요소와 클래스를 조합한 경우

-이 경우에는 <p>이면서 class 속성에 bar가 있어야 적용됩니다.

2.다중 클래스의 경우

-이 경우에는 class 속성에 foo와 bar가 모두 있어야 적용됩니다.

3.id와 class를 조합한 경우입니다.

-이 경우에는 id가 foo이며 class가 bar인 요소에 적용됩니다.

속성 선택자

단순 속성으로 선택

p[class] { color: silver; }
p[class][id] { text-decoration: underline; }
<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>

-속성 선택자는 대괄호를 이용해서 선언하며 대괄호 안에 속성 이름이 들어간다.

-요소에 해당 이름의 속성이 있다면 해당 사항이 적용된다.

-위 CSS 코드는 요소 선택자와의 조합으로 이루어진 코드다.

첫 번째는 <p>이면서 class 속성이 있는 요소이면 color: silver 규칙이 적용된다.

두 번째는 <p>이면서 class 속성과 id 속성이 함께 있어야 text-decoration: underline 규칙이 적용된다.

 

 

바로 위  HTML 코드에는 3개의 <p>가 있는데 이 3개의 <p>에는 각자 어떤 스타일이 적용될까?

-p[class] 선택자의 규칙은 class 속성만 존재하면 적용이 되기 때문에 3가지 요소 모두에 적용된다.

-p[class][id] 선택자의 규칙은 class 속성과 id 속성 모두 있는 요소만 해당하기 때문에 마지막 요소에만 적용된다.

-두 규칙 모두 속성의 값은 상관하지 않는다.

 

정확한 속성값으로 선택

-정확한 속성값으로 선택은 제목 그대로 속성의 값으로 요소를 선택한다.

-선택자는 대괄호 안에 속성 이름과 속성값을 다 적으면 된다.

p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }

-p[class="foo"]는 <p>이면서 class 속성의 값이 foo이면 적용되고, p[id="title"]는 <p> 이면서 id 속성의 값이 title이면 적용된다.

 

부분 속성값으로 선택

부분 속성값으로 선택은 속성 이름과 속성값 사이에 사용되는 기호에 따라 동작이 조금 다르다. 

  • [class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
  • [class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
  • [class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
  • [class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택
<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>
p[class~="color"] { font-style: italic; }
p[class^="color"] { font-style: italic; }
p[class$="color"] { font-style: italic; }
p[class*="color"] { font-style: italic; }

위의 코드에서는 모두 class 속성값으로 "color"를 선택한다.

요소 순서대로 기호에 따라 규칙이 적용되는 결과는 다음과 같다.

p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */

 

부모와 자식

 

<html>
<body>
    <div>
        <h1><span>HTML</span>: Hyper Text Markup Language</h1>
    </div>
    <p>HTML과 CSS와 JAVASCRIPT를 이용해서 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>

-부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나뿐이다.

-자식 요소는 부모 요소와 반대라고 생각하면 되며 자식 요소는 여러 개일 수도 있다.

  • <body>의 부모 요소: <html> ↔ <html>의 자식 요소: <body>
  • <div>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>
  • <h1>의 부모 요소: <div> ↔ <div>의 자식 요소: <h1>
  • <span>의 부모 요소: <h1> ↔ <h1>의 자식 요소: <span> 
  • <p>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>

 

조상과 자손

-조상과 자손의 관계는 부모와 자식의 관계와 비슷하다.

-부모와 자식의 관계를 포함한 확장된 관계라고 생각하면 된다.

-조상 요소는 그 요소를 포함하는 모든 요소로, 부모 요소를 포함하여 여러 개일 수도 있다.

-자손 요소는 그 반대로, 그 요소가 포함하고 있는 모든 요소가 자손 요소다.

  • <body>의 조상 요소: <html> ↔ <html>의 자손 요소: <body>, <div>, <h1>, <span>, <p>
  • <div>의 조상 요소: <html>, <body> ↔ <body>의 자손 요소: <div>, <h1>, <span>, <p>
  • <h1>의 조상 요소: <html>, <body>, <div> ↔ <div>의 자손 요소: <h1>, <span>
  • <span>의 조상 요소: <html>, <body>, <div>, <h1> ↔ <h1>의 자손 요소: <span>
  • <p>의 조상 요소: <html>, <body> ↔ <body>의 자손 요소: <div>, <h1>, <span>, <p>

 

-보통 문서의 요소들은 모두 이처럼 어느 요소의 자식(자손) 요소이자 부모(조상) 요소가 되는 경우가 많다.

 

형제

-부모와 자식, 조상과 자손 말고도 형제 관계도 있다.

같은 부모를 가지고 있는 요소들은 서로 형제 관계에 있다.

위 코드에서는 <div>, <p>가 형제 요소다.

형제 관계 중에는 인접한 관계도 있다.

형제 관계에 있는 요소 중 바로 뒤에 이어 나오는 요소를 인접해 있다고 한다.

여기서 <p>가 <div>에 인접한 형제 요소가 된다.

문서의 구조는 흔히 가계도나 조직도의 관계와 비슷하다고 생각하면 이해하기가 쉽다.

 

문서 구조 관련 선택자

문서 구조를 이용한 선택자는 3가지 있다.

자손 선택자와 자식 선택자 그리고 인접 선택자다.

문서 구조를 잘 이해하셨다면 쉽게 예측할 수 있다.

 

자손 선택자

div span { color: red; }

자손 선택자는 선택자 사이에 아무 기호없이 그냥 공백으로 구분을 한다. 

이 선택자는 <div>의 자손 요소인 <span>를 선택하는 선택자다.

 

자식 선택자

div > h1 { color: red; }

자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣는다.

꺽쇠 기호와 선택자 기호 사이에는 공백은 있거나 없어도 상관이 없다.

이 선택자는 <div>의 자식 요소인 <h1>를 선택하는 선택자다.

 

인접 형제 선택자

div + p { color: red; }

인접 형제 선택자는 선택자 사이에 + 기호를 넣는다.

자식 선택자와 마찬가지로 공백은 있거나 없어도 상관이 없다.

인접 형제 선택자는 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자다.

/* body 요소의 자식인 div 요소의 자손인 table 요소 바로 뒤에 인접한 ul 요소 선택! */

body > div table + ul { ... }

위 코드처럼 문서 구조 관련 선택자는 더 복잡하게 사용할 수 있다.

 

 

 

 

'프로그래밍 > HTML & CSS' 카테고리의 다른 글

#6 단위, 배경, 박스모델  (0) 2022.05.31
#5 CSS 이해하기 (가상선택자,구체성,상속,캐스케이딩)  (0) 2022.05.24
#3 HTML 폼,시멘틱마크업,블록&인라인  (0) 2022.05.18
#2 HTML 태그  (0) 2022.05.17
#1. 태그,속성,태그중첩,빈태그,공백,주석,문서의 기본구조  (0) 2022.05.09
'프로그래밍/HTML & CSS' Related Articles more
Comments