색을 바꾸고 싶을 때 (html 문법에서)
<font color="red"></font>
이렇게 말고 이제는 CSS에서 디자인하기
아래 소스코드에서 주석 써놓은 곳 보기
1. style 태그를 쓰는 방법
<style></style>
밑줄을 없애주려면
text-decoration: none
<style>
a {
color:black;
}
</style>
여기서 a는 selector
color:red는 declaration
color는 property
red는 value
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
a {
color:black;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>CSS</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
</p>
</body>
</html>2. style 속성을 쓰는 방법
style="color:red"
밑줄을 그어주려면
text-decoration:underline
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html" style="color:red;text-decoration:underline">CSS</a></li> // 이부분!
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>CSS</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
</p>
</body>
</html>이 뒤로는 이제 css의 속성을 직접 검색해가며 공부하기
css text center property
뭐 이런식으로... 그러면
text-align:center
로 써야하는구나 라고 알 수 있다. 그때그때 찾아서 쓸 줄 알면된다.
이번엔 선택자 selector
이미 본 것은 회색으로 만들고 싶다
saw 라는 class 로 그룹핑하고 색을 회색으로 만들고 싶다.
.saw {
color:gray;
}
이런식으로
먼저 효과를 주고 싶은 것은 id 선택자를 이용해야한다.
id="active"하고
위에 style 태그에서 #active 한 것처럼 쓰면된다
뒤쪽으로 쓸 수록 실행되는 우선순위가 높다.
id선택자 > 클래스선택자 > 태그선택자
css selector 라고 검색해서 이것저것 찾아볼 것.
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
#active {
color:red;
}
.saw {
color:gray;
}
a {
color:black;
text-decoration: none;
}
h1 {
font-size:45px;
text-align: center;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw" id="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>CSS</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
</p>
</body>
</html>박스 모델
테두리는 border
아래 소스코드 참고
display:inline 은 딱 그 부피만 차지하게 박스가 설정되고
display:block 은 그 줄 전체가 다 박스 설정이 된다
테두리 사이와 글씨 사이의 간격은 padding
테두리와 테두리 사이의 간격은 margin
테두리의 크기를 바꾸려면 width
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1{
border:5px solid red;
padding:20px;
margin:20px;
display:block;
width:100px;
}
</style>
</head>
<body>
<h1>CSS</h1>
<h1>CSS</h1>
</body>
</html>
