반응형
전 시간에 <style> 태그로 css임을 알렸다
오늘은 태그 대신 속성으로 알려줄 예정이다.
style="color:red"
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
a {
color:red;
text-decoration: none;
}
</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" 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>2.html 내용이다.
여기서 a {} 는 선택자 라고 부른다. selector
이 웹페이지에서 누구에게 줄지 선택한다는 점에서
color:red; 입분은 declaration
결론은 a{}처럼 선택자를 사용할 수도 있고
웹페이지 안에 style=처럼 style 속성을 쓸 수 있다는 것
세미콜론은 곡 필요하다
ㅏ한줄에 있어도 동작하게 된다.
css만큼은 밑줄을 긋고 싶다.
style="color:red;" 옆에 text-decoration:underline"
경험적으로 접한걸 이제 이론적으로 설명
selector : a{}
declaration : color:red;
property : color
두가지 여정
웹페이지 어던 property가 존재하는가
다양한 선택자를 배울 수 있다.
반응형
'웹 프로그래밍 > CSS' 카테고리의 다른 글
| 생활코딩 css 반응형 디자인과 미디어 쿼리 소개 (0) | 2021.07.14 |
|---|---|
| 생활코딩 css 그리드2 그리드 써먹기 (0) | 2021.07.14 |
| 생활코딩 css 그리드 (0) | 2021.07.14 |
| 생활코딩 박스모델2 줄긋기 (0) | 2021.07.14 |
| 생활코딩 박스모델 (0) | 2021.07.14 |
| 생활코딩 css 선택자를 스스로 알아내는 방법 (0) | 2021.07.12 |
| 생활코딩 css속성을 스스로 알아내는 방법 (0) | 2021.07.12 |
| 생활코딩 css의 등장 (0) | 2021.07.12 |