생활코딩

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

지금까지 배운 것만 가지고도 할 수 있는 일

아래 영상수업은 우리 수업의 양념입니다. CSS만으로도 할 수 있는 일이 궁금하신 분은 시도해보세요. 

 

댓글

댓글 본문
작성자
비밀번호
  1. idiot
    20170118 완료
  2. 90ano
    하루에 한 강의 라도 열심히 20170116 완료.
  3. 울랄라부라더스
    잘 들었습니다.
  4. TEBENE
    끝까지 화이팅하자구요!!!!!!!
    대화보기
    • 민지
      TEBENE님:) 저는 파일 경로때문에 아예 안되다가 됬거든요
      htdocs안에 다른 폴더 만들어서 하면 아예 경로를 못 읽던데
      님은 그게 문제가 아닌거같아요ㅋㅋ어휴 뭐가문제지 일단 스킵하심이... 정신건강에...ㅋㅋ
      저는 학원 다니기전에 기초로 배우고있어요
      독학은 답답하지만 성취감있죠!! 코딩공부 힘내세요:)
      대화보기
      • 아디랑
        아.. 정말 모든 강의가 다 최고에요 ㅠㅠ 감사합니다!
      • TEBENE
        민지님 답글 정말 감사드려요ㅠㅠ..
        파일 폴더위치도 htdocs > css > 3.html 이라고 잘 되있는데ㅠㅠ..
        웃긴게 nav{~~}를 nav밑에 있는 ol로 바꿔서 ol{~~}로 친다음에 저장하면
        그게 또 효과가 적용이 되네요.. 하..
        그래도 절대로 포기는 못해!!!!!!!!!!!!!!!!!!!!!!!!
        아무튼 답변 진짜 감사드려요
        민지님도 코딩 공부중이신가봐요??ㅎ
      • 민지
        1. 맥 사용하세요? (맥 - localhost:8080)
        2. 'style.css 파일' 폴더 위치 확인 하셨어요?
        apache2 > htdocs (htdocs안에 다른 폴더 만드셔서 그 안에 두면 링크 못타요.)

        header, nav, article태그들만 css로 해독이 안될리가...ㅜㅜ
        <DOCTYPE html> -> <!DOCTYPE html>
        대화보기
        • TEBENE
          답변꼭해주셨으면 좋겠습니다만..
          header, nav, article태그들만 css로 해독을 못하는것같아서요ㅠㅠ..
          header안의 h1태그로, nav안의 ol태그로 바꿀때는 다 디자인효과가 주어지는데 제 노트북만 그런건가요??
          왜이러는걸까요ㅠㅠ..
          아무리 살펴봐도 잘못된건 없는거같은데ㅠ..
          <DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <style>
          header {
          border-bottom:1px solid gray;
          padding:20px;
          }
          nav ol {
          width:200px;
          float:left;
          border-right:1px solid gray;
          height:600px;
          }
          article {
          float:left;
          padding:20px;
          }
          </style>
          </head>
          <body>
          <header>
          <h1><a href="http://localhost/css/1.html">JavaScript</a></h1>
          </header>
          <nav>
          <ol>
          <li><a href="http://localhost/css/2.html">JavaScript란?</a></li>
          <li><a href="http://localhost/css/3.html">변수와 연산자</a></li>
          <li><a href="http://localhost/css/4.html">연산자</a></li>
          </ol>
          </nav>
          <article>
          <h2>변수와 상수</h2>
          <ul>
          <li>변수와 상수란? 변수와 상수다</li>
          </ul>
          </article>
          </body>
          </html>
        • macbookrgh55
          2017-01-03
          4:46 pm 잘봤습니다
        • Julie
          너무너무 감사합니다
          정말 재밌어요!
          명성만 들었지 처음 들어봤는데 정말 좋아요
          앞으로도 잘부탁드립니다.
          열심히 공부할게요!^^
        • 쌘진
          2016-12-30 완료

          강의 감사합니다
        • 수호아빠
          161228
        • 에헤라디야
          161221
        • 완료
        • JintGram
          크롬 종료 후 다시 켜보시면 됩니다.
          대화보기
          • 엄상혁
            스타일봇 대박~!!!!!!!!!

            좋은 강의 감사합니다^^
          • 2016.12.01 완료
            항상 감사히 생각하며 듣고 있습니다.
            명쾌한 설명 덕분에 이해가 너무 잘 됩니다.
          • harris
            2016.12.01 11.30 완료
          • 덜렁이
            코드를 정확히 입력하고 저장했는 데도 안된다면 참고하세요
            https://www.opentutorials.org......366
            메인동영상화면 아래쪽에 설명을 보세요
            대화보기
            • SeungWoo Baek
              style.css 최상단과 하단에 <style></style> 태그가 들어가 있다면, 삭제하고 해보시면 됩니다^^
              대화보기
              • dororing
                2016 11 24
              • 박정한
                완료
              • Bogwang Jung
                11.6 완료
              • Sanguk An
                11.06.23.06분 완료
              • 시드
                스타일봇 안되시는분들!

                저도안됐는데 크롬 끄고 다시 하니까 되네요^^~
              • kwonhaemori@naver.com
                스타일봇 재밌네요ㅋㅋㅋ
              • 이병정
                크롬에서는 확인되는데...
                스윙에서는 안돼네요.^^);;
              • 폭스킴
                ctrl + F5 눌러보세요 저도 안됐는데 되네요~ ^^
                대화보기
                • 선인장
                  혹시 css 파일에 <style> 태그가 있으세요?
                  있으시다면 지우시면 될겁니다
                  대화보기
                  • 휴화산
                    고수님들 질문있습니다! 맥 사용자인데 header 부분이 완전히 묵살되서 나타납니다 ㅠㅠ

                    네비 부분부터는 정상적으로 스타일이 적용됬는데 유독 헤더부분만 패딩이나 보더가 안먹네요 구글에 쳐보면 사파리 문제라고 하시는 분도 있는데 혹시 해결가능방법이 있을까요?
                  • 활화산
                    css 파일로 링크 하는 것은 안되는 군요. 뭐가 잘못 됐는지 도무지 모르겠음. 넘어 갑니다. 흐름만 기억하고. 감사합니다.
                  • 60코딩
                    저도..아무것도 안나오는데..아직 못찾았네요..어디에 물어봐야 할까요..?
                    대화보기
                    • 60코딩
                      Stylebot css 에서 open Stylebot 클릭해도 아무것도 안나옵니다...뭐가 잘못된걸까요..?
                    • 배정호
                      잘따라했습니다
                    • Kijin Roh
                      2016.10.21 완료
                    • Shinkyu Lee
                      에고 ~ 여기서 조금 버벅 거리네요 ㅋㅋㅋ
                    • 호랑이형님
                      .css 파일 만들고 웹페이지 로드했을 때 !!! 우와!!! 했습니다.
                      이고잉님 좋은 강의 감사해요~
                    • 안재우
                      2016.10.13. 완.료.
                    • 임동호
                      20161012완료
                    • San Koh
                      2016-10-12 완료했습니다!
                    • 류엶
                      20161007 완료
                    • 뭉치우석
                      마지막 스타일봇... 강의까지 정말 감사합니다.
                      인터넷 강의를 연휴 내내 들었는데
                      오히려 강사님 입 아프실까 걱정이 다 드네요 ㅎ 괜한 걱정!!
                    • chummilmil99
                      고맙습니다 :)
                    • Amazing!

                      수강완료
                      감사합니다
                    • Xuperman
                      161002 완료 :D
                    • 이제야열공
                      마지막에 stylebot에서 font-size : 30px 이거 하셨는데
                      왜 내용까지 사이즈가 다 커지나요?
                      <article>태그 안에 있는데... <a>태그 안에 있는 내용 폰트사이즈만 커져야하는거 아닌가요?
                      <a href:~~~~~> 이거 때문에 링크 안에 있는 내용 폰트사이즈가 다 커지는건가요?
                    • 정태영
                      왜 똑같이 따라했는데 css로 따로 빼면 header부분 지정한 border-bottom이 작동을 안하네요 ㅜㅜ
                      왜그런거죠??ㅠㅠ 그냥 복붙했는데 이러니까 멘붕....ㅜㅜ도와주세요
                    • 이보라
                      9.28. 수강완료했습니다.
                      연달아 듣다보니 댓글 남기는 일이 들쭉날쭉하군요 ^^;
                      잘 따라오고 있다고 달래주시면서 강의해주시니, 그만둘 수가 없네요. 사실 웹디자인을 이미 공부한지라, html과 css 코딩방법 자체는 거의 다 익숙한 것들인데,(아톰조차 제가 배웠던 유일한 에디터였어요) 사이사이 원론적인 설명도 다 챙겨주시니 건너뛸 수가 없었어요.
                      따라가다가 서버사이드 쪽 내용 나오면 조금씩 이해하기 힘든 부분도 나올 것 같지만, 지금 목표는 일단 무조건 완주입니다.
                      준비 많이 하시고 만든게 느껴지는 강의입니다. 언제나 감사합니다.
                    • 심드렁
                      stylebot 좋네요 ㅎㅎ
                    버전 관리
                    egoing
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기