오답노트

[부스트코스] 비전공자를 위한 HTML/CSS - 4강 CSS 이해하기 본문

Web/HTML

[부스트코스] 비전공자를 위한 HTML/CSS - 4강 CSS 이해하기

권멋져 2022. 5. 24. 17:27
  • CSS : Cascading style sheets
    • HTML을 꾸며주는 언어
    • html이 웹페이지의 정보를 표현한다면, CSS는 html을 보기 좋게 디자인하는 역할
  • CSS 문법
h1 { color: yellow; font-size:2em; }
  • 선택자(selector)
  • 속성(property)
  • 값(value)
  • 선언(declaration)
  • 선언부(declaration block)
  • 규칙(rule set)
  • CSS 주석
  • /* 주석입니다 */ /* 주석입니다 */
  • CSS 적용방식
  1. Inline코드의 재활용이 쉽지 않아 잘 사용되지 않음
  2. <div style="color:red;"> 내용 </div>
  3. 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법
  4. Internal<style> 태그는 <head> 태그내에 선언한다. 그러므로 모든 페이지에 저마다 규칙을 선언해야한다.
  5. <head> <style> div {color: red;} </style> </head>
  6. <style> 태그를 사용하여 규칙들을 선언
  7. External스타일 규칙들을 별도의 외부 파일로 만들어 html에 넣는 방식이다. 
    <head>
	<link rel="stylesheet" href="css/style.css">
</head>
  8. /* style.css */ div {color: red;}
  9. 외부 스타일 시트 파일을 이용한 방법
  10. Import
  11. 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식
  • 선택자 (selector)
    • 요소 선택자(태그)
      • 선택자의 부분에 태그명이 들어감
      • 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; }
    • class 선택자 
      <head>
	<style>
	.foo { font-size: 30px; }
	</style>
</head>

<p class="foo"> ... </p>
    • 요소에 구애받지 않고 스타일을 지정할 수 있도록 해줌
    • id 선택자 
      <head>
	<style>
	#bar { background-color: yellow; }
	</style>
</head>

<p id="bar"> ... </p>
    • 해시 기호를 사용하여 스타일을 지정한다.
    • class 와 id 의 차이점
      1. 기호의 차이
      2. 속성의 차이
      3. 문서내에 유일한 요소에 사용 : class와 달리 id는 문서 내에서 유일해야한다.
      4. 구체성
    • 선택자의 조합
    • /* 요소와 class의 조합 */ p.bar { ... } /* 다중 class */ .foo.bar { ... } /* id와 class의 조합 */ #foo.bar { ... }
    • 속성 선택자
      • 단순 속성으로 선택 
        <p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>
      • /* p[class] 선택자는 class 속성이 존재하면 적용 p[class][id] 선택자는 class 와 id 속성 모두 존재하면 적용 */ p[class] { color: silver; } p[class][id] { text-decoration: underline; }
      • 정확한 속성값으로 선택
      • /* p[class="foo"]는 <p>이면서 class 속성의 값이 foo이면 적용 p[id="title"]는 <p> 이면서 id 속성의 값이 title이면 적용 */ p[class="foo"] { color: silver; } p[id="title"] { text-decoration: underline; }
      • 부분 속성값으로 선택 
        /*

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

*/

