===============================
CSS란?
===============================
HTML이 정보를 표현한다면
CSS는 HTML을 시각적으로 꾸며주는 역할을 한다.
example2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h1>생활코딩이란?</h1>
<p>
일반인을 위한 프로그래밍 커리큘럼입니다.
</p>
<p>
누구나 프로그래밍을 할 수 있습니다.
</p>
</body>
</html>
CSS를 통해서 기대되는 효과들
정보(HTML)과 디자인(CSS)를 분리할 수 있다.
정보를 수정하지 않고 디자인만 변경할 수 있다.http://www.csszengarden.com/
검색엔진이 HTML을 해석 가능하도록 하기 때문에 더 많은 방문자들이 방문하도록 유도할 수 있다.
HTML에서 디자인 분리함으로서 시각장애인을 위한 프로그램인 스크린리더가 HTML을 해석할 수 있도록 할 수 있다.
===============================
HTML에서 CSS 사용하기
===============================
inline 방식 (예제1)
엘리먼트에 스타일을 직접 기술하는 방식
셀렉트가 필요 없다.
CSS 선언이 분명해서 style tag 방식에 비해 엘리먼트에 영향을 주고 있는 CSS를 추적하기가 쉽다.
코드가 많아지고, 의미와 디자인의 분리라는 CSS의 취지와 벗어난다.
style tag 방식 (예제2)
style 태그에 기술하는 방식
inline 방식 대비 경제적으로 코딩할 수 있다.
의미와 디자인의 분리라는 CSS의 취지에 부합한다.
외부 파일 방식 (예제3)
CSS를 별도의 파일로 분리해서 링크하는 방식
문법적으로는 style tag와 동일
파일의 교체로 디자인을 변경할 수 있다는 점에서 유지보수가 편리하다.
예제1. inline 방식
<html>
<body>
<!-- 태그 안에 스타일 시트를 직접 기술, selector 불필요 -->
<h1 style="color:red">생활코딩 CSS 강의</h1>
<p>CSS는 쉽습니다.</p>
</body>
</html>
예제2. style tag 방식
<html>
<head>
<style type="text/css">
h1 {
color:red;
}
</style>
</head>
<body>
<!-- 태그 안에 스타일 시트를 직접 기술, selector 불필요 -->
<h1>생활코딩 CSS 강의</h1>
<p>CSS는 쉽습니다.</p>
</body>
</html>
예제3. 외부 파일 방식
<html>
<head>
<link type="text/css" href="http://opentutorials.org/file/style.css" rel="stylesheet" />
</head>
<body>
<!-- 태그 안에 스타일 시트를 직접 기술, selector 불필요 -->
<h1>생활코딩 CSS 강의</h1>
<p>CSS는 쉽습니다.</p>
</body>
</html>
/* http://opentutorials.org/file/style.css 의 내용 */
h1{
color:red;
}
===============================
선택자
===============================
선택자(selector)란?
Id 선택자
id 속성은 전체 문서에서 하나의 태그를 식별하기 위해서만 사용됨
우선순위가 가장 높음
css 선택자에서는 #을 사용해서 id임을 표시
다음 예제는 id값이 memo인 태그의 컨텐츠를 빨간색으로 표시하도록 함
<style type="text/css">
#memo {
color:red;
}
</style>
<div id="memo">
red
</div>
Class 선택자
class 속성은 일련의 태그를 그룹핑해서 하나처럼 제어하기 위해서 사용
class 속성에는 공백으로 구분된 여러개의 class가 표시될 수 있음
css선택자에서는 '.'을 사용해서 class임을 표시
<style type="text/css">
.red{
color:red;
}
</style>
<div class="red">red</div>
<p class="red intro">Hello world</p> <!-- 하나의 클래스에 두개의 클래스 이름이 정의됨 -->
type 선택자
특정 태그명을 가진 엘리먼트 전체를 제어하기 위해서 사용
css선택자에서는 태그의 이름을 사용함
<style type="text/css">
h1{
color:red;
font-size:30px;
}
</style>
<h1>Hello world</h1>
우선순위가 존재함.
===============================
선택자의 조합
===============================
하위 선택자
특정 엘리먼트의 하위에 나오는 엘리먼트를 선택하는데 사용
부모가 먼저 나오고 자식이 나중에 나옴
공백을 통해서 부모와 자식을 구분
<style type="text/css">
#navigation li{
color:blue;
}
</style>
<div id="navigation">
<ul>
<!-- 글씨가 파란색으로 표현됨 -->
<li>홈</li>
<li>제품소개</li>
<li>고객센터</li>
</ul>
</div>
<ul>
<!-- 아래 내용은 영향을 받지 않음 -->
<li>홈</li>
<li>제품소개</li>
<li>고객센터</li>
</ul>
하나의 CSS선언을 여러개의 선택자에 적용하기
하나의 css선언을 여러 엘리먼트 셀렉터에 적용하고 싶을 때 사용
선택자와 선택자를 ',(콤마)'로 구분
<!--
h1과 #link 선택자 사이에 ,(콤마)를 두어 글씨의 색을 붉은색으로 지정
-->
<style type="text/css">
h1, #link{
color:red;
}
</style>
<h1>생활코딩에 오신 것을 환영합니다.</h1>
<a id="link" href="http://opentutorials.org">생활코딩</a>
자식선택자 -child selector
특정 엘리먼트의 직접적인 하위 엘리먼트에 대해서만 선택할 때 사용(하위 선택자와 다름)
ie6는 지원되지 않음
<!--
id navigation의 직접적인 자식인 li만 테두리가 생기고,
<li>사이트</li>의 하위 엘리먼트에는 테두리가 생기지 않는다.
-->
<style type="text/css">
#navigation > li{
border:1px solid red;
}
</style>
<ul id="navigation">
<li>홈</li>
<li>사이트
<ul>
<li>생활코딩</li>
<li>코딩생활</li>
</ul>
</li>
<li></li>
</ul>
===============================
스타일링
===============================
CSS는 웹페이지를 꾸며주는 언어다.
이를 위해서 다양한 효과들이 사용된다.
그 중에는 모든 엘리먼트에 공통적으로 적용되는 효과도 있고,
특정한 엘리먼트와 컨텐츠를 꾸며주는 효과도 있다.
스타일링의 하위토픽에서는 엘리먼트와 컨텐츠 별로 꾸미는 방법에 대해서 알아본다.
span 태그
텍스트는 태그가 아니라 컨텐트이기 때문에 텍스트를 꾸며주기 위해서는 텍스트를 감싸는 태그가 필요하다.
줄바꿈 없이 일부 텍스트를 꾸며주기 위해서는 꾸미려는 텍스트를 <span> 태그로 감싸고 여기에 효과를 준다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
할지라도 그들의 관현악이며, 사는가 있음으로써 <span style="color:red">생명</span>을 힘있다.
</body>
</html>
색
텍스트에 컬러를 부여할 때는 color 효과를 사용한다. CSS에서는 색상을 지정하는 3가지 방법이 있는데 아래와 같다.
Hex: 16진수로 색상 값을 표현, #ff0000 (붉은색), #00ff00(초록), #0000ff(파랑)
RGB: 붉은색, 초록, 파랑의 값을 조합해서 색상 값을 표현, RGB(255,0,0), RGB(0,255,0), RGB(0,0,255)
별명: ed, blue, green등(http://www.somacon.com/p142.php)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style>
#hex {
color: #FF0000;
}
#rgb {
color: RGB(255,0,0);
}
#name {
color: red;
}
</style>
</head>
<body>
<div id="hex">
hex (color:#ff0000)
</div>
<div id="rgb">
RGB (color:RGB(255,0,0))
</div>
<div id="name">
Color Name (color:red)
</div>
</body>
</html>
===============================
정렬
===============================
텍스트를 정렬하기 위해서는 정렬하고자 하는 텍스트를 태그로 감싸고 이 태그에 text-align 효과를 지정한다. CSS에서는 4가지 형태의 정렬방식을 지원한다.
eft 왼쪽 정렬
right 오른쪽 정렬
center 가운데 정렬
justify 양쪽 정렬, 텍스트 간의 간격을 조정해서 행의 간격을 일치시킴
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style>
div {
margin: 30px;
width: 500px;
}
#left {
text-align: left;
}
#right {
text-align: right;
}
#justify {
text-align: justify;
}
#center {
text-align: center;
}
</style>
</head>
<body>
<div id="left">
할지라도 그들의 관현악이며, 사는가 있음으로써 생명을
<br />
공자는 옷을 놀이 보이는 그림자는 평화스러운 열매를 품으며
<br />
용감하고 만물은 그들의 이것이다.
<br />
무엇을 날카로우나 꽃이 어디 뿐이다.
<br />
꽃이 웅대한 되려니와, 끓는 피가 만물은 있는 하는 듣는다.
<br />
대한 사람은 그들은 인간이 있는가?
<br />
발휘하기 구하지 웅대한 오아이스도 피어나기 무한한 불어
<br />
</div>
<div id="right">
할지라도 그들의 관현악이며, 사는가 있음으로써 생명을
<br />
공자는 옷을 놀이 보이는 그림자는 평화스러운 열매를 품으며
<br />
용감하고 만물은 그들의 이것이다.
<br />
무엇을 날카로우나 꽃이 어디 뿐이다.
<br />
꽃이 웅대한 되려니와, 끓는 피가 만물은 있는 하는 듣는다.
<br />
대한 사람은 그들은 인간이 있는가?
<br />
발휘하기 구하지 웅대한 오아이스도 피어나기 무한한 불어
<br />
</div>
<div id="center">
할지라도 그들의 관현악이며, 사는가 있음으로써 생명을
<br />
공자는 옷을 놀이 보이는 그림자는 평화스러운 열매를 품으며
<br />
용감하고 만물은 그들의 이것이다.
<br />
무엇을 날카로우나 꽃이 어디 뿐이다.
<br />
꽃이 웅대한 되려니와, 끓는 피가 만물은 있는 하는 듣는다.
<br />
대한 사람은 그들은 인간이 있는가?
<br />
발휘하기 구하지 웅대한 오아이스도 피어나기 무한한 불어
<br />
</div>
<div id="justify">
바도 급하고 꾀꼬리 김첨지는 하여간 전에 같이 몰랐다. 자기를 흐리고 없이 말은들었었는데. 왈칵 무시무시한 움푹한 옷도 하나 기다리고 예끼 돈을 대었다. 상판을딱딱 없으니, 그 멈춘 다니는 메이었다. 하고 달려들며 내기를 눈길을 같이 대한 벌었단 슬근슬근 높아졌다. 왜 가락이 바다 하고 제 언땅에 아니로되, 정거장까지 듯하였다. 만일 하고 남대문 정거장에서 꼬리를 붙었어, 정말 모르리라. 붙은 궂은 흘릴 알아 어찌할 울렸다. 염려를 전을 자식뻘밖에 문을 전이 살려준 모르리라. 운수가 그 빌어든 나를 걱정을 구워지는 남을 듯싶다. 너비아니 김첨지를 발길은 벌써 하고 치삼이와 하였다.
</div>
</body>
</html>
텍스트 장식
overline 윗줄
line-through 취소선
underline 밑줄
line-height
행간격을 지정한다.
letter-spacing
문자와 문자사이의 간격을 지정한다.
vertical-align
텍스트의 수직 정렬을 지정한다.
white-space
줄바꿈되는 방식을 지정한다.
===============================
폰트 꾸미기
===============================
ont
폰트는 글꼴을 의미하는데, 글자의 서체를 의미한다.
Font Family
일반적인 방법으로는 웹페이지에는 글꼴을 포함할 수 없다.
그렇기 때문에 웹페이지에 지정된 글꼴을 사용자가 보기 위해서는 사용자의 디바이스에도 해당 글꼴이 포함되어 있어야 한다.
그래서 CSS에서는 font family라는 개념이 있는데, 글꼴의 우선순위를 정해서 여러개 지정하면 그 중에서 사용할 수 있는 폰트를 반영하게 된다.
예를들어 아래의 구문은 사용자 컴퓨터에 Times New Roman 글꼴이 있다면 적용하고 없다면 Times를 적용한다.
폰트 우선순위 제어
p{font-family:"Times New Roman", Times, serif;}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
a {
font-family:'돋움',Dotum,AppleGothic,Arial,sans-serif
}
</style>
</head>
<body>
<a href="http://opentutorials.org">오픈튜토리얼스</a>
</body>
</html>
고정폭, 가변폭?
일반적으로 글꼴을 디자인 할 때 문자의 폭을 문자의 모양에 따라서 다른 넓이를 갖게 된다.
이를테면 숫자 1과 문자 m의 폭을 같게 디자인하면 어색하게 느껴질 수 있기 때문이다.
이러한 방식을 가변폭이라고 한다.
반대로 데이터 분석이나 코딩과 같은 일을 하는데는 미려함 보다는 정확함을 더 중시하기 때문에 글자의 폭을 같게 디자인하는데 이러한 방식을 고정폭이라고 한다.
일반적으로 고정폭 글꼴은 굴림체처럼 폰트의 이름 뒤에 '체'를 붙인다.
Sans-serif VS serif
serif(세리프)란 마지막에 꺽기는 폰트.
대표적인 글꼴로 바탕체, 궁서체, Time New Roman이 있다.
sans-serif(산세리프)란 세리프의 장식적인 요소가 없는 디자인으로 굴림체, 돋음체, Arial, Verdana가 대표적이다.
===============================
Font Size
===============================
글꼴의 크기를 지정할 때는 font-size 효과를 사용한다.
font-size 효과에서 자주 사용되는 단위는 px와 em이 있고,
W3C에서는 em의 사용을 권장하고 있다. em은 상대적인 크기인데,
폰트의 대문자 M의 폭을 16px로 계산하기 때문에 1em은 기본적으로 16px과 같다고 생각하면 된다.
하지만 em은 현재 엘리먼트가 상속하고 있는 폰트 크기를 기준으로 상대적으로 결정된다.
변환 서비스: http://pxtoem.com/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
#base{
font-size:50px;
}
.em05{
font-size:0.5em;
}
.em2{
font-size:2em;
}
div{
border:1px solid black;
padding:10px;
}
</style>
</head>
<body>
<div id="base">
50px
<div class="em05">
0.5em = 25px;
</div>
<div class="em2">
2em = 100px
<div class="em05">
0.5em = 50px
</div>
</div>
</div>
</body>
</html>
Font Weight
글꼴의 두께를 지정할 때는 font-weight를 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
#normal {
font-weight: normal;
}
#bold {
font-weight: bold;
}
#bolder {
font-weight: bolder;
}
#lighter {
font-weight: lighter;
}
#lighter {
font-weight: lighter
}
#w100 {
font-weight: 100;
}
#w200 {
font-weight: 200;
}
#w300 {
font-weight: 300;
}
#w400 {
font-weight: 400;
}
#w500 {
font-weight: 500;
}
#w600 {
font-weight: 600;
}
#w700 {
font-weight: 700;
}
#w800 {
font-weight: 800;
}
#w900 {
font-weight: 900;
}
</style>
</head>
<body>
<div id="normal">
normal
</div>
<div id="bold">
bold
</div>
<div id="bolder">
bolder
</div>
<div id="lighter">
lighter
</div>
<div id="w100">
100
</div>
<div id="w200">
200
</div>
<div id="w300">
300
</div>
<div id="w400">
400
</div>
<div id="w500">
500
</div>
<div id="w600">
600
</div>
<div id="w700">
700
</div>
<div id="w800">
800
</div>
<div id="w900">
900
</div>
</body>
</html>
===============================
링크 꾸미기
===============================
링크의 상태
링크는 아래와 같이 4가지의 상태를 가지고 있고, 각 상태에 따라서 시각적으로 다른 모양을 가질 수 있다.
방문하지 않은 링크 a:link{}
방문했던 링크 a:visited{}
마우스를 오버한 링크 a:hover{} a:link과 a:visited 뒤에 와야 함
마우스를 누른 상태의 링크 a:active{} a:hover 뒤에 와야 함
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style>
a:link {
color: red;
}/* unvisited link */
a:visited {
color: blue;
}/* visited link */
a:hover {
color: green;
}/* mouse over link */
a:active {
color: orange;
} /* selected link */
</style>
</head>
<body>
<a href="http://opentutorials.org">오픈튜토리얼스</a>
</body>
</html>
===============================
표의 특징
===============================
표에 대한 HTML의 기본 디자인은 표 전체의 테두리와 셀(cell) 사이에 여백이 기본적으로 지정되어 있다.
이 여백을 무시하려면 <table> 태그에 border-collapse 효과의 값으로 collapse를 주면 된다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style>
table{
border:1px solid gray;
border-collapse: collapse;
}
th{
background-color: #d0d0d0;
font-weight:bold;
}
th,td{
border:1px solid gray;
padding:5px;
}
</style>
</head>
<body>
<table>
<tr>
<th>순서</th>
<th>과목명</th>
<th>토픽수</th>
</tr>
<tr>
<td>1</td>
<td>웹서비스 만들기</td>
<td>12</td>
</tr>
<tr>
<td>2</td>
<td>HTML 수업</td>
<td>13</td>
</tr>
<tr>
<td>3</td>
<td>HTML 수업</td>
<td>9</td>
</tr>
<tr>
<td>4</td>
<td>CSS 수업</td>
<td>15</td>
</tr>
</table>
</body>
</html>
===============================
배경 꾸미기
===============================
엘리먼트의 배경
엘리먼트의 배경에 색상을 부여하거나 이미지를 표시하고 싶을 때 background 효과를 사용한다.
이 효과를 이용하면 배경에 사용된 이미지의 위치를 지정하거나, 반복 할 수 있다.
배경색
background-color:색상값
Hex 16진수로 색상 값을 표현, #ff0000 (붉은색), #00ff00(초록), #0000ff(파랑)
RGB 붉은색, 초록, 파랑의 값을 조합해서 색상 값을 표현, RGB(255,0,0), RGB(0,255,0), RGB(0,0,255)
별명 red, blue, green등
배경 이미지
background-image: url('이미지의 URL');
background-repeat: 반복방식
repeat 수직, 수평 모두 반복함
repeat-x 수평만 반복함
repeat-y 수직만 반복함
no-repeat 반복하지 않음
배경 이미지의 위치
background-position: 위치값
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom 배경 위치를 지정
x% y% x%는 수평위치를 y%는 수직 위치를 의미하고, 이미지의 상대적인 위치를 지정한다.
xpos ypos 이미지의 절대적인 위치를 지정한다.
단축속성
body {background:#00ffff url('image.png') no-repeat right top;}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style>
#logo {
background: url('https://s3-ap-northeast-1.amazonaws.com/opentutorialsfile/course/94.png') no-repeat;
width: 200px;
height: 215px;
}
.hidden_text {
display: none;
}
</style>
</head>
<body>
<div id="logo">
<span class="hidden_text">생활코딩</span>
</div>
</body>
</html>
조각 이미지를 이용해서 그라디언트 효과의 배경 만들기
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style>
body{
background-image:url('https://s3-ap-northeast-1.amazonaws.com/opentutorialsfile/course/94.png');
background-repeat:repeat-x;
}
h1{
color:white;
}
</style>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
===============================
박스모델
===============================
박스모델이란?
HTML의 엘리먼트들은 (사각형 모양을 의미하는)박스의 형태를 가지고 있는데 이것을 가르켜 박스모델이라고 하고,
박스의 크기와 박스간의 간격을 정의하는 다양한 속성이 있다.
박스모델의 속성
margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음
border : 박스의 테두리
padding : 테두리와 content간의 간격
content : 엘리먼트 안에 포함되는 컨텐츠
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<div style="border:1px solid blue">
<div style="width:100px; height:100px;padding:20px; border:2px solid red;margin:20px;">
생활코딩
</div>
</div>
</body>
</html>
content(컨텐츠)
엘리먼트안에 포함되는 컨텐츠로 예를들어 <div>test</div>라고 태그를 기술했을 때 div앨리먼트의 content는 test임
content는 폭(width)과 높이(height)를 지정할 수 있다.
border(보더), 테두리
엘리먼트의 테두리
테두리는 margin과 padding의 경계가 된다.
테두리의 굵기와 색상과 스타일을 지정할 수 있다.
padding(패딩)
테두리와 컨텐츠 간의 여백
margin(마진)
엘리먼트와 엘리먼트 간의 여백
위 아래에 인접한 엘리먼트 간에는 margin의 값이 더 큰 쪽의 margin이 적용됨(좌우는 아님)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<!-- 각 div의 margin을 20px로 지정 했을 때 div와 div의 간격이 40px가 아니고 20px인 이유는 마진겹침(margin collapsing)현상 때문이다.-->
<div style="margin:20px;border:1px solid red;width:50px;height:50px"></div>
<div style="margin:20px;border:1px solid red;width:50px;height:50px"></div>
<div style="margin:20px;border:1px solid red;width:50px;height:50px"></div>
</body>
</html>
===============================
마진 겹침
===============================
마진겹침(margin collapsing) 규칙이란?
마진이 세로 방향으로 겹쳤을 때 마진 값이 더 큰 쪽을 따르게 되는 현상
형제 엘리먼트 간 (예제1)
부모/자식 엘리먼트 간 (예제2)
시각적인 요소가 없는 엘리먼트 자체적으로 (예제3)
example1.html - 형제 엘리먼트 간의 마진겹침 현상
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
body {
border:1px solid blue;
}
p {
margin:20px;
border:1px solid red;
}
</style>
</head>
<body>
<p> 생활코딩1 </p>
<p> 생활코딩2 </p>
<p> 생활코딩3 </p>
<p> 생활코딩4 </p>
</body>
</html>
example2.html - 부모 / 자식 엘리먼트 간의 마진겹침 현상
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body style="border:1px solid blue">
<div style="margin-top:100px;">
<div style="margin-top:50px; background-color:green">
마진겹침
</div>
</div>
</body>
</html>
example3.html - 자기 자신의 마진 겹침, 엘리먼트가 컨텐츠로 시각적인 요소를 가지고 있지 않을 때 그 엘리먼트는 상하 마진 중 더 큰 값이 적용된다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body style="border:1px solid blue">
<div style="margin-top:20px;margin-bottom:20px;"></div>
<div style="margin-top:20px">
마진겹침
</div>
</body>
</html>
===============================
박스모델의 종류
===============================
블록 레벨 엘리먼트(block-level element)
한줄에 하나의 엘리먼트만 표시되는 종류의 엘리먼트 (예제1)
다른 인라인 엘리먼트 뿐 아니라 블록 레벨 엘리먼트도 컨텐츠로 포함할 수 있다.
DIV, H1~H6, P, FORM, UL, LI, ADDRESS, BLOCKQUOTE, FIELDSET, TABLE, HR 등
인라인 엘리먼트(inline element)
한줄에 여러개의 엘리먼트가 표시되는 종류의 엘리먼트 (예제2)
인라인 엘리먼트만 포함 할 수 있고, 블록레벨 엘리먼트의 자식이어야 한다.
a, img, em, strong등
display 속성을 이용해서 블록레벨 엘리먼트를 인라인 엘리먼트로 바꿀 수 있고, 반대경우도 가능하다.
display 속성의 값을 none으로 하면 엘리먼트를 화면에서 보이지 않게 할 수 있다.
example1.html - li는 블록레벨엘리먼트이기 때문에 한줄에 하나의 엘리먼트만 표시된다.
<html>
<body>
<ul>
<li>생활코딩1</li>
<li>생활코딩2</li>
<li>생활코딩3</li>
</ul>
</body>
</html>
example2.html - a는 인라인엘리먼트이기 때문에 한줄에 여러개의 엘리먼트가 표시된다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<a href="http://opentutorials.org">생활코딩1</a>
<a href="http://opentutorials.org">생활코딩2</a>
<a href="http://opentutorials.org">생활코딩3</a>
</body>
</html>
example3.html - 인라인 엘리먼트를 display 속성을 이용해서 블록레벨엘리먼트로 변경
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style>
a {
display: block
}
</style>
</head>
<body>
<a href="http://opentutorials.org">생활코딩1</a>
<a href="http://opentutorials.org">생활코딩2</a>
<a href="http://opentutorials.org">생활코딩3</a>
</body>
</html>
example4.html - display:none을 하면 엘리먼트를 화면에서 보이지 않게 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<a href="http://opentutorials.org">생활코딩1</a>
<a href="http://opentutorials.org" style="display:none">생활코딩2</a>
<a href="http://opentutorials.org">생활코딩3</a>
</body>
</html>
===============================
float
===============================
엘리먼트를 원하는 위치로 이동시키고, 엘리먼트 뒤에 따라오는 앨리먼트들이 엘리먼트를 피해서 표시 되도록 한다.
float는 원래 이미지를 둘러싸고 흘러가는 텍스트를 표시하기 위해서 고안된 것이다. example1.html
레이아웃을 구성할 때도 사용된다.example2.html
float를 해제하기 위해서는 clear 속성을 사용한다. example3.html
example1.html - me의 float 속성으로 right를 지정하면 me는 이후에 등장하는 엘리먼트들을 피해서 오른쪽에 정렬된다.
그래서 other가 me의 왼쪽에 위치하는 것이다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
.other {
border: 4px solid green;
}
.me {
float: right;
}
</style>
</head>
<body>
<p class="other">
문제는 이렇다. (생활코딩에 입문하려는 여러분처럼) 만들 것이 있는 사람들은 만들 줄을 모른다. (베테랑 개발자들처럼) 만들 줄 아는 사람은 무엇을 만들줄 모른다. 그래서 고안된 것이 '분업'이고, 다른 말로 '직장'이라고 부른다.
</p>
<img class="me" src="http://farm6.static.flickr.com/5016/5461027020_703521dd22_m.jpg" />
<p class="other">
한 때 이 땅위에는 컴퓨터학원이 국영수학원 만큼 있었다. 지금은 이 수요가 대학이나 직업학원으로 단일화 되었다. 옛날에는 취미인인 꼬꼬마들도 하던 프로그래밍이 이제는 직업인의 영역으로 퉁쳐진 것이다. 그런데 생각해보면 컴퓨터학원이 우후죽순 생겨나던 시절에 프로그래밍을 배워봐야 할 수 있는게 많지 않았다. 지금은 어떤가? 구글의 지도 API는 직전까진 삼엄한 군사정보였고, 제발 나 좀 공짜로 써달라고 애걸하는 오픈소스는 또 얼마나 많은가? 그런데 이제는 취미인들을 위한 컴퓨터학원이 없다. 몸에 좋은 개똥은 귀한 법인가? 그래서 시작한 개똥 같은 캠페인이 생활코딩이다. 장담하건데 프로그래밍의 시대가 다시온다. 직업인들은 이미 이 사실을 감지하고 있는데 이를 암시하는 인상적인 풍경이 아이폰이다. 아이폰이 등장하면서 수 많은 개발자들이 직장을 박차거나, 주경야코하며 자기만의 프로그램을 개발하고 있다. 이들이 직장의 힘을 빌리지 않고 자영업 개발자가 될 수 있었던 것은 더 이상 개인이 고립되지 않았다는 것을 암시한다. 이것은 모바일 열풍 못지 않게 중요한 행간이다.
</p>
</body>
</html>
example2.html - float를 이용해서 레이아웃을 만드는 예제. nav에 float:left, content에 float:right를 줘서 화면을 분활한 후에
footer에 clear:both를 부여해서 float를 해제하고 있다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
body {
font-size: 12px;
}
ul {
padding-left: 10px;
}
li {
list-style: none;
}
.wraper {
width: 400px;
}
.navigation {
float: left;
width: 100px;
background-color: red;
color: white;
}
.content {
float: right;
width: 300px;
background-color: green;
color: white;
}
.footer {
clear: both;
background-color: purple;
color: white;
}
</style>
</head>
<body>
<div class="wraper">
<div class="navigation">
<ul>
Navigation
<li>
생활코딩이란?
</li>
<li>
커리큘럼
</li>
<li>
커뮤니티
</li>
<li>
강의장소협찬
</li>
<li>
수업요청
</li>
</ul>
</div>
<div class="content">
Content
한 때 이 땅위에는 컴퓨터학원이 국영수학원 만큼 있었다. 지금은 이 수요가 대학이나 직업학원으로 단일화 되었다. 옛날에는 취미인인 꼬꼬마들도 하던 프로그래밍이 이제는 직업인의 영역으로 퉁쳐진 것이다. 그런데 생각해보면 컴퓨터학원이 우후죽순 생겨나던 시절에 프로그래밍을 배워봐야 할 수 있는게 많지 않았다. 지금은 어떤가? 구글의 지도 API는 직전까진 삼엄한 군사정보였고, 제발 나 좀 공짜로 써달라고 애걸하는 오픈소스는 또 얼마나 많은가? 그런데 이제는 취미인들을 위한 컴퓨터학원이 없다. 몸에 좋은 개똥은 귀한 법인가?
그래서 시작한 개똥 같은 캠페인이 생활코딩이다. 장담하건데 프로그래밍의 시대가 다시온다. 직업인들은 이미 이 사실을 감지하고 있는데 이를 암시하는 인상적인 풍경이 아이폰이다.
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
===============================
포지셩닝
===============================
===============================
상속
===============================
===============================
캐스케이딩
===============================
댓글 없음:
댓글 쓰기