독학 - CSS3

폰트 변경하기

선택자{font - famiily:1순위 폰트,2순위 폰트 ,3순위 폰트}

 

글자와 글자 사이 간격 조정하기

선택자{letter-spacing:숫자 px 또는 em 등}

 

줄 간격 조정하기

선택자{line-height:값 단위}

 

HTML 엘리먼트의 위치 변경하기

static

position값이 static이면 top,left,right,bottom 속성이 적용되지 않는다.

 

absolute

부모 엘리먼트의 position 속성값이 absolute , fixed, relative인 엘리먼트 안에서 자신이 원하는 곳에 해당 박스를 위치 시킬수 있다.

 

relative

자신의 위치를 기준으로 이동 

 

fixed 

스크롤하여 페이지의 어디에 위치하든 관계없이 해당 엘리먼트가 화면 위치에 고정 

 

배경 꾸미기 

배경을 이미지로 적용

선택자{background-image:url('이미지주소')}

 

배경이미지 사이즈 조정하기

background-size:

100px 배경 이미지의 사이즈가 가로 100px 세로 100px

contatin : 배경 이미지가 잘리는 부분 없이 모두 표시

cover : 배경 이미지가 잘리는 부분이 있더라도 꽉 차게 표시

 

배경으로 그라디언트 적용

선택자{background:gradient(20deg , skyblue , hotpink )}

 

배경의 투명도 적용

선택자{opacity:0.5}

 

배경에만 투명도 적용

background 속성에 alpha값 사용

 

background 속성에 투명도 적용

선택자{background:rgba(255,255,255,0.5)}

투명도 안하고 background:rgb(255,255,255) 가능

 

외곽선 긋기

border

 

한면씩 외곽선 적용

border-top

border-right

border-bottom

border-left

 

svg태그에 사용되는 속성

stroke 선색상

stroke-width 선 굵기

stroke-linecap 선 끝의 모양 

stroke-dasharray 선 스타일

fill 색 채우기

 

line태그

<svg>

    <line x1="가로 시작 위치" x2="가로 끝 위치" y1="세로 시작 위치" y2="세로 끝 위치" /> 

</svg>

 

circle태그 

<svg>

    <circle x1="가로 시작 위치" x2="가로 끝 위치" y1="세로 시작 위치" y2="세로 끝 위치" /> 

</svg>

 

ellipse태그(타원)

<svg>

    <elipse cx="가로 위치" c1="세로 위치" r="원의 크기" /> 

</svg>

 

rect태그(사각형)

<svg>

    <rect x="가로 위치" y="세로 위치" width="가로 길이" height="세로 길이" /> 

</svg>

 

polygon태그(다각형)

<svg>

    <polygon points="xy값이 짝을 이루어 여러 포인트 생성 /> 

</svg>