2/21-1

Posted by:

|

On:

|

  • emmet(자동완성) : 태그 이름을 적으면 관련 태그가 자동완성 해주는 기능
    선택자 형식으로 작성해도 완성된다
    • p.classname의 경우 p 태그에 class명이 classname라고 작성된다
    • div>p의 경우 div 태그 안에 p 태그가 완성된다
    • div.list>ul>li*3 의 경우 list라는 이름이 class명인 div 태그 안에 ul 태그 안에 li 태그가 3개 만들어진다. (특정태그)*(N-숫자)
      여기에 alt키를 누르고 다른곳에 커서를 가져다 대면 여러곳에서 똑같은 내용을 작성 할 수 있다
  • 그 외 CSS
    • From 요소에도 디자인을 줄 수 있다-아이콘이나 이미지 삽입
  • @규칙 : W3C에서 규정하고 있는 몇몇 규칙들
    • import : 다른 스타일 시트에서 스타일 규칙을 가져 올 수 있는 규칙
    • font-face : 웹 폰트를 정의 할 때 사용하는 규칙, 컴퓨터에 설치되어 있지 않은 글꼴을 웹 브라우저가 사용 할 수 있게 해줌
    • media : 규칙을 통해 서로 다른 미디어 타입을 위한 맞춤식 스타일 시트를 지원
  • CSS3 모듈
    • 추가되거나 변경된 대표적인 기능
      • 선택자 Level.3
      • 미디어 쿼리 Level.3
      • 색 Level.3
      • 네임스페이스
      • 더 자세한 내용은 W3C 공식 사이트에 있음
    • 밴더 프리픽스 : 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공 할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)
      -ms-(인터넷익스플로어) -webkit-(크롬or사파리) -moz-(파이어폭스) -o-(오페라) 가 있다
    • 색 : RGBA(RGB+Alpha-투명도),HSL(hue, saturation, lightness),HSLA(HSL+Alpha),opacity(투명도)
    • 선형 그라데이션
      • linear-gradient(진행방향,색상지정점,색상지정점2,…) : 최소 생삭을 3개 이상 지정해야함
        단일은 background-color 로 처리하고, 2개의 경우 -webkit-를 추가하면 사용가능하다
        진행방향을 2개 조합(left bottom)도 가능하고 각(deg)도 가능하다
        색의 경우 #6자리(16진법FF/FF/FF)이후에 숫자a를 넣으면 투명도가 추가된다
      • radial-gradient(모양크기 at 중심점, 색상지점정, 색상지정점2,…)
        색상지정점의 경우 색상 뒤에 %를 붙이면 크기의 %만큼 색이 채워진다. 누적이라고 생각해야한다.(10%→30%→50%→70%→100% 라고 가정하면 0~10%는 첫번째, 10%~30%는 두번째, 30%~50%는 세번째, 50%~70%는 네번째, 70%~100%는 마지막)
        그렇기 때문에 마지막은 생략해도 100%까지 자동으로 잡힌다.
        closest-side,farthest-side : 가로세로의 길이가 다를 경우 closest는 짧은 값, farthest는 긴 값을 기준으로 원형 그라데이션을 넣어준다는 의미다
    • 그림자 효과
      • box-shadow: 가로픽셀,세로픽셀,퍼짐픽셀,색상 설정가능
        가로픽셀과 세로픽셀의 경우 음수도 가능(왼쪽,위 방향의 경우)
    • 배경(background)-size,origin,clip,image
      • origin : 배경 이미지의 위치를 결정할 기준 설정
        border / padding / content
      • clip : 해당 요소의 배경을 어느 영역까지 설정할지를 결정
      • image : 여러 개의 배경 이미지를 설정
        여러개를 넣을 경우 뒤에서부터 아래로 깔린다
      • clip : 배경 이미지를 나타내줄 위치 : content를 할 경우 기존 padding이나 border구간에도 보이던 그림 일부들이 안보이게 된다