[CSS] CSS 관련 지식 - 1 (기본 개념)

1.1 CSS 규칙(CSS rule)

가끔 똑같은 속성을 계속 적용하는게 귀찮아 한번에 적용하고 싶을 수 있다. 이때 CSS규칙을 설정하여 동일하게 적용해줄 수 있다.

 

선택자 { 선언 }

선택자: 어떤 요소에 규칙을 적용할지

선언: 어떤 스타일을 적용할 건지

h3 { color: #f56513; }

---

1.2.1 아이디

코드에서 어떤 태그 딱 하나만 선택해서 적용하고 싶다면 id라는 선택자를 쓸 수 있다.

원하는 태그에 id를 추가하고 id에 대해 따로 속성을 선언해주면 된다.

 

<h3 id="hallasan"> 한라산 국립공원 </h3>

#hallasan { color: #f56513; }  (기존에는 규칙 선언한 부분이었음)

 

다만, 아이디 이름은 중복해서 사용이 불가능하다. 하나에만 사용이 가능하므로 각 요소마다 다른 id를 지어주어야 한다.

1.2.2 클래스

id는 하나의 요소만 선택할 수 있으므로 만약 여러개의 요소를 한번에 묶고 싶다면 클래스를 사용해야 한다.

 

<h3 class="place"> 우도 </h3>

<h3 class="place"> 한라산 국립공원 </h3>

 

.place { font-size: 16px; font-weight: 400; }

 

class 의 속성을 선언할때는 # 대신 마침표(.)를 찍어주어야 한다.

이렇게 클래스 선택자를 쓰면 태그 여러개를 선택해서 스타일을 지정할 수 있다.

---

1.3 CSS 파일

코드가 길어지면 CSS를 즉각적으로 확인하기 어려우므로 CSS관련 코드만 모아놓는 CSS 파일을 만들 수 있다. 

같은 폴더내에 style.css라는 이름으로 파일을 만든다. (파일명은 상관없다.)

이제 이 파일에 style 태그 안에 있는 내용을 가져오고

기존 파일에는 style 태그 대신 

<link rel="stylesheet" href-"style.css"> 를 작성해준다.

- link 태그: 현재 문서 바깥에 있는 파일을 불러오는 태그

- rel 속성 : relationship의 약자. 불러올 파일과의 관계를 나타냄 

- stylesheet : 우리가 불러올 파일이 스타일 시트(CSS 파일) 이라는 뜻

- href 속성 : 파일의 주소, 경로를 나타냄

- "style.css" : 파일 경로. 같은 폴더에 있으면 이름만 써도 됨. 다른 폴더에 있으면 경로를 모두 작성할 것.

 

이렇게 CSS는 파일을 분리해서 작성하는 것을 추천한다.

 

1.4 개발자 도구로 선택자 확인하기

개발자 도구는 

크롬) 오른쪽 위 점 세개 > More Tools > Developer Tools (도구>더보기>개발자 도구)

사파리) 커맨드+옵션+i

를 통해 열고 닫을 수 있다.

이렇게 생긴 요소 선택 도구를 사용해 원하는 부분을 선택하면 해당 요소에 대한 코드가 보여진다. 

개발자 도구를 사용하면 CSS 규칙이 잘 적용되고 있는지 확인할 수 있고

선택자가 어디어디 적용되는지 한눈에 확인할 수 있으므로 잘 알고 활용하는 것이 좋다.