본문 바로가기

CSS

CSS 추가 속성 2 position : 요소의 배치 기준을 정한다. static : 기본값으로 글의 흐름에 따라 원래 있어야 할 위치에 배치한다. top, right, bottom, left(이하 '4가지 속성')의 속성값에 영향을 받지 않는다. relative : 기본 배치를 기준으로, 즉 static의 배치를 기준으로 위치를 배치한다. 4가지 속성의 속성값에 따라 배치한다. 각 속성은 그 위치 기준으로 얼마나 떨어져 있는지를 나타낸다. ex) top : 10px. 위에서 10px 떨어뜨려서 배치한다. static의 위치를 기준으로 삼기 때문에 위 4가지 속성을 지정하지 않으면 static의 위치와 같다. 글의 흐름에서는 relative의 위치를 static과 같이 인식하기 때문에 relative와 4가지 속성에 따라 위.. 더보기
CSS 추가 속성 1 background- ~ : image : 배경 이미지. 값으로 url(' ~ ')에 이미지의 주소를 넣으면 된다. 특수문자가 들어갈 경우 따옴표로 감싸줘야 한다. 따옴표로 감싸주고, 안 감싸주고를 구분하는 것보다는 그냥 감싸주는 게 나아 보인다. linear-gradient()도 같이 넣어 줄 수 있다. linear-gradient()는 이미지가 적용되는 곳에 색을 입힐 수 있는 함수이다. repeat : 배경 이미지의 반복 설정. 기본 값으로 반복이 되기 때문에 반복을 원하지 않을 경우 no-repeat를 값으로 지정하면 된다. position : 배경 이미지의 위치. center를 통해 중앙에 위치시킬 수 있고, 그 외의 값으로 다른 위치에 배치시킬 수 있다. size : 배경 이미지의 크기. co.. 더보기
CSS 기본 속성 background-color : 배경색 color : 글자색 font-family : 글꼴. 여러 개를 지정하면 순서대로 적용하면서 글꼴이 적용이 되지 않는 문자에 이후의 글꼴을 적용한다. google fonts 사이트를 통해 원하는 글꼴을 쉽게 가져올 수 있다. font-size : 글자 크기 font-weight : 글자 굵기. 100 ~ 900까지 100 단위로 값이 있으며 숫자가 클수록 굵다. line-height : 줄과 줄 사이의 간격. 단위 없이 사용하며 "값 * font-size"로 적용된다. text-decoration : 글자를 꾸미는 속성. none, underline, line-through 등이 있다. ex) none = 평상시 글자 ∴ 태그(링크)의 밑줄을 지우는데 많이 사용된.. 더보기