웹 애플리케이션 만들기

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. MongJA
    ol태그 대신에 ul태그를 안 쓰고 list-stlye none을 쓰는 이유는 무엇인가요??
  2. Jeff Oh
    기본기를 잘 잡아주셔서 감사합니다. ㅎㅎ
  3. 구본혁
    수강완료했습니다.
  4. 인문학도
    인문학도 여기까지만 하렵니다
  5. peter
    잘 보고있습니다.
    감사합니다~^^
  6. 서당개3년
    중복의 제거: 번거러움 없고, 용량을 아낄 수 있다.--> 비용절감
  7. Jeoung Myung Hyun
    감사합니다~ 잘 보고 있습니다 ^^
  8. 마블리
    감사합니다.
  9. 루나
    정말정말정말 진심으로 늘 감사드려요!
  10. 송성태
    정말 감사합니다!
  11. 리브
    정말 좋은 내용 감사합니다 ㅎㅎ style bot 써먹을데가 많을 것 같아요!
  12. 파이쏭
    9월28일 시작

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

    css 신기하네요
  15. 강수경
    09/26
  16. 정종훈
    9/26 완료
  17. 김주희
    목소리가 너무 좋아요ㅠㅠ여고생 맘을 훔쳐가셨네요,,,,,,♡
    친구도 목소리 듣고 강의 듣고 싶다고 하네요..
  18. Jay Choi
    강사님!
    항상 감사 드립니다.
  19. 이동원
    너무 재밌어요!!
    수강완료!! 17.9.25
  20. Dongwon Shin
    수강 완료했습니다.
  21. hyun
    9/25완료
  22. 여누
    완료
  23. 다시시작
    완료
  24. "귀한게 많아 지는 것은 뭐랄까요 제가 봤을 때 생산자가 되었을 때 얻어지는 효용 중의 하나라고 생각합니다." 어록 만들어 드려야 할 것 같습니다. 화이팅!
  25. 시리우스
    2017.09.20 완료
  26. 9/19 수강완료!!
  27. 왓떠뻐꺼
    완료했습니다. 감사합니다.
  28. kimsogic
    감사합니다
  29. 정성엽
    크롬에서 css 사용해서 header 배경색과 폰트를 변경해 봤는데요..
    크롬에서는 바뀐부분이 계속 적용이 되는데
    익스플로러 에서는 안바뀌는 이유는
    파일자체가 수정되지 않고,
    크롬에서 페이지를 열때마다
    파일 > 스타일봇> 출력
    의 과정 때문인가요?
  30. 주주맘마
    완료
  31. 공중강습오리
    완료!!
  32. 차우차우
    완료! 학습과는 상관없지만 이고잉 쌤 목소리가 너무 잘생기셨네요. 라디오 듣는 줄 *^^*
  33. 유상원
    2017-09-08 완료!
  34. 완료!
  35. 효근
    2017.09.06 완료
  36. 효효
    완료!
  37. SanFrancisco
    CSS는 확실히 어렵지만 그래도 제가 지금까지 배운 것만으로도 웬만한 웹사이트를 만들 수 있다는 데에 보람을 느낍니다.
  38. 김유민
    done!!
  39. pash15xk
    완료
  40. 동관K
    CSS파일을 생성 후 <style> 태그는 빼주셔야합니다.
    그래야 border-bottom과 border-right 부분이 제대로 나오게 됩니다.
  41. 청풍
    실습1 강의에서 대제목부분의 border-bottom과 리스트부분의 border-right 부분이 이어지지 않고 공백이 생기시는분들은 스타일태그안에 nav ol {margin-top:0;} 추가해주세요. 맞는 수정방법인지는 모르겠지만
    저는 그렇게 하니까 이어졌습니다.
  42. 호로로로로롤
    감사합니다
  43. haein_lee
    css 적용한게 크롬에서 아무리해도 안뜨길래 익스에서 하니까 뜨네요..!
    무슨 차이인걸까요 T_T....
  44. CHOLES
    감사합니다 !
  45. Cooldaddy
    기분 좋네요 진도 뺐습니다
  46. 김태윤
    완료했어요
  47. 문보겸
    복붙해봐도 안되는데 제가복붙을 잘못한건지요?
  48. 박예지
    완료!
    7월 19일
  49. GoldPenguin
    완료했습니다.
  50. GoldPenguin
    완료했습니다.
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기