웹 애플리케이션 만들기

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. psy1088
    감사합니다!
  2. REDSTEEL
    Window10에서 Stylebot의 경우 크롬을 모두 종료한 후 재시작하시면 정상적으로 작동됩니다.

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

    중복의 제거

    aaa.css라는 파일을만들고

    style에 해당되는 정보를 모두 지웁니다
    link를 누르고 tab누르고 type을 type="text/css" 으로 설정해 둡니다.
  4. wdb10004@gmail.com
    감사합니다
  5. 정말 멋있습니다 선생님!
  6. 손영민
    codeanywhere로 하다 보니까 atom과는 달리 링크연결할 때 각각의 파일의 주소를 모르겠어요ㅠㅠ 어렵네요... 그래도 열심히 따라가겠습니다.
  7. sung박
    stylebot
    좋은정보
    감사합니다
  8. 지나가는나그네
    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
          귀한게 많아지는것은 생산자가 되었을때 얻을수있는 큰 효용- 메모
        • 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 속성 적용하였는데요.
                이상하게 적용이 안됩니다; 무엇때문일까요 ? ㅠㅠㅠㅠ
              • 김현태
                아. 이제 해결되었어요..ㅎㅎㅎㅎㅎ 이 기쁨과 보람!!!!
                대화보기
                • 김현태
                  저는 여기서부터 막히네요, 이상하게 style.css로 묶은 다음에는 border-bottom 선이 나타나지 않습니다. 흠..계속 시도해 보는 중입니다.
                • 이근환
                  2017-11-28 수강2일차

                  수강완료입니다!

                  정말 하나하나 뼈가되고 살이되는 좋은 강의입니다!!
                  감사합니다!!^^
                • Migyeong Kang
                  아 듣다가 빵터지네요 ㅋㅋㅋㅋㅋ 강의 넘 재밌어요
                • 박인호
                  11-22
                  수강완료.
                • 감사합니다. 진짜 많은 도움이 되고 있어요. 고생하셨어요!!
                • 11/20 수강 완료
                • 감사
                  감사합니다.
                • 11-17 영상 올려주신 이고잉님 감사합니다.
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기