※ CSS의 문법 형식
크게 선택자와 선언부로 구분함.
선택자 : CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역
선언부 : 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역으로, 중괄호 안에 넣는다.
: 선언부에 작성하는 스타일은 반드시 속성과 값을 한 쌍으로 작성. 세미콜론을 붙여 연속해서 작성 가능
ex) h1{color: red;}
선택자 / 속성 / 값
중괄호 안을 선언부라고 함.
※ 주석
/* */ 으로 사이에 주석을 작성한다. 중요한 정보 적지 않는다.
※ CSS 적용하기
대표적으로 3가지 방법이 있다.
1) 내부 스타일 시트 사용 (internal style sheet)
: HTML 파일 내부에 CSS 코드를 작성하는 방법
: HTML의 style 태그를 사용해서 적용한다. head 태그 안에서!
: 웹 브라우저에서 HTML 문서를 해석할 때마다 CSS 코드를 매번 다시 읽기 때문에, 성능상으로는 좋지 못함
<head>
<style>
h1{
color:blue;
font-size:24px;
}
</style>
</head>
2) 외부 스타일 시트 사용(external style sheet)
: CSS 코드를 작성하는 별도 파일을 만들어 HTML 문서와 CSS를 연결하는 방법 (확장자 : .css)
: 연결할 때는 llink 태그를 사용해야 함.
<link rel="stylesheet" href="css 파일 경로">마찬가지로 해당 코드를 head 태그에 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>판매 중인 과일 설명</h1>
<dl>
<dt>HTML</dt>
<dd>HTML은 ~~ </dd>
<dt>CSS</dt>
<dd>CSS는 ~~</dd>
</dl>
<p><a href="https://www.naver.com/" target="_blank" title="네이버로 이동">네이버</a></p>
<em>시설 이용자는 <em>아래에 안내되어 있는 수칙</em>을 반드시 지켜야 합니다. </em>
</body>
</html>index.html
h1{
color:red;
font-size:34px;
}style.css
3) 인라인 스타일 사용(inline style)
HTML 태그에서 사용할 수 있는 style 속성에 직접 CSS 코드를 작성하는 방법 => 선택자 필요X
<태그 style="CSS 코드"></태그>큰 따옴표 안에 여러 개의 CSS 코드를 세미콜론으로 구분해 작성한다.
실무에서는 대부분 외부 스타일 시트 방식을 사용하고 있음. 이 방식으로 코딩하자.
인라인 스타일은 거의 잘 사용하지 않는다.
'Frontend > HTML, CSS' 카테고리의 다른 글
| [CSS] 필수 속성 다루기(색상, 텍스트, 단위, 적용순서) ** (0) | 2023.07.16 |
|---|---|
| [CSS] 선택자 다루기 (0) | 2023.07.16 |
| [HTML] 시맨틱 태그, 글로벌 속성 (1) | 2023.07.09 |
| [HTML] 멀티미디어 설정하기 (0) | 2023.07.09 |
| [HTML] 표 만들기 (2) | 2023.07.09 |
