CSS
- Cascading Style Sheets
- 웹페이지 디자인을 위한 언어
- HTML이 정보 전달에만 전념할 수 있도록 함
인라인 스타일(inline style)
style 속성 이용
<html 태그 style="css 코드;">
- html 코드 내에서 직접 css 코드 작성
- 속성의 값을 웹브라우저가 css의 문법에 따라서 해석하여 그 결과를 style 속성이 위치하고 있는 태그에 적용
- 선택자 필요 없음
- 2개 이상 스타일 지정할 때는 세미콜론으로 구분
- 자주 사용되지는 않음
<li style="color:red; text-decoration:underline;">CSS</li>
내부 스타일시트(internal stylesheet)
<style> 태그 이용
<head>
<style>
선택자 {
css 코드;
}
</style>
</head>
- <head></head> 내부에 style 태그 추가
- 선택자(Selector) - 스타일을 지정할 요소
- 선언 블록(Declaration Block) - css 선언을 포함하는 중괄호{ } 사이의 코드
- 선언(Declaration) - 선택한 요소에 스타일을 적용하는 속성 및 값 쌍의 그룹
- 속성(Property) - 수정될 요소의 시각적 특성을 나타내는 선언의 첫 번째 부분
- 값(Value) - 속성 값을 나타내는 선언의 두 번째 부분
<head>
<style>
a {
color: red;
text-decoration: none;
}
</style>
</head>
외부 스타일시트(external stylesheet)
- html과 css 코드를 별도의 파일에 저장하여 코드 혼합 방지
- 'style.css'라는 이름의 파일을 만들어 css 코드 작성
- 코드 작성법은 내부 스타일시트에서 style 태그 제거하면 됨
선택자 {
css 코드;
}
p {
color: green;
}
- 작성한 css 코드를 html에 적용하려면 <link> 태그로 파일 연결해야 함
<head>
<link href="style.css 파일 위치, 경로" rel="stylesheet">
</head>
<head>
<link href='./style.css' rel='stylesheet'>
</head>
'Front-end > CSS' 카테고리의 다른 글
| [CSS] display - block-level, inline, none, hidden (0) | 2023.11.11 |
|---|---|
| [CSS] 선택자(Selector) - class, id, 우선순위 (0) | 2023.03.25 |
| [CSS] 글자 크기 변경 속성 - font-size (0) | 2023.03.25 |
| [CSS] 글자 꾸밈 속성(꾸밈 제거, 밑줄 긋기) - text-decoration (0) | 2023.03.25 |
| [CSS] 글자 색 변경 속성 - color (0) | 2023.03.25 |