CSS의 기초_두번째 - STUDY

CSS CSS의 기초_두번째

작성일 18-03-23 11:33

페이지 정보

작성자디벨로드 조회 5,549회 댓글 0건

본문

오늘은 CSS(Cascading Style Sheet)기초 두번째 입니다.

스타일의 기본형태

선택자 { 속성:값 }

p { color:blue; }

여기서 보면 p가 선택자(selector) / color가 속성(attribute) / blue가 속성값(value)이 되는것입니다.
쉽게 말해 p를 선택해서 color속성에 blue값을 줘라!! 가 되는거에요

한가지 선택자에 여러가지 속성을 적용할 경우

h2 { font-size:20px; color:purple; }

위와 같이 세미콜론(;)으로 구분하여 나열합니다.

그러면 스타일정보를 어디에 기록해두나요?

스타일은 내부스타일시트와 외부스타일시트로 사용할 수 있습니다.
(물론 지난 시간에 말씀드렸듯이 태그 안에 직접 사용도 가능하지만 권장하지 않습니다. )

내부스타일시트

문서안에서 head안에 써 넣는 것입니다
(꼭 head안에 넣지 않아도 작동은 합니다;; 권장사항입니다.) <head> <meta charset="utf-8"> <title>제목</title> <style> p { color:blue; } h2 { font-size:20px; color:purple; } </style> </head>

외부스타일시트

외부스타일시트는 문서안에 있는 스타일정보를 별도의 파일로 저장하는 것인데, 내부스타일시트에서 <style>,</style>태그를 제외하고 그 사이의 내용만 복사해서 확장자를 .css로 저장합니다.
그리고 웹문서에서는 <link>태그를 사용해 스타일시트를 연결합니다. <link href="외부 스타일시트 파일경로" rel="stylesheet" type="text/css"> 위의 태그를 <head>태그안에 넣어주시면 CSS 파일은 로딩이 되실꺼에요.

이해가 되셨나요?? 잘 안되신다구요??
그렇다면 댓글로 남겨주세요. 함께 해결해 보아요!!

추천0

댓글목록

등록된 댓글이 없습니다.