웹 애플리케이션 만들기

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. 지나가던사람
    에디터는 상관 없는데 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 영상 올려주신 이고잉님 감사합니다.
            • 코딩팬
              재밍있어요
            • 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
                기본기를 잘 잡아주셔서 감사합니다. ㅎㅎ
              • 구본혁
                수강완료했습니다.
              • 인문학도
                인문학도 여기까지만 하렵니다
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기