- 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는 긴 값을 기준으로 원형 그라데이션을 넣어준다는 의미다
- linear-gradient(진행방향,색상지정점,색상지정점2,…) : 최소 생삭을 3개 이상 지정해야함
- 그림자 효과
- box-shadow: 가로픽셀,세로픽셀,퍼짐픽셀,색상 설정가능
가로픽셀과 세로픽셀의 경우 음수도 가능(왼쪽,위 방향의 경우)
- box-shadow: 가로픽셀,세로픽셀,퍼짐픽셀,색상 설정가능
- 배경(background)-size,origin,clip,image
- origin : 배경 이미지의 위치를 결정할 기준 설정
border / padding / content - clip : 해당 요소의 배경을 어느 영역까지 설정할지를 결정
- image : 여러 개의 배경 이미지를 설정
여러개를 넣을 경우 뒤에서부터 아래로 깔린다 - clip : 배경 이미지를 나타내줄 위치 : content를 할 경우 기존 padding이나 border구간에도 보이던 그림 일부들이 안보이게 된다
- origin : 배경 이미지의 위치를 결정할 기준 설정
- 추가되거나 변경된 대표적인 기능