CSS3

CSS level3는 CSS level2.1와 달리 모든 명세가 포함된 버전이 아닌 모듈단위로 개발되고 있으며, 표준화가 모듈단위로 진행되고 있음. 이중 몇몇 모듈을 현재 Recomendation(권고안) 단계에 있으며, Working Draft(초안) 단계에 머물러 있는 모듈도 있음. Css3 process.jpg

CSS3는 표준안이 아직 확정되지 않은 상태이기 때문에 브라우저들은 CSS3속성을 실험적으로 제공
이를 위해 속성이나 속성 값 앞에 웹 브라우저별로 접두사(vender prefix)를 제공하고 있으며 이 접두사의 경우 웹브라우저별로 다르기 때문에 하나의 속성을 선언하기 위해서는 여러번의 동일한 선언을 지정해야 함.

CSS3 접두사(prefix)

파이어 폭스 : -moz-
크롬, 사파리 : -webkit-
오페라 : -o-
인터넷 익스플로러, 엣지 브라우저 : -ms-
벤더 프리픽스 : http://css3please.com/

가상 선택자(Pseudo - classes Selector)

가상 요소 선택자

:before 콘텐츠 영역의 앞
:after 콘텐츠 영역의 뒤
:first-line 첫줄
:first-letter 첫 글자

가상 클래스 선택자

:first-child 자식 중 첫번째 객체
:last-child 자식 중 마지막 객체
:nth-child(n) 자식 중 n번째 객체
:link 링크 객체
:visited 이미 방문한 페이지
:hover 마우스를 올려놓은 상태
:active 활성화 상태
:focus 포커스 상태(마우스로 클릭한 후, tab 인덱싱)
:enabled 폼태그의 활성화 상태
:disabled 폼태그의 비활성화 상태
:checked 폼태그의 체크상태

박스 모델

min-width:, min-height: 최소 사이즈 (이하로 줄어들지 않는다)
max-width:, max-height: 최대 사이즈 (이상으로 커지지 않는다)

  div {min-width:200px;}
  div {min-height:100px;}
  div {max-width:200px;}
  div {max-height:50%;}

border-radius:left-top, right-top, right-bottom, left-bottom : 보더의 테두리 둥글게

  div{border-radius:5px;}
  div{border-radius:5px 10px 15px 20px;}

타이포 그라피

@font-face

일반적인 속성과 달리 CSS에서 사용할 font-family의 이름과 자원을 정의할 수 있는 규칙으로, 사용자의 환경에 설치된 폰트 또는 제작자가 서버에서 제공한 폰트를 다운로드하여 사용할 수 있도록 하는 역할

  @font-face {
  	font-family : 'Nanum' ;
  	src : url('webfont/NanumGothic.eot') ;
  	src : 	url('webfont/NanumGothic.eot?#iefix') format('embedded-opentype'), 
  			url('webfont/NanumGothic.woff') format('woff'), 
  			url('webfont/NanumGothic.ttf') format('truetype') ; 
  } 
  .font {font-family:" ", "", sans-serif;} 
  .webFont {font-family:'Nanum';}

text-shadow

텍스트에 그림자를 지정
text-shadow: offset-x offset-y blur-radius color 텍스트에 그림자를 표시 : 가로거리, 새로거리, 흐림정도, 색상

  .shadow01 {text-shadow:5px 5px 10px rgba(0,0,0,0.8);}

text-overflow

텍스트가 넘쳤을 경우 표현방식
clip : 자름
ellipsis : 생략

기본형

  overflow: hidden;
  text-overflow: clip; /*글을 자름*/
  text-overflow: ellipsis; /* ... 표시하며 글을 자름 */
  text-overflow: "----";  /* 특정문자(----)표시하며 글을 자름. firefox에서 밖에 동작하지 않음*/

