생활코딩

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. 박연경
    듣기만 하다 실습했어요...
    20년전에 학교 다닐때 이해가 안되던게 이번 강의로 이해가 됩니다...ㅋㅋ
    너무 재밌네요...^^
  2. Chang-ju Ahn
    찾아보니 style.css 마지막에 }가 없었네요 ;;
    대화보기
    • Chang-ju Ahn
      <link rel="stylesheet" type="text/css" href="http://localhost:8080/style.css"> 해도 스타일 적용이 안되는데 왜 그런걸까요 ??ㅠㅠ
    • 김수진
      테두리가 안생기는데 혹시 왜 그런가요..ㅠ
    • 밀하우스
      좋은 수업 감사합니다.^^
    • Amore Chang
      신기방기
    • WAlk7
      고맙습니다.
      파일이름.css 는 정말 편리한 시스템이군요.
      그리고 조금 난이도가 있었다고 느껴지기도 하지만 더 달려나가 배울 뿐입니다!

      다음 강의로 고고!
    • 왜이러징
      아 css파일에서는 <style></style>을 쓰면안되는구나 문제해결완료
    • 왜이러징?????????????
      style.css로 다뺴고나면 style 중 header { border-bottom: 2px solid gray;} 만 적용이 안되서나와요

      왜이런거에요?
    • 저도
      저도그래요
      대화보기
      • 아나이스
        오늘은 벼락치기 하는 날
        다시 한번 더 듣고 한꺼번에 댓글 올려용~
      • 권광범
        유용한 수업 감사합니다~
      • 김성훈
        생산자의 입장이 되어보는 것은

        새로운 경험.
      • 성훈
        css 파일 속에선 <style> 을 만들면 안되는군요.. 근데 그 안에 적었을때 다른것들은 적용이 되는데 유독 header 부분만 왜 적용이 안됐는지 궁금합니다.. 아 그리고 댓글 삭제버튼도 적용이 안되네요~
        대화보기
        • 성훈
          실습 2를 하던도중 style 을 직접 적어서 할때는 제일 최상위 제목 h1 JavaScript 밑에 20px의 패딩을 가진 밑줄이 나오는데 css파일로 만든 후 다른 html 파일에 적용시키면 다른건 정상작동인데 h1 제목 밑줄만 안나오네요
        • 이나래
          아 진짜 너무 재밌어요!! ㅠㅠ 앞으로 배울 내용들도 기대 돼요~!!
        • Hyojeon Kim
          잘보았습니다
        • JUNY
          오늘도 잘 보았습니다!!
        • 황성준
          잘봤습니다.
        • 핀도리
          전체적인 소스 한번 볼수있을까여 !? ㅎ
          대화보기
          • why?
            border-bottom이 적용되지 않습니다.

            header {
            border-bottom: 1px solid black;
            padding: 10px;
            }
          • Not Found
            안녕하세요
            Atom으로 편집하여 저장 후 리로드를 하려고 크롬에서 localhost:81/index.html 을 불러왔는데
            하기와 같이 오류 페이지가 뜹니다.

            Not Found

            The requested URL /index.html was not found on this server.

            뭔가 코드가 잘못되었나 하여 윈도우즈 탐색기에서 html파일을 열어 보니 파일 각각은 정상적으로 보여지는데, 링크가 걸린 하이퍼텍스트를 클릭하면 또 상기와 같은 오류가 떠요
            뭔가 서버가 잘못된 건가요ㅠㅠ

            지금 쓰고 있는 네트워크가 카페 공용 네트워크인데 혹시 그것이 문제인지..

            도와주세요
          • 장준철
            href 뒤 주소부분을
            http://loclhost......css
            http://localhost......css 로 수정해보세요
            대화보기
            • 공지만
              아 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
              그걸 못 봤네요 ㅎㅎ
              부끄럽네
              감사합니다.
              대화보기
              • 동동
                소비자에서 생산자로!
              • ㅎㅎ
                localhost가 아니라 loclhost라서?
                대화보기
                • 공지만
                  <head>
                  <meta charset="utf-8">
                  <link rel="stylesheet" type="text/css" href="http://loclhost/style.css">
                  </head>

                  style.css이 적용이 안되는데 제가 뭐 잘못한건가요
                • 김윤호
                  새로고침해보세요~
                  대화보기
                  • caroline0904
                    먼저 좋은 수업 감사합니다 :)
                    저는 codeanywhere 에서 실습을 진행하고 있는데 이 경우에는 style.css 파일을 어떻게 링크 할 수 있는지 궁금합니다. html 파일과 달라서 경로를 어떻게 지정해야 할지 모르겠네요. 도움 부탁드립니다. ^^
                    <link rel="stylesheet" type="text/css" href="**************">
                  • Junga Kim
                    스타일봇을 설치했는데 오픈이 안되네요;;; 혹시 왜 안열리는지 아시는 분??::
                  • sugeami
                    크롬 stylebot에서 변경한 CSS 코딩은 실습에 사용한 style.css 에 영향을 주지 않는군요.

                    혹시 stylebot 에서 적용하거나 변경한 CSS 어디서 확인을 할 수가 있나요? (크롬페이지가 아닌 css 파일로요)
                  • 김규리
                    article의 길이가 길 경우에 float를 해도 목록 옆에 표시가 되지 않고 아랫쪽에 따로 표시가 됩니당..
                    어떻게하면 article의 내용이 줄바꿈이 되게 해서 목록 옆에 표시할 수 있나요?
                  • TaeSic Lee
                    스타일봇좋네요
                  • 김재훈
                    퍼갑니다^^
                    대화보기
                    • 채승철
                      아.. 에고 기본적인 부분을 제가 잊었네요.

                      알려주셔서 감사합니다.
                      대화보기
                      • ㅇㅅㅇ
                        채승철씨
                        nav{
                        border-right: 1px solid gray;
                        width: 600px
                        float:left;
                        }
                        부분에서
                        width:600px치시고 ; 까먹으셧어요 저거없음 연결이안되여
                      • 채승철
                        실습 1번에서 진행중에 style 적용 중에서 nav 적용 중에서 float:left; 가 적용이 되지 않습니다.

                        <!DOCTYPE html>
                        <html>
                        <head>
                        <meta charset="utf-8" />
                        <style>
                        header{
                        border-bottom: 1px solid gray;
                        padding: 20px
                        }
                        nav{
                        border-right: 1px solid gray;
                        width: 600px
                        float:left;
                        }
                        </style>
                        </head>
                        <body>
                        <header>
                        <h1><a href="http://localhost/index1.html">Java Script</a></h1>
                        </header>
                        <nav>
                        <ol>
                        <li><a href="http://localhost/page_html.html">Java Script란?</a></li>
                        <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
                        <li><a href="http://localhost/page_op.html">연산자</a></li>
                        </ol>
                        </nav>
                        <artical>
                        <h2>변수와 상수</h2>
                        변수는 바뀔 수 있는 값이고, 상수는 바뀌지 않는 값입니다.
                        </artical>
                        </body>
                        </html>

                        상위의 내용이 제가 atom에 작성된 내용인데요.

                        초짜라서 문의 사항이 많습니다.
                        혹 아시는 분 있으시면 도움 부탁 드립니다.

                        감사합니다.
                      • 권경은
                        stylebot 신기합니다~ 주도적 소비자가 되기!^^ 배울수록 시간이 많이 걸리고 힘들긴 하지만 더욱 흥미로워집니다! 감사합니다!
                      • 강응택
                        주말 지내고 오늘 끝냈으니 하루 늦은건가? 강사가 많은 시간, 많은 노력한 것 같습니다. 땡큐.
                      • 파이팅
                        /노노님 참고 하세요.

                        윈도우에 웹서버 설치 부분을 잘 따라 하시면 될듯 한데...

                        root는 아파치 웹서버를 설치하고 나면 생기는 부분입니다.

                        그러니까 웹서버가 가동되고 서비스가 실행되면 기본적으로 보여주는 폴더? 라고 이해 하시면 되겠네요
                        웹서버에 접속했다고 해서 서버내의 모든 폴더가 보여지면 안되지만, 보여주기 위한 서버이기 때문에
                        보여줄 페이지들이 존재하는 폴더는 있어야 하니까요.

                        서버설치 부분을 다 이행 하셨다면 제 경우는
                        D: 에 설치를 했기에 "D:\Bitnami\wampstack-5.6.30-2\apache2\htdocs" 이렇게 만들어져 있고
                        여기서 마지막 "htdocs" 폴더가 root 폴더가 되는 것입니다.

                        서버를 설치할때 저는 port를 81로 설정했습니다.
                        80이라는 포트를 이미 무엇인가가 사용중이라서 자동으로 81로 잡힌것 같은데
                        그런 이유로 <h1><a href="http://localhost:81/">JavaScript</a></h1> 이렇게 사용 중입니다.

                        서버는 설치 하고나면 컴 실행마다 자동으로 서비스 되는것 같긴 하지만 서비스 실행 여부도
                        확인하시기 바랍니다.
                        D:\Bitnami\wampstack-5.6.30-2\manager-windows <- 이파일이 서버 관리 파일입니다.
                        대화보기
                        • 좋은오빠
                          기본 세팅이 UTF-8이 아니라 euc-kr로 설정이 되어서 한글 깨짐 현상이 발생한겁니다.
                          메뉴중 설정에 들어가셔서 setting탭에 file encoing 설정을 Unicode(UTF-8)로 설정을 바꿔주시면 됩니다.
                          대화보기
                          • 노노
                            다른 건 다 따라오고 있는데 document root 만들라는 부분자체를 이해못했는지, 수업을 못들은건지

                            <header>
                            <h1><a href="file://D:/Document/root/">JavaScript</a></h1>
                            </header>

                            "file://D:/Document/root/"
                            로 때워가며 실습중입니다. 로컬호스트라고 못 쓰고요...
                            몇 번 강의를 들으면 해결될까요? 놓친거 같은데
                          • 도와주세여
                            동영상 보면서 하는데 header nav article 같이 해더 역할(?)을 하는것들이 css가 안먹힙니다 이상하게 header 대신 h1 하면 밑줄이 나타나고 nav ol 에서 nav를 지우면 1,2,3이 없어지고 다시 nav ol 하면 원래 안먹히던 대로 다시 돌아갑니다 뭐가 문제인가여??
                            (page_vc.html 코드 입니다 다른것도 다 그래여 ㅠㅠ)
                            <!DOCTYPE html>
                            <html>
                            <head>
                            <meta charset="utf-8">
                            <style>
                            header {
                            border-bottom:1px solid red;
                            padding: 20px;
                            }
                            nav
                            {
                            border-right:1px solid gray;
                            width:200px;
                            height:600px;
                            float:left;
                            }
                            nav ol {
                            list-style: none;
                            }
                            article{
                            float:left;
                            padding: 20px;
                            }
                            </style>
                            </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>
                          • 안근우
                            CSS 실습을 통하여 실습해보니 정말 재밌어요!!!
                          • 주먹밥
                            실무자로서 CSS 처음 나왔을 때 가슴이 너무나 벅찼던 기억이... 수고하셨습니다.
                            그리고 알찬내용 고맙습니다 ^^
                          • 최창용
                            감사합니다.
                          • 임명숙
                            강의 잘 들었습니다.
                          • 강의 잘 봤습니다 :)
                          • skekogo
                            오늘도 강의 잘 들었습니다. 감사합니다!
                          • 밧슈
                            잘 보았습니다.^^
                          버전 관리
                          egoing
                          현재 버전
                          선택 버전
                          graphittie 자세히 보기