본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었고, 2015년 6월 이후에 폐지됩니다. 개편된 수업에서 뵙겠습니다.http://opentutorials.org/course/1688
CSS란?
HTML은 정보를 표현하기 위한 언어다. 각각의 태그마다 기본적인 모양새를 가지고 있지만 예쁘지 않다. 일상적으로 접하는 웹페이지처럼 예쁜 모양의 웹페이지를 만들려면 어떻게 해야 할까? CSS를 사용하면 된다. CSS는 HTML을 꾸며주는 언어다. 이번 강의에서는 CSS라는 언어가 무엇인지를 알아보고 HTML 강의에서 만들었던 opentutorials의 웹페이지를 꾸며보겠다.
자세한 내용은 생활코딩의 CSS 강의를 참고한다. http://opentutorials.org/course/45
기본지식
아래의 예제를 보자.
<html>
<style type="text/css">
h1{
color:red;
font-size:50px;
}
.sub{
color:blue;
}
#link {
color:green;
}
</style>
<body>
<h1>Hello world</h1>
<h2 class="sub">Hello world</h2>
<h3 class="sub">Hello world</h3>
<a id="link" href="http://opentutorials.org">opentutorials.org</a>
</body>
</html>
위의 코드는 아래와 같은 결과를 출력한다.
코드에서 <style> 태그는 브라우저에게 이제부터 CSS 코드가 나오니까 </style> 태그가 나타날 때까지 CSS의 문법에 따라서 코드를 해석하라고 지시하는 것이다. 이제 <style> 태그 안쪽의 코드 중의 제일 위쪽의 예제를 보자.
선택자란 글자의 색상이나 크기와 같은 효과를 어디에 적용할 것인가를 지정하는 것이다. 선택자 h1은 <h1> 태그를 의미하고 a는 <a> 태그를 의미한다. 즉 태그의 이름을 나타내는 것이다.
.sub{
color:blue;
}
이번에는 선택자가 '.sub'다. 'sub' 앞에 '.'이 붙은 것에 주목하자. '.'은 class 속성의 값이 sub인 태그들을 지목하는 선택자다. 위의 예제 중에 class 속성의 값이 sub인 태그는 아래와 같다. 이 태그에게 적용될 효과가 color:blue이므로 글자의 색상이 파란색이 된다.
<h2 class="sub">Hello world</h2> <h3 class="sub">Hello world</h3>
선택자의 이름이 #link 인 경우는 id 속성의 값이 link인 태그를 지목하는 선택자가 된다. 예제에서는 아래의 태그가 여기에 해당 된다.
<a id="link" href="http://opentutorials.org">opentutorials.org</a>
그럼 선택자로 '태그의 이름', 'class', 'id'를 사용하는 이유는 무엇일까? 이에 대한 설명은 이 문서의 범위를 넘어서기 때문에 생활코딩 CSS 수업 선택자 편을 참고한다. http://opentutorials.org/course/45/3
선택자와 효과의 관계가 무엇인지 이해가 됐는가? 이것이 CSS의 핵심이다. 그 외에 알아야 할 것은 아래와 같다.
- 선택자의 종류와 선택자들의 조합을 통해서 효율적으로 태그를 선택하는 방법을 알아야 한다.
- 효과에는 무엇이 있는지를 알고 이것들이 시각적으로 어떤 모습으로 표현되는지를 알아야 한다.
opentutorials의 CSS 실습
앞 시간에 HTML로 웹페이지를 만들었다. HTML만으로는 자유롭게 디자인을 하는 것이 어렵기 때문에 우리가 만든 예제는 현재 못생긴 상태로 남아있다. CSS를 이용해서 디자인을 해보자.
디자인 결과
결론부터 보자. CSS를 이용해 디자인한 결과는 아래와 같다. HTML만으로 코딩한 것에 비해서 정돈된 느낌이 드는가?
전체코드
위와 같이 디자인하기 위해서는 HTML 코드에 CSS를 부가해야 한다. index.html 파일을 열고 아래의 코드로 교체한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body {
font-size: 0.8em;
font-family: dotum;
line-height: 1.6em;
}
header {
border-bottom: 1px solid #ccc;
padding: 20px 0;
}
#toolbar {
padding: 10px;
float: right;
}
nav {
float: left;
margin-right: 20px;
min-height: 500px;
border-right: 1px solid #ccc;
}
nav ul {
list-style: none;
padding-left: 0;
padding-right: 20px;
}
article {
float: left;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #333;
}
a:hover {
color: #f60;
}
h1 {
font-size: 1.4em;
}
</style>
</head>
<body>
<div>
<header>
<h1>JavaScript</h1>
</header>
<div id="toolbar">
<input type="button" value="black" />
<input type="button" value="white" />
</div>
<nav>
<ul>
<li>
<a href="http://opentutorials.org/course/49/16">JavaScript</a>
</li>
<li>
<a href="http://opentutorials.org/course/49/17">변수와 상수</a>
</li>
<li>
<a href="http://opentutorials.org/course/49/18">연산자</a>
</li>
<li>
<a href="http://opentutorials.org/course/49/19">함수</a>
</li>
<li>
<a href="http://opentutorials.org/course/49/20">이벤트</a>
</li>
<li>
<a href="http://opentutorials.org/course/49/21">객체</a>
</li>
</ul>
</nav>
<article>
<h2>변수와 상수</h2>
<div>
<p>
변수란
</p>
<ul>
<li>
변하는 값
</li>
<li>
x = 10 일 때 왼쪽항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.
</li>
</ul>
<p>
상수란
</p>
<ul>
<li>
변하지 않는 값
</li>
<li>
x = 10 일 때 오른쪽항인 10이 상수가 된다.
</li>
</ul>
</div>
</article>
</div>
</body>
</html>
브라우저를 통해서 index.html 파일을 실행한다. 주소는 아래와 같다.
http://localhost/opentutorials/index.html
위의 주소는 아래와 같이 입력해도 된다.
http://localhost/opentutorials
위와 같이 URL의 끝에 파일의 이름을 특정하지 않으면 웹서버는 그 디렉토리(/var/www/opentutorials)에 index.html, index.htm, index.php와 같은 파일이 있는지 확인해보고 있다면 그 파일을 열어서 보여준다. 이러한 파일을 index 파일이라고 부른다.
파일을 분명히 바꿨는데도 브라우저가 이전의 화면을 보여준다면 Ctrl+F5 키를 눌러준다. 브라우저는 페이지를 빠르게 읽기 위해서 캐쉬라는 것을 사용하는데, 한번 읽은 파일의 내용을 클라언트 컴퓨터에 저장했다가 다음에 요청 하면 네트워크를 통하지 않고 이 저장된 파일을 읽어서 보여준다. 그렇기 때문에 서버의 파일이 변경된 경우도 이전의 내용을 보여주는 경우가 있다. Ctrl+F5은 캐쉬를 무시하고 서버의 파일을 가져오도록 브라우저에게 명령하는 기능이다.
이제부터는 영역별로 적용된 CSS 효과를 살펴볼 것이다. 모든 부분을 다 설명하지는 않을 것이다. 우리의 목적은 CSS가 무엇인지에 대한 개념적인 이해와 실체적인 '느낌'을 재빠르게 획득하는 것이다. 단편적인 내용을 이해하기 위해서 너무 노력하지 말자. 기회는 앞으로도 충분하다.
헤더영역
HTML 코드
<header>
<h1>Opentutorials by egoing</h1>
</header>
CSS 코드
<style> 태그와 </style> 태그 사이의 CSS 코드 중에 헤더 영역의 디자인에 관여하는 코드는 아래와 같다.
header{
border-bottom:1px solid #ccc;
padding: 20px 0;
}
CSS의 코드를 분석해보자. header 는 선택자다. 이 선택자는 태그의 이름이 header인 태그를 지목한다. 중괄호 사이의 내용은 선택자에 적용될 효과가 온다. 첫 번째 효과인 border-bottom은 header 태그의 하단 테두리의 속성을 의미한다. 이 값을 아래와 같이 바꿔보면서 페이지를 새로고침 해서 변화를 관찰해보자.
- 1px => 2px, 3px, 3px
- solid => dashed
- #ccc => red, blue, green
padding은 테두리와 컨텐츠 사이의 간격을 의미한다. 20px은 상하 간격을 의미하고 0은 좌우 간격을 의미한다. 이 값을 변경해보면서 화면의 변화를 관찰해보자.
네비게이션 영역
스크린샷
HTML 코드
<nav>
<ul>
<li><a href="http://opentutorials.org/course/49/16">JavaScript</a></li>
<li><a href="http://opentutorials.org/course/49/17">변수와 상수</a></li>
<li><a href="http://opentutorials.org/course/49/18">연산자</a></li>
<li><a href="http://opentutorials.org/course/49/19">함수</a></li>
<li><a href="http://opentutorials.org/course/49/20">이벤트</a></li>
<li><a href="http://opentutorials.org/course/49/21">객체</a></li>
</ul>
</nav>
CSS 코드
nav {
float:left;
margin-right: 20px;
min-height: 500px;
border-right:1px solid #ccc;
}
참고 열리는 태그인 <nav>와 닫히는 태그인 </nav>를 통칭해서 태그(tag)라고 부른다. 유사한 표현으로 엘리먼트(element)가 있는데, 엘리먼트는 태그 뿐 아니라 그 태그가 포함하고 있는 컨텐츠를 포괄해서 지목할 때 엘리먼트라고 부른다. 앞으로는 엘리먼트와 태그를 구분해서 사용하겠다.
+ '<p>'와 '</p>' : 태그
+ '<p>생활코딩</p>' : 엘리먼트
위의 코드는 nav 엘리먼트의 효과를 부여하는 CSS다. 이 중에 주요한 몇가지 효과에 대한 설명은 아래와 같다.
- float:left; 는 nav 엘리먼트를 화면의 왼쪽으로 정렬시키는 효과다. 값을 right로 바꿔보자. (CSS 수업 float 참고)
- margin-right:20px; 엘리먼트의 테두리 밖의 여백을 20px로 지정한다. (CSS 수업 박스모델 참고)
nav ul{
list-style:none;
padding-left:0;
padding-right:20px;
}
'nav ul'은 선택자를 조합한 것인데, nav 엘리먼트의 하위 엘리먼트 중에 태그명이 ul인 엘리먼트를 지목하는 선택자다. 만약 nav 엘리먼트 밖에 ul 엘리먼트가 있다면 이 효과는 적용되지 않는다. 효과의 대상을 좀 더 구체적으로 특정할 때 사용하는 방법이다. 각각의 효과는 아래와 같다.
- list-style:none; 리스트 앞에는 기본적으로 숫자나 검은색 원이 붙는다. list-style 효과의 값을 none으로 지정하면 리스트 앞의 기호가 사라진다. 이 속성을 없애보고 그 결과를 살펴보자.
- padding-left, padding-right : 테두리와 컨텐츠 사이의 여백이다. 값을 변경해보면서 padding이 무엇인지를 추론해보자.
버전관리
버전관리 시스템의 혜택 중의 하나는 커밋하기 전에 지금까지 작업한 내용을 리뷰해 볼 수 있다는 점이다. 아래 명령을 입력하면 버전관리되고 있는 파일들의 상태를 리뷰할 수 있다.
git status;
그 결과는 아래와 유사할 것이다.
$ git status; # On branch master # Changes not staged for commit: # (use "git add <file>..." to update what will be committed) # (use "git checkout -- <file>..." to discard changes in working directory) # # modified: index.html # # Untracked files: # (use "git add <file>..." to include in what will be committed) # # .project # .settings/ no changes added to commit (use "git add" and/or "git commit -a")
'Chages not staged for commit' 아래에 있는 파일들은 버전관리가 되고 있는 파일 중에 변화가 있는 파일들의 리스트를 나타낸다. index.html 파일 앞에 modify라고 되어있는 것은 이 파일이 최종 커밋 이후에 수정된 사항이 있다는 것을 의미한다.
'Untracked files' 아래에 있는 파일들은 현재 버전관리가 되고 있지 않은 파일들의 리스트인데, .project 와 .settings/ 디렉토리는 aptana 에디터가 생성한 파일이기 때문에 버전관리를 해서는 안 된다.
아래 명령을 입력하면 HTML 수업에서 커밋한 최종 내용과 CSS 수업에서 변경한 현재 상태를 비교할 수 있다. 이것은 자기 코드에 대한 이해를 높이고, 문제를 방지할 수 있는 거의 마지막 안전장치로서 역할을 하곤 한다.
$git diff
그 결과로 아래와 같이 소스코드가 출력되는데 마지막으로 커밋한 내용과 수정된 내용 사이의 변경된 부분만 표시된다. + 는 해당 행이 추가된 코드라는 뜻이고, -는 제거 된 것이라는 뜻이다. 아래에 <body>처럼 -+가 함께 출력되는 것은 변경되었다는 의미다.
아래의 명령을 입력한다.이 명령은 커밋하고, 원격저장소를 로컬저장소로 가져오고, 로컬저장소를 원격저장소로 업로드 한다.
git commit -am 'add css'; git pull origin master; git push origin master;
정리
지금까지 CSS를 이용해서 못생긴 HTML을 좀 더 예쁘게 만드는 법을 알아봤다. 다음 시간에는 JavaScript를 이용해서 버튼을 누르면 스킨을 바꾸는 기능을 추가할 것이다. HTML이나 CSS도 물론 언어이기는 하지만, 이 언어들은 문서를 제작하는데 특화된 언어다. 반면에 자바스크립트는 쉬우면서도, 일반적인 프로그래밍 언어들의 특성들을 모두 가지고 있는 본격적인 프로그래밍 언어다. 진짜 프로그래밍의 세계에 가까워지고 있다.
