[CSS] CSS의 기본문법, 혁명적 변화

이전에 배운 스타일 태그를 통해 여러개를 한번에 수정할 수 있었다.
그치만 그중 한 단어만 수정하고 싶다면?

위에 스타일 태그 내에선 개별 수정이 불가능하다.
그럼 어떻게? a태그에다가 직접 css 코드를 넣는다!
coloer:red 이런 식으로!

근데 이렇게 하면 웹브라우저는 이 코드가 html인지 css인지 알 수 없다.

그래서 해당 문구만 효과를 주고싶으면

<a href="2.html" style="coler:red">커비의 능력</a>

이런 식으로 수정하고 싶은 단어의 태그 내 속성을 사용하면 된다.

이 속성의 값을 웹 브라우저는 css의 문법에 따라 해석하고, 그 결과를 해당 스타일 속성이 위치하고 있는 태그에 적용한다.

위 예시에서 적용된 스타일은 css일까 html일까?
정답은 html의 속성이다.

스타일이라는 속성은 그 값으로 반드시 css의 효과가 들어온다. head 뒤에 사용하는 스타일 효과는 누구한테 지정할지 설정이 되어있지않다.

그래서 a{(내용)}같이 스타일의 범위를 지정해 주는 선택자가 추가적으로 필요하다.

선택자(selector)는 웹 페이지에 적용할 효과를 누구에게 줄것인가를 선택한다. (스타일 태그를 추가시 적용 범위 선택)

선언(declaration)은 해당 선택자에게 지정된 효과 나타낸다.

사진 속 예시에서 color를 속성(property), red는 속성 값(property value)라고 한다.

우리가 스타일 태그를 직접 사용한 경우, 그니까 html의 속성을 이용한 경우에는 해당 태그에 효과를 줄 것이기 때문에 선택자를 사용할필요가없다.

웹페이지에 css를 삽입하는 방법
1.스타일 태그를 쓴다
2.스타일 속성을 쓴다.

또 다른 예시로
하이퍼 링크 텍스트에 밑줄을 없애고 싶다면

<style>
  a {
  	color:pink;
    text-decoration: none;
  }
 <style>

이렇게 코드를 작성하면 된다. (head 태그 안에 style 태그를 추가할것!)

before

after
역시 커비는 핑크지

+스타일 태그 뒤에 붙는 ";"는 무슨 뜻인가요?
시작과 끝을 구분하기 위해 구분자로 사용한다.
효과를 지정한 다음엔 항상 ;을 사용하자.
구분자를 사용하면 한줄에 있어도 잘 동작한다.

<style>
  a {color:pink;text-decoration: none;
  }
 <style>

이런 식으로 한줄에 있어도 잘 동작한다.

그럼 만약에 색깔도 바꾸고 밑줄까지 긋고싶다면?

<a href="2.html" style="color:red;text-decoration:underline">커비의 능력</a>

하나의 선택자에 대해 여러개의 효과를 지정할 수 있다.
이 경우도 마찬가지로 ;으로 구분한다.