Rainbow
css에서 자주 사용되는 속성 본문
SS의 자주 사용되는 속성
속성:값형태로 사용되며 여러 속성을 줄 때는 세미콜론(;)으로 구분한다.
구글크롬의 개발자모드(f12)를 사용하면 쉽다.
width , height
width(가로길이), height(세로길이)를 의미한다.
inline 요소에서는 적용되지 않는다.
- 값의 단위
auto -> 기본값, 브라우저가 계산한 너비
px -> 픽셀
% -> 부모 요소에 상대적인 너비
initial -> 기본값으로 초기화
inherit -> 부모 요소로부터 상속 받은 값
margin, padding
margin은 바깥쪽 여백, padding은 안쪽 여백을 의미한다.
두 속성 모두 방향을 지정할 수 있다.
width,height 속성과 마찬가지로 px, auto 등 값을 사용한다.
- ex )
margin:10px -> 상하좌우 모두 10px 여백
margin:20px 10px -> 상하 20px , 좌우 10px 여백
margin:40px 30px 20px 10px -> 위 40px, 오른쪽 20px, 아래 20px, 왼쪽10px 여백
margin:40px 30px 10px -> 위 40px, 좌우 30px, 아래 10px 여백
방향지정 ex )
margin-top -> 위 여백 지정
margin-bottom -> 아래 여백 지정
margin-left -> 왼쪽 여백 지정
margin-right -> 오른쪽 여백 지정
box-sizing
width 와 height 를 원하는 값으로 지정하여도, padding 이나 border 옵션을 주게 되면 가로길이나 세로길이가 그만큼 더해져서 요소가 커진다. 이는 box-sizing 옵션으로 바꿀 수 있다. (box-sizing default값이 content-box 이기 때문에 요소가 커지는 것임)
- 값
content-box -> default값이다. width를 지정하여도 padding이나 다른 속성들이 들어오면 요소가 그만큼 커진다.
border-box -> 다른 속성을 주어도 지정해둔 width 와 height의 크기를 벗어나지 않는다.
- css에서 width 속성을 100% 주면 부모의 width 만큼 너비가 설정된다. 하지만 box-sizing 속성의 값이 content-box 일때 width:100% 나 padding , border 등을 주게되면 부모의 영역을 초과해서 너비가 정해질 때가 있다. 이런 문제를 해결하기 위해서는 box-sizing 속성값을 border-box로 설정하거나 width를 auto를 주어 해결한다.
color
글자의 색상을 지정한다.
- 값
inherit -> 기본값 , 부모의 색상을 가져온다
red 또는 blue -> 이미 css로 정의된 색상
#000 또는 #FFFFFF -> 16진수의 색상코드
rgb(255,255,255) -> rgb 색상
rgba(200,100,150,0.5) -> 알파(투명도)가 적용된 rgba 색상
font
글자의 폰트를 정의한다. 여러개의 속성들이 존재하며 , font라는 하나의 속성에 여러개의 속성들의 값을 모두 쓸 수 있다.
- font 의 속성들
font-style -> 기울기 등의 스타일 지정
font-weight -> 글자 두께
font-variant -> 글꼴 변형 (소문자를 대문자로 바꾸는 등)
font-size -> 글자 크기
line-height -> 줄 간격
font-family -> 글꼴
- font-style 값 >> nomal : 기본 >> italic : 기울기
- font-weight 값
100~900 사이의 숫자를 통해 설정하거나, 지정된 값을 사용한다.
lighter (100)
normal (400)
bold (700)
bolder (900) - font-size 값
글자 크기로, px 나 em(반응형웹에서 다룬다)등을 사용한다. - font-family 값
font 태그의 face 속성과 같다.
통상적으로 구글폰트에서 가져와서 head내부에 link태그로 External방식으로 적용시킨다
- font 속성에 한번에 정의 예제 )
font : font-style font-variant font-wight font-size/line-height font-family
text-align
텍스트의 정렬 방향을 지정한다.
- 값
left
right
center
jutify -> 양쪽 정렬
background
태그의 배경을 지정하는 속성으로, 여러개의 속성들이 존재한다. font 속성처럼 여러개의 속성을 background 속성 하나만으로 한꺼번에 쓸 수 있다.
- 속성
background-color -> 배경 색
background-image -> 배경 이미지
background-repeat -> 배경 이미지 반복 여부
background-position -> 배경 이미지 위치
- background-color 값
color 의 값과 동일하다 - background-image 값
배경이미지를 설정하며 , 이미지 경로를 지정한다.
ex ) background-image:url("이미지 경로나 이미지url주소") - background-repeat 값
no-repeat -> 반복안함
repeat-x -> x축으로 반복
repeat-y -> y축으로 반복
repeat -> 모든 방향으로 반복 - background-position 값
숫자값 (x , y)
left
top
center
bottom
right
- background 속성 한번에 정의 예제 )
#box{background: background-color background-image background-repeat background-position}
border
테두리를 지정하는 속성이다. 여러 속성들이 존재하며, border 속성 하나만으로 여러 속성을 한꺼번에 쓸 수 있다.
- 속성
border-width -> 테두리의 두께 px 단위사용
border-style -> 테두리의 스타일
border-color -> 테두리의 색상 .. color 값과 동일함
- border-style 값
solid 실선
dotted 점선
dashed 조금긴 점선
- 특정 테두리의 방향만 따로 설정
border-top
border-bottom
border-left
border-right
- 특정 방향만 색, 두께, 스타일을 따로 지정할 수 있다.
ex ) border-bottom-color:red;
- border 속성으로 한꺼번에 지정하기 예제 )
#box{border:border-width border-style border-color;}
border-radius
테두리를 둥글게 만들어주는 속성이다. px와 % 단위를 사용한다. border 속성 없이도 사용 가능하다.
총 4개의 모서리를 각각 다른 값으로 줄 수 있다. 4개의 값을 띄어쓰면 왼쪽 위 부터 시계 방향으로 각자 다른값을 지정한다.
- ex ) #box{border-radius:5px;}
- 여러 방향 다르게 지정 ex ) #box{border-radius:1px 2px 3px 4px;}
visibility
4가지 값을 가지며, default값은 inherit 이다.
- 속성
visible -> 보임
hidden -> 숨김 (대신 영역은 차지함)
collapse -> 겹치도록 지정 (테이블 행과 열 요소만 지정할 수 있으며, 그외 요소 지정 시 hidden으로 해석)
inherit -> default 값, 부모 요소의 값을 상속
display
요소를 어떻게 보여줄지 지정함. 4가지 값을 가짐.
- 속성
none -> 보이지 않음
block -> 블록 박스 (세로)
inline -> 인라인 박스 (가로)
inline-block -> 블록과 인라인의 중간 형태
- none
요소를 렌더링 하지 않음. visibility 의 hidden과 달리 영역도 차지하지 않음. - block
가로 영역을 모두 채우며, 줄 바꿈이 됨 - inline
span 태그 처럼 block 과 달리 줄 바꿈이 되지 않음. width와 height를 지정할 수 없다. - inline-block
block 과 inline 의 중간 형태이다. 줄 바꿈이 되지 않지만 크기를 지정할 수 있다.
float
해당 요소를 어떻게 배치 할건지 지정하는 속성이다.
left 나 right 를 통해 배치할 시 diplay 속성은 무시된다.
이후 요소에 clear 속성이 있으면 페이지의 흐름이 달라진다.
- 속성
inherit -> 부모 요소 상속
left -> 왼쪽에 배치
right -> 오른쪽에 배치
none -> 배치하지 않음
clear
float 속성을 통해 태그를 배치한 이후 문서의 흐름을 제거하기 위해 사용된다.
방향에 따라 3가지 속성을 사용할 수 있다.
- 값
left -> 좌측 배치 제거
right -> 우측 배치 제거
both -> 양쪽 모두 제거
- after 가상선택자와 float
clear 해주기 위해서는 float 된 요소 다음에 clear를 지정해야하는 번거로움이 있다. 이때 가상 선택자를 이용하면 편하다. 배치를 제거하고 싶은 컨테이너에 다음 예제를 적용하면 된다.
ex ) .box:after{clear:both;}
position
요소를 어떻게 위치시킬지 정의한다. 5가지 값을 가진다.
- 값
static -> default값, 다른 태그와의 관계에 의해 자동으로 배치됨 . 임의로 설정 불가
absolute -> 절대 좌표와 함께 위치를 지정해 줄 수 있다.
relative -> 원래 있던 위치를 기준으로 좌표를 지정한다.
fixed -> 스크롤과 상관없이 항상 문서 최 좌측 상단을 기준으로 좌표를 고정한다.
inherit -> 부모 태그를 상속받음.
-
absolute 옵션은 부모 태그의 position 속성값이 static이 아니면 부모의 엘리먼트에서 위치가 이동된다.
-
position 속성을 static을 제외한 값을 주면 top , left , bottom , right 속성을 사용하여 원하는 곳에 요소를 배치 시킬 수 있다.
cursor
해당 요소 위에 위치하는 마우스 커서의 모양을 바꿀 수 있다.
- 값
auto -> 자동
default -> 기본 값 (화살표)
pointer -> 손가락 모양 (클릭 가능한 버튼)
wait -> 로딩
등등 다양한 속성값들이 존재한다.
text-decoration
글자의 데코레이션을 지정한다.
- 값
none
overline -> 윗줄
underline -> 아랫줄
line-though -> 가운뎃줄
underline overline -> 윗줄과 아랫줄
- text-decoration 속성은 a:hover 또는 a:visit , a:visited 가상클래스와 함께 사용하면 좋다.
overflow
요소가 영역을 벗어날때 지정하는 속성.
- 값
visible -> 요소가 영역을 벗어나도 보여줌
hidden -> 요소가 영역을 벗어나면 숨김
scroll -> 스크롤바를 만들어 벗어난 영역이 스크롤되게 함
z-index
position 속성을 이용하면 요소를 겹치게 놓을 수 있는데, 이때 요소들의 겹치는 순서를 z-index로 지정한다. 값은 정수이며 숫자가 클 수록 위로 올라오며 작을 수록 아래로 내려간다.
transition
트랜지션 css 는 css 속성을 변경할때 애니메이션 속도를 조절하는 방법으로 쓰인다. 주로 javascript와 함께 쓰인다. 브라우저마다 달라서 속성마다 브라우저 접두어를 사용하여야 한다.
여러 속성들이 존재한다. 모든 transition 속성들을 transition 속성 하나만으로 한꺼번에 쓸 수 있다. IE는 버전 10부터 지원한다.
- 해당요소에 추가할 css 전환(transition) 효과를 설정한다.
- 추가할 전환 효과가 지속될 시간을 설정한다.
- 속성
transition-delay -> 전환효과의 시작을 연기하는 시간을 설정한다.
transition-duration -> 전환효과 총 시간을 설정한다.
transition-property -> 요소에 추가할 전환효과를 설정한다.
transition-timing-function -> 전환효과의 진행속도를 설정한다.
- transition-delay
transition-delay : time | initial | inherit
기본값은 0s 이다.
시간 단위는 초(s) 또는 1/1000(ms)를 사용한다.
initial : 기본값으로 설정함
inherit : 부모 요소 상속 - transition-duration
transition-delay와 같다 - transition-property
transition-property : none | all | property | initial | inherit
none : 모든 속성에 적용하지 않음
all : 모든 속성에 적용
property : 속성을 정한다. 여러개 속성을 지정할 경우 쉼표로 구분한다.
initial : 기본값으로 설정함
inherit : 부모 요소 상속 - transition-timing-function
* transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(n,start|end) | cubic-bezier(n,n,n,n) | initial | inherit- default값은 ease 이다
ease : cubic-bezier( 0.25, 0.1, 0.25, 1 )과 같다.
linear : cubic-bezier( 0, 0, 1, 1 )과 같다.
ease-in : cubic-bezier( 0.42, 0, 1, 1 )과 같다.
ease-out : cubic-bezier( 0, 0, 0.58, 1 )과 같다.
ease-in-out : cubic-bezier( 0.42, 0, 0.58, 1 )과 같다.
step-start : steps( 1, start )와 같다.
step-end : steps( 1, end )와 같다.
steps( n, start|end ) : n단계로 나누어서 변화한다. start 또는 end를 입력하지 않으며 end로 처리한다.
cubic-bezier( n, n, n, n ) : n에는 0부터 1까지의 수를 넣는다.
initial : 기본값으로 설정한다.
inherit : 부모 요소 상속
- default값은 ease 이다
transition 속성 한번에 쓰는 예제 )
#box{transition:property timing-function delay | initial | inherit}
브라우저 접두어
어떠한 속성들은 브라우저마다 css가 달라서, 브라우저 별 접두어를 css속성 앞에 붙인다.
- 접두어
-webkit- -> 구글 , 사파리
-moz- -> 파이어폭스
-ms- -> 익스플로러 (보통 생략)
-o- -> 오페라
'web > css' 카테고리의 다른 글
부모 선택자/자식 선택자/자손 선택자에 대해 (0) | 2020.11.25 |
---|---|
css 선택자 이해 (0) | 2020.11.04 |
box-sizing 차이점 (0) | 2020.11.03 |
[css]box-sizing 속성 차이점 (0) | 2020.11.03 |
margin, padding 차이점 (0) | 2020.11.02 |