생활코딩 <CSS> 4 : 웹 페이지에 css포함시키는 방법 style태그, html의 속성인style="",선택자(selector)효과 a { },효과&선언,글자 밑줄 없애기,구분지을때 쓰는 세미콜론기호 ; , 원하는 글에만 밑줄 표시하는 방법

이번 4강에서는
최소한의 밑천이라고 할 수 있는 것들을 알아보고 실습해보도록 한다.

---

style 태그와 속성

웹 페이지에 css를 포함시키기 위해서는

html과 css가 완전히 다른 언어이기 때문에

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

여기서는 <style> 이라는 태그가 그런 역할을 한다.

이것 외에는 한 가지 방법이 더 있는데 이런 태그를 통해서 하는 방법이 아닌, 바로 <속성> 을 이용하는 방법이다.

---

링크를 클릭했을 때 파란색으로 표시하는 법

--

내가 만든 웹 페이지에서, 이렇게만 봐서는

현재 이 사용자가 css라는 링크를 클릭하고 이곳에 있다.

라는 것을 알기는 어렵다.

그래서 "현재 사용자가 이곳에 머물고 있다" 라는 뜻에서

링크가 걸린 2번 텍스트를 파란색으로 표시하고자 한다.

'죵스 유튜브 바로가기' 를 감싸고 있는 <a> 태그에
직접 css코드를 넣는 방법이다.

커서를 <a> 태그 안에 위치한 다음

color 뒤에 : 을 같이 붙여주고

빨간색인 red를 먼저 입력했다.

하지만 이렇게 하면 웹 브라우저 입장에선 이것이 html인지 css 인지 알 수가 없다.

그래서 html 과 css 를 만든 사람들은 방금color:red 라고 적은 태그에 대해서 어떤 css 의 효과를 주고 싶으면

style=" " 이라는 속성을 사용하도록 약속하였다.

코드를 저장 후 내 웹 페이지 를 확인해보면

이렇게 2번 텍스트가 빨간색으로 바뀐 것을 확인할 수 있다.

다시 코드로 돌아와서,

방금 적은 style이라는 속성은,
아래 html과 css의 사용 설명서에서 보면

style이라는 속성을 썼을 때
그 속성의 값을 웹 브라우저는 css의 문법에 따라 해석하고 css의 문법에 따라 해석된 결과를
style 속성이 위치하고 있는 태그에 적용할 것이다.

라고 나와 있다.

여기서 위의 style=" " 표기는, 바로 HTML 의 속성이다.
html 속성은 하나의 약속이 되어 있는데,

그 값으로 반드시 "CSS" 의 효과가 들어 온다

라고 약속 되어 있다.

그리고 위에 적었었던 style 이라는 태그는 반대로,

속성이 효과만 있어서는
저 효과를 누구에게 지정할지 를 설명할 수가 없기 때문에

위의 a, 중괄호 { } 라고 하는 이 코드들이
추가적으로 더 필요한 것이다.

그래서 우리가 방금 강조 표시를 한 이것은 (2번 링크의 텍스트)

이 웹 페이지에서 주고 싶은 효과를,
누구에게 줄 것인가를 선택한다- 라는 점에서

선택자 ( Selector ) = a { }

라고 부른다.

우리는 이 선택자( a { } )에게 지정될 효과를
위와 같이 적어두었었다. ( color:black; )

이것을 효과라고도 하고, 영어로는

선언 ( Declaration ) = color : 컬러이름 ;

이라고도 한다.

--

이 declaration 은
우리가 style 태그를 직접 사용한 경우에

위 style태그가 위치하고 있는 태그에게 효과를 줄 것이기 때문에
선택자 를 사용할 필요가 없다, 라는 것을 기억하면 좋다.

---

중간 내용 정리

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

1. style 태그를 사용한다.

2. style 속성을 사용한다.

---

실습하기.

상황을 좀 더 복잡하게 꼬아서 생각해보자.

예시1) 밑줄 없애기

내 웹 페이지를 보다보니, 저 밑줄이 보기가 싫어졌다.
그래서 밑줄을 없애고 싶다.

이 ;(세미콜론) 기호 바로 뒤에서 엔터를 친 다음

밑줄을 만들고, 또는 없애는 속성은
텍스트(text) 라고 적고 기호 - 를 입력 후

이 텍스트(text)에 꾸밈이나 장식을 뜻하는

데코레이션(decoration) 이

없다(none) 라고 입력해준다.
(뒤에 기호 ;(세미콜론) 는 자동으로 붙는다)

그리고 저장 하고 웹 페이지를 켜보면

이 웹 페이지에 있는 모든 a 태그에 대해서
장식이, 즉 밑줄이 없어지게 된다.

---

코드언어를 구분할때 사용하는

세미콜론 기호 " ; "

여기서 우리는 자주 나오는 이 기호,

; -> 세미콜론 기호

가 슬슬 궁금해질 것이다.

만일 코드창에 입력할 때 이 세미콜론 기호 ; 를 적지 않는다면

코드를 한 줄에 쓰고 싶을때, 구분이 되는가?

대답은 아니오 이다.

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

효과를 지정한 다음에는
끝에 항상 세미콜론 ; 을 입력해 주어야한다.

세미콜론 기호 ; 를 입력해주면
코드 언어가 한 줄에 있어도 잘 동작하게 된다.

---

내가 원하는 글에만 밑줄 긋기

다시 돌아와서,

내 웹 페이지에서
빨간색으로 표시한 2번 링크의 글에만
밑줄을 긋고 싶다면 어떻게 해야 할까?

2번 글의 코드가 적혀져 있는

요 부분,

(각자 본인의 코드에서 밑줄을 긋고싶은
글의 코드에서 수정하면 된다)

red 라고 적은 단어 바로 뒤에
세미콜론 기호 ; 를 입력해서 코드끼리의 구분을 지어준 뒤

text -

decoration :

밑줄을 뜻하는 단어, underline 이라고 적어주면 된다.

;(코드구분기호)text-decoration:underline

저장 한 다음 웹 페이지에서 확인해 보면?

내가 원하는 2번 빨간색 링크글에만 밑줄이 그어졌다.

---

이번 강의 마무리 및 정리

이번 강의에서는 상당히 중요한 것을 알게됬는데,

웹 페이지에 css를 삽입하는 방법으로

1. style 태그
2. style 의 속성 을 사용하기

효과 라는 것이 있다는 것,

이 효과를 하나의 선택자에서
여러 개의 효과를 지정할 수 있는데

이 경우에는 세미콜론 기호 ; 로 구분 할 수 있다-

라는 것을 배웠다.