CSS (1)

김서현·2022년 5월 22일
CSS
0

프론트엔드 스터디

목록 보기
2/16
post-thumbnail

이 글은 boostcourse의 '웹 UI 개발'을 수강하고 적는 글입니다.

📌 3. 콘텐츠모델, 시멘틱마크업, 블록 & 인라인

1) 콘텐츠 모델

METADATA : 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들

  • <head>내에 들어간다
  • 종류 : base, link, meta, noscript, script, style, title

FLOW : 문서의 자연스러운 흐름에 의해 배치되는 요소들

  • a, abbr, address, map>area, article, aside,audio, b, bdo, blockquote,
br, button,
    canvas, cite, code, datalist, del, details, dfn, div, dl, em, embed,
    fieldset, figure, footer, form, h1 ~ h6, header, hgroup, hr, i, iframe, img,
    input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol,
    output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong,
    style, sub, sup, svg, table, textarea, time, ul, var, video, wbr

SECTIONING : 문서의 구조와 관련된 요소들

  • article, aside, nav, section

HEADING : heading 태그

  • h1, h2, h3, h4, h5, h6

Phrasing : 문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소들

  • a, abbr, map>area, audio, b, bdo, br, button, canvas, cite, code, datalist, del, dfn, em, embed,
    i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output,
    progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time,
    var, video, wbr

Embedded : 외부 콘텐츠를 표현하는 요소들이 포함되며 오디오나 비디오, 이미지 등 멀티미디어 관련 요소들

  • audio, canvas, embed, iframe, img, math, object, svg, video

Interactive : 사용자와 상호작용을 하는 요소들

  • a, audio, button, details, embed, iframe, img, input, keygen, label, menu,
    object, select, textarea, video

2) 시멘틱 마크업

시멘틱 마크업 : 컴퓨터(브라우저)가 잘 이해할 수 있는 코드

<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>
  • 의미에 맞는 요소를 사용
  • 문서의 구조화
  • 인간과 기계가 모두 이해할 수 있는 것이 목표

3) 블록&인라인

Block level : 한 줄에 하나의 요소 표시. 가로 영역을 모두 채워 표시하고 박스를 생성.

  • ex) div, h1~h6, p, ul, li, table ...
  • heading 요소와 <p> 요소는 Phrasing Content만 허용

Inline level : 한 줄에 여러개의 요소 표시, 요소 앞 뒤로도 줄 바꿈이 되지 않음 ex) span, i, img, em, strong, a ...

📝 Block level 은 Inline level의 자손 요소가 될 수 없음.
예외) <a>는 어떤 박스 모델도 자손 요소로 가질 수 있음.

📌 4. CSS 이해하기

1) CSS 소개

CSS : Casacading Style Sheets

2) CSS 문법과 적용

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; }"

CSS의 적용

Inline

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

Internal

<style> div {color: red;} </style>
  • <head> 내에 선언됨.

External

<link rel="stylesheet" href="css/style.css">
div {color: red;}
  • html 코드는 <head> 내에 선언됨.

3) 선택자

요소 선택자(태그)

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

그룹화(Grouping)

h1, h2, h3, h4, h5, h6 { color: yellow; }
* { color: yellow; }
  • 전체 선택자로 문서 내 모든 요소 선택

class 선택자

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

id 선택자 : 문서 내에 유일한 요소에 사용

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

선택자의 조합

/* 요소와 class의 조합 */
//p태그이면서 class는 bar인 요소
p.bar { ... }
/* 다중 class */
.foo.bar { ... }
/* id와 class의 조합 */
#foo.bar { ... }

속성 선택자

1) 단순 속성으로 선택

<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>
p[class] { color: silver; } //p요소이면서 class 속성이 있는 요소
p[class][id] { text-decoration: underline; } //p요소이면서 class 속성과 id 속성이 있는 요소

2) 정확한 속성값으로 선택

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

3) 부분 속성값으로 선택

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

4) 가상 선택자

가상 클래스 : 미리 정의해놓은 상황에 적용이 되도록 약속되어있는 보이지 않는 클래스

:pseudo-class {
    property: value;
}
  • : (콜론) 기호를 써서 나타냄
  • :first-child : 첫번째 자식 요소
  • :last-child : 마지막 자식 요소
  • :link : 하이퍼링크이면서 아직 방문하지 않은 앵커
  • :visited : 이미 방문한 하이퍼링크를 의미
  • :focus : 현재 입력 포커스를 갖고 있는 요소에 적용 (ex. tab으로 움직일 때)
  • :hover : 마우스 포인터가 위치해 있는 요소에 적용
  • :active : 사용자 입력에 의해 활성화된 요소에 적용 (ex. focus가 가있을 때 클릭 시 순간 적용)

