웹 애플리케이션 만들기 실습

CSS

본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었고, 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은 좌우 간격을 의미한다. 이 값을 변경해보면서 화면의 변화를 관찰해보자.

border, padding, margin이라는 개념은 CSS를 이해하는 핵심 개념 중의 하나다. 하지만, 이번 시간에는 이것들이 테두리와 여백에 관여한다는 정도로 이해하고 넘어가자.

네비게이션 영역

스크린샷

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다. 이 중에 주요한 몇가지 효과에 대한 설명은 아래와 같다.

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도 물론 언어이기는 하지만, 이 언어들은 문서를 제작하는데 특화된 언어다. 반면에 자바스크립트는 쉬우면서도, 일반적인 프로그래밍 언어들의 특성들을 모두 가지고 있는 본격적인 프로그래밍 언어다. 진짜 프로그래밍의 세계에 가까워지고 있다.

댓글

본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었습니다. 개편된 수업에서 뵙겠습니다. 본 수업은 2015년 6월 이후에 폐지됩니다. http://opentutorials.org/course/1688

 

궁금하신 점은 각 강의의 댓글로 문의해주세요. 답변이 없는 것은 운영자가 못 봤거나 모르는 것입니다. 생활코딩 커뮤니티에 질문하면 더 많은 분의 도움을 받을 수 있습니다. 그리고 문제를 해결했다면 본문의 댓글로 공유해주시면 다른 분에게 큰 도움이 됩니다. 원하는 답변을 얻는 것은 확률의 문제입니다. 질문의 품질이 높으면 그 확률도 올라갑니다. 질문자의 상황을 더 잘 전달하기 위해서 screenr.com이나 이미지 캡처의 이용을 권합니다.

 

