css- coding factory

HTML에 CSS를 적용시키는 방법


  • Inline Style Sheet

  • Internal Style Sheet

  • Linking Style Sheet

Inline Style Sheet

HTML 태그의 style 속성에 CSS 코드를 넣어 적용시키는 방법.
해당 태그가 선택자가 되고, css 코드에는 속성(property)과 값(value)만 들어간다.
단점 : 꾸미는 데 한계가 있으며, 재사용이 불가하다.

ex)
<p style="color:blue">  aa  </p>

Internal Style Sheet


HTML 문서 안에 스타일 코드를 넣는 방법. <style>과 </style> 안에 css 코드를 넣는다.

<style> 태그는 보통 <head>와 </head> 사이에 넣으나 HTML 문서 어디에 넣어도 가능하다.

장점 : HTML 문서 안의 여러 요소를 한번에 꾸밀 수 있다.
단점 : 또 다른 HTML 문서에는 적용할 수 없다.

ex)
<style>
h1{
color : blue;
}
</style>

Linking Style Sheet


별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법.
장점 : 여러 HTML 문서에 사용 가능.

ex) style.css
h1 {
    color:red;
}
ex) HTML
<link rel = "stylesheet" href="style.css">

문법


selector { property : value }
ex) h1 { color: red}
  • 선택자 (selector) : 무엇을 꾸밀지 정한다. h1 요소를 꾸미겠다는 뜻이다.

  • 속성 (property) : 어떤 모양을 꾸밀지 정한다. color는 색을 꾸미겠다는 뜻이다.

  • 값 (value) : 어떻게 꾸밀지 정한다. 빨간색으로 만들겠다는 뜻이다.

  • 선언 : property와 value 합친 것

여러 개의 선언


세미콜론(;)으로 구분하여 선언을 여러 개 넣을 수 있다. 마지막 선언에는 세미콜론을 붙여도 되고 붙이지 않아도 된다.

ex)
h1{
    color : red;
    font-size : 20px
}

값에 공백이 있는 경우


값에 공백이 있다면 작은 따옴표 또는 큰 따옴표로 감싼다.

p {
    font-family : 'Times new roman';

공백

여러 개의 연속한 공백이나 줄바꿈은 하나의 공백으로 인식한다.

selector {
    property : value;  
}
/* 같다 */
selector {property : value; }

주석


주석은 /*과 */ 사이에 쓴다. 사이에 줄바꿈이 있어도 주석으로 인식.

/*  이렇게 꾸미기도 한다.
 *comment
 *comment 
*/

전체 선택자 (universal selector)


전체 선택자는 모든 HTML 요소를 선택한다. 별표(*)로 나타냄. 다른 선택자와 같이 사용할 때는 생략 가능.

*{     /* 모든 요소의 색을 파란색으로 만듦.*/
    color : blue;
}
/* 다른 선택자와 같이 사용하는 경우 */
*.abc{ color = blue; }
.abc{ color = blue; }

타입 선택자 (type selector)


h1, p, div, span 등 HTML 요소를 선택하는 선택자

ex) /*HTML 문서 안에 있는 모든 p 요소 내용을 파란색으로 만듦*/
p {
    color: blue;
}

속성 선택자 (attribute selector)


특정 속성을 갖고 있거나 특정 속성이 특정 값 등을 갖고 있는 요소를 선택. 7가지 형태.

  • [attribute]
    attribute 속성을 가진 요소를 선택.
    ex) h1[title]   /*title 속성을 가진 h1 요소를 선택*/
  • [attribute="value"]
    attribute 속성의 값이 value인 요소를 선택. 속성값이 정확히 일치해야 한다.
    ex) h1[title="abc"]   /*title 속성의 값이 abc인 h1 요소를 선택*/
  • [attribute~="value"]
    attribute 속성의 값이 value를 포함한 요소를 선택. 포함 여부는 단어 기준으로 판단한다.
    ex) h1[title~="abc"]   /*title 속성의 값이 abc를 포함한 h1 요소를 선택.
                            *"abc xyz"는 선택되지만 "abcxyz"는 선택되지 않는다.*/
  • [attribute|="value"]
    attribute 속성의 값이 value이거나 value-로 시작하는 요소를 선택.
    ex) h1[title|="abc"]   /*title 속성의 값이 abc이거나 abc로 시작하는 h1 요소를 선택.
                            *"abc-xyz"는 선택되지만 "abc xyz"는 선택되지 않는다*/
  • [attribute^="value"]
    attribute 속성의 값이 value로 시작하는 요소를 선택. 단어 기준이 아니라 문자열 기준.
    ex) h1[title^="abc"]   /*title 속성의 값이 abc로 시작하는 h1 요소를 선택.
                            *"abc xyz", "abc-xyz" 모두 선택된다.*/
  • [attribute$="value"]
    attribute 속성의 값이 value로 끝나는 요소를 선택. 단어 기준이 아니라 문자열 기준.
    ex) h1[title$="abc"]   /*title 속성의 값이 abc로 끝나는 h1 요소를 선택.
                            *"xyz abc", "xyz-abc" 모두 선택된다.*/
  • [attribute*="value"]
    attribute 속성의 값이 value를 포함한 요소를 선택. 포함 여부는 문자열 기준으로 판단.
    ex) h1[title*="abc"]   /*title 속성의 값이 abc를 포함한 h1 요소를 선택.
                    *"abc xyz","abcxyz","abc-xyz" 모두 선택된다.*/

