li {
        color:red;
        text-decoration:underline;
}

1. 태그 선택자

문서의 모든 li 태그라는 뜻입니다.

li{color:red}

2. 클래스 선택자

클래스 속성의 값에 해당하는 태그들을 선택하는 선택자입니다.

3. 아이디 선택자

문서에서 id값이 select인 태그라는 뜻입니다.

#select{font-color:50px;}

practice

Answer

CheatSheet

가상(pseudo) 클래스 선택자는 클래스 선택자는 아니지만 엘리먼트들의 상태에 따라서 마치 클래스 선택자처럼 여러 엘리먼트를 선택할 수 있다는 점에서 붙은 이름입니다. 여기서는 주요 클래스 선택자를 알아봅니다.

:link - 방문한 적이 없는 링크
:visited - 방문한 적이 있는 링크
:hover - 마우스를 롤오버 했을 때 
:active - 마우스를 클릭했을 때 

위의 선택자는 순서대로 지정하는 것이 좋습니다. 특히 visited의 경우는 보안상의 이유로 아래와 같은 속성만 변경이 가능합니다.

color
background-color
border-color
outline-color
The color parts of the fill and stroke properties

1. rem

html 태그에 적용된 font-size의 영향을 받습니다. html 태그의 폰트 크기에 따라서 상대적으로 크기가 결정되기 때문에 이해하기 쉽습니다. 가장 바람직한 단위입니다. 이것을 사용하세요.

2. px

모니터 상의 화소 하나의 크기에 대응되는 단위입니다. 고정된 값이기 때문에 이해하기 쉽습니다만, 사용자가 글꼴의 크기를 조정할 수 없기 때문에 가급적 사용을 하지 않는 것이 좋습니다.

3. em

부모 태그의 영향을 받는 상대적인 크기입니다. 부모의 크기에 영향을 받기 때문에 파악하기가 어렵습니다. rem이 등장하면서 이 단위 역시 사용이 권장되지 않습니다.

Color FlatUI

text-align의 값으로 올 수 있는 값은 아래와 같습니다.

left
right
center
justify

1. font-family

serif (장식이 있는 폰트)
sans-serif
cursive (흘림체)
fantasy
monospace (고정폭)

고정폭과 가변폭

egoing

www.w3.org

stylish

CSS는 Cascading Style Sheet의 약자입니다.

웹페이지의 디자인이 웹브라우저의 기본 디자인과 브라우저 사용자의 디자인 그리고 웹페이지 저자의 디자인이 결합될 수 있다는 점에 착안하고 있다고 할 수 있을 것 같습니다.

style attribute > id selector > class selector > tag selector

포괄적인것이 더 작다.

html 엘리먼트들은 크게 두가지로 구분됩니다.

• 화면 전체를 사용하는 태그 => block element
• 화면의 일부를 차지하는 태그 => inline level element

이 과정에서 display라는 중요한 속성에 대해서도 배우게 됩니다.

        h1,a{border:1px solid red;}
        h1{display: inline;}
        a{display:block;}

goJsBin

goJsBin

참고

마진겹침(margin-collapsing) 현상은 상하 마진값이 어떤 상황에서 사라지는 현상을 의미합니다. 이 현상은 초심자에게는 중요한 내용이 아니기 때문에 지나치시길 바랍니다. 하지만 이것을 이해하지 못하면 실무를 할 때 이해할 수 없는 CSS의 동작으로 인해서 깊은 화남이 생길 수 있으니까 언젠가는 보시는게 좋겠습니다.

참고

code

offset!!!!

static
relative
absolute
fixed

1. relative

• 부모를 기준으로해서 위치가 정해진다.

relative

2. absolute

• 부모 중에 포지션 타입이 지정된 부모를 기준으로 해서 위치가 지정이 되고 부모와의 관계성이 끊기기 때문에 자신의 콘텐츠 크기만 해진다. css속성이 끊어지는것은 아니다.

• absoulte의 부모를 찾는다. default -> body
• absoulte의 left, right는 부모 엘리먼트를 기준으로해서 자기가 원래 위치해야 될 그 위치에 기본값으로 준다.
• absoulte를 하게되면 더 이상 부모의 소속이 아니다.
• 해당 엘리먼트의 크기가 크기가 자신의 content size 설정이 된다.

absolute

3. fixed

fixed

flex

1. flex-direction
row: row-reverse: column: column-reverse:

2. flex-wrap
nowrap: wrap: wrap-reverse:

3. align-items
flex-start: flex-end: center: baseline: stretch:

4. justify-content
flex-start: flex-end: space-between: center: space-around:

5. align-content 
flex-start: flex-end: center: space-between: space-around: stretch:

6. align-self
auto: flex-start: flex-end: center: baseline: stretch:

7. flex-grow
flex-shrink 

8. flex
.item { flex: flex-grow [flex-shrink] [flex-basis]; }

9. order

w3schools.com

float:left

clear:left , right, both;

egoing

다단(multi column)은 신문처럼 화면을 분할해서 좀 더 읽기 쉽도록 만든 레이아웃을 의미합니다. CSS에서는 이러한 레이아웃을 쉽게 구현할 수 있는 기능을 제공합니다.

    .column{
        text-align: justify;
        column-count: 4;
/*        column-width: 200px;*/
        column-gap:30px;
        column-rule-style: solid;
        column-rule-width: 5px;
        column-rule-color: red;
      }
      h1{
        column-span: all;
      }
    </style>

