CSS란?

CSS(Cascading Style Sheets)

CSS란 웹 페이지에서 HTML 태그를 보조하여 페이지를 꾸미는 역할을 한다.

웹 개발자는 CSS를 이용하여 웹 사이트의 디자인을 더욱 풍부하게 하고 사이트의 유지 · 보수도 간편하게 가능

CSS 기본 구조

실전에서는 CSS파일을 따로 작성을 하여서 불러와서 적용을 시키지만 저는 공부할때는 복잡한 소스가 아닌이상 <head>태그 안에 <style>태그를 이용해서 작성하는 편이다.

불러와서 적용하는 방법
1. html파일과 css파일이 동인한 폴더안에있어야한다.
- 저같은 경우는 같은 폴더에 있되, css폴더를 하나 만들어서 불러온다.
2. <head>태그 안에 <link>태그를 이용한다.
- <link rel="stylesheet" href="css/main.css">

CSS 삽입방법

CSS 첫번째 문서에서 한번 언급을 했지만 정리하고 가면 좋을거 같아서 따로 정리한번더 하겠습니다//^.^ 인라인 스타일(inline style) CSS 삽입 방법 Hello World 실행결과 - HTML태그에 CSS 명..

chpofo.tistory.com

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 구조</title>
<style>
  p {	
      color:blue;		
      font-size:20px;
  }
</style>
</head>
<body>
    <h1>애국가</h1>

    <p>
        동해물과 백두산이 마르고 닳도록<br>
        하느님이 보우하사 우리나라 만세<br>
        무궁화 삼천리 화려강산<br>
        대한 사람 대한으로 길이 보전하세<br>
    </p>
</body>
</html>

실행결과

▼ 소스코드 살펴보기

- 7~10행에서 CSS입력되었음며, CSS는 6행과 11행 <style> 태그 안에 들어간다.

- 7행의 p에 의해 16행의 <p>태그 영역의 글자색상과 크기가 변경된다.

- 8행과 9행의 ;(세미콜론)은 하나의 CSS명령이 끝났음을 의미

▼ CSS구조 깊숙히 알아보기

- 선택자 : CSS를 적용할 영역을 선택할 때 사용

(선택자는 다음에 전체적으로 설명한번더 할 예정입니다.)

CSS 선택자 - id, class

선택자 선택자란? 요소들에게 스타일을 주기 위해서 해당 요소를 DOM에서 찾기 위한 수단이다 ◆ 선택자의 종류 1. 기본선택자 - 기본선택자는 선택자를 하나를 사용하는 것 - 전체선택자(*),

chpofo.tistory.com

- CSS 명령 : CSS 속성과 값으로 구성

ex) 위의 소스에서 'color : blue' 에서 color가 CSS 속성으로 글자 색상을 의미, blue는 속성값으로 파란색을 의미

- CSS 명령 마침 : 각 CSS 명령의 맨뒤에 세미콜론을 붙여야 CSS 명령이 마무리된다.

저작자표시

'Web > CSS' 카테고리의 다른 글

CSS 선택자 - 가상요소, 가상클래스 (1)	2020.12.19
CSS 선택자 - 조합선택자(후손,자식,형제) (6)	2020.12.18
CSS 선택자 - id, class (4)	2020.12.17
DOM이란? (5)	2020.12.16
CSS 삽입방법 (0)	2020.10.14