생활코딩

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. 김용호
    저도 방금 그 문제가 있었는데, "style.css" 파일을 다시 살펴보시길 바랍니다.

    <style> </style> <- 이 태그가 css파일안에 들어가 있으면 header부분이 제일 위에 코딩되어 있었음으로 css처리가 안 되더라구요
    대화보기
    • 괄호
      괄호를 안닫은 부분이 있을겁니다.
      대화보기
      • 이게 뭐지..
        제가 style.css 파일을 만들고 따라 적용했는데 다른 부분은 적용이 잘 되는데 header부분만 css처리가 안 됩니다 어떤게 문제일까요?
      • 김우빈
        아 너무감사합니다.
      • Inti
        비트나미와 같은 PC에 서버를 설치하셨다면 다음 절차를 따르시기 바랍니다.

        호스팅의 절차를 그대로 따라주세요.
        그 중 link 태그, href 속성 값을 다음과 같은 형식으로 작성하시기 바랍니다.

        <link rel="stylesheet" href="localhost:80/example/ex.css">
        대화보기
        • Inti
          https는 자신의 사이트에 SSL을 적용했을 때 나타나는 표시입니다. SSL은 사이트를 변조시키는 디페이스 공격을 방어할 수 있으며, ㅇㅁㅇ님이 말씀하신 사이트의 보안 문제와는 전혀 무관합니다.
          http://example.org/를 삭제하셔야 하는 이유는 다음과 같습니다.
          1. 해당 사이트의 입장에서는 이미 루트 드라이브(디스크)와 같습니다. 그러므로 도메인을 입력할 경우 원본을 찾을 수 없게 됩니다.
          다음 방법으로 해결하실 수 있습니다.
          <link rel="stylesheet" href="/example-folder/example.css">의 문법으로 입력해보시기 바랍니다.

          1. 다음 예를 테스트하기 위해 포맷된 USB를 연결한 뒤 \example 폴더에 index.html 파일을 만들어봅니다.
          2. 아무 폴더(USB)에 css 파일을 만듭니다.
          3. index.html 파일에 위 구문(<link rel="~" href="/~">)을 추가합니다.
          -단, 이때 문법은 다음을 따릅니다.
          1.href="/example-folder/ex.css"
          4. 웹 브라이저에서 index.html 파일을 열고 확인합니다.
          대화보기
          • whon
            2017/04/23 12:23
            css
          • 박지수
            이응님 알려주신 1번 방법대로 해서 해결하였습니다. 바쁘실텐데 댓글 보시고 초보인 저에게 알려주셔서 정말 감사합니다.^^
            대화보기
            • 이지영
              너무 강의가 좋습니다 목소리도 너무 좋으시고 이해가 쏙쏙 됩니다
              근데 코딩을 따라해봐야겠죠?
              지금 강의만 듣고 개념이해정도만 하고 있는데....
              반드시 코딩해봐야하는지...ㅎㅎ.ㅎㅎㅎ
            • ㅁㄷㅁ
              주소의 http->https로 바꿔보시거나 http://부분을 삭제하면 해결되는것 같습니다.
              아마 브라우저에서 https의 보안문제? 로 차단하는것 같은데 정확히 아시는 분이 말씀해주시면 감사하겠습니다
              대화보기
              • 이응
                흠.. 여러가지 이유가 있을 수 있을 거 같은데요.
                1. css파일의 확장자가 css인지 확인한다.
                2. css파일의 이름을 제대로 지정했는지 확인한다.
                3. css를 적용하려는 파일에 style 대신에 <link rel="stylesheet" href="http://localhost/style.css">가 추가 되어 있는지 확인한다.
                4. link되는 주소가 제대로 css파일을 가리키고 있는지 확인한다.
                이정도 가 있지 않을까 싶은데요.
                대화보기
                • 박지수
                  head 내에서 style을 적용하면 제대로 되는데, 위 CSS2 실습에서 처럼 CSS파일로 따로 빼내서 적용하면 아무것도 먹지 style을 적용하기 전과 같이 나옵니다. 왜 그런지 아무리 code을 다시 찾아봐도 알 수가 없네요. 누가 알려주시면 감사하겠습니다.
                • 도디아
                  저도 처음에 안돼서 당황했는데 header의 글씨 (JavaScript)에 색깔을 적용하려면 header h1 a{color:red} 이렇게 지명?을 더 세세하게 해줘야 하더라고요!
                  대화보기
                  • 도디아
                    정말 감사합니다!!! 강의 너무 재밌고 유익해요! 왜 진작 코딩에 관심을 가지지 않았나 싶습니다ㅜㅜㅜ
                  • 한신웅
                    스타일봇 참 편리하고 좋네요! 고맙습니다
                    공부하면 할 수록 넘 많은걸 얻게 되어서 감사드릴 뿐입니다
                  • SeongJoo Hong
                    와우 수고하셨습니다
                  • 위니위니
                    저 해결했어여!!! ..


                    파일 싹 다 정리하고 코딩 다시해봤더니 적용 되여;;;
                    대화보기
                    • 위니위니
                      저도 그러는데 혹시 문제 해결하셨어요?
                      대화보기
                      • 인덱스
                        지금 저도 그런데 혹시 해결하셨나요?
                        대화보기
                        • nnbetter
                          히힛 감사합니다~~ 수고 많으셨어용!!! :)
                        • Chanyang Kim
                          우와.. 마지막 스타일봇 기능.. 어마어마하네요..
                          덕분에 신문사 광고 싹 없앴습니다;;;;; 대단대단;; 도대체 어느정도의 수준에 올라야 이런걸 만들 수 있을까요 ㅎㄷㄷ
                        • 전전기기기
                          문서를계속삭제하지않고 활용하나요?
                        • penguin98
                          재미있게 봤습니다.
                          제가 여쭈어 보고 싶은게 있는데...
                          동영상 캡쳐 프로그램은 어떤걸 쓰시나요?
                        • 14번째
                          3.18.
                        • 윤미선
                          아톰에서 list-sytle:none 부분에서
                          맥에서는 ctrl+space bar 가 어떤 기능인지 궁금합니다. command+space bar 는 안 먹네요. ㅠㅠ
                        • egoing
                          그냥 넘어가셔도 됩니다~
                          style.css가 css라는 언어라는 것을 브라우져에게 알려주는 코드입니다~
                          대화보기
                          • 고은정
                            질문있습니다.
                            실습2 내용 중
                            <link rel="stylesheet" type="text/css" href="http://localhost/style.css">

                            rel/ type이 정확하게 어떤의미를 갖고있는지
                            이해가안되네요 ㅠ
                          • 문보겸
                            css파일을 불러왔는데 적용이 안되네요 무슨 문제일까요?
                          • 백한승
                            감사합니다.
                          • Jaeeui Kwon
                            20170310
                          • 이승우
                            20170305 마지막하나만 들으면된다.
                          • 감사합니다!
                          • 윈도우로 했을때 <style> 복사하고 붙여넣어도 안 보여서 한참을 고민하다가 아랫 댓글보고 크롬으로 켜서 보니 말씀하신대로 이미 돼있네요;; 무슨 차이죠?
                          • 글로리아
                            stylebot
                          • 질문이요..
                            html 파일에다가 <style> ~ </style> 을 사용해서, header 부분에 무언가를 적용하면 적용이 되는데,
                            css 파일로 나누어서 css파일 내에서 header 부분에 무언가를 적용하면 적용이 안됩니다.
                            header 부분을 제외하고는 다 적용이 되는데 무슨 문제일까요?
                          • 미싱프로그램
                            <style>G {font-size: 200px red}</style>
                            G {오늘도 대박 콘텐츠 잘 소비했습니다...}
                          • 2017/02/20
                          • 브릿지
                            윈도우 사용하고있는데 스윙브라우져에서 css header 와 nav 테그가 안먹네요.. 익스프로러에서는 잘 됩니다!
                          • 포롱
                            강의 감사합니다~~^^
                            정주행 하고 있어요!
                          • egoing
                            내용이 필요없는 몇몇 태그는 닫지 않습니다. 헷갈리시면 모조건 닫으셔도 됩니다~
                            대화보기
                            • 椎名賢人
                              제가 사정상 눈으로만 공부해서 그러는데...link랑meta는 안닫아도 되나요? 반대로 닫으면 안되는건가요??
                            • 멍한게이머
                              style.css가 적용이 안돼서 크롬 개발자도구로 소스 뭐뭐오는지 살펴봤더니 css는 공백으로 오네요ㅠ
                              <link rel="stylesheet" type="text/css" href="http://localhost:8080/style.css">
                              뭔가 잘못된게 있나요??
                              저 맥쓰고 있고요 css파일도 ht독에 잘 넣어뒀습니다
                            • 170210
                              감사합니다.
                            • ckyuseon
                              알기 쉽게 설명해 주셔서 잘 들었습니다. 감사합니다.
                            • 프라
                              여기까지 완료했습니다! 제 자신이 뿌듯하네용 ㅎㅎ
                              이제다시 다음강의로 고고!
                            • 강경호
                              감사합니다
                              170206
                            • 방금해보니까 되네요 ㅎㅎ
                              감사합니다!!
                              대화보기
                              • egoing
                                물론이죠~ 해보셔요 ^^
                                대화보기
                                • html 파일 하나에 css 파일 두 개를 링크할 수도 있나요?
                                  각 파트 별로 링크가능한지 궁금합니다.
                                • 첨지
                                  힘들었는데 통과!

                                  coding 이외에도 개발자의 사고방식에 대해 이해할 수 있어 정말 좋습니다*.*
                                버전 관리
                                egoing
                                현재 버전
                                선택 버전
                                graphittie 자세히 보기