예제

  <!DOCTYPE html>
  <html>
  <head>
  <style> 
  div.a {
    white-space: nowrap; 
    width: 50px; 
    overflow: hidden;
    text-overflow: clip; 
    border: 1px solid #000000;
  }
  
  div.b {
    white-space: nowrap; 
    width: 50px; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
  }
  
  div.c {
    white-space: nowrap; 
    width: 50px; 
    overflow: hidden;
    text-overflow: "----"; 
    border: 1px solid #000000;
  }
  </style>
  </head>
  <body>
  
  <div>The text-overflow Property</div>
  
  <p>The following two divs contains a text that will not fit in the box.</p>
  
  <div>text-overflow: clip (default):</div>
  <div class="a">Hello world!</div>
  
  <div>text-overflow: ellipsis:</div>
  <div class="b">Hello world!</div>
  
  <div>text-overflow: "----" (user defined string):</div>
  <div class="c">Hello world!</div>
  
  <p><strong>Note:</strong> The text-overflow: "<em>string</em>" only works in 
  Firefox.</p>
  
  </body>
  </html>

*출처 : https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

word-wrap

문자 처리 방식
word-wrap: normal; : 기본 처리 방식, 띄어쓰기 되어있지 않는 문자는 내리지 않는다.
word-wrap: break-word; : 브레이크 워드, 띄어쓰기 되어있지 않아도 공간이 없다면 내린다.

색상 및 배경

rgb, rgba, hsl, hsla & spacity

.color01 {color:rgb(255,0,0);} 빨강, 파랑, 초록
.color02 {color:rgba(255,0,0,0.5);} 빨강, 파랑, 초록, 불투명도

HSL은 색조(hue), 포화(saturation), 밝기(lightness)로 컬러를 표현하는 방법

.color03 {color:hsl(27,88%,58%);} 색상, 채도, 명도
.color04 {color:hsla(27,88%,58%, 0.7);} 색상, 채도, 명도, 불투명도

backgrounds & borders

box-shadow

예제 : https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-shadow
참고 : https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow

border-radius

예제: https://www.w3schools.com/cssref/css3_pr_border-radius.asp

gradient

예제: https://www.w3schools.com/css/css3_gradients.asp

transforms, transitions, animations

transforms

변형(transforms)에 관한 내용들.
2D : https://www.w3schools.com/css/css3_2dtransforms.asp
3D : https://www.w3schools.com/css/css3_3dtransforms.asp

transitions

https://www.w3schools.com/css/css3_transitions.asp

  <!DOCTYPE html>
  <html>
  <head>
  <style> 
  div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
  }
  
  div:hover {
    width: 300px;
  }
  </style>
  </head>
  <body>
  
  <h1>The transition Property</h1>
  
  <p>Hover over the div element below, to see the transition effect:</p>
  <div></div>
  
  <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
  
  </body>
  </html>

transition-property
transition-duration
transition-timing-function

  #div1 {transition-timing-function: linear;}
  #div2 {transition-timing-function: ease;}
  #div3 {transition-timing-function: ease-in;}
  #div4 {transition-timing-function: ease-out;}
  #div5 {transition-timing-function: ease-in-out;}

- ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
- linear - specifies a transition effect with the same speed from start to end
- ease-in - specifies a transition effect with a slow start
- ease-out - specifies a transition effect with a slow end
- ease-in-out - specifies a transition effect with a slow start and end
- cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
- ease, linear, step-end
- steps(4, end)
transition-delay
transition: ;

엔드 이벤트

el.addEventListener(“transitionend”, updateTransition, true);

animations

https://www.w3schools.com/css/css3_animations.asp
https://webdesign.tutsplus.com/ko/tutorials/a-beginners-introduction-to-css-animation–cms-21068

  /* The animation code */
  @keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
  }
  
  /* The element to apply the animation to */
  div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
  }

  /* The animation code */
  @keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
  }
  
  /* The element to apply the animation to */
  div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
  }

