웹 애플리케이션 만들기

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

Sound coding 

공부 시간을 단축시키고, 덜 고통스럽도록 뮤직 비디오로 지금까지 수업을 만들었습니다. 틈틈히 보셔요. 전체 목록 바로가기

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

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

 

댓글

댓글 본문
작성자
비밀번호
  1. CHOLES
    감사합니다 !
  2. Cooldaddy
    기분 좋네요 진도 뺐습니다
  3. 김태윤
    완료했어요
  4. 문보겸
    복붙해봐도 안되는데 제가복붙을 잘못한건지요?
  5. 박예지
    완료!
    7월 19일
  6. GoldPenguin
    완료했습니다.
  7. GoldPenguin
    완료했습니다.
  8. Baekkyu Han
    CSS실습
  9. 딕킨스
    우왕 css 마무리
  10. 두부
    완료
  11. 가영
    완료!
  12. 가영
    완료!
  13. Calen Yui
    안녕하세요, 질문이 있습니다. 만드는 과정중에Javascript 헤더를 나누는 가로 라인과, 리스트와 아티클을 나누는 세로 라인이 서로 만나지 않고, 한 2~3 cm 붕 뜨는데 이걸 어떻게 풀어야 될까요?
  14. Michael
    완료!
    감사합니다~
  15. markerss2
    완료!
  16. HTOP
    프로그래밍의 기본 커리큘럼으로 C나 C++먼저 배우라는 것도
    요샌 옛말이 되어있더라구요 ^^;

    강사님께서 강의 초반에도 한번 언급하셨는데,
    HTML을 먼저 배우셔도 프로그래밍 언어라는게 어떤 방식(구조)로 되어있는지
    기본적인 형태는 익히실 수 있어요 ㅎ

    그리고 요샌 C나 C++먼저 안배우고 Java나 Python으로 프로그래밍 먼저 시작하는게
    대세인 것 같더라구요....
    (특히 Python은 요샌 초등학교에서도 배운다는.... 저는 초딩때 한글97배웠는데..)
  17. shonny
    감사합니다.~
  18. webmario
    이 세상 최고의 강의 정말 감사합니다.^^
  19. plm1929
    완료~
  20. 릭준
    완료
  21. Injun Choi
    감사합니다
  22. qud4186
    설명 너무 잘해주십니다. 프로그래밍을 딱딱하지 않고 정말 친숙하게 다가갈수 있게 해주시는 것 같습니다.
    잘들었습니다.
  23. Rain
    문과 출신의 고졸 프알못 사람인데 생전 처음 접하는데도 말하는 속도나 설명하는게 이해 잘 가게 아주 설명을 잘 해주시네요 ㅎㅎ그리고 기능적인면이 아니라 본질, 원리를 중요하게 생각하고 그 부분에 중심을 두고 가르치르는거 같아서 더욱 마음에 듭니다! 열심히 공부 하겠습니다^^ 갈수록 상상초워로 어려워 지겠지만 내가 뭔가를 만든다는게 재밌네요 ㅎㅎ 원래는 HTML하기 전에 프로그래밍 기초루트가 C언어라고해서 C언어를 시도했는데 바로 포기;;;;ㅎㅎㅎ 그래서 제가 원래 목표는 스스로 멋진 웹사이트를 구축 할 수 있을 정도의 실력이기 때문에 구지 C언어를 하지 않고 웹개발 프로그래밍 언어인 HTML로 왔습니다 ㅎ
  24. DONE
  25. 시바견
    저는 좀 다른 경우로, 아예 색이 바뀌지 않았는데
    되는 페이지의 링크 자체를 복사해서 안되는 페이지에 다시 붙여넣으니까 되더라구요

    혹시 이것도 안되시면 새로운 폴더에 페이지를 몰아보세요.
    저같은 경우에는 기본 루트 폴더 내에서는 style자체가 적용이 안되는 문제가 있었는데 루트파일에 하위 폴더를 생성해서 거기에서 다 작업을 하니까 되더라구요 ㅠ
    대화보기
    • bbollonge
      완료!
    • 완료
    • hunter10
      완료
    • yoon88
      완료
    • charl
      완료
    • 김범진
      완료
    • 정세희
      완료
    • gus1111
      style을 다른 파일로 분리시키고 리로드를 해보니까 글자 색이 핑크색으로 바뀌어 있네요ㅠㅠ 글자 색은 아무것도 건드리지 않았는데ㅠㅠ 분리된 파일에 어떤 짓을 해봐도 적용이 되지 않아요 왜 그런걸까요..??
    • Gilbert Paeng
      sound of coding 에서 보면 짠 코드를 새로고침 하지 않고도 웹페이지에 실시간으로 띄워주는데 그건 어떻게하는건가요?
    • 갈수록 재밌네요 ㅋ
    • 데릭
      상당히 재미있습니다. 야학 스케쥴은 일이 있어서 너무 늦어 버렸지만, 최선을 다해서 따라가겠습니다.
    • 문영빈
      저장 경로를 제대로 지정했더니 해결 되었습니다ㅎㅎ 감사합니다!
      대화보기
      • 임영선
        강의 잘 들었습니다!
        항상 생각하는 것이지만 편의기능은 언재나 옳습니다.
      • 임영선
        음.. 우선 확장자를 html로 저장한 다음에 파일이 있는 폴더에서 이름바꾸기로 확장자를 바꾸는 것은 어떤가요?
        정확한 방법이 아니라 제 생각을 한번 써본거라서; 잘 안 풀릴 수 있습니다.
        대화보기
        • 문영빈
          codeanywhere로 계속 하는 중인데, sytle을 분리하려고 파일 저장할 때 확장자(?)를 css로 했더니 저장이 되질 않습니다. 도와주세요!!
        • 이경수
          완료했습니다.
        • 손태민
        • 푸른바람9101
          열심히...
        • 정문경
          완료요~!
        • 정보경
          완료했습니다
        • 김태윤
          오늘도 잘 봤습니다. :)
          스타일을 따로 css 확장자로 만들었을 경우에 어떤 것은 적용이 되고 어떤 것은 적용이 되지 않아서 다소 당황했는데 일단 차차 해결해봐야겠네요.. ㅠㅠ
          수업 스케쥴을 늦게 시작해서 따라가느라 헉헉대고 있네요 ㅎㅎ 혹시 왜 그런지 이유 알게 되면 또 댓글 남기겠습니다.

          감사합니다. :)
        • 조노
          맥 같은경우는 fn + ctrl + spacebar 누르면 명령어 목록 추천 나와요~~
        • Chang-wook Lee
          링크부분에서 Http:// 를 미삽입 하신게 아닌가요 ? 저도 동일한 문제가 발생해서 찬찬히 봤더니 그렇더라구요 !
          대화보기
          • 시루
            ㅋㅋ 잘들었습니닷!
          • 웹여우
            수강완료요
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기