생활코딩

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. 전전기기기
    문서를계속삭제하지않고 활용하나요?
  2. penguin98
    재미있게 봤습니다.
    제가 여쭈어 보고 싶은게 있는데...
    동영상 캡쳐 프로그램은 어떤걸 쓰시나요?
  3. 14번째
    3.18.
  4. 윤미선
    아톰에서 list-sytle:none 부분에서
    맥에서는 ctrl+space bar 가 어떤 기능인지 궁금합니다. command+space bar 는 안 먹네요. ㅠㅠ
  5. 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
    • kang
      질문이요..
      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 이외에도 개발자의 사고방식에 대해 이해할 수 있어 정말 좋습니다*.*
          • 공학이 뭔가요
            감사합니다
          • 백성우님은 아니지만, 제가 생각하기에는 구지 삭제하시지 않으셔도 됩니다.
            하지만 style.css파일을 들고와서 디자인을 적용시키는 것보다 <style></style>을 html소스 안에서 적용시키는 것이 우선순위가 높아, style.css파일의 디자인이 제대로 작동하지 않을 수 있습니다.
            따라서 공통적인 부분은 style.css파일에 만들어 놓으셔서 적용시키고, 페이지마다 개별적으로 특수한 디자인이 필요하시다고 생각하시면 <style></style>을 적용시키면 된다고 생각합니다.
            대화보기
            • 이서영
              5분 40초 자막 styleboy -> stylebot
            • 유체역학
              백성우님 저도 같은 문제로 고민하고 있었는데 감사합니다!!!!

              근데 궁금한게 <style></style> 코드를 왜 삭제해야 할까요???
              대화보기
              • 소끼
                ***질문)

                맥에서
                nav ol{
                list-style 코드힌트를 보려면

                Ctrl + Space Bar 대신 무엇을 눌러야 하나요?

                ** list-style: 여기까지 입력하면 자동으로 영문으로 된 코드힌트 리스트가 나오긴합니다만 리스트가 사라졌을 경우/유니코드로 된 코드힌트를 원하는 경우 띄울수있는 키가 있는지 궁금합니다.

                좋은 강의 감사히 잘 보고 있습니다^^
              • 도엘
                열심히 정주행하고 있어요! 정말 많은 것들 배워갑니다ㅎㅎ
              • 임정훈
                잘 봤습니다!
              • 20170118 완료
              • 하루에 한 강의 라도 열심히 20170116 완료.
              • 울랄라부라더스
                잘 들었습니다.
              • 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 잘봤습니다
                    • 너무너무 감사합니다
                      정말 재밌어요!
                      명성만 들었지 처음 들어봤는데 정말 좋아요
                      앞으로도 잘부탁드립니다.
                      열심히 공부할게요!^^
                    • 쌘진
                      2016-12-30 완료

                      강의 감사합니다
                    • 수호아빠
                      161228
                    • 에헤라디야
                      161221
                    버전 관리
                    egoing
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기