animation-name
animation-duration
animation-delay
animation-iteration-count : 반복횟수
- 3, infinite
animation-direction
- reverse(역재생), alternate(왔다 갔다), alternate-reverse(역재생으로 시작하는 왔다갔다)
animation-timing-function
- linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n), steps(5, end)
- cubic-bezier를 만들기 위한 도구 : https://matthewlein.com/tools/ceaser
animation-fill-mode : 애니메이션의 전과 후에 애니메이션에서 할당된 스타일을 유지하는지 여부
- none, forwards, backwards, both
animation: example 5s linear 2s infinite alternate;
animation-play-state
- paused, running, initial, inherit
파이어 폭스 계단현상 : outline: 1px solid transparent;

다단 (column)

https://developer.mozilla.org/ko/docs/CSS3_Columns

기본형

div{
  columns: 100px 3; /* 다단: 최소100px, 최대3단 */
}

예제1

<style>
        .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>

예제2

  <style>
      .col1{
          columns: 100px 3;
          /* minimum 100px, maximum 3 cols */
          /* 한 단이 최소 100px을 충족 가능하면 단 수가 증가함 (200px 2단, 300px 3단) */
          /* 최대 3단이 만들어지만 가로 길이에 상관 없이 단 수를 유지함 */
      }
      #px100{
          width: 100px;
          border: solid 1px black;
      }
  </style>
  <div class="col1">
  1절 - 동해물과 백두산이 마르고 닳도록
  하느님이 보우하사 우리나라만세
  무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세
  
  2절 - 남산위에 저 소나무 철갑을 두른듯
  바람서리 불변함은 우리기상 일세
  무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세
  
  3절 - 가을하늘 공활한데 높고 구름없이 
  밝은달은 우리가슴 일편단심일세
  무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세
  
  4절 - 이 기상과 이 맘으로 충성을 다하여
  괴로우나 즐거우나 나라사랑하세
  무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세
  </div>
  
  <div id="px100">100px</div>

지원하는 웹 브라우저 확인

https://www.w3schools.com/cssref/css3_pr_columns.asp

flex

기본형

  #부모parent { display:flex; }
  #자식child { flex:비율 }

예제

  <style>
      .flex1{
          display: flex;
          width: 100%;
      }
      #child1{ flex: 1; background-color: red; }
      #child2{ flex: 2; background-color: green; }
      #child3{ flex: 3; background-color: blue; }
  </style>
  <div class="flex1">
      <div id="child1">content1</div>
      <div id="child2">content2</div>
      <div id="child3">content3</div>
  </div>

justify-content

<style>
    #header {
        display: flex;
        justify-content: space-between;
    }
</style>
<div id="header">
<div>content1</div>
<div>content2</div>
<div>content2</div>
</div>

출처: https://naradesign.github.io/flex-justify-align.html
justify-content
justify-content : flex-start(Initial), flex-end, center, space-between, space-around
align-items
flex-wrap:wrap 사용시
align-items : flex-start, flex-end, center, baseline, stretch(Initial)
align-self
독립적으로 정렬방식을 바꿀 수 있음
align-self : auto(Initial), flex-start, flex-end, center, baseline, stretch
align-content
align-content : flex-start, flex-end, center, space-between, space-around, stretch(initial)

키워드 들

column,flex,inline-block
transform, transitions, animation
키워드 참고 : http://www.malgum.com/board/study/board_view.asp?page=1&num=204

CSS3

CSS3 접두사(prefix)

가상 선택자(Pseudo - classes Selector)

가상 요소 선택자

가상 클래스 선택자

박스 모델

타이포 그라피

@font-face

text-shadow

text-overflow

기본형

예제

word-wrap

색상 및 배경

rgb, rgba, hsl, hsla & spacity

HSL은 색조(hue), 포화(saturation), 밝기(lightness)로 컬러를 표현하는 방법

backgrounds & borders

box-shadow

border-radius

gradient

transforms, transitions, animations

transforms

transitions

엔드 이벤트

animations

다단 (column)

기본형

예제1

예제2

지원하는 웹 브라우저 확인

flex

기본형

예제

justify-content

justify-content

align-items

align-self

align-content

키워드 들