CSS 자주 사용되는 속성

bungouk6829·2020년 3월 23일
0

HTML , CSS

목록 보기
5/12

학습자료

ofcourse css 속성 자료

transition 사용법 (coding factory 티스토리)

CSS의 자주 사용되는 속성

속성:값형태로 사용되며 여러 속성을 줄 때는 세미콜론(;)으로 구분한다.
구글크롬의 개발자모드(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부터 지원한다.

  1. 해당요소에 추가할 css 전환(transition) 효과를 설정한다.
  2. 추가할 전환 효과가 지속될 시간을 설정한다.
  • 속성
    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 : 부모 요소 상속

transition 속성 한번에 쓰는 예제 )
#box{transition:property timing-function delay | initial | inherit}

브라우저 접두어

어떠한 속성들은 브라우저마다 css가 달라서, 브라우저 별 접두어를 css속성 앞에 붙인다.

  • 접두어
    -webkit- -> 구글 , 사파리
    -moz- -> 파이어폭스
    -ms- -> 익스플로러 (보통 생략)
    -o- -> 오페라
profile
개발스터디

0개의 댓글