본문 바로가기
블록체인 및 경제/웹프로그래밍

[CSS] 2. 스타일속성(선택자,정의,속성) 개념정리

by Danny_Kim 2020. 10. 7.

CSS 강의목차

1. CSS 시작, 글 색깔 바꿔보기

2. 스타일속성(선택자,정의,속성) 개념정리

3. CSS 속성과 선택자에 대한 이해

4. CSS 박스모델(padding,margin,border,content)

5. CSS 박스모델 실습하기

6. CSS 그리드 기본사용법 및 활용

7. 반응형 웹페이지 만들기(미디어쿼리 @media)

8. CSS코드의 재사용


 

지난시간에는 스타일태그를 이용해서 글자의 색깔을 바꿨습니다.

이번시간에는 스타일속성을 이용해서 글자의 색깔을 바꿔보겠습니다.

 

1. 스타일 속성으로 글자 색깔 바꾸기

색깔을 바꾸고 싶어하는 곳에 style="color:red" 이라는 속성을 지정해주면 됩니다.

 

쉽습니다!!!

 

 

2. 밑줄제거하는 속성 적용해보기

링크가 걸려있는 내용에 밑줄이 왠지 보기싫으시죠?

이 밑줄을 제거하는걸 한번 해보겠습니다.

 

<head> 태그 아래에 있는 스타일태그에서

text-decoration:none; 를 추가해줍니다.

결과를 한번 볼까요?

아래와 같이 링크에 밑줄이 사라진걸 확인할 수 있습니다.

 

이번에는 CSS 파일링크에 밑줄을 한번 그어볼께요.

속성태그를 활용해서 아래와 같이 적용하면 됩니다.

style = "color:red; text-decoration:underline" 요렇게 추가하시면 되요

    <li><a href=2.html style="color:red; text-decoration:underline">CSS</a></li>

결과를 한번 볼까요?

짜잔!!! 어렵지 않죠? 

 

3. CSS 스타일태그(선택자, 정의, 속성 등)에 대한 개념정리

 

자, 지금까지 배운걸 한번 정리해봅시다!!

 

a는 이 웹페이지에 있는 모든 a태그를 선택한다는 의미에서 선택자(Selector)이라고 합니다.

Color:red는 선택자가 선택한것에 대해서 어떠한 효과를 주는가라는 의미에서 선언(Declaration) 또는 효과라고 합니다.

그리고 선언된 Color:red는 첫번째 color는 속성(property)라고 하고 red는 속성(property)의 값이라고 하여 Value라고 합니다.

 

 

아래 생활코딩 강의안을 바탕으로 일부 수정,편집하여 재작성된 강의안입니다.

opentutorials.org/course/3086/18318



반응형

댓글0