CSS

송민혁·2022년 7월 8일
CSS
0

CSS3

목록 보기
1/3

CSS

CSS (Cascaing Style Sheets) 는 HTML5과 같은 구조화 된 document를 화면에 어떻게 렌더링(Rendering)할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소의 스타일(design, layout etc)을 정의하여 화면 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어이다.

HTML5에서는 HTML는 정보와 구조화, CSS는 styling의 정의라는 본연의 임무에 충실한 명확한 구분이 이루어졌다.

선택자 (Selector, 셀렉터)

스타일을 적용하고자 하는 HTML 요소를 선택하여야 한다.
다시 말해, 셀렉터는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단이다.

그림에 나와있는 것에 대해 설명을 덧붙이자면 p라는 HTML 요소를 선택을 하고 속성과 값을 이용하여 선언을 하면 된다.

속성 (property)

속성은 표준 스펙으로 사용하여야 하고, 여러 개의 속성을 연속해서 지정할 수 있으며 세미콜론(;)으로 구분한다.

값 (value)

해당 속성에 사용할 수 있는 값을 키워드나 크기 단위나 색상 표현 단위 등의 특정 단위로 지정하여야 한다.
https://www.youtube.com/watch?v=SmzghM3l228

  • 키워드의 예시: display 프로퍼티의 값으로 사용할 수 있는 키워드 block, inline, inline-block, none

  • 크기 단위 : px (절대적인 값), em (상대적인 값), % (상대적인 값)
    font-size: 1.2em; / 14px 1.2 = 16.8px */

중첩된 자식 요소에 em을 지정하면 모든 자식 요소의 사이즈에 영향을 미치기 때문에 주의하여야 한다. 상대 단위인 em의 기준이 상속의 영향으로 바뀔 수 있기 때문이다.
(그래서 해결책으로 rem을 사용한다.
em의 기준은 상속의 영향으로 바뀔 수 있다. 즉, 상황에 따라 1.2em은 각기 다른 값을 가질 수 있다.
rem은 최상위 요소(html)의 사이즈를 기준으로 삼는다. rem의 r은 root를 의미한다.)

셀렉터 종류와 특징

  • 태그 셀렉터 : 가장 일반적인 셀렉터 :p { color: red; }
  • 복수개의 셀렉터를 연속하여 지정할 수 있으며 쉼표( , )로 구분한다. : h1, p { color: red; }
  • 전체 셀렉터 (별) : * { color: red; }
  • ID 셀렉터: 특정 ID을 지정할 때#p1 { color: red; } <p id="p1">paragraph 1</p>
  • 클래스 셀렉터: 재사용을 할 때 .container { color: red; } <div class="container">
  • 어트리뷰트 셀렉터: 특정 어트리뷰트을 지정할 때 a[href] { color: red; }

여기서 선택자를 지정할 때 다양한 기호를 통하여 조건을 부여할 수 있다.
(~=,|=, ^=, $=, *=)

복합 셀렉터

https://poiemaweb.com/css3-selector

후손 셀렉터( ), 자식 셀렉터( > ), 형제 셀렉터( + , ~ )
자식 셀렉터와 후손 셀렉터
형제셀렉터

가상 클래스 셀렉터(:)

가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다.

  • 마우스가 올라와있을 때 :hover
  • 마우스로 클릭하였을 때 :active
  • 링크를 방문했을 때와 아직 방문하지 않았을 때 :link, :visited
  • 포커스가 들어와있을 때 :focus
    a:hover { color: red; }, input:focus { background-color: yellow; }

가상 요소 셀렉터(::)

가상 요소는 요소의 특정 부분에 스타일을 적용하기 위하여 사용된다.

  • 요소 콘텐츠의 첫 글자 또는 첫 줄
  • 요소 콘텐츠의 앞 또는 뒤

CSS 연동

CSS와 HTML을 연동하는 방법은 다음과 같다.

  • Link style : HTML에서 외부에 있는 CSS 파일을 로드하는 방식이다.
  • Embedding style : HTML에 있는 head 태그 안에 style 태그 안에 기술하는 방식이다.
  • Inline style : HTML 요소의 style 속성에 CSS를 기술하는 방식이다.

Reset CSS

모든 웹 브라우저는 각각 디폴트 스타일을 가지고 있어 CSS가 없어도 작동한다.
그래서 브라우저 별로 제각각인 디폴트 스타일을 하나의 스타일로 통일시키는 게 중요하다.

다음 링크를 참조하는 게 좋다.

BOX

너무 방대하므로 필요한 요소를 항상 찾고 사용하는 방식으로 해야 할 것 같다.
https://poiemaweb.com/css3-box-model

Box는 content, padding, border, margin으로 구성되어 있고,
외우기 쉽게 하려면 테두리(border) 기준으로 생각하면 좋다.

  • 테두리 안: content(width-height), padding
  • 테두리 밖: margin

