1.CSS 적용

1. Inline

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

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

Inline 스타일 방식이라고 부릅니다.

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

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

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

 

2. Internal

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

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

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

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

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

하지만 이것도 한계가 있습니다.

많은 페이지가 있는 경우에는 모든 페이지에 저마다의 규칙을 선언해줘야 합니다.

페이지가 많고 스타일 규칙 내용이 많아지면 결코 쉬운 일은 아닙니다.

 

3. External

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

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

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

div {color: red;}

div {color: red;}

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

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

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

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

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

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

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

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

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

 

4. Import

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

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

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

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

이에 본 강의에서는 다루지 않습니다. 궁금하신 분들은 따로 찾아보시길 바랍니다.

2.그룹화

* { color: yellow; }

* { color: yellow; }

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

 

 

3.선택자

 

-CLASS

<dl>
    <dt class="html">HTML</dt>
    <dd><span class="html">HTML</span>은 문서의 구조를 나타냅니다.</dd>
    <dt class="css">CSS</dt>
    <dd><span class="css">CSS</span>는 문서의 표현을 나타냅니다.</dd>
</dl>


//CSS

.html { color: purple; }
.css { text-decoration: underline; }

다중선택자
.foo { font-size: 30px; }
.bar { color: blue; }

<p class="foo bar"> ... </p>

 

-ID

<p id="bar"> ... </p>

#bar { background-color: yellow; }

 

class 선택자와의 차이점

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

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

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

 

4.선택자2

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

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

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


//정확한 속성값 지칭
p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }

 

<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>

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번째 요소 */

//
[class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
[class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
[class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
[class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택
//

5.자손, 부모 선택자

//자손 선택자
div span { color: red; }

//자식 선택자
div > h1 { color: red; }

//인접 형제 선택자
div + p { color: red; }

6. 가상클래스(특정한 조건을 만족해야 선택함)

/*
:first-child : 첫 번째 자식 요소 선택
:last-child : 마지막 자식 요소 선택
*/

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>

li:first-child { color: red; }
li:last-child { color: blue; }



/*
:link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
:visited : 이미 방문한 하이퍼링크를 의미
*/

a:link { color: blue; }
a:visited { color: gray; }

/*
:focus: 현재 입력 초점을 가진 요소에 적용
:hover: 마우스 포인터가 있는 요소에 적용
:active: 사용자 입력으로 활성화된 요소에 적용
*/

a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }

7. 구체성

important

important 키워드는 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖습니다.

important 키워드는 속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 씁니다.

p#page { color: red !important; }

8.상속

 

상속된 CSS는 구체성을 가지지 못하기 때문에 구체성을 가진 전체 선택자의 스타일이 적용이된다

 

* { color: red; }
h1#page { color: gray; }

<h1 id="page">Hello, <em>CSS</em></h1>

//이러면 em에는 gray가 들어감

박스 모델 관련 속성들은 상속되지 않는다. ex)margin, padding,background,border...

저작자표시 비영리 변경금지

'일상 > HTML5, CSS3' 카테고리의 다른 글

Boostcourse[웹UI] 6.폰트, 텍스트 (폰트part)  (0) 2021.01.13
Boostcourse[웹UI] 5.단위, 배경, 박스모델  (0) 2021.01.13
Boostcourse[웹UI] 3.콘텐츠모델, 시멘틱마크업, 블록 & 인라인  (0) 2021.01.12
BoostCourse[웹UI] 2. HTML태그  (0) 2021.01.12
2.Styling Page Sections  (0) 2017.10.01

+ Recent posts

티스토리툴바