댓글 본문
  1. 티카
    수업 감사합니다.
    오늘 피곤함에 유체이탈할뻔했던 자전거 타는 사람입니다.
    어제 노트북을 안들고 가는바람에 오늘 따라서 만드는걸 실패했는데 이 코드를 보면 되겠지요?
    다음 기회가 되면 광클로 또 수강신청하겠습니다.
  2. 코드러너
    동영상에서 파이어폭스의 inspect(요소검사) 또는 f12를 눌렀을 때 나오는 모습이 저와는 차이가 좀 납니다.
    크롬에서 f12를 눌렀을 때와 거의 비슷한 모양으로 나오고 동영상의 파이어폭스 모습이 아니네요.
    파이어폭스의 버전이 달라서 생기는 것인지 환경설정 문제인지 알려주시면 감사하겠습니다.
  3. 코드러너
    lift가 아니라 left 입니다. 잘못 보셨네요.
    대화보기
    • 빛나는새벽
      감사합니다
      아직까지 큰 문제없이 잘 따라 해보고 있습니다.^^
    • 김민수
      질문좀드리겠습니다.
      sublime text 3 을 이용중입니다.
      float:lift; 명령어를 사용이 안되네요 float <<<흰색으로 나옵니다.
    • vifhwan
      $get diff 사용 시 이렇게 나오는 건 왜일까요 ㅎㅎ

      vif@vif-VirtualBox:/var/www/opentutorials$ $git diff
      diff: missing operand after 'diff'
      diff: Try 'diff --help' for more information.
    • 술기밍
      오~ 조아요~
    • dolhim
      git에서 나올 땐, q를 누르면 되지요^^
      대화보기
      • manta
        붙여넣기가 안 되어 타이핑하는 데 시간이 걸려서 그렇지... 잘 따라오고 있습니다.^^
        고맙습니다.
      • 석형
        git diff 를 한후에 <end> 가 나오는데 여기서 /var/www/optutorials 로 넘어가려면 어떻게 해야하죠??^^
      • corea95
        정말 강의 하나하나가 머리에 쏙쏙 들어와서 좋네요 ㅎㅎ
        아직까지는 문제 없이 잘 따라오고있습니다. 감사합니다 :)
      • Artist
        캬.. 어쩜 이렇게 말도 잘하시는지.. 놀라울 따름입니다. ㅋㅋ
      • 썸남
        강의 짱짱 좋아여 ㅠㅠ 감사합니다
      • egoing
        리모트와 로컬 간의 차이는 로컬에서 먼저 해결하고, 그리고 업로드 하라는 의미로 생각하시면 될 것 같습니다.
        대화보기
        • paulo
          이렇게 훌륭한 강좌를 제공해셔서 감사합니다. 매우 훌륭하고 가치있는 공헌을 해주신 점에 깊이 감사드립니다.
          강의를 따라가다가, 궁금한 점이 있어서 질문 드립니다.

          마지막 명령어에서 git pull origin master; git push origin master; 를 하셨는데,
          git push origin master; 만 실행시키면 어떻게 되는 것인가요?
          pull을 먼저 하면, 변경전의 상황이 local에 업데이트 되어 push를 하면 최근의 업데이트 사항이 리모트에 저장되는 것이 아닌가 하는 생각이 듭니다. 제가 아직 pull과 push에 대해 이해가 부족한 것 같습니다.
        • 뒹굴뒹굴
          변경된 css 언어 직접 타이핑하다 오류나서 멘붕오고
          다시 코드 복사해서 붙여넣어서 수업따라갔습니다.ㅋ

          아직도 어디가 잘못됬는지 확인을 못했네요ㅜ 공부하다보면 잘 알수 있을거라 믿습니다.

          좋은 강의 감사합니다.^^
        • EJKim
          eunjikim@eunjikim-VirtualBox:/var/www/opentutorials$ git pull origin master;
          ERROR: Repository not found.
          fatal: The remote end hung up unexpectedly
          eunjikim@eunjikim-VirtualBox:/var/www/opentutorials$ git push origin master;
          ERROR: Repository not found.
          fatal: The remote end hung up unexpectedly
          eunjikim@eunjikim-VirtualBox:/var/www/opentutorials$

          저자꾸 이렇게 나와서.... 저장소에 업로드가 안되네요 ㅠㅠ html때도 안되고요 ㅠ
          버전관리때 저장소 만드는거 잘 했는데;;
        • 말짱황
          서서히 머릿속에 조각이 맞춰지는 느낌입니다^^
          강좌를 끝내고 나면 좀더 넓은 시야를 가질 수 있을 것 같아요.
          자 다음 단계로!
        • erdia22
          화면 이쁘게 변하네요. 감사합니다. ^^
        • meme
          강의 유익하게 잘 들었습니다^^
          감사합니다~
        • 정선
          강의 감사합니다 ^_^
        • 착한마왕
          안녕하세요 짧은 지식으로 답변을 드리자면 html 형식은 말씀 하신데로 처리 해야 할 것 같구요 좀더 경험이 쌓이시면 자바 스크립트로 처리도 가능 하지만 실제 개발에선 그다지 많이 사용하지 않습니다.

          자주 반복되는 부분은 인크루드라는 방식을 사용 합니다.

          공통된 부분을 하나에 파일로 만들어서 menu.html 뭐 이런 식으로 그리고 나서 php코드에서
          require_once 'menu.html'; 이런 형식으로 걸어 주는 방식입니다.

          아래 블로그에 php 인크르드 방식에 대한 종류가 몇가지 나오네요
          http://holykhd.blog.me......325
          나머지는 네이버에서 하나씩 검색해 보시면 될 것 같습니다.
          대화보기
          • 오호라
            안녕하세요. 감사히 잘 듣고 있습니다. 궁금한 것이 웹 페이지 마다 공통된 부분이 있을 것인데 위의 예에서는 헤더부분과 네비게이션 부분 같은거 말이죠. 근데 위와 같이 웹 페이지 마다 공통된 부분을 코드를 동일하게 복사해서 쓰진 않을꺼 같습니다. 다른 방식이 있는지요? 즉, 공통된 부분의 수정을 했다고 하면 그걸 일일이 모든 페이지 소스를 카피앤 페이스트 하진 않을텐데 어떻게 하나요?
          • CHROME
            http://localhost......를 파이어폭스나 크롬으로 접속이 안되는데 왜이런가요??
          • usung2
            저도 감사합니다. ^^;;
            대화보기
            • 왼쪽 하단 좌측 3번째에 마크업 패널이 있습니다. 단축키는( Alt + M )입니다.
              대화보기
              • seacloud7
                압타나에서 들어갈때마다 전에 만들어놨던 프로젝트가 사라져있는데 어떻게 계속나오게할순 없나요?
              • seacloud7
                차근차근 배우고있는데 재미있네요. 좋은 강의 감사합니다
              • Nick Cho
                수업 중 궁금한게 있어 질문드립니다. 두번째 동영상 강의에 보면 압타나로 예제를 보면서 하단의 툴바에서 html을 선택하여 소스를 같이 보시는데 저의 압타나에서는 첨부한 이미지화면처럼 html은 없고 3D view만 나와있는데 어떻게 하면 html을 볼 수 있는지 궁금합니다.
              • damyo
                말씀하신 태그는 html5부터 새롭게 적용된 태그입니다.사용하시는 브라우저가 html5를 지원하지 않는 구버전이라서 생기는 문제인 것 같습니다.
                대화보기
                • egoing
                  그냥 답글 달아주시면 됩니다. 그건 제 메일 주소가 아니거든요 ^^
                  2013년 3월 22일 금요일에 Disqus님이 작성:
                  대화보기
                  • hcpark79
                    notifications@disqus.net 이쪽으로 메일 보내드렸습니다~
                    대화보기
                    • egoing
                      CSS 적용됩니다. 어떻게 코딩 하셨는지 보여주시면 도움을 드릴 수 있을 것 같습니다.
                      2013/3/22 Disqus <notifications@disqus.net></notifications@disqus.net>
                      대화보기
                      • hcpark79
                        <header></header> , <nav></nav>, <article></article> 같은 태그에는 왜 CSS가 안먹힐까요?
                      • 강의 잘 듣고 보고 있습니다. 명쾌한 강의 감사합니다
                      • 2seeyu
                        이해가 되면서도 안되는게...어딘가 제가 놓친 부분이 있나봐요 ㅎㅎㅎhtml수업 갔다가 다시 생활코딩으로 넘어왔어요 ㅋㅋㅋㅋ
                      • goodjobk
                        css수업 중 발생한 오류
                        #1 예제로 올라와 있는 코드를 더블클릭으로 긁어 붙여넣기 하면 aptana에서 css효과가 안먹힐 수 있습니다. 더블클릭 하지 마시고 드래그해서 복사, 붙여넣기 하세요! :)
                      • ㅋㅋ
                        q 누르니까 되더라구요
                        대화보기
                        • Mikey J Lee
                          diff 화면에서 다시 명령어 입력화면으로 어떻게 전환하신 건지요?
                        • 누렁이
                          오타발견~
                        • kang
                          강의를 들으면서 조금씩 프로그래머에 한걸음씩 다가가는걸 느껴요^^ 정말 이고잉님 뵌적은 없지만 고개숙여 감사드립니다.
                        • egoing
                          고맙습니다 ^^
                          대화보기
                          • 확와닷는 자세한 설명 감사드려요 이고잉님 강좌에 1:1오프라인 강의를 듣는것 같네요
                          • egoing
                            동영상 삽입에 문제가 있었네요. 알려주셔서 감사합니다!
                            대화보기
                            • JunYong Jeong
                              중간에 동영상 하나가 재생이 안되네요 ㅠㅠ 강의는 너무 잘 보고있습니다!!^^
                            버전 관리
                            egoing
                            현재 버전
                            선택 버전
                            graphittie 자세히 보기