CSS의 기본 문법

웹페이지에 css를 포함시키기 위해선 html과 css가 완전히 다른 언어이기 때문에

웹브라우저로 하여금 어디서부터 어디까지가 CSS인지 알 수 있게 해줘야 합니다.

바로 style이라는 태그가 그런 역할을 하는 겁니다.

<style> 태그!

그 외에 한가지 방법이 더 있습니다.

바로 이런 태그를 통한 것이 아니라 속성을 이용하는 방법입니다.

현재 우리가 만든 웹페이지에서는 사용자가 어떤 목록을 클릭한 상태인지 알기가 힘듭니다.

그래서 현재 사용자가 이곳에 머물고 있다 라는 뜻에서 사용자가 클릭한 곳을 빨간색으로 표시하게 할겁니다.

처음에 이렇게 추가를 했는데 이렇게 추가를 하면 어디서부터 어디까지가 html이고 css인 것을 프로그램이

알 수가 없다고 합니다. 그래서 css라는 것을 속성에서 표시하기 위해서 사용하는 것이

바로 또 style입니다.

여기 있는 이 style이라는 속성은 html과 css의 사용 설명서에 적혀 있습니다.

style이라는 속성을 썼으면 그 속성의 값을 웹브라우저는 css의 문법에 따라 해석해서 결과를 style 속성이

위치하고 있는 이 태그에 적용할 것이다. 라고 적혀있습니다..

그래서 여기 있는 이 style = ""  는 HTML일까요 CSS일까요? 정답은 HTML의 속성입니다.

그리고 이 스타일이란 속성은 그 값으로 반드시 CSS의 효과가 들어온다 라는 약속이 있습니다.

그리고 아래 사진의 style 태그는 효과만 있어서는 저 효과를 누구에게 지정할지를 설명할 수가 없기 때문에

a {} 라는 코드가 추가적으로 필요한 것 입니다.

 

따라서 이 a { } 를 이 웹페이지에서 주고 싶은 효과를

누구에게 줄 것인가를 선택한다, 라는 점에서 선택자라고 부릅니다. 영어로는 Selector라고 부릅니다.

그리고 효과를 적어 놨는데 이것을 효과 혹은 declaration이라고 부릅니다.

이 declaration은 style 태그를 직접적으로 사용한 경우에는 바로 이 style 태그가 위치하고 있는 

태그에게 효과를 줄 것이기 때문에 선택자라는 것을 사용할 필요가 없다 라는 것을 기억하자.

 

웹페이지 안에 CSS를 삽입하는 2가지 방법

1. style 태그를 쓴다

2. style 속성을 쓴다

 

그럼 조금만 더 이 상황을 복잡하게 꼬아 보겠습니다.

웹페이지에 밑줄들이 보기 싫어서 이 밑줄들을 없애고 싶다라는 생각이 들 수 있습니다.

그러면 여러분은 이렇게도 할 수가 있습니다.

아래 사진과 같이 코드를 입력하면 이 웹페이지에 있는 모든 a 태그에 대해 밑줄이 없어지게 됩니다.

그럼 여기서 세미 콜론을 왜 사용하는지 궁금증이 생겼을 수도 있다.

만약에 세미콜론이 없다면 구분하기가 쉽지 않다.

따라서 하나의 디스크립션이 시작되고 끝나는 것을 구분하기 위해서 구분자로 세미콜론이라는 것이

존재하는 것이기 때문에 효과를 지정한 다음에는 끝에 항상 세미콜론을 적어주어야 한다.

이렇게 되면 이게 한 줄에 적혀 있어도 동작이 잘된다.

그런데 여기서 CSS라는 글에만 밑줄을 긋고 싶다면 어떻게 하면 될까요?

이런식으로 해당 코드라인에 가서 style 속성 안에 추가를 해주면 됩니다.