CSS-1(午前)
HTMLドキュメントを飾るCSS
インラインメソッド
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
</style>
<body>
<!--CSS 적용중에 인라인 방법-->
<div style="color:blue">Hello CSS</div>
</body>
</head>
</html>ヘッダーを含める方法(開発段階でよく使用される)
<!DOCTYPE html>
<html>
<head> <!--헤더 포함 방법 (개발단계에서 많이 사용)-->
<meta charset="UTF-8">
<style type="text/css">
div{color:green;}
</style>
<body>
<div>Hello CSS</div>
</body>
</head>
</html>外部ファイルメソッド(通常はサービスフェーズで使用)
@charset "utf8";
div{color:yellowgreen;}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./default.css"/>
<body>
<div>Hello CSS</div>
</body>
</head>
</html>クラスグループ別cssの設定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
/*다른 태그집합*/
.p1{color:red;}
.p2{color:blue;}
</style>
<body>
<p class="p1">Hello CSS</p>
<div class="p1">Hello CSSS</div>
<p class="p2">Hello CSS</p>
<div class="p2">Hello CSSS</div>
<p class="p3">Hello CSS</p>
<div class="p3">Hello CSSS</div>
</body>
</head>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
/*한 개의 태그
id는 중복되지 않는게 좋다*/
#i1{color:red;}
#i2{color:yellow;}
#i3{color:blue;}
</style>
<body>
<p id="i1"> Hello CSS</p>
<div id="i2">Hello CSSS</div>
<p id="i3">Hello CSS</p>
<div id="i4">Hello CSSS</div>
<p id="i5">Hello CSS</p>
<div id="i6">Hello CSSS</div>
</body>
</head>
</html>影響は1台のみ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
/*한 개의 태그*/
/*자손 선택자*/
/*div의 1대 자식들에게만 영향을 미친다.*/
div > p {color: red;}
</style>
<body>
<p>hello css1</p>
<div>
<p>hello css2</p>
<span>
<P>hello css3</P>
</span>
<p>hello css4</p>
</div>
<p>hello css5</p>
</body>
</head>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
/*한 개의 태그*/
/*자손 선택자*/
div p {color: red;}
</style>
<body>
<p>hello css1</p>
<div>
<p>hello css2</p>
<span>
<P>hello css3</P>
</span>
<p>hello css4</p>
</div>
<p>hello css5</p>
</body>
</head>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
/*한 개의 태그*/
/*첫째 아우 선택자*/
div + p {color: red;}
</style>
<body>
<p>hello css1</p>
<div>
<p>hello css2</p>
<span>
<P>hello css3</P>
</span>
<p>hello css4</p>
</div>
<p>hello css5</p>
<p>hello css5</p>
<p>hello css5</p>
</body>
</head>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
/*한 개의 태그*/
/*첫째 아우 선택자*/
div ~ p {color: red;}
</style>
<body>
<p>hello css1</p>
<div>
<p>hello css2</p>
<span>
<P>hello css3</P>
</span>
<p>hello css4</p>
</div>
<p>hello css5</p>
<p>hello css5</p>
<p>hello css5</p>
</body>
</head>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
/*한 개의 태그*/
a:link{color:#ff0000; text-decoration: none;}
a:visited {color:green;}
a:hover{color:gray; text-decoration: underline;}
a:active{color:blue;}
</style>
</head>
<body>
<a href="https:/m.naver.com">모바일 네이버</a><br/>
<a href="https:/m.nate.com">모바일 네이트</a><br/>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div::first-line{color:#ff0000;} /*브라우저 크기에 따라 상대적이다*/
div::first-letter{color:#ff00ff;} /*브라우저 크기에 따라 상대적이다*/
</style>
</head>
<body>
<div>
The double colon replaced
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
[class|=top]{
background: yellow;
}
</style>
</head>
<body>
<h2>css [attribute|="value"] Selector</h2>
<h1 class="top-header"> welcome</h1>
<p class="top-text">hello world</p>
<p class="topcontent">are you learing css?</p>
</body>
</html>```
<body>
<h1>hello css</h1>
<h2>hello css</h2>
</body>```
背景画像
```
<body>
<h1>hello css</h1>
<h2>hello css</h2>
</body>Layout = table = box
古い銀盤
新しいモデルにはdivとcssが含まれています
border
margin
padding
width/height
以上の4種類を利用してテーブルを作ることもできます.
Reference
この問題について(CSS-1(午前)), 我々は、より多くの情報をここで見つけました https://velog.io/@jakebae87/CSS-1-오전テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol