CSS (Cascading Style Sheets, 스타일 시트)
웹 문서의 스타일을 미리 저장해 두는 기술
선택자와 선언부로 나뉘며
선언부 안에는 속성과 속성값이 들어간다.
속성은 ;로 구분하지만 마지막 속성값 뒤에는 ;를 꼭 붙여주지 않아도 된다.
*외부 css stylesheet만들기
CSS코드를 넣는 방식으로는 내부, 외부, 인라인 스타일 시트가 있다.
제일 자주 쓰이는 것은 외부 스타일 시트이다.
html 파일(.html)
: <title>태그 아래에 <link rel="stylesheet" href="파일경로">를 적어준다.
css 파일(.style)
: @charset "utf-8";을 맨 윗줄에 적어준다.
*선택자
<!DOCTYPE html>
<html lang="ko"><!-- 주석입니다-->
<head>
<meta charset="utf-8">
<title>웹문서의 제목</title>
<style>
/* css 주석 */
/* 1). tag선택자, 타입선택자 */
div {
font-size: 12px;
color: hotpink;
}
/* 2). 아이디 선택자 : 아이디명 앞에 #을 써준다, 동일 페이지에서 같은 이름을 또 다시 아이디로 사용하지 못한다.*/
#gungseo {
font-family: "궁서";
font-size: 40px;
text-decoration: underline;
}
/* 3). 클래스 선택자 : 클래스명 앞에 .을 써준다. 동일 페이지에서 여러 번 사용가능하다. */
.italic {
color: green;
font-style: italic;
}
a {
font-decoration: none;
}
</style>
</head>
<body>
<!-- 블록 엘리먼트 -->
<div>
영역을 그룹지어 스타일을 적용하는 div태그
</div>
<h1>
제목을 나타내는 h1태그
</h1>
<h2 id="gungseo">
제목을 나타내는 h2태그
</h2>
<h3>
제목을 나타내는 h3태그
</h3>
<h4>
제목을 나타내는 h4태그
</h4>
<h5 class="italic">
제목을 나타내는 h5태그
</h5>
<h6>
제목을 나타내는 h6태그
</h6>
<p class="italic">
문단이나 문장을 작성할 시 사용하는 p태그
</p>
<!-- 인라인 엘리먼트 -->
<span style="font-size: 30px; color: red;">
인라인 요소 콘텐츠를 그룹지어주는 span태그
</span>
<span>
인라인 요소 콘텐츠를 그룹지어주는 span태그
</span>
<a href="http://www.google.com">
구글로 이동
</a>
<img src="images/hippo.jpg" alt="이미지를 대체하는 텍스트, 접근성때문에 반드시 써줘야 한다." >
<strong class="italic">강조하고자 하는 중요한 글을 작성하는 것</strong>
</body>
</html>
*font property
- font-family
폰트 이름이 한글이거나 이름에 공백이 있는 경우
인용부호 ""로 폰트명을 둘러싸줘야 한다.
앞에 놓여있는 글꼴이 더 우선순위로 적용된다.
적용이 안될수도 있어서 2~3개를 써준다.
- 텍스트를 꾸며주는 역할을 하는 속성
text-decoration ex). underline
font-style ex). italic
출처
더보기
- 2020 국비교육과정 공부내용
'CSS' 카테고리의 다른 글
| [CSS] BOX모델 (0) | 2020.08.12 |
|---|---|
| [CSS] 간단한 네비게이션바 만들기 (1) float, (2) height를 이용하기 (0) | 2020.08.11 |
| [CSS] Pseudo Selectors (가상 선택자) - 가상 클래스 (pseudo class), 가상 요소 (pseudo element) (0) | 2020.05.20 |
| [CSS] position (0) | 2020.05.19 |
| [CSS] Box Model의 축약 표현 (0) | 2020.05.18 |