728x90
[CSS]
1. CSS (Cascading Style Sheets)
HTML과 함께 웹 표준의 기본 개념.
HTML : 웹 사이트 내용 나열
CSS : 디자인 구성
독립적 사용불가. HTML에 도움을 주는 언어.
2. 스타일 형식
*선택자* {속성명 : 속성값; 속성명 : 속성값; ....}
선택자 : Selector라 하며, 스타일을 어디에 적용할 것인지 선택하는 방법 (중요)
{} : 스타일 적용 코드 영역
: : 속성명과 값의 구분자
; : CSS 속성 : 값 지정후 명령어의 종료를 나타내기위해 기입.
주석 : /* 내용... */
3. CSS 적용 방법 3가지
스타일 규칙들을 한데 묶어 놓은것을 '스타일 시트'라 함.
1) *외부 스타일 시트* : CSS 파일(.css)을 별도로 작업하여 연결
<link href="css 파일 경로" rel="stylesheet" /> type="text/css (//MIME TYPE)" />
href : css 파일 경로 지정
rel : 링크 걸린 파일과의 관계에 대한 기술
type : 파일의 형식 기술 : text로 기술된 css 타입의 파일이다 (MIME Type)
2) 내부 스타일 시트 : HTML 파일에 <style> 태그로 작업
3) 인라인 스타일 시트 : 태그에 속성으로 작업
/* stylr.css 파일 */
h1 {background-color: aqua;}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styletype</title>
<!-- 외부 스타일 시트 -->
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
/* 내부 스타일 시트 : 이 태그 사이에 CSS 문법으로 스타일 코드 작성 */
h2{background-color: lightblue;}
</style>
</head>
<body>
<h1> 외부스타일 시트 </h1>
<h2> 내부스타일 시트 </h2>
<h3 style="background-color: magenta"> 인라인 스타일 시트 </h3>
</body>
</html>
728x90
'WEB Creator > [CSS]' 카테고리의 다른 글
| [CSS] 9 - Flexbox (0) | 2022.06.07 |
|---|---|
| [CSS] 8 - media query 미디어쿼리 (0) | 2022.06.07 |
| [CSS] 7 - 포지셔닝 (0) | 2022.06.07 |
| [CSS] 3 - 적용 스타일과 박스 모델 (0) | 2022.05.31 |
| [CSS] 2 - 선택자 (0) | 2022.05.31 |