웹 애플리케이션 만들기

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. seon
    완료
  2. 웹초보
    20191023 완료

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

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

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

    중복의 제거

    aaa.css라는 파일을만들고

    style에 해당되는 정보를 모두 지웁니다
    link를 누르고 tab누르고 type을 type="text/css" 으로 설정해 둡니다.
  12. wdb10004@gmail.com
    감사합니다
  13. 정말 멋있습니다 선생님!
  14. 손영민
    codeanywhere로 하다 보니까 atom과는 달리 링크연결할 때 각각의 파일의 주소를 모르겠어요ㅠㅠ 어렵네요... 그래도 열심히 따라가겠습니다.
  15. sung박
    stylebot
    좋은정보
    감사합니다
  16. 지나가는나그네
    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 이런식으로 해주시면 될거 같아요.
        대화보기
        • ryuniverse
          저는 메모장을 이용해서 실습 하고있는데요
          실습2에서 메모장 편집기로는 style.css 를 이용하는 것은 불가능 한가요?
          <link rel="stylesheet" type="text/css" href="file:///C:/Document%20root/style.css"> 요렇게 각항목에
          작업했는데 적용이 안되네요...ㅜㅜ
          (완전 초보입니다.)
        • Jaehwi Alice Kim
          저는 스타일봇이 안되네요~ 왜그럴까요? 크롬에 css 버튼은 생겼는데 눌러도 반응이 없어요..
        • donggyu
          본 수업내용과는 관련없지만 혹시 생활코딩 안에 안드로이드나 ios 에 관한 앱개발 컨텐츠는 없나요? 있다면 잘 못찾겠네용 ㅠㅠ
        • Jinsoo Choi
          다 봤습니다. 감사합니다 :)
        • 2/6 감사합니다
        • HWANGYANGBAN
          style.css을 따로 빼서 링크를 하거나 style.css 수정 시 적용 안되는 이유는 캐쉬 때문인것 같습니다.
          (저도 막 수강하고 있는 학생이라 부정확합니다...ㅎㅎ 정확한 원인을 아시는 분은 댓글 남겨주세요!)
          <link rel="stylesheet" type="text/css" href="http://localhost/style.css?ver=1"> 에서 ?ver=아무숫자 를 붙이면 새로운 쿼리로 인식해서 바로바로 적용이 되는듯 하는군요!

          이고잉님! 재밌게 웹 수업듣고 있습니다. 항상 감사합니다!
        • CHOITAEK
          style.css 파일을 수정하면 바로바로 변경이 않되던데 어떻게 해야하나요?
        • 슝태
          20180109
        • 엣지 쓰지마세요
          스타일 css 링크 걸고 웹 확인할때 적용안되면 크롬으로 켜보세요 엣지는 인식을 못해요 ㅠㅠ
        • 12/30
          감사합니다. 덕분에 자주 방문하는 사이트에 거슬리는 광고 모두 제거하고 이용중입니다.^^
        • misteleex@naver.com
          귀한게 많아지는것은 생산자가 되었을때 얻을수있는 큰 효용- 메모
        • JN87
          171230 감사합니다!
        • 12/29
          감사합니다.^^
        • 스타일봇
          stylebot이 또 새활코딩 특정부분에서만 안되네요 저는
          되는데도 있고 안되는데도있고
        • ㅎㅎ
          stylebot이 특정사이트에서만 되는건가요?
          제가 만든 html 파일이나 생활코딩 홈페이지에서는 안되고 네이버 구글 이런데서는 되는데..
          해결방법좀 알려주실분!!
        • PassionOfStudy
          17-12-21 4일차 - 2번째 강의

          수강완료!

          -----------------------------------------
          CSS - 중복의제거

          HTML - 정보
          CSS - 디자인, 스타일

          chrome extension stylebot
          -----------------------------------------
        • Yong Choi
          #171213 수강완료 감사합니다! 이제 응용해봐야겠네요 ㅠㅠ 강의 너무 재밌게 보고 있습니다!
        • 아래서 찾았어요
          혹, style.css로 빼시고 나서, header의 border-bottom 적용이 안되시는분들을 위해서 몇자 남깁니다.
          border-bottom빼곤 다 적용이 되는데 저거만 안되길래 뭘 잘못했나싶었는데..
          sytle.css파일에서는 <style></style> 빼주시면 됩니다~ㅠㅠ
          대화보기
          • 김현태
            로그랑 소스 코드 올려보십시요.저도 초보지만 한번 보고말씀드릴게요.
            대화보기
            • 장은지
              저도 같은 현상이..ㅜㅠ원인이 뭔가요?
              대화보기
              • 빛보다 밝은 빛
                1강 보고 nav 안에 float 속성 적용하였는데요.
                이상하게 적용이 안됩니다; 무엇때문일까요 ? ㅠㅠㅠㅠ
              • 김현태
                아. 이제 해결되었어요..ㅎㅎㅎㅎㅎ 이 기쁨과 보람!!!!
                대화보기
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기