웹 애플리케이션 만들기

CSS 실습

실습 1

실습 2 

 예제

index.html

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body>
	<header>
		<h1><a href="http://localhost/">JavaScript</a></h1>
	</header>
	<nav>
		<ol>
  		<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
  		<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
  		<li><a href="http://localhost/page_op.html">연산자</a></li>
		</ol>
	</nav>
</body>
</html>

page_html.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body>
  <header>
    <h1><a href="http://localhost/">JavaScript</a></h1>
  </header>
  <nav>
    <ol>
      <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
      <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
      <li><a href="http://localhost/page_op.html">연산자</a></li>
    </ol>
  </nav>
  <article>
    <h2>JavaScript란?</h2>
    JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
  </article>
</body>
</html>

page_op.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body>
  <header>
    <h1><a href="http://localhost/">JavaScript</a></h1>
  </header>
  <nav>
    <ol>
      <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
      <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
      <li><a href="http://localhost/page_op.html">연산자</a></li>
    </ol>
  </nav>
  <article>
    <h2>연산자</h2>
    계산을 할 때 사용되는 것입니다.
  </article>
</body>
</html>

page_vc.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body>
  <header>
    <h1><a href="http://localhost/">JavaScript</a></h1>
  </header>
  <nav>
    <ol>
      <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
      <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
      <li><a href="http://localhost/page_op.html">연산자</a></li>
    </ol>
  </nav>
  <article>
    <h2>변수와 상수</h2>
    변수란
    <ul>
      <li>변하는 값</li>
      <li>x=10일 때 왼쪽항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.</li>
    </ul>
    상수란
    <ul>
      <li>변하지 않는 값</li>
      <li>x=10일 때 오른쪽 항인 10이 상수가 된다</li>
    </ul>
  </article>
</body>
</html>

style.css

header{
  border-bottom:1px solid gray;
  padding:20px;
}
nav {
  border-right:1px solid gray;
  width:200px;
  height:600px;
  float:left;
}
nav ol{
  list-style:none;
}
article{
  float:left;
  padding:20px;
}
h2{
  font-size:50px;
}

소스코드

github

지금까지 배운 것만 가지고도 할 수 있는 일

아래 영상수업은 우리 수업의 양념입니다. CSS만으로도 할 수 있는 일이 궁금하신 분은 시도해보세요. 

 

댓글

