CSS - 1

김민석·2021년 1월 22일

웹 프로그래밍 - fe

목록 보기

2/4

웹의 구조를 나타내는 html과 달리
CSS는 웹 프로그래밍에서 주로 웹의 디자인적 요소를 나타낸다.
크롬에서 개발자도구(ctrl + shift + I) / 맥에서는(option + command + i)를 통해 현재 페이지의 html과 css, javascript의 구조 및 소스코드를 확인할 수 있다. 그리고 개발자도구의 element 탭을 통해 디버깅 해 볼 수 있다.
추천 사이트 : jsbin, codepen.io

1. CSS의 선언 방법

css의 구성

선택자 { property : value; }로 구성되어 있다.
span { color : red; }와 같이 작성한다. span의 내용물을 빨간색으로 하겠다는 의미이다.

html에 적용하는 방법

1.inline
html태그 안에다가 적용한다.

그림에서 div style = "color:red;"를 통해 div의 내용들을 빨간색으로 해 주었다.

2.internal
style 태그로 지정한다.
구조와 스타일이 섞이므로 유지보수가 어렵지만, 별도의 css 파일을 관리하지 않아도 되며, 서버에 css 파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없다.

그림에서 head 안에 style 태그를 이용해 div에 적용해 주었다.

3.external
별도의 외부 파일(.css)를 만들어 사용하는 방식이다.
css 코드가 길 경우 이 방식을 사용하는것이 좋다.
파일 생성 후에 link 태그를 통해 추가해 주면 된다.

외부 css 파일의 이름이 test.css일 때 그림과 같이 head 부분에 link태를 통해 div에 적용해 주었다.

위의 세가지 방법의 우선순위를 살펴보자면 inline이 우선순위가 높고, internal과 external은 서로 같아서 나중에 선언된 것이 우선순위가 높다.

2. 상속과 우선순위 결정

상속 : 상위에서 적용한 스타일을 하위에 반영하는 것
-> 여러 단계로 중첩된 element마다 매번 같은 색상, 글자 크기 등을 부여 할 필요가 없다.

배치와 관련된 것들은 상속이 안된다.
-> box model들(width, height, border 등)은 상속이 안된다.

style 태그 안에 사용할 상위 태그 > 하위 태그 > 하위 태그 ... 로 사용이 가능하다.

body > div {}를 통해 body의 div 태그 모두 상속을 해 주었다. color는 모두 빨간색으로 상속 되었지만 box model인 border와 padding은 상속이 안 된 것을 확인할 수 있다.

상속 과정에서 우선순위는 id > class > tag 순으로 크다.

(id는 #, class는 .으로 표기함)
그림에서 color들을 id, class, 태그 마다 설정 해 주었는데, id가 우선적용 되므로 green이 적용된 것을 확인할 수 있다. 또한 border에 있어서 class와 tag를 비교 한 것을 보면 class가 우선 적용 된 것을 확인할 수 있다.

그리고 앞서 말했듯이 internal이 최우선적으로 적용되고, 동일한 적용 방법이라면 나중에 선언 된 것이 적용된다. 추가적으로 선택자의 표현이 더 구체적인 것이 먼저 적용된다.
ex) body > span{}과 span{}이 있다면 body > span{}이 더 구체적이므로 적용된다.

3. CSS selector

HTML의 요소를 tag, id, html 태그 속성등을 통해 쉽게 찾아주는 방법이다. 태그는 모든 태그에 적용, id는 해당 id에, class는 해당 class에 적용이 된다.

선택자와 id, class를 함께 사용이 가능하다. span.three를 보면 선택자와 class를 함께 쓸 수 있는것을 확인할 수 있다.
그리고 여러 selector에 같은 스타일을 적용하고 싶으면 ,를 통해 그룹화 할 수 있다. h3, span#two를 통해 h3와 span의 two를 그룹화 하였다.
그리고 상속 요소를 선택할 때 공백과 > 표시가 있는데, 공백의 경우 하위 모든 selector에 대해 적용하는 것이고, >는 바로 아래 자식에게만 적용하는 것이다. 위 그림에서 #min span을 통해 #min 아래 모든 span에 대해 적용을 한 것이고, #min > span에서 5번만 적용이 되었는데, 이는 #min의 바로 아래 자식으로는 div와 span이 있기 때문이다.