Skip to content

CSS3

Jump to bottom
yjkwon07 edited this page Jul 22, 2019 · 3 revisions

CSS

HTML과 CSS가 만나는 법

1. 선택자

1-1. 선택자와 선언

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

1-2. 선택자의 종류

1. 태그 선택자

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

li{color:red}

2. 클래스 선택자

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

3. 아이디 선택자

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

#select{font-color:50px;}

1-3. 부모 자식 선택자

practice

Answer

CheatSheet

1-4. 가상 클래스 선택자(pseudo)

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

1-4-1. 링크와 관련된 가상 클래스 선택자

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

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

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

2. 타이포그래픽

2-1. font-size

1. rem

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

2. px

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

3. em

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

2-3. color

Color FlatUI

2-4. text-align

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

left
right
center
justify

2-5. font

1. font-family

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

2-6. 서체

고정폭과 가변폭

2-7. 웹폰트

3. 조화

3-1. 상속(inheritance)

3-1-1. 상속을 하는 속성과 하지 않는 속성

w3

3-2. stylish

stylish

3-3. 캐스케이딩

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

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

style attribute > id selector > class selector > tag selector

포괄적인것이 더 작다.

4. 레이아웃!!!!

4-1. 인라인 VS 블럭레밸

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

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

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

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

4-2. 박스모델

goJsBin

4-3. box-sizing

goJsBin

4-4. 마진겹침 현상!!!

참고

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

참고

code

4-5. 포지션

offset!!!!

static
relative
absolute
fixed

1. relative

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

relative

2. absolute

  • 부모 중에 포지션 타입이 지정된 부모를 기준으로 해서 위치가 지정이 되고 부모와의 관계성이 끊기기 때문에 자신의 콘텐츠 크기만 해진다. css속성이 끊어지는것은 아니다.
  • absoulte의 부모를 찾는다. default -> body
  • absoulte의 left, right는 부모 엘리먼트를 기준으로해서 자기가 원래 위치해야 될 그 위치에 기본값으로 준다.
  • absoulte를 하게되면 더 이상 부모의 소속이 아니다.
  • 해당 엘리먼트의 크기가 크기가 자신의 content size 설정이 된다.

absolute

3. fixed

fixed

4-6. flex

4-6-1. flex의 여러 속성들

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

4-7. media query

w3schools.com

4-8. float

float:left

clear:left , right, both;

egoing

4-9. 다단(multi column)

다단(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>

5. 그래픽

5-1. 배경(background)

{
  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

5-2. 필터(filter)

CSS filter playground

CSS-TRICKS - filter

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

5-3. 혼합(blend)

5-3-1. background-blend-mode

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

5-3-2. mix-blend-mode

컨텐트와 배경 사이의 블랜드 효과 codepen.io 블랜드 예제

5-4. 변형(transform)

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

MDN_transform

hover.css

CSShake

magic animation

5-5. SVG

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

6. 모션그래픽

6-1. 전환(transition)

전환은 효과가 변경되었을 때 부드럽게 처리해주는 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


7. 유지보수


              


          



  
          

            


            
Clone this wiki locally