[부스트코스] CSS -FE

전 글에서 웹 페이지의 구조를 담당하는 HTML에 대한 기초적인 공부를 하였습니다.

이번 시간에는 스타일을 담당하는 CSS에 대해 공부해 보도록 하겠습니다.

 

선언방법

 

우선, CSS의 구성을 먼저 살피어보겠습니다.

span: selecor

color: property

red: value 의 역할을 합니다.

 

이렇게 만든 style을 HTML 페이지에 적용하는 3가지 방법이 있습니다.

 

1. inline

HTML 태그 안에 속성으로 적용합니다. 아래 그림처럼 말이죠.

이렇게 적용된 스타일은 css파일에 적용한 것보다 가장 먼저 적용됩니다.

 

2. internal

style 태그로 지정합니다.

이렇게 되면, html 문서 안에 구조에 관한 태그와 스타일에 관한 태그가 섞이게 되면서

가독성이 떨어지고, 따라서 유지 보수가 어렵게 됩니다.

하지만, 따로 CSS 파일을 관리하지 않아도 된다는 장점이 있습니다.

 

3. external

외부 CSS 파일로 지정하는 방식입니다.

위의 그림을 보면 스타일을 관리하는 style.css 의 파일을 만들어 link 태그로 추가한 것을 볼 수 있습니다.

css 코드 아주 짧지 않은 이상 현업에서도 가장 많이 사용하는 가장 좋은 지정 방식입니다. 

 

실제 구글 웹사이트에서는 internal과 external 방식의 코드를 볼 수 있습니다.

따라서, 짧은 길이의 css의 코드는 internal 방식으로 긴 길이의 css 코드는 external 방식으로 관리하는 것이

보편적이라고 할 수 있습니다.

 

위 세가지 지정방식의 우선순위는

inline > internal=external 입니다.

 

[출처: https://www.edwith.org/boostcourse-web/lecture/16673/]

 

 

 

상속

 

상속은 대표적인 CSS 적용 규칙입니다.

이 규칙은 중복된 속성을 반복적으로 적용하는 일을 줄일 수 있는 효율적인 규칙입니다.

 

이러한 규칙 덕분에 상위에서 적용한 스타일은 하위에도 반영됩니다.

따라서 하위에도 다시 스타일을 적용할 필요가 없는 것입니다.

 

하지만, 이 규칙이 문제를 일으킬 수도 있습니다.

예를 들어 width 속성이 상속되면 하위 엘리먼트 또한 모두 같은 크기의 넓이값만 가질 수 있게 됩니다.

이를 막기위해 box-model 이라고 불리느 속성(width, height, margin, padding, border)와 같이 크기와 배치에

관련한 속성들은 상속이 되지 않습니다.

 

 

 

우선순위 결정

 

css에 적용되는 또 다른 규칙이 있습니다. 바로 cascading 인데요.

style을 적용하는 우선순위와 관련된 규칙입니다.

 

위의 우선순위에 inline > internal = external 이라고 쓰여진 것이 있습니다.

이것은 지정 방식에 관한 우선순위인데요.

cascading은 같은 엘리먼트에 적용된 다른 스타일 중 어떤 것이 최종적으로 반영이 되냐 하는 것에 대한 우선순위 규칙입니다.

 

- 같은 선택자(selector)인 경우

원래 동일하다면 나중에 것 즉, 뒤의 것이 적용되는 것이 법칙입니다.

하지만, 선택자의 표현이 구체적인 것이 있다면 그것이 적용됩니다.

 

위의 그림과 같은 경우에 text는 어떤 색상이 될까요?

바로 red입니다. 각각의 색상이 div(element), class, id에 부여되어있는데요

id>class>element 순으로 반영이 되어 결국 red 색상이 적용되는 것이지요.

 

[출처: https://www.edwith.org/boostcourse-web/lecture/16674/]

 

 

 

Selector

 

특정 엘리먼트에 스타일을 적용하기 위해선 해당 엘리먼트를 잘 찾아야 합니다.

이때 사용하는 것이 CSS Selector입니다.

 

- tag로 지정

 span이라는 태그로 묶인 모든 엘리먼트에 동일한 스타일이 적용됩니다.

 

- id로 지정

spantag라는 아이디를 가진 엘리먼트에 스타일이 적용됩니다.

앞서, 아이디는 고유한 값으로 중복해서 사용할 수 없다고 언급한 적이 있는데

css는 이 id를 가진 엘리먼트들이 모두 반영됩니다.

 

- class로 지정

spanClass를 가진 엘리먼트에 동일한 스타일이 적용됩니다.

 

selector는 id,class,선택자와 함꼐 활용할 수 있습니다.

또한 여러 개 셀렉터를 함께 사용할 수 있습니다.

그룹 선택

더 다양하고 복잡하게 엘리먼트들이 있을 때

공백과 (>) 문자를 통해 특정 엘리먼트의 하위 엘리먼트로 접근할 수 있습니다.

 

다음 세 사진의 차이를 비교해 보겠습니다.

공백을 이용하여 자손 엘리먼트에 접근한 경우입니다.

자손 엘리먼트에 접근하기 때문에 

span tag 와 span tag 2 모두 red색상이 적용될 것입니다.

 

 

 

 

 

 

-----------------------------------------------------------------------------------------------------------------------------------

> 문자를 이용하여 자식 엘리먼트에 접근한 경우입니다.

이 경우에는 바로 하위 엘리먼트만 가리키기 때문에

span tag 2 만 red 색상이 적용됩니다.

 

*span tag 같은 경우엔 div > span 이므로 적용되지 않습니다.

 

 

 

 

-----------------------------------------------------------------------------------------------------------------------------------

n번째 자식요소를 선택할 때는

nth-child를 사용합니다.

 

jisu라는 id값을 가진 div 태그 아래 

h2,p,p,p,p 총 5개의 자식 요소가 있고

 

style은 그 중 2번째 자식에 적용됩니다.

따라서 첫번째 단락에 red색상이 적용되는 것입니다.

 

 

+ nth-child와 비슷하게 쓰이는 nth-of-type가 있습니다.

둘의 공통점은 부모의 n번째 자식 엘리먼트를 선택하는 것입니다.

다만 nth-of-type는 같은 유형의 n번째 자식 요소에 접근하는 것입니다.

 

[출처: https://www.edwith.org/boostcourse-web/lecture/16676/]

 

 

 

기본 style 변경

 

- font 색상 변경 : color 

- font 사이즈 변경 : font-size

- 배경색 변경 : background-color

- 글씨체/글꼴 : font-family

syle변경 예시

[출처: https://www.edwith.org/boostcourse-web/lecture/16675/]