생활코딩

Coding Everybody

코스 전체목록

닫기

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. 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!
    • 열심히사는사람
      완료
    • 중딩
      완료
    • style.css문서 앞 뒤에 <style>,</style>을 붙이면 헤더부분이 달라지더라고요... 혹시 왜 그런지 알 수 있을까요??
    • JIKKON
      완료!ㅎㅎ
    • 아르하트
      감사합니다^^.
    • myjin
      완료!!
    • 잘살자
      감사합니다. 완료
    • seon
      완료
    • 웹초보
      20191023 완료

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

      완료!
    • 셜리
      완료!
    • 리마인더
      완료!
    • 감사합니다.
    • psy1088
      감사합니다!
    • REDSTEEL
      Window10에서 Stylebot의 경우 크롬을 모두 종료한 후 재시작하시면 정상적으로 작동됩니다.

      크롬을 재시작하지 않으면 작동하지 않더라구요.
    • 20180625
      매번 복사하기에 까다로웠기 때문에 뭔가가 생겨났다.

      중복의 제거

      aaa.css라는 파일을만들고

      style에 해당되는 정보를 모두 지웁니다
      link를 누르고 tab누르고 type을 type="text/css" 으로 설정해 둡니다.
    • wdb10004@gmail.com
      감사합니다
    • 정말 멋있습니다 선생님!
    • 손영민
      codeanywhere로 하다 보니까 atom과는 달리 링크연결할 때 각각의 파일의 주소를 모르겠어요ㅠㅠ 어렵네요... 그래도 열심히 따라가겠습니다.
    • sung박
      stylebot
      좋은정보
      감사합니다
    • 지나가는나그네
      article오타
      대화보기
      • jy1234
        감사합니다.
      • 써보자
        ㅇ_ㅇ 뭘까요?? 맥에서 하고 있는데 <link rel="stylesheet" type="text/css" href="style.css"> 이렇게 써야 반응하네요! "http://localhost/"이거 빼고요..1
      • 제갈량
        저는 확장 프로그램을 "Web developer"을 쓰고 있는데
        기능이 거의 유사하네요.
      • 배우는 중..
        안녕하세요~ 제 경우에는 CSS 분리 전후 모두에서

        1. article {float:left; padding: 20px;}
        ==> padding 적용이 안되고..

        2. <aticle>
        <h2>변수와 상수</h2>
        <ul>
        변수
        <li>.....</li>
        <li>.....</li>
        </ul>

        <ul>
        상수
        <li>.....</li>
        <li>.....</li>
        </ul>
        </aticle>
        ==> ul-li를 나타내는 도트가 / 크롬에선 nav영역 뒤 쪽에 / 익스플로러에선 nav영역 앞 쪽에 표현됩니다

        왜? 그럴까요?
      • AndApkA
        감사합니다 잘봤습니다!
      • 이동원
        stylebot 현재 안 되네요
      • 이동원
        css파일은 적용하는데 시간 좀 걸리네요. 7.1.15 버전입니다.
      • 박경진
        고맙 습니다
        정말 유용한 정보 입니다 정말 정말 고맙 습니다
      • 아 index 파일을 꺼내는 거였군요... 어그로 죄송합니다ㅠㅠ
        대화보기
        • 어.. 전 강의인 css이론이랑 이어지는거 맞나요? 왜 링크를 거는 강의는 없는건지..
        • DANIELA
          2018.02.26 여기까지 끝냈습니다!
          오늘 다시 저 혼자서 해보려구요. 좋은 강의 감사합니다 :)
        • 지나가던사람
          에디터는 상관 없는데 css파일 경로가 저게 맞나요?
          index파일이 있는 디렉토리에 있다면 href="http://localhost/style.css 이런식으로 해주시면 될거 같아요.
          대화보기
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기