웹 애플리케이션 만들기

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. JintGram
    크롬 종료 후 다시 켜보시면 됩니다.
    대화보기
    • 엄상혁
      스타일봇 대박~!!!!!!!!!

      좋은 강의 감사합니다^^
    • 2016.12.01 완료
      항상 감사히 생각하며 듣고 있습니다.
      명쾌한 설명 덕분에 이해가 너무 잘 됩니다.
    • harris
      2016.12.01 11.30 완료
    • 덜렁이
      코드를 정확히 입력하고 저장했는 데도 안된다면 참고하세요
      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 자세히 보기