웹 애플리케이션 만들기

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

Sound coding 

공부 시간을 단축시키고, 덜 고통스럽도록 뮤직 비디오로 지금까지 수업을 만들었습니다. 틈틈히 보셔요. 전체 목록 바로가기

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

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

 

댓글

댓글 본문
작성자
비밀번호
  1. Yong Choi
    #171213 수강완료 감사합니다! 이제 응용해봐야겠네요 ㅠㅠ 강의 너무 재밌게 보고 있습니다!
  2. 아래서 찾았어요
    혹, style.css로 빼시고 나서, header의 border-bottom 적용이 안되시는분들을 위해서 몇자 남깁니다.
    border-bottom빼곤 다 적용이 되는데 저거만 안되길래 뭘 잘못했나싶었는데..
    sytle.css파일에서는 <style></style> 빼주시면 됩니다~ㅠㅠ
    대화보기
    • 김현태
      로그랑 소스 코드 올려보십시요.저도 초보지만 한번 보고말씀드릴게요.
      대화보기
      • 장은지
        저도 같은 현상이..ㅜㅠ원인이 뭔가요?
        대화보기
        • 빛보다 밝은 빛
          1강 보고 nav 안에 float 속성 적용하였는데요.
          이상하게 적용이 안됩니다; 무엇때문일까요 ? ㅠㅠㅠㅠ
        • 김현태
          아. 이제 해결되었어요..ㅎㅎㅎㅎㅎ 이 기쁨과 보람!!!!
          대화보기
          • 김현태
            저는 여기서부터 막히네요, 이상하게 style.css로 묶은 다음에는 border-bottom 선이 나타나지 않습니다. 흠..계속 시도해 보는 중입니다.
          • 이근환
            2017-11-28 수강2일차

            수강완료입니다!

            정말 하나하나 뼈가되고 살이되는 좋은 강의입니다!!
            감사합니다!!^^
          • Migyeong Kang
            아 듣다가 빵터지네요 ㅋㅋㅋㅋㅋ 강의 넘 재밌어요
          • 박인호
            11-22
            수강완료.
          • 감사합니다. 진짜 많은 도움이 되고 있어요. 고생하셨어요!!
          • 11/20 수강 완료
          • 감사
            감사합니다.
          • 11-17 영상 올려주신 이고잉님 감사합니다.
          • 코딩팬
            재밍있어요
          • atnskynst
            11/16
          • 동물사랑
            다봤다이기야 기분 노무노무 딱딱좋다
          • 루안
            11-14 수강완료! 고생하셨습니다~
          • 서성진
            수강 완료!
          • Junyoung M. Kang
            2017.11.11 수강완료
          • 2017년 11월 11일 수강완료
          • 11/10
          • 부건혁
            article{
            float: left;
            padding: 20px
            }
            에서 float: left;를 하면 height: 600px;와 비슷한 효과를 가지게 되나요?
          • 황혁진
            2017/11/02 완료
          • 2017/11/2 완료!
          • MinJeong Lee
            ul을 쓰게 되면 이 태그또한 리스트 성격이라 동그란 점이 표시되어요. ul을 쓰시는 경우에는 이 ul에 대해 또하나의 list-style:none을 적용하셔야 텍스트 앞에 아무것도 없는 모양새가 나오는 것 같아요......라고 생각합니다.....ㅎㅎ
            대화보기
            • 난세영웅
              감사합니다.... 수업 잘 들었습니다....
            • 루씨구씨
              수강완료!
            • 소소대담
              하나씩 알아가는 재미가 있습니다. 감사합니다.
            • MongJA
              ol태그 대신에 ul태그를 안 쓰고 list-stlye none을 쓰는 이유는 무엇인가요??
            • Jeff Oh
              기본기를 잘 잡아주셔서 감사합니다. ㅎㅎ
            • 구본혁
              수강완료했습니다.
            • 인문학도
              인문학도 여기까지만 하렵니다
            • 잘 보고있습니다.
              감사합니다~^^
            • 서당개3년
              중복의 제거: 번거러움 없고, 용량을 아낄 수 있다.--> 비용절감
            • Jeoung Myung Hyun
              감사합니다~ 잘 보고 있습니다 ^^
            • 마블리
              감사합니다.
            • 루나
              정말정말정말 진심으로 늘 감사드려요!
            • 송성태
              정말 감사합니다!
            • 리브
              정말 좋은 내용 감사합니다 ㅎㅎ style bot 써먹을데가 많을 것 같아요!
            • 파이쏭
              9월28일 시작

              스타일봇이란게 있었네요
              좋은 정보 감사합니다!
            • 바키
              고생하셨어용~
            • 알파고
              9/27

              css 신기하네요
            • 강수경
              09/26
            • 정종훈
              9/26 완료
            • 김주희
              목소리가 너무 좋아요ㅠㅠ여고생 맘을 훔쳐가셨네요,,,,,,♡
              친구도 목소리 듣고 강의 듣고 싶다고 하네요..
            • Jay Choi
              강사님!
              항상 감사 드립니다.
            • 이동원
              너무 재밌어요!!
              수강완료!! 17.9.25
            • Dongwon Shin
              수강 완료했습니다.
            • 9/25완료
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기