웹 애플리케이션 만들기

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. nnbetter
    히힛 감사합니다~~ 수고 많으셨어용!!! :)
  2. Chanyang Kim
    우와.. 마지막 스타일봇 기능.. 어마어마하네요..
    덕분에 신문사 광고 싹 없앴습니다;;;;; 대단대단;; 도대체 어느정도의 수준에 올라야 이런걸 만들 수 있을까요 ㅎㄷㄷ
  3. 전전기기기
    문서를계속삭제하지않고 활용하나요?
  4. penguin98
    재미있게 봤습니다.
    제가 여쭈어 보고 싶은게 있는데...
    동영상 캡쳐 프로그램은 어떤걸 쓰시나요?
  5. 14번째
    3.18.
  6. 윤미선
    아톰에서 list-sytle:none 부분에서
    맥에서는 ctrl+space bar 가 어떤 기능인지 궁금합니다. command+space bar 는 안 먹네요. ㅠㅠ
  7. 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 이외에도 개발자의 사고방식에 대해 이해할 수 있어 정말 좋습니다*.*
          • 공학이 뭔가요
            감사합니다
          • 백성우님은 아니지만, 제가 생각하기에는 구지 삭제하시지 않으셔도 됩니다.
            하지만 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 완료

                      강의 감사합니다
                    버전 관리
                    egoing
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기