댓글 본문
작성자
비밀번호
  1. lsj
    2016.12.01 완료
    항상 감사히 생각하며 듣고 있습니다.
    명쾌한 설명 덕분에 이해가 너무 잘 됩니다.
  2. harris
    2016.12.01 11.30 완료
  3. 덜렁이
    코드를 정확히 입력하고 저장했는 데도 안된다면 참고하세요
    https://www.opentutorials.org......366
    메인동영상화면 아래쪽에 설명을 보세요
    대화보기
    • SeungWoo Baek
      style.css 최상단과 하단에 <style></style> 태그가 들어가 있다면, 삭제하고 해보시면 됩니다^^
      대화보기
      • dororing
        2016 11 24
      • 박정한
        완료
      • Bogwang Jung
        11.6 완료
      • Sanguk An
        11.06.23.06분 완료
      • 시드
        스타일봇 안되시는분들!

        저도안됐는데 크롬 끄고 다시 하니까 되네요^^~
      • kwonhaemori@naver.com
        스타일봇 재밌네요ㅋㅋㅋ
      • 이병정
        크롬에서는 확인되는데...
        스윙에서는 안돼네요.^^);;
      • 폭스킴
        ctrl + F5 눌러보세요 저도 안됐는데 되네요~ ^^
        대화보기
        • 선인장
          혹시 css 파일에 <style> 태그가 있으세요?
          있으시다면 지우시면 될겁니다
          대화보기
          • 휴화산
            고수님들 질문있습니다! 맥 사용자인데 header 부분이 완전히 묵살되서 나타납니다 ㅠㅠ

            네비 부분부터는 정상적으로 스타일이 적용됬는데 유독 헤더부분만 패딩이나 보더가 안먹네요 구글에 쳐보면 사파리 문제라고 하시는 분도 있는데 혹시 해결가능방법이 있을까요?
          • 활화산
            css 파일로 링크 하는 것은 안되는 군요. 뭐가 잘못 됐는지 도무지 모르겠음. 넘어 갑니다. 흐름만 기억하고. 감사합니다.
          • 60코딩
            저도..아무것도 안나오는데..아직 못찾았네요..어디에 물어봐야 할까요..?
            대화보기
            • 60코딩
              Stylebot css 에서 open Stylebot 클릭해도 아무것도 안나옵니다...뭐가 잘못된걸까요..?
            • 배정호
              잘따라했습니다
            • Kijin Roh
              2016.10.21 완료
            • Shinkyu Lee
              에고 ~ 여기서 조금 버벅 거리네요 ㅋㅋㅋ
            • 호랑이형님
              .css 파일 만들고 웹페이지 로드했을 때 !!! 우와!!! 했습니다.
              이고잉님 좋은 강의 감사해요~
            • 안재우
              2016.10.13. 완.료.
            • 임동호
              20161012완료
            • San Koh
              2016-10-12 완료했습니다!
            • 류엶
              20161007 완료
            • 뭉치우석
              마지막 스타일봇... 강의까지 정말 감사합니다.
              인터넷 강의를 연휴 내내 들었는데
              오히려 강사님 입 아프실까 걱정이 다 드네요 ㅎ 괜한 걱정!!
            • chummilmil99
              고맙습니다 :)
            • Amazing!

              수강완료
              감사합니다
            • Xuperman
              161002 완료 :D
            • 이제야열공
              마지막에 stylebot에서 font-size : 30px 이거 하셨는데
              왜 내용까지 사이즈가 다 커지나요?
              <article>태그 안에 있는데... <a>태그 안에 있는 내용 폰트사이즈만 커져야하는거 아닌가요?
              <a href:~~~~~> 이거 때문에 링크 안에 있는 내용 폰트사이즈가 다 커지는건가요?
            • 정태영
              왜 똑같이 따라했는데 css로 따로 빼면 header부분 지정한 border-bottom이 작동을 안하네요 ㅜㅜ
              왜그런거죠??ㅠㅠ 그냥 복붙했는데 이러니까 멘붕....ㅜㅜ도와주세요
            • 이보라
              9.28. 수강완료했습니다.
              연달아 듣다보니 댓글 남기는 일이 들쭉날쭉하군요 ^^;
              잘 따라오고 있다고 달래주시면서 강의해주시니, 그만둘 수가 없네요. 사실 웹디자인을 이미 공부한지라, html과 css 코딩방법 자체는 거의 다 익숙한 것들인데,(아톰조차 제가 배웠던 유일한 에디터였어요) 사이사이 원론적인 설명도 다 챙겨주시니 건너뛸 수가 없었어요.
              따라가다가 서버사이드 쪽 내용 나오면 조금씩 이해하기 힘든 부분도 나올 것 같지만, 지금 목표는 일단 무조건 완주입니다.
              준비 많이 하시고 만든게 느껴지는 강의입니다. 언제나 감사합니다.
            • 심드렁
              stylebot 좋네요 ㅎㅎ
            • openstyle bot했는데 아무것도 안나와요 저런메뉴가/공동공부참여중 진도표보고싶은데 클릭해도 아무창이안떠요
            • 이수재
              수강완료 09/20
            • 구찬우
              09/20 02:02 수강완료
            • 윤기준
              여러 강의 사이트들 둘러보고 생활코딩에 안착했습니다.

              그 어느 강의보다도 따라가기 쉽게 되어있네요

              가장 중요한 것, 이짓을 왜 하느냐에 대한 설명이 참 좋습니다.
            • 이성진
              수강완료!
              감사합니다~
            • 임지호
              정말 신기한 기능들이 많네요 하나하나 컴퓨터 공부에 재미를 붙여갑니다
            • Sevenday.maker
              16.08.24 완료
            • 형진
              완료 2016.8.19
            • Young Kye
              알아듣기 쉽고 이해하기 쉽게 가르쳐 주셔서 감사합니다. 덕분에 코딩을 배우는 즐거움에 푹 빠졌습니다.
            • 제리피
              2016.08.16 완료
            • 공돌이
              20160814clear
            • 이재아
              ㅡ 컴퓨터 용어 정리

              인터넷 :
              통신적인 개념으로서 컴퓨터(또는 컴퓨터들간의 집합체인 서버)들 끼리의 연결 그 자체.

              웹 :
              소프트웨어적인 개념으로서 인터넷이라는 연결구조 안에서 HTML이라는 언어를 통해 실제로 정보를 주고받는 행위를 하는 프로그램.

              UI (User Interface) :
              특정 프로그램을 사용함에 있어서 사용자(프로그램을 활용하는 사람)가 그 프로그램을 편리하게 사용할 수 있도록
              그 환경을 제공하는 설계 내용(프로그램의 디자인, 자료의 연결구조, 명령버튼의 배열 형태, 문자와 아이콘들의 배치 형태 등).

              브라우저 :
              웹과 UI를 기반으로 만들어져서 웹 안에 있는 응용프로그램(애플리케이션)들을 시각적으로 보여주는 응용프로그램.

              클라이언트 :
              서버 시스템과 연결하여 주된 작업이나 정보를 서버에게 요청하고 그 결과를 돌려받는 컴퓨터 시스템.

              서버 :
              주된 정보의 제공이나 작업을 수행하는 컴퓨터 시스템. 서버는 클라이언트 시스템이 요청한 작업이나 정보의 수행 결과를 돌려준다.

              클라이언트와 서버의 상호작용 원리 :
              클라이언트인 컴퓨터는 주소창 등에 명령어를 입력하여 특정 서버인 컴퓨터에 정보를(텍스트, 이미지, 웹페이지, 특정 파일, 프로그램 등) 요청한다.
              그러면 서버컴퓨터는 그 클라이언트에게 정보를 주어도 되는지, 그 클라이언트가 정보를 받을 수 있는 기반이 되는 프로그램이 있는지,
              클라이언트컴퓨터가 요청한 자료가 자기 컴퓨터(혹은 특정 디렉토리)의 내부에 있는지 확인한 후, 그 자료를 클라이언트컴퓨터로 보낸다.
              그러면 클라이언트컴퓨터의 애플리케이션(브라우저 등)에 해당 정보가 출력된다.

              하이퍼텍스트 (Hypertext) :
              사용자에게 비순차적인 검색을 할 수 있도록 제공되는 텍스트.
              문서 속의 특정 정보(텍스트, 이미지, 자료 등)가 다른 자료나 데이터베이스와 연결되어 있어 서로 넘나들며 원하는 정보를 얻을 수 있다.

              버전 관리 시스템 (Version Control System) :
              복수의 이용자가 네트워크를 사용해서 소프트웨어를 개발하거나 문서를 작성하는 경우 파일 내용은 빈번히 변화하게 되는데,
              버전 관리 시스템은 변경된 이력(履歷)을 파일마다 관리할 수 있으며, 동시에 여러 사람이 파일을 열 수 없도록 잠그는 기능을 지니고 있다.
              버전 관리 시스템을 활용하면 변화하는 웹 또는 변화하는 정보의 문제점이 어디서 어떻게 발생했는지 알 수 있으며, 유실된 정보를 복구할 수 있다.

              CSS (cascading style sheets) :
              웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트로서, 디자인을 위한 언어라고 할 수 있다.
              문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다.

              PHP (Hypertext Preprocessor) :
              하이퍼텍스트 생성 언어(HTML)에 포함되어 동작하는 스크립팅 언어. 별도의 실행 파일을 만들 필요 없이 HTML 문서 안에 직접 포함시켜 사용하며,
              C, 자바, 펄 언어 등에서 많은 문장 형식을 준용하고 있어 동적인 웹 문서를 빠르고 쉽게 작성할 수 있다.

              JavaScript와 php의 차이 :
              JavaScript는 클라이언트의 웹브라우저에서 주로 사용되는 반면, PHP는 서버에서 주로 사용된다.
              또한 javaScript로 작성된 코드의 경우 그 코드를 브라우저에서 해석하기 때문에 브라우저의 스크립트에서 그 자세한 내용을 확인할 수 있다.
              반면 php로 작성된 코드의 경우 서버를 작동시키는 php엔진에서 코드를 처리하여 그 결과값을 서버에 전달하고,
              서버는 php엔진으로부터 받은 그 결과값만을 클라이언트의 브라우저에 전달한다.
              따라서 브라우저 뿐만아니라 브라우저의 스크립트에서도 코딩의 결과값만 출력되기 때문에 그 코드의 자세한 내용을 확인할 수 없다.
              (php코드의 자세한 내용을 확인하기 위해서는 서버 내에 존재하는 해당 데이터파일을 직접 찾아서 확인해야 한다.)

              디버그 (debug) :
              프로그램의 오류를 발견하고 그 원인을 밝히는 작업 또는 그 프로그램을 말한다.
              오류 수정 작업은 디버깅(debugging), 오류 수정 소프트웨어는 디버거(debugger)라고 한다.
            • 도하
              고생하셨습니다~ 좋은 강의 감사합니다.
            • 웹초보
              감사합니다.
            • Code.Math
              감사합니다. 잘 보았습니다~~!!
            • 홍홍
              정말 멋쟁이십니다!! 많이배우고있습니다!!
            • 심화평
              왜 자바스크립트란? 만 웹페이지에 안뜨는지 아시는분... 다 똑같이 따라헀는뎅....
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기