CSS 기초

이나래·2022년 11월 6일

CSS (cascading Style Sheet)

Style sheet 언어

selector

어떤 태그를 고르고 싶은지 명시
괄호 안에 property를 넣고 value를 넣음

종류

Universal *
type Tag
ID #id
Class .class
State :
Attribute []

html 예제

Universal *

  • 전체 색상을 black으로 지정

ID #id

  • li와 #special을 각 blue, pink으로 지정

State :

  • button에 마우스 갖다댈 시 글자색 green, background 색 beige로 지정
    (:hover - 마우스를 올린 태그나 속성)

Class .class

  • .red class의 background 색상을 yellow로, 크기는 30X30으로 지정

  • .red class의 background 색상과 크기 등 지정해보기

Attribute []

  • href 가 있는 부분의 색상을 red로 지정

([^] 시작하는 부분)

  • naver로 시작하는 부분의 색상을 purple로 지정

([$] 끝나는 부분)

  • .com으로 끝나는 부분의 색상을 green으로 지정

Flex box

  • container, box에 적용되는 속성 값 존재
    dispaly
    flex-direction
    flex-warp
    flex-flow
    justify-content
    align-items
    align-content

  • 각각의 item들에 적용할 속성 값 존재
    order
    flex-grow
    flex-shrink
    flex
    align-self

< 참고 예제 및 자료 >
https://youtu.be/gGebK7lWnCk

0개의 댓글