웹 애플리케이션 만들기

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. Jinyong Park
    정말 힘들게(?) 했습니다 보고 빵터졌네요 ㅋㅋㅋㅋ
  2. Seo Yun Seok Tudoistube
    크롬 확장 프로그램 Stylebot 을 써봐야 겠습니다.
    이고잉님 CSS 최신강좌도 들어야 겠습니다^_____^
    https://opentutorials.org......418
  3. 허스키
    완주했습니다
  4. 송재욱
    완주 완료 !!!
  5. 쿠쿠다스
    고잉님 열씨미 듣고있긴합니다
    일단 빠르게 한번 이해하면서 듣고
    그 다음부터 세세히 외어가며 다시 들으려고 생각중입니다.

    제가 홈페이지를 만들고싶어서 공부를하는데
    어떻게 진행하면 좋은지 조언이 듣고싶어요!!
    열씨미 한다면 대략 어느정도 걸릴까요..?
    일을하면서 하고있어서 수강생처럼 공부는 힘들듯합니다.'ㅁ';;
  6. John Lee
    혹시 맥에서 하고 계시진 않나요?
    맥이라면 localhost에다가 :8080을 꼭 붙여야 합니다
    저는 이것 때문에 안됐었어요 ㅎㅎ
    대화보기
    • 소월
      style.css 파일을 만든 후 header 부분에 border 와 color 값이 적용되지 않아 이것저것 해 본 결과 혹 저랑 비슷한 분이 있으시다면 한 번 시도해보세요 ^^;
      1. 우선 header 부분에 border 가 적용되지 않는다면, css 파일 젤 상단에 <style> 태그가 있는지 있다면 삭제를 하고 리로드 하시면 border 가 생성됩니다.
      2. header 값에 color를 적용하고 싶다면, header 하위 태그인 h1을 지정하여 color 값을 넣으면 컬러가 들어가네요 혹시 링크가 걸려있다면 h1 a 라고 지정하신 후 컬러 값을 넣어보세요..
      저도 초보라 ㅠㅠ
    • mama
      HTML과 CSS에 대해 이제 무엇인지 알게되었어요^^
      WEB에 대해 정말 아무것도 모르는 상태에서 시작하였는데, 이틀만에 많은 것을 알게되었습니다.
      더 좋은 강의들도 많겠지만 제가 지금까지 들어본 강의 중에서 최고라고 생각이 듭니다^^
      이제 웹개발자에게 제 의사를 전달할수 있을것 같네요~
      본업 때문에 언제까지 공부할 수 있을지 모르겠지만 시간이 허락하는 한 찾아와서 공부하겠습니다.
      다시 한번 감사하고 오프라인 교육시간에 꼭 찾아뵙고 인사드리겠습니다.
      건강하고 늘 행복하시길 진심으로 기원하며 물러갑니다~
    • KangGoM
      우선 훌륭한 강의를 만들어주신 이고잉님께 진심으로 감사드립니다!

      질문이 있는데요, Htdocs에 있는 CSS 파일 안의 코드를 수정하였고, CSS파일을 지우기까지 해보았는데 해당 페이지에 들어가면 아직 스타일들이 적용되어있습니다.

      css 파일을 지웠음에도 스타일들이 계속 적용되어있는 건 어떤 이유에서인가요?
      또한 <link rel="stylesheet" type="text/css" href="http://localhost/style.css"> 라인까지 지우고 새로고침을 해보면 1분 또는 2분뒤 페이지의 스타일이 없어지는 것을 보았는데, 원래 리로딩하는데 시간이 좀 걸리는걸까요~?
    • 슈퍼디벨로퍼
      완료!
    • 정인학
      교육 외적으로도 확장프로그램까지 설명해주셔서 감사합니다.
    • 큰그림
      스타일봇, 개인적으로 감사합니다. 아이들 키우는 입장에서, 큰 도움되겠어요^^
    • 김용호
      저도 방금 그 문제가 있었는데, "style.css" 파일을 다시 살펴보시길 바랍니다.

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

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

          <link rel="stylesheet" href="localhost:80/example/ex.css">
          대화보기
          • 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 파일을 열고 확인합니다.
            대화보기
            • 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
                            현재 버전
                            선택 버전
                            graphittie 자세히 보기