가상 요소 : 미리 정의해놓은 위치에 삽입이 되도록 약속되어있는 보이지 않는 요소

::pseudo-element {
    property: value;
}
  • :before : 가장 앞에 요소를 삽입
  • :after : 가장 뒤에 요소를 삽입
    -> content 를 사용하여 내용 삽입
  • :first-line : 요소의 첫 번째 줄에 있는 텍스트
  • :first-letter : 블록 레벨 요소의 첫 번째 문자

5) 구체성(명시도)

구체성 : 선택자를 얼마나 명시적으로 선언했느냐를 수치화 한 것

h1 { color: red; }
body h1 { color: green; }

h2.grape {color: puprle;}
h2 { color:silver; }

구체성 값 : 좌측 숫자가 클수록 구체성이 높다

  • 1, 0, 0, 0 : 인라인 스타일
  • 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
  • 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
  • 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
  • 0, 0, 0, 0 : 전체 선택자
  • 조합자(ex >, +)는 구체성에 영향을 주지 않는다.
  • !important : 모든 구체성을 무시하고 우선권을 가짐.
h1 { ... }  /* 0,0,0,1 */
body h1 { ... }  /* 0,0,0,2 */
.grape { ... }  /* 0,0,1,0 */
*.bright { ... }  /* 0,0,1,0 */
p.bright em.dark { ... }  /* 0,0,2,2 */
#page { ... }  /* 0,1,0,0 */
div#page { ... }  /* 0,1,0,1 */

6) 상속

  • margin, padding, background, border : 상속되지 않음 (박스 모델 속성들)
<h1 id="page">Hello, <em>CSS</em></h1>
* { color: red; }
h1#page { color: gray; }

📝 상속된 속성은 구체성을 가지지 못함. 따라서 위 코드에서 css는 빨간색으로 표시.

7) 캐스케이딩

cascading : 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙

  1. 중요도(!important)와 출처
  • 출처는 제작자, 사용자, 사용자 에이전트(User Agent)로 구분한다.
    사용자 에이전트 스타일(브라우저 제공 스타일) < 사용자 스타일 < 제작자 스타일(개발자) < 제작자 !important 스타일 < 사용자 !important 스타일
  1. 구체성
  2. 선언 순서 : 나중에 선언된 것이 우선시

📌 5. 단위, 배경, 박스모델

1) 속성-단위

CSS 단위

  • 절대 길이
    px - pixels
    pt - points (Windows : 9pt = 12px)
  • 상대 길이
    % - Percentage
    em - font size of the element (상위 요소 기준, 2em => 2배)
    rem - font size of the root element
    vw - 1% of viewport's width

2) 속성-색상

COLOR

<h1 style="color: red"> heading </h1> 
<h1 style="color: #ff0000"> heading </h1>
<h1 style="color: #f00"> heading </h1>
<h1 style="color: rgb(255,0,0)"> heading </h1>    
<h1 style="color: rgba(255,0,0, 0.5)"> heading </h1> // a=0 투명, a=1 불투명

3) 속성-background

height: 500px;
background-color: yellow;
background-image: url(https://www.w3schools.com/CSSref/img_tree.gif);
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll; //스크롤 내려도 이미지 고정 or 같이 움직임(default)
/* 축약형 */
background: yellow url(https://www.w3schools.com/CSSref/img_tree.gif) no-repeat center top;

4) 속성-boxmodel

  • content : 요소의 실제 내용을 포함하는 영역
  • border : content 영역을 감싸는 테두리 선
  • padding : content 영역과 테두리 사이의 여백. content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향을 미침
  • margin : border 바깥쪽의 영역을 margin. border 영역을 다른 요소와 구별하기 위해 쓰임. 주변 요소와의 여백

5) 속성-border

border : 요소의 테두리

border-width: [top][right] [bottom][left];

border-width : 1px;
border-style : solid; 
border-color : #000;
border: 1px solid #000;
border-left: 6px solid red;
border-width: 6px 3px; /*상하, 좌우*/
border-width: 6px 3px 4px; /*상, 좌(우), 하*/
border-width: 6px 3px 4px 1px; /*상, 우, 하, 좌*/
profile
김서현
이전 포스트

HTML

다음 포스트

CSS (2)

0개의 댓글