아이디 선택자 (ID Selector)


아이디 선택자는 특정 값을 id 속성의 값으로 갖는 요소를 선택. 속성값 앞에 #을 붙여 아이디임을 나타냄.

ex) /* id 속성값으로 abc를 갖는 요소를 빨간색으로 만든다. */
#abc {
        color = red;  
}

클래스 선택자 (class selector)

클래스 선택자는 특정 값을 class 속성의 값으로 갖는 요소를 선택. 속성값 앞에 .을 붙여 클래스임을 나타냄.

ex)  /* class 속성값으로 abc를 갖는 요소를 선택 */
.abc
  • 클래스 선택자 앞에 아무 것도 없을 때 : 그 값을 갖는 모든 요소를 선택. .abc = *.abc
  • 클래스 선택자 앞에 무언가 있을 때 : 모두 만족하는 요소를 선택.
ex)  /* class 값으로 abc를 갖는 p 요소를 선택 */
p.abc
  • 클래스 속성의 값이 여러 개일 때 : CSS에 정의된 순서대로 적용된다.
ex) /* 둘 다 빨간색. xyz를 나중에 정의했기 때문*/
.abc {color:blue;}
.xyz {color:red;}

하위 선택자 (descendant selector)


특정 요소의 하위에 있는 요소 선택. 사이에 요소가 더 있어도 선택 가능하다.

ex) /* div 요소의 하위에 있는 blockquote 요소 선택*/
div blockquote

자식 선택자 (child selector)


특정 요소의 자식 요소를 선택. 한단계 아래에 있는 요소만 선택한다.

ex) /*div 요소의 자식 요소 중 blockquote 선택.*/
div > blockquote

형제 선택자 (sibling selector)


어떤 요소의 형제 요소를 선택.

ex) /* h1 요소의 형제 요소 중 p 요소 선택*/
h1 ~ p

인접 형제 선택자 (adjacent sibling selector)


어떤 요소의 형제 요소 중 첫번째 요소를 선택.

ex) /* h1 요소의 형제 요소 중 첫번째 p 요소 선택 */
h1 + p

가상 요소 (pseudo-elements)


요소의 특정 부분을 선택.
가상 클래스는 콜론을 한 개(:), 가상 요소는 콜론을 두 개(::) 쓴다. 하지만 콜론을 하나만 써도 대부분 작동.

  • first-line : 요소의 첫번째 줄 선택.
ex)  /* p 요소의 첫번째 줄의 글자색으로 빨간색으로 만듦.*/
p::first-line{
    color:red;
}
  • first-letter : 요소의 첫번째 문자 선택.
ex)  /* p 요소의 첫번째 문자의 색을 빨간색으로 만듦.*/
p::first-letter{
    color:red;
}
  • before : 요소의 앞을 선택.
ex)  /* p 요소 앞에 xyz라는 단어를 넣고 색을 빨간색으로 만듦.*/
p::before{
    content : "xyz";
    color:red;
}
  • after : 요소의 뒤를 선택.
ex)  /* p 요소 뒤에 xyz라는 단어를 넣고 색을 빨간색으로 만듦.*/
p::after{
    content : "xyz";
    color:red;
}
  • selection : 마우스 드래그 등으로 선택한 텍스트 선택.

가상 클래스


  • empty : 내용이 없는 비어있는 요소 선택. 공백도 내용이 있는 것으로 간주한다.
ex)  /* li 요소 중 내용이 없는 것 선택 */
li:empty
  • first-child : 형제 요소 중 첫번째 요소 선택

  • hover : 요소에 마우스를 올린 상태를 선택. 마우스를 다른 곳으로 이동하면 원래 모양으로 돌아온다.

ex)  /* p 요소에 마우스를 올렸을 때 글자색을 빨간색으로 만든다.*/
p:hover{ 
    color:red;
}

nth-child()


형제 요소 중에서 특정 순서에 있는 요소를 선택할 때 사용. 앞에서부터 센다.
문법 : :nth-child( an + b )

  • a, b는 정수(0, 음수 가능)
  • n에는 음이 아닌 정수가 차례로 대입
  • an + b 대신 even, odd도 가능
ex) /* li 요소 중 2,5... 순서에 있는 것을 빨간색으로 만든다.*/
li:nth-child( 3n+2 ){
    color:red;
}

nth-last-child()


형제 요소 중에서 특정 순서에 있는 요소를 선택할 때 사용. 뒤에서부터 센다.
문법 : :nth-last-child( an + b )

  • a, b는 정수(0, 음수 가능)
  • n에는 음이 아닌 정수가 차례로 대입
  • an + b 대신 even, odd도 가능
ex) /* li 요소 중 뒤에서부터 짝수 번째 순서에 있는 것을 빨간색으로 만든다.*/
li:nth-last-child( even ){
    color:red;
}

상속( inheritance )


CSS 속성에는 상속하는 속성과 상속하지 않는 속성이 있다. 상속하는 속성은 자식 요소에 영향을 미치고 상속하지 않는 속성은 자식 요소에 영향을 미치지 않는다.

  • 상속하는 속성
    부모 요소에서 정의한 것이 자식 요소에도 적용된다. ex) color

  • 상속하지 않는 속성
    부모 요소에서 정의한 것이 자식 요소에 적용되지 않는다. ex) padding, border