CSS_1강_1_CSS특징

열라뽕따히·2024년 3월 5일

CSS

목록 보기

2/20

CSS(Cascading Style Sheet) 이란?

HTML이 웹 페이지의 "뼈대"라고 한다면, CSS는 "살" 이라고 할 수 있음
즉, HTML이 웹 페이지의 정보를 나타낸다면, CSS는 HTML을 좀 더 보기 좋게 디자인하는 역할이라고 생각하면 됨

`<ol>`과 `<li>`, `<ul>`의 사용법

=============================코드=============================

<body>
<h3>CSS 특징</h3>
		 
		 <ol>
		 		<li>Cascading Style Sheet</li>
		 		<li>HTML 문서에 스타일(디자인)을 적용하는 언어</li>
		 		<li>CSS 사용 방법 : 인라인 방식(태그에 직접 적용),
		 							head 영역, 외부 파일(.css)</li>
		 </ol>
		 
		 <ul>
		 		<li>CSS 형식 : 선택자 {속성 : 값;}</li>
		 		<li>선택자 : body 태그에서 선언한 태그</li>
		 		<li>하위 채그 지정 : 상위태그 하위태그 {속성 : 값;}</li>
		 </ul>
</body>

=============================실행=============================

`<h3>`과 `<p>`의 사용법

=============================코드=============================

<body>

		<h3>웹 표준 이전의 예</h3>
				
		<p>
				이제 <font size = "5" color="blue">웹 표준</font>의 역할은 
                아주 <font size = "5" color="blue"> 중요</font>합니다.
					
		</p>

</body>

=============================실행=============================

글자 크기, 굵기, 색상

<span> : 내가 지정한 영역 안에서 해당 영역이 가지는 스타일을 변경할 수 있는 태그

=============================코드=============================

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

		span {
			font-size: 20px;         /* 글자 크기 속성 */
			font-weight: bold;       /* 글자를 진하게 하는 속성 */
			color: red;              /* 글자 색상 */
		}
		
</style>
</head>
<body>

		<h3>웹 표준 이후의 예</h3>
				
		<p>
			이제 <span> 웹 표준</span>의 역할은 
            아주 <span> 중요</span> 합니다.
					
		</p>

</body>
</html>