CSS(Cascading Style Sheet)
HTML에 종속된 스타일 문서를 만드는 언어
<style>
선택자(selector) {서술(description)}
선택자 {속성1:값; 속성2:값; }
</style>
선택자 종류
- 상위엘리먼트 하위엘리먼트 순으로 순차적으로 적용
- 선택자명 : tag 명
- #선택자 : tag의 id
- .선택자 : tag의 class
선택자 심화학습
ex_css_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1,h2 {
color:red;
font-size:10px
}
h2{
text-decoration:underline;
}
header h1{
border:1px solid red;
}
</style>
</head>
<body>
<header>
<h1>CSS</h1>
</header>
<h2>JavaScript</h2>
<h3>HTML</h3>
<h1>PHP</h1>
</body>
</html>
박스모델
ex_css_2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#selected {
border:red 1px solid;
padding:30px;
margin:50px;
}
#extra {
border:blue 1px solid;
}
</style>
</head>
<body>
<ul>
<li>html</li>
<li id="selected">css</li>
<li id="extra">javascript</li>
</ul>
</body>
</html>
마진과 패딩
float : 페이지 내의 물체의 흐름식 배치 방식
ex_css_3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img{
border:1px solid red;
float:right;
}
</style>
</head>
<body>
<p>
<img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 것을 목적으로 하는 비영리 활동입니다. 그간 프로그래머들이 이룩한 성취를 일반에 알려서 고독한 프로그래머들의 관객을 모객하는 활동이기도 합니다. 생활코딩은 세 가지로 구성되어 있습니다.
</p>
<h2>웹 프로그래밍</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
<li>PHP</li>
<li>mysql</li>
</ol>
<h2>공동공부</h2>
<p>
공동공부는 온라인의 편리한 접근성에 오프라인의 함께하는 느낌을 하이브리드한 공부방식입니다.공동공부를 통해서 덜 외롭게 공부할 수 있습니다. 아래 동영상은 공동공부에 참여하는 방법입니다.
</p>
</body>
</html>
