선택자
태그 선택자
<html>
<head>
<style>
body {
color: white;
}
div {
background-color: red;
}
span{
background-color: blue;
}
h1 {
background-color: green;
}
</style>
</head>
<body>
<div>div</div>
<span>span</span>
<h1>h1</h1>
</body>
</html>
클래스 선택자
<html>
<head>
<style>
.active{
color:red;
}
</style>
</head>
<body>
<ul>
<li class="active">A</li>
<li>B</li>
<li class="active">C</li>
<li>D</li>
</ul>
</body>
</html>
아이디 선택자
<html>
<head>
<style>
#active{
color:red;
}
</style>
</head>
<body>
<ul>
<li id="active">A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</body>
</html>
복합 선택자
<html>
<head>
<style>
ul li {
color:green;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<ol>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
</ol>
</body>
</html>
선택자의 우선순위 (캐스케이딩)
<html>
<head>
<style>
li {
color:red;
}
.class_active{
color:blue;
}
#id_active{
color:green;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li class="class_active">B</li>
<li class="class_active" id="id_active">C</li>
<li>D</li>
</ul>
</body>
</html>
효과
테두리 (border)
<html>
<head>
<style>
#s1 {
border:1px solid red;
}
#s2 {
border-left:1px solid red;
}
#s3 {
border:1px dotted red;
}
#s4 {
border:10px solid red;
}
li {
margin:10px;
}
</style>
</head>
<body>
<ul>
<li id="s1">A</li>
<li id="s2">B</li>
<li id="s3">C</li>
<li id="s4">D</li>
</ul>
</body>
</html>
플로팅 (float)
<html>
<head>
<style>
body {
width:400px;
font-size:2em;
}
img {
width:100px;
}
#floatleft {
float: left;
}
#floatright {
float: right;
}
</style>
</head>
<body>
<img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL.<br /><br />
<img id="floatleft" src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design).<br /><br />
<img id="floatright" src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.
The CSS specifications are maintained by the World Wide Web Consortium (W3C).
</body>
</html>
박스모델
opentutorials.org.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
header {
border-bottom:1px solid gray;
}
nav {
float:left;
padding-top:10px;
}
article {
float:left;
width:600px;
padding-left:30px;
}
body {
font-size:0.8em;
}
h1 {
font-size:3em;
}
h2 {
font-size:2em;
}
</style>
</head>
<body>
<header>
<h1>JavaScript</h1>
</header>
<nav>
<ul>
<li>JavaScript란 무엇인가?</li>
<li>변수</li>
<li>상수</li>
<li>반복문</li>
<li>조건문</li>
</ul>
</nav>
<article>
<h2>JavaScript란 무엇인가?</h2>
<p>JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다. 그렇기 때문에 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어이다. 최근에는 HTML5의 적용이 가속화되면서 지금까지 모바일 환경에서 네이티브 앱(안드로이드, IOS)으로 구현해왔던 기능이 웹에서도 대부분 구현할 수 있게 되고 있다. 웹이 크로스플랫폼이라는 점, 검색 가능하다는 점, 네이티브 디바이스를 제어할 수 있는 하드브리드 시스템(phonegap 등)이 존재한다는 점에서 웹의 중요함은 더욱 확대될 전망이다. 자연스럽게 웹에서 구동되는 유일한 언어인 JavaScript의 중요함도 점점 커질 것으로 예상된다.</p>
<p><a href="#goal">자바스크립트로 할 수 있는 일</a>을 참고하면 알 수 있지만, 최근에는 자바스크립트가 웹을 벗어나서 광범위하게 사용되고 있다. 그 효용이 다각적이면서도 배우기 쉬운 점 때문에 자바스크립트는 중급 개발자나 프로그래밍 입문자 모두가 도전해볼만한 언어다.</p>
<h3>역사</h3>
<p>HTML이 한번 화면에 출력된 후에는 그 형태나 동작방법을 바꿀 수 없는 문제를 해결하기 위해서 네스케이프에서 만들어졌다. 이후에 이 언어는 마이크로소프트의 인터넷 익스플로러에 jscript라는 이름으로 탑재된다. 후에 ECMA라는 표준화 기구로 이 언어의 관리 주체가 옮겨졌다.</p>
<h3>ECMAScript</h3>
<p>ECMAScript는 표준화 기구인 Ecma International에 의해서 관리되는 자바스크립트 표준안이다. 현재의 자바스크립트는 ECMAScript 3 기반으로 만들어졌고, 현재 시점(2013년)에서는 ECMAScript 5가 표준으로 정의 되었고 이 버전의 자바스크립트를 브라우저 벤더들이 자신들의 브라우저에 구현하는 작업이 한창이다. 곧 ECMAScript 5의 새로운 기능들을 웹에서도 문제 없이 사용할 수 있게 될 것이다. ECMAScript 4는 기존의 자바스크립트와 너무 큰 차이점 때문에 표준으로 채택되지 못했다.</p>
<h3>JavaScript 학습에 요구되는 선행학습</h3>
<p>웹페이지를 동적으로 제어하기 위한 목적으로 자바스크립트를 학습한다면 아래 내용은 반드시 선행해야한다. 아래 내용을 학습 한 후에 본 수업을 공부하고 DOM을 학습하면 웹페이지를 프로그래밍적으로 제어 할 수 있다. 최근에는 DOM을 직접 제어하는 것 보다는 jQuery와 같은 라이브러리를 사용하는 것이 일반적이다. DOM에 대한 내용은 <a href="http://opentutorials.org/course/49/24" target="_blank">DOM 수업</a>을 참고하고 jQuery에 대한 내용은 <a href="http://opentutorials.org/course/53" target="_blank">jQuery 수업</a>을 참고한다.</p>
</article>
</body>
</html>
