고정 헤더 영역
상세 컨텐츠
본문
CSS란?
CSS는 Cascading Style Sheets 약자로,
HTML, XHTML, XML 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어입니다.
CSS장점
1. 정보(HTML)와 디자인(CSS)를 분리하여 관리할 수 있습니다.
2. 검색엔진이 HTML을 해석 가능하게 하여 더 많은 방문자들이 방문할 수 있도록 유도할 수 있습니다.
- 시각장애인을 위한 스크린리더 프로그램이 HTML문서를 해석할 수 있도록 할 수 있습니다.(웹 접근성)
HTML로 문서의 뼈대를 만들면
CSS는 이 문서를 꾸며주는 역할을 하는데요.
글꼴, 글자나 사진의 위치, 배경색 등 지정을 하거나
아이폰, 아이패드, 웹 브라우저에 따라서 화면의 크기가 다르게 나타낼 수 있도록 지정도 가능합니다.
CSS를 지정하는 방법은 3가지가 있습니다.
각 방법은 상황에 따라 다르니 적절하게 사용해 봅니다.
(이 중에서 3번으로 작성하는게 가장 좋습니다.)
1. 인라인 방식
해당 태그의 style 속성에 넣는 방식
<h2 style="text-align: center; font-size: 50px;">인라인 스타일</h2>
<p style="text-align: center; color: deeppink;">HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법입니다.
인라인 스타일은 해당 요소에만 스타일을 적용할 수 있습니다.</p>
2. 내부 스타일 시트
style tag 내부에 기입하는 방식
<head>
<title>내부스타일</title>
<style>
h2 {font-size: 50px;}
p {font-size: 20px;}
ul {list-style-type: none; color: deeppink; } /*특수문자 없애기*/
li {display: inline-block; margin: 20px;} /*밑으로 내려온 글자를 옆으로 나열, 글자 사이를 20px주기*/
</style>
</head>
<body>
<h2>내부 스타일</h2>
<p>CSS를 적용하는 방법</p>
<ul>
<li>인라인 스타일</li>
<li>내부 스타일</li>
<li>외부 스타일</li>
</ul>
</body>
</html>
3. 외부 스타일 시트
CSS 파일을 별도로 만들어 HTML 문서에 연결(링크 태그 사용)
CSS 작성법은 다음과 같습니다.
CSS의 주석
/* */ 사이에 내용을 입력합니다. (여러줄, 한 줄 모두 가능)
반응형
'WEB-Front end > *CSS' 카테고리의 다른 글
| [CSS] CSS font-size에 대해서 알아보자. (0) | 2023.04.20 |
|---|---|
| [CSS] CSS 텍스트 (0) | 2023.04.20 |
| [CSS] CSS 배경 (0) | 2023.04.20 |
| [CSS] CSS색상 (0) | 2023.04.20 |
| [CSS] CSS 선택자 (0) | 2022.11.10 |
댓글 영역