[CSS] CSS의 기본 문법

2020. 11. 20. 22:58· 프로그래밍언어/CSS

웹 페이지에 CSS 문법을 포함시키는 법(웹페이지에게 CSS범위 알려주기)

​1. style 태그 사용하기 <style> Selector {Declaration;} </style>

- 웹페이지에서 한 태그와 관련 된 모든 글씨 스타일을 바꾸고 싶을 경우 style 태그를 사용한다.

- style태그는 head태그에 포함시킨다.

- <style> 지정 할 태그 { Property:Property Value; }</style>

- 여러가지 효과를 동시에 사용하기 위해서 ;(세미클론)으로 구분 지어준다.

<head>
    <style>
      a {
          color:black;
          text-decoration: none;
      }
    </style>
</head>

 

2. style 속성 사용하기 <태그 style="Declaration">

- 웹페이지에서 특정 문장에만 효과를 주고 싶을 경우 style 속성을 사용한다.

- <태그 style="Property:Property Value">

- 2가지 이상의 효과를 주고 싶으면 효과 끝에 ;(세미콜론)으로 마무리 해준다.

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

 

css의 문법

a {
  color:black;
}

- Selector : 선택자, 이 웹페이지에서 지정한 모든 태그를 선택한다. (위에서는 'a'가 선택자)

- Declaration : 선언, 효과, 선택자가 지정하는 태그들에 대해서 어떤 효과를 줄 것인지 말한다. (중괄호({})안에 있는 것들로 위에서는 'color:black;'가 효과 )

- Property : 속성(위에서는 'color'가 속성)

- Property Value : 속성 값(위에서는 'black'이 속성 값)

 

css문법 공부 방법

무슨 선택자와 무슨 속성인지 몰라도 선택자와 속성이라는 것을 알게 됐다.

필요하거나 모르겠는 선택자와 속성을 검색 할 수 있게 됐다.

웹페이지를 디자인 하는 어떠한 Property(속성)가 존재하는지 알아가는 과정.

그 효과를 정확하게 선택해서 지정하기 위해서 다양한 선택자(Selector)를 알아가는 과정.

'프로그래밍언어 > CSS' 카테고리의 다른 글

[CSS] Grid(그리드)  (0) 2020.12.01
[CSS] 박스모델  (0) 2020.11.25
[CSS] 선택자들  (0) 2020.11.21
[CSS] Property(속성) 검색 하는 법(+폰트 크기 속성, 글 정렬 속성)  (0) 2020.11.20
[CSS] CSS언어의 등장 전과 후  (0) 2020.11.18
'프로그래밍언어/CSS' 카테고리의 다른 글
  • [CSS] 박스모델
  • [CSS] 선택자들
  • [CSS] Property(속성) 검색 하는 법(+폰트 크기 속성, 글 정렬 속성)
  • [CSS] CSS언어의 등장 전과 후
개발원슝이
개발원슝이
꾸준히 개발공부를 합니다.
개발원슝이
꾸준히 개발슝이
개발원슝이
전체
오늘
어제
  • ALL (242)
    • 프로젝트 (34)
      • clone coding (19)
      • mini project (5)
      • Team project(with KIC) (10)
    • 문제 (37)
      • 백준 (7)
      • 프로그래머스 (14)
      • 정보처리기사실기 (16)
    • 설치 (9)
    • 개발 기초 (13)
    • 프로그래밍언어 (124)
      • HTML (16)
      • CSS (17)
      • JavaScript (22)
      • JAVA (13)
      • JSP (10)
      • Python (22)
      • C언어 (24)
    • 프레임워크 (6)
      • Spring (3)
      • Django (3)
    • DB (2)
      • MySQL (2)
    • AWS (1)
    • 오류 (2)
    • 이것저것 (6)
    • 전공자 개발 (3)
    • 비전공자 개발 (5)

블로그 메뉴

  • 네이버블로그(강의노트)
  • GitHub
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 홍정모교수님
  • 홍정모의 따라하며 배우는 C언어
  • 파이썬공부
  • javascript
  • 따배씨
  • 백준
  • 점프 투 파이썬
  • 생활코딩
  • 인프런
  • 코딩테스트

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
개발원슝이
[CSS] CSS의 기본 문법
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.