<WEB Page에 CSS 삽입하는 방법>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a {
color: red;
}
</style>
<title>우리누리의 축제정보</title>
<body>
<h1> <a href="home.html">우리누리 축제정보</a> </h1>
<ol>
<li><a href="소개.html">소개</a></li>
<li><a href="검색.html">검색</a></li>
<li><a href="캘린더.html">캘린더</a></li>
</ol>
<h2>Fetival</h2>
<img src="C:\Users\Yeomyaloo\Desktop\Programming\Web\캡스톤디자인\이미지\festival.jpg" width="100%">
</body>
CSS를 사용하는 기본적인 방법
1. style 테그를 통해서 우리가 CSS를 사용하고 있음을 알려주는 방법
<style>
a {
color: red;
}
</style>
2. 속성을 이용하는 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a {
color: red;
}
</style>
<title>우리누리의 축제정보</title>
<body>
<h1> <a href="home.html">우리누리 축제정보</a> </h1>
<ol>
<li><a href="소개.html">소개</a></li>
<li><a href="검색.html" style = "color: blue">검색</a></li> <!-- HTML의 속성을 이용해서 CSS적용 하는 방법-->
<li><a href="캘린더.html">캘린더</a></li>
</ol>
<h2>Fetival</h2>
<img src="C:\Users\Yeomyaloo\Desktop\Programming\Web\캡스톤디자인\이미지\festival.jpg" width="100%">
</body>
그렇다면 우리는 왜 HTML의 속성을 이용해서 디자인을 넣는 것일까?
= CSS는 한 번에 모든 디자인을 넣어주기 때문에 개별적으로 디자인을 적용시키고 싶을 경우가 있기 때문에 이러한 경우에 속성을 이용해서 디자인을 적용시켜준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a { <!-- 선택자라고 부른다 -->
color: black; <!-- 효과, 선언이라고 부른다.-->
}
</style>
<title>우리누리의 축제정보</title>
<body>
<h1> <a href="home.html">우리누리 축제정보</a> </h1>
<ol>
<li><a href="소개.html">소개</a></li>
<li><a href="검색.html" style = "color: blue">검색</a></li> <!-- CSS가 아닌 태그를 사용하기 때문에 이와같은 경우 선택자를 사용할 필요가 없다고 본다.-->
<li><a href="캘린더.html">캘린더</a></li>
</ol>
<h2>Fetival</h2>
<img src="C:\Users\Yeomyaloo\Desktop\Programming\Web\캡스톤디자인\이미지\festival.jpg" width="100%">
</body>
1. 스타일 테그를 쓴다.
2. 스타일 속성을 쓴다.
= CSS를 적용시킬 두 가지의 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a {
color: black;
text-decoration: none;
}
</style>
<title>우리누리의 축제정보</title>
<body>
<h1> <a href="home.html">우리누리 축제정보</a> </h1>
<ol>
<li><a href="소개.html">소개</a></li>
<li><a href="검색.html" style = "color: blue">검색</a></li>
<li><a href="캘린더.html">캘린더</a></li>
</ol>
<h2>Fetival</h2>
<img src="C:\Users\Yeomyaloo\Desktop\Programming\Web\캡스톤디자인\이미지\festival.jpg" width="100%">
</body>
세미콜론을 넣어주어야 구분을 할 수 있기 때문에 세미콜론(;) 잘 넣어주세요
기본적인 사용방법을 강의한 앞전 시간의 강의를 다시금 정리시킨 강의로 확실하게 이해하고 넘어가는 것이 좋다 하는 사람들은 보고 넘어가는 것이 좋을 듯함
'WEB > HTML+CSS(Front-end)' 카테고리의 다른 글
| CSS - 그리드 (부제: div/span 테그를 알아보자) (0) | 2021.05.12 |
|---|---|
| CSS - CSS의 속성 알아내기 (부제: 속성을 알아내서 우리가 스스로 웹페이지를 꾸며보자) (0) | 2021.05.12 |
| CSS - CSS의 시작 (부제: HTML과 CSS의 사용 차이법을 알아보자) (0) | 2021.05.10 |
| HTML - 태그의 제왕(부제: 링크를 알아보자 <a>) (0) | 2021.05.05 |
| HTML - 문서의 구조 (부제: 태그의 슈퍼스타들을 알아보자) (0) | 2021.05.05 |