p[class~="color"] { font-style: italic; }
p[class^="color"] { font-style: italic; }
p[class$="color"] { font-style: italic; }
p[class*="color"] { font-style: italic; }

        <p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>
      • 속성 이름과 속성값 사이에 사용되는 기호에 따라 동작이 다르다.
  • 문서 구조 관련 선택자
    • 문서 구조의 이해
      • 부모와 자식
        • 부모요소 : 그 요소를 포함하는 가장 가까운 상위 요소
        • 자식요소: 부모요소와 반대되는 개념
      • 조상과 자손
        • 조상요소 : 그 요소를 포함하는 모든 요소로, 부모 요소를 포함하여 여러 개일 수 있다.
        • 자손요소 : 그 요소가 포함하고 있는 모든 요소
      • 형제
        • 같은 부모를 가지고 있는 요소들은 서로 형제 관계를 가진다.
  • 문서 구조 관련 선택자
    • 자손 선택자 : 선택자 사이에 아무 기호없이 공백으로 구분
    • div span { color: red; }
    • 자식 선택자 : 자식 선택자는 선택자 사이에 닫는 꺽쇠 기호를 넣는다
    • div > h1 { color: red; }
    • 인접 형제 선택자 : 선택자 사이에 + 기호를 넣는다.
    • div + p { color: red; }
  • 가상 선택자
    • 가상 클래스 : 미리 정의해놓은 상황에 적용이 되도록 약속되어있는 보이지 않는 클래스
    • /*가상클래스는 앞에 : 를 사용하여 나타낸다*/ a:pseudo-class { property: value; }
    • 문서 구조와 관련된 가상 클래스
      • first-child : 첫 번째 자식 요소 선택
      • last-child : 마지막 자식 요소 선택
    • 링크 관련된 가상 클래스
      • link : 하이퍼링크이면서 아직 방문하지 않은 앵커
      • visited : 하이퍼링크이면서 이미 방문한 앵커
    • 사용자 동작 관련 가상 클래스
      • focus : 현재 입력 포커스를 갖고 있는 요소에 적용
      • hover : 마우스 포인터 위치해 있는 요소에 적용
      • active : 사용자 입력에 의해 활성화된 요소에 적용
    • 가상 요소 : 미리 정의해놓은 위치에 삽입이 되도록 약속되어있는 보이지 않는 요소
      • before : 가장 앞에 요소를 삽입
      • after : 가장 뒤에 요소를 삽입
      • first-line : 요소의 첫 번째 줄에 있는 텍스트들에게 적용
      • first-letter : 블록 레벨 요소의 첫 번째 문자에게 적용
  • 구체성(명시도)
    • 구체성은 선택자를 얼마나 명시적으로 선언했느냐를 수치화 한 것
    • 구체성의 값 (0, 0, 0, 0)
      • 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
      • 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
      • 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
      • 전체 선택자는 0, 0, 0, 0을 갖는다
      • 조합자는 구체성에 영향을 주지 않는다.
      • 인라인 스타일의 구체성 값은 1, 0, 0, 0이며 규칙들 중 가장 큰 구체성을 갖는다.
    • important
      • important는 모든 구체성 값을 무시하고 우선적으로 적용된다.
      p#page { color: red !important; }

      <p id="page" style="color:blue">Lorem impusm dolor sit.</p>
  • 상속
    • 상속은 부모 속성이 자식 속성에도 적용되는 것
    • 하지만 모든 속성이 다 상속되는 것은 아니다.
    • 박스 모델 속성들은 상속되지 않는다.
    • 상속되는 속성의 구체성
      • 아래 코드에서 전체 선택자를 이용해 color:red 적용하고 id선택자를 이용해 color:gray를 선언했다.
      • 전체 선택자의 구체성은 0,0,0,0 이며 id 선택자의 구체성은 0,1,0,1 이다.
      • <em>은 상속된 속성이 적용돼 아무런 구체성을 가지지 못해 red로 표현된다.
      * { color: red; }
h1#page { color: gray; }

      <h1 id="page">Hello, <em>CSS</em></h1>
  • 캐스케이딩
    • 케시케이딩 규칙
      1. 중요도와 출처
        • 기본적으로 important로 선언된 모든 규칙은 그렇지 않은 규칙보다 우선한다.
        • 출처는 제작자, 사용자, 사용자 에이전트로 구분한다.
        • 사용자 에이전트 스타일 < 사용자 스타일 < 제작자 스타일 < 제작사 important 스타일 < 사용자 important 스타일
      2. 구체성
      3. 구체성이 높은 순서로 적용된다.
      4. 선언 순서
      5. 가장 마지막에 선언된 코드로 적용된다.

'Web > HTML' 카테고리의 다른 글

[부스트코스] 비전공자를 위한 HTML/CSS - 3강 콘텐츠모델, 시멘틱마크업, 블록 & 인라인  (0) 2022.05.17
[부스트코스] 비전공자를 위한 HTML/CSS - 2강 HTML 태그  (0) 2022.05.17
[부스트코스] 비전공자를 위한 HTML/CSS - 1강 HTML 이해하기  (0) 2022.05.17
'Web/HTML' Related Articles more