[Wecode] CSS

css파일을 따로 만들어 적용하는 방법

보통 head태그 안에 link 태그로 css파일을 적용한다.
href : css파일 경로를 작성
type : css 파일을 연결할것이므로 type값은 text/css로 고정
rel : HTML과 CSS와의 관계를 설명하는 속성이므로, css파일을 링크할 때는 항상 stylesheet로 작성

<link href="style.css" rel="stylesheet" type="text/css" />

font-family

#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}
// 앞에서부터 적용할 폰트값을 넣어준다.
// Georgia가 지원되지 않으면 Times New Roman, 또 지원하지 않으면 Times로 넘어간다.
// Times New Roman만 감싸져있는 이유는 띄워쓰기가 있기 때문이다.

text-indent

들여쓰기를 할 수 있다.
※ blockquote 태그는 인용구문을 넣을 때 쓰는 태그이며, 양쪽 여백을 넣는 기본 스타일을 가지고 있다.
※ 문장 사이사이에 여백을 주고 싶을 때는  를 넣어주면 한칸 띄어쓰기가 가능하다.

padding, margin

padding, margin 속성은 한줄에 사방의 값을 줄 수 있는데,

a {
	padding: 20 20 20 20px;
    margin: 20 20 20 20px;
    // 순서는 위-오른쪽-아래-왼쪽 시계방향으로 생각하면 편하다.
}

css selector 우선순위

대부분 class를 selector로 주고 css를 작성하기 때문에,
tag < class < id < inline css 의 개념정도만 파악하고 있으면 된다.

position: relative;

position: relative 자체로는 큰 의미가 없으나, 위치를 이동시켜주는 top, right, bottom, left의 속성을 부여해야 원래의 위치에서 이동할 수 있다.

position: absolute;

position: absolute 는 값의 이름과 같이 절대적인 위치에 둘 수 있다.
기준은 부모의 위치에서 절대적인 위치를 부여하는 것이며, right: 0 이라는 속성이 부여되어 있으면, 부모의 위치에서 오른쪽으로 0만큼 떨어진 것이라고 생각하면 편하다.