{
  background-color : red
  background-image : url("bg.png")
  background-repeat : repeat, no-repeat, repeat-x, repeat-y
  background-attachment : scroll, fixed
  background-position : left top  or x% y% or x y
  background-size : 100px 100px or cover or 
  contain
}

w3school

CSS filter playground

CSS-TRICKS - filter

img {
 -webkit-filter: grayscale(0%);
 -o-filter: grayscale(0%);
 filter: graysacle(0%);
}

배경 그래픽 간의 블랜드 효과

컨텐트와 배경 사이의 블랜드 효과

codepen.io 블랜드 예제

transform은 엘리먼트의 크기, 위치, 모양을 변경하는 속성입니다.

egoing

MDN_transform

hover.css

CSShake

magic animation

svg는 백터(vector) 이미지를 표현하기 위한 포맷으로 w3c에서 만든 백터 이미지 표준입니다. SVG 자체는 CSS가 아닙니다만 CSS를 이용해서 다양한 효과를 줄 때 SVG를 활용하는 경우가 많기 떄문에 여기서는 SVG에 대해서 간략하게 언급만하겠습니다.

  img{
        width:400px;
  }

  .svg{
        height:400px;
        background-image: url(sample_vector.svg)
   }

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="210" height="210">
  <rect x="5" y="5" width="200" height="200" style="fill:red; stroke:black; stroke-width:10px"></rect>
</svg>

egoing

전환은 효과가 변경되었을 때 부드럽게 처리해주는 CSS의 기능입니다. 이와 관련된 것으로는 아래와 같은 속성들이 있습니다.

transition-duration
transition-property
transition-delay
transition-timing-function
transition

 a{
      font-size:3rem;
      display:inline-block;
/*
      transition-property: font-size transform;
      transition-duration: 0.1s;
      transition:all 0.1s;
*/
     /* transition:all 0.1s;*/
    transition:font-size 1s, transform 0.1s;

    }
    a:active{
      transform:translate(20px, 20px);
      font-size:2rem;
    }

goJsBin

goJsBin

transition timming function 만들기

유지하고 보수하는 것이 편리하지 못하면 디자인을 과감하게 전개하는 것은 어려운 일입니다. 따라서 일정한 규모의 사이트가 되면 유지보수를 효율적으로 해서 프로젝트의 복잡도를 낮추는 것은 정말 중요한 일이 됩니다. 여기서는 대규모의 CSS 시스템을 구축할 때 필요한 여러가지 테크닉들을 알아봅니다.

똑같은 CSS를 적용해야 하는 웹페이지가 1000개가 있을 때 CSS의 내용이 바뀌었다면 어떻게 해야할까요? 아마 천개의 웹페이지를 모두 수정해야 할 것입니다. 이것은 CSS의 수정을 소극적으로 만들고 그것은 곧 아름다움을 억압하는 암담한 장애물이 될 것입니다. 여기서는 이런 문제를 근본적으로 해결할 수 있는 방법인 link 태그와 @import에 대해서 알아봅니다.

외부로 파일을 빼는 방법은 크게 두가지입니다.

2. <style>@import url("style.css")</style>

<!doctype html>
<html>
<head>
<!--    <link rel="stylesheet" href="style.css">-->
    <style>
        @import url("style.css")
    </style>
</head>
<body>
    <h1>page2</h1>
</body>
</html>

h1{
    color:red;
}

CSS는 네트워크를 통해서 전송됩니다. 자연스럽게 CSS의 크기가 커지면 컨텐츠의 생산자와 소비자 모두에게 손해입니다. 코드의 크기를 줄이는 것을 통해서 이런 문제를 완화해주는 도구가 minify 도구입니다. 여기서는 코드를 경량화하는 방법을 알아보겠습니다.

http://adamburgess.github.io/clean-css-online/

clen-css

clean-css랑 clean-css-cli 로 나뉘었다.
clean-css-cli 설치

CSS는 뛰어난 언어입니다. 하지만 CSS가 모든 면에서 좋을수는 없습니다. 그래서 어떤 이들은 CSS에 편리한 기능을 더한 새로운 언어를 만들고 이 언어에 따라서 작성한 코드를 어떤 프로그램으로 실행시키면 결과적으로 CSS를 만들어주는 도구들을 개발했는데요. 이런 도구를 preprocessor이라고 합니다. 여기서는 이런 도구들의 개념과 간단한 사용법을 알아봅니다.

아래는 대표적인 preprocessor들입니다

http://lesscss.org/ (온라인 변환기)

http://sass-lang.com/

https://csspre.com/compile/ (온라인 변환기)

아래는 이런 도구들에 대해서 비교한 사이트입니다.

https://csspre.com/compile/

1. 네이스팅 기능

라이브러리(library)는 도서관이라는 뜻입니다. 도서관이란 어떤 공간인가요? 공용으로 책을 공유하는 공간/체계를 우리는 도서관이라고 부릅니다. 소프트웨어에서 라이브러리는 도서관의 이런 역할을 비유로 채택한 것입니다. 즉 많은 곳에서 공통적으로 사용될 수 있는 코드를 부품화한 것이 라이브러리입니다. CSS에도 이런 라이브러리가 많습니다. 여기서는 중요한 라이브러리들의 사용법을 알아봅니다.

딩벳폰트는 폰트 대신 어떤 문자에 해당하는 이미지로 이루어진 폰트를 의미합니다. fontello는 딩벳이나 아이콘을 폰트로 제공하는 여러 서비스를 모아둔 서비스입니다. 특히 SVG 파일을 업로드하면 폰트로 만들어주기도 합니다.

egoing

fontawesome.com

http://fontello.com/

thenounproject.com