웹 애플리케이션 만들기

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. 빛보다 밝은 빛
    1강 보고 nav 안에 float 속성 적용하였는데요.
    이상하게 적용이 안됩니다; 무엇때문일까요 ? ㅠㅠㅠㅠ
  2. 김현태
    아. 이제 해결되었어요..ㅎㅎㅎㅎㅎ 이 기쁨과 보람!!!!
    대화보기
    • 김현태
      저는 여기서부터 막히네요, 이상하게 style.css로 묶은 다음에는 border-bottom 선이 나타나지 않습니다. 흠..계속 시도해 보는 중입니다.
    • 이근환
      2017-11-28 수강2일차

      수강완료입니다!

      정말 하나하나 뼈가되고 살이되는 좋은 강의입니다!!
      감사합니다!!^^
    • Migyeong Kang
      아 듣다가 빵터지네요 ㅋㅋㅋㅋㅋ 강의 넘 재밌어요
    • 박인호
      11-22
      수강완료.
    • 감사합니다. 진짜 많은 도움이 되고 있어요. 고생하셨어요!!
    • 11/20 수강 완료
    • 감사
      감사합니다.
    • 11-17 영상 올려주신 이고잉님 감사합니다.
    • 코딩팬
      재밍있어요
    • atnskynst
      11/16
    • 동물사랑
      다봤다이기야 기분 노무노무 딱딱좋다
    • 루안
      11-14 수강완료! 고생하셨습니다~
    • 서성진
      수강 완료!
    • Junyoung M. Kang
      2017.11.11 수강완료
    • 2017년 11월 11일 수강완료
    • 11/10
    • 부건혁
      article{
      float: left;
      padding: 20px
      }
      에서 float: left;를 하면 height: 600px;와 비슷한 효과를 가지게 되나요?
    • 황혁진
      2017/11/02 완료
    • 2017/11/2 완료!
    • MinJeong Lee
      ul을 쓰게 되면 이 태그또한 리스트 성격이라 동그란 점이 표시되어요. ul을 쓰시는 경우에는 이 ul에 대해 또하나의 list-style:none을 적용하셔야 텍스트 앞에 아무것도 없는 모양새가 나오는 것 같아요......라고 생각합니다.....ㅎㅎ
      대화보기
      • 난세영웅
        감사합니다.... 수업 잘 들었습니다....
      • 루씨구씨
        수강완료!
      • 소소대담
        하나씩 알아가는 재미가 있습니다. 감사합니다.
      • MongJA
        ol태그 대신에 ul태그를 안 쓰고 list-stlye none을 쓰는 이유는 무엇인가요??
      • Jeff Oh
        기본기를 잘 잡아주셔서 감사합니다. ㅎㅎ
      • 구본혁
        수강완료했습니다.
      • 인문학도
        인문학도 여기까지만 하렵니다
      • 잘 보고있습니다.
        감사합니다~^^
      • 서당개3년
        중복의 제거: 번거러움 없고, 용량을 아낄 수 있다.--> 비용절감
      • Jeoung Myung Hyun
        감사합니다~ 잘 보고 있습니다 ^^
      • 마블리
        감사합니다.
      • 루나
        정말정말정말 진심으로 늘 감사드려요!
      • 송성태
        정말 감사합니다!
      • 리브
        정말 좋은 내용 감사합니다 ㅎㅎ style bot 써먹을데가 많을 것 같아요!
      • 파이쏭
        9월28일 시작

        스타일봇이란게 있었네요
        좋은 정보 감사합니다!
      • 바키
        고생하셨어용~
      • 알파고
        9/27

        css 신기하네요
      • 강수경
        09/26
      • 정종훈
        9/26 완료
      • 김주희
        목소리가 너무 좋아요ㅠㅠ여고생 맘을 훔쳐가셨네요,,,,,,♡
        친구도 목소리 듣고 강의 듣고 싶다고 하네요..
      • Jay Choi
        강사님!
        항상 감사 드립니다.
      • 이동원
        너무 재밌어요!!
        수강완료!! 17.9.25
      • Dongwon Shin
        수강 완료했습니다.
      • 9/25완료
      • 여누
        완료
      • 다시시작
        완료
      • "귀한게 많아 지는 것은 뭐랄까요 제가 봤을 때 생산자가 되었을 때 얻어지는 효용 중의 하나라고 생각합니다." 어록 만들어 드려야 할 것 같습니다. 화이팅!
      • 시리우스
        2017.09.20 완료
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기