선생님을 위한 프로그래밍 수업

코스 전체목록

닫기

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. big4ksox
    가즈아!
  2. 실습 1 복습 완료
  3. 코딩드림
    22.09.16
  4. present
    22.08.26 완료!
  5. 헤밍웨이
    220822 감사합니다!
  6. 터병
    2022.03.30. 감사합니다.
  7. H4PPY
    211211
  8. 라인지
    열심히하겠습니다!
  9. 2021/07/15
  10. heyri
    210608
  11. 초딩 개발자
    2021/05/15
  12. Naree Lily Leem
    짜증을 내지 않고 ~ 끄앙 ㅋㅋㅋ 재미지다~ 빵 터졌어요.
  13. James Hanjoo Park
    감사합니다. 수고하셨습니다.
  14. coding_prince
    감사합니다.
  15. Hello 경
    완료했습니다.화이팅..!
  16. 김쟌
    2021.03.07
  17. 웹전문가
    2021.2.13
  18. 정착유목민
    봤어요가 줄어 드는건 내가 앞으로 가고 있다는 중거인거죠?
  19. 한번가보자
    가보자
  20. href="style.css"> 요부분을 고쳐보세요

    href="http://localost/style.css">
    대화보기
    • 백소원
      안녕하세요! 얼마전부터 영상보며 따라하고 있는 중이에용.
      코딩은 처음이라 학원다니려구 등록해놨는데, 코로나 때문에 계속 개강이 미뤄져서 혼자라도 먼저 시작해봅니댱
      질문하면 답변 남겨주시는지 잘 모르겠지만 ㅠㅠ 궁금한게 있어서용,,
      링크 태그에서 저도 <link rel="stylesheet" type="text/css" href="style.css"> 강의에서와는 달리 이렇게 해야 경로 인식이 되는데 왜그런지 알 수 있을까요?????
    • 박재현
      20.12.24
    • 늦은나이가아님
      2020.12.11 감사합니다
    • 박병진
      2020.11.12 완료
    • 10/2 완료
    • 양민
      .
    • 허우룩
      2020.09.09
    • 강민규
      2020 08 07 완료
    • 덱스터
      style.css 에서 막혀서 질문 좀 드립니다 ㅠ_ㅠ
      깃허브 사용하고 있구요.

      <link rel="stylesheet" type="https://jahee0724.github.io/web1/style.css">
      로 해봤는데 안되는게.. 이유가 뭘까요?

      진짜 이상한게
      atom 에선 깃허브에 올려둔 style.scc 파일에 아래와 같이 링크거니
      <link rel="stylesheet" type="text/css" href="https://jahee0724.github.io/web1/style.css">

      html preview 기능으로 보면 제대로 적용되는데.

      막상 깃허브 홈피로 접속하면
      적용이 안되네여 ㅋㅋㅋ 아휴 ㅠㅠ
    • 권오상
      감사합니다.
    • 오닉스커브
      2020.07.03 완료
    • taewoong
      5.14
    • HyeonHui Jeong
      5/7
    • 산노을
      good job!
    • 열심히사는사람
      완료
    • 중딩
      완료
    • David
      style.css문서 앞 뒤에 <style>,</style>을 붙이면 헤더부분이 달라지더라고요... 혹시 왜 그런지 알 수 있을까요??
    • JIKKON
      완료!ㅎㅎ
    • 아르하트
      감사합니다^^.
    • myjin
      완료!!
    • 잘살자
      감사합니다. 완료
    • seon
      완료
    • 웹초보
      20191023 완료

      감사합니다
    • 들국화
      완료
    • ㅇㄹ
    • 칠칠석
      2019년 4월 7일

      완료!
    • 셜리
      완료!
    • 리마인더
      완료!
    • 감사합니다.
    • psy1088
      감사합니다!
    버전 관리
    egoing@gmail.com
    현재 버전
    선택 버전
    graphittie 자세히 보기