작성 예시

div {
        border: 5px solid red;

        margin:  40px 30px 20px 10px;
        padding: 10px 20px 30px 40px;
      }

꼭 알아야 할 것들

  • -top, -right, -bottom, -left 4방향 (시계방향)
  • margin 프로퍼티에 auto 키워드를 설정하면 해당 요소를 브라우저 중앙에 위치 시킬 수 있다
  • border-radius 프로퍼티는 테두리 모서리를 둥글게 표현하도록 지정한다.

display

block

  • 항상 새로운 라인에서 시작한다.

  • 화면 크기 전체의 가로폭을 차지한다. (width: 100%)

  • width, height, margin, padding 프로퍼티 지정이 가능하다.

div, h1

inline

  • 새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있다. 즉, 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다.

  • content의 너비만큼 가로폭을 차지한다.

  • width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다. 상, 하 여백은 line-height로 지정한다.

span, a, img

inline-block

  • block과 inline 레벨 요소의 특징을 모두 갖는다. inline 레벨 요소와 같이 한 줄에 표현되면서 width, height, margin 프로퍼티를 모두 지정할 수 있다.

  • 기본적으로 inline 레벨 요소와 흡사하게 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있다.

  • block 레벨 요소처럼 width, height, margin, padding 프로퍼티를 모두 정의할 수 있다. 상, 하 여백을 margin과 line-height 두가지 프로퍼티 모두를 통해 제어할 수 있다.

visibility

visibility 프로퍼티는 요소를 보이게 할 것인지 보이지 않게 할 것인지를 정의한다. 즉, 요소의 렌더링 여부를 결정한다.

visible, hidden, none

opacity

opacity 프로퍼티는 요소의 투명도를 정의한다. 0.0 ~ 1.0의 값을 입력하며 0.0은 투명, 1.0은 불투명을 의미한다.

background-image

미친 정리

요소에 배경 이미지를 지정하고, (background-image: url("http://poiemaweb.com/img/bg/dot.png");)
반복 여부를 설정할 수 있다.
사이즈와 위치를 변경할 수 있다.
(attachment 프로퍼티가 센스 있어 보인다.) 쇼핑몰에서 자주 쓰일 것 같다.

position

요소의 위치를 정의한다.
static, relative, absolute, fixed, z-index, overflow

transition

트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다.

transition은 자동으로 발동되지 않는다. :hover와 같은 가상 클래스 선택자또는 JavaScript의 부수적인 액션에 의해 발동한다.

순식간에 변하는 것보다 변화 시간을 조절함으로써 더 센스 있게 보일 수 있다.

transition-timing-function

트랜지션 효과를 일정한 변화율을 가진 함수만으로 표현하기에는 단조롭기 때문에 특수한 변화율을 가진 함수를 사용하면 다양한 효과를 볼 수 있다.

animation

https://poiemaweb.com/css3-animation

트랜지션으로 애니메이션 효과를 표현하기에는 제한적이기 때문에 애니메이션을 사용한다.

애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다.

:hover 와 같은 가상 클래스 선택자(Pseudo-Class Selector) 또는 자바스크립트의 이벤트와 같은 부수적 액션에 의해 발동된다.

Web font

웹페이지를 구성하는 html, css, javascript 파일이 사용자의 요청에 의해 서버에서 클라이언트로 다운로드되어 실행되는 것과 같이 폰트 또한 서버에서 클라이언트로 다운로드되어 실행될 수 있다면 이 문제는 해결될 수 있다.
이러한 문제를 해결할 수 있는 방법이 바로 웹폰트이다. 웹폰트는 사용자가 웹페이지를 요청한 순간 CSS에 기술된 필요 폰트가 서버에서 클라이언트로 전송된다.

  • CDN 링크 방식: Google Font 에서 사용하고자 하는 웹폰트를 선택하고 CDN 링크를 사용하는 방법

  • 서버 폰트 로딩 방식: @font-face 규칙으로 폰트를 등록하고 font-family 프로퍼티로 폰트를 선택하여 사용 (CDN 링크 방식보다 빠름)

layout

header (navigation bar), section & aside, footer

responsive web design

사용자가 어떤 디바이스로 웹사이트를 방문할 지 알 수 없다. layout은 방문자의 화면 해상도를 고려하여야 한다.

이건 너무 중요하므로 공부를 세세하게 해보고 수정하거나 추가 정보를 velog에 기재해야겠다.

flex

https://poiemaweb.com/css3-flexbox

Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식이다.

이것도 너무 중요하므로 추가 등업을 하겠습니다.

정렬

  • 수평 정렬 (margin: auto, text-align: center, justify-content: center)
  • 수직 정렬 (vertical-align: middle, justify-content: center)

Typography

image 요소 아래에 패딩된 여분의 공간 제거하기

profile
송민혁
다음 포스트

CSS 레이아웃 _ position

0개의 댓글