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>외부파일방법 (서비스 단계에서 많이 사용)
- css 확장자 생성
@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 Selectors
클래스로 묶어서 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>CSS Combinators
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>CSS Pseudo-classes
<!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>CSS Pseudo-elements (:: 두개 사용한다)
<!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>CSS Attribute Selectors (속성값으로 효과를 준다.)
<!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>CSS Backgrounds ```
<body>
<h1>hello css</h1>
<h2>hello css</h2>
</body><body>
<h1>hello css</h1>
<h2>hello css</h2>
</body>Layout = table = box
구형은 table
신형은 div와css
border
margin
padding
width/height
위 4가지를 활용해서 테이블도 만들 수 있다.
상상을 현실로
0개의 댓글
