생활코딩

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. 질문이요..
    html 파일에다가 <style> ~ </style> 을 사용해서, header 부분에 무언가를 적용하면 적용이 되는데,
    css 파일로 나누어서 css파일 내에서 header 부분에 무언가를 적용하면 적용이 안됩니다.
    header 부분을 제외하고는 다 적용이 되는데 무슨 문제일까요?
  2. 미싱프로그램
    <style>G {font-size: 200px red}</style>
    G {오늘도 대박 콘텐츠 잘 소비했습니다...}
  3. Funny
    2017/02/20
  4. 브릿지
    윈도우 사용하고있는데 스윙브라우져에서 css header 와 nav 테그가 안먹네요.. 익스프로러에서는 잘 됩니다!
  5. 포롱
    강의 감사합니다~~^^
    정주행 하고 있어요!
  6. egoing
    내용이 필요없는 몇몇 태그는 닫지 않습니다. 헷갈리시면 모조건 닫으셔도 됩니다~
    대화보기
    • 椎名賢人
      제가 사정상 눈으로만 공부해서 그러는데...link랑meta는 안닫아도 되나요? 반대로 닫으면 안되는건가요??
    • 멍한게이머
      style.css가 적용이 안돼서 크롬 개발자도구로 소스 뭐뭐오는지 살펴봤더니 css는 공백으로 오네요ㅠ
      <link rel="stylesheet" type="text/css" href="http://localhost:8080/style.css">
      뭔가 잘못된게 있나요??
      저 맥쓰고 있고요 css파일도 ht독에 잘 넣어뒀습니다
    • InSoo
      170210
      감사합니다.
    • ckyuseon
      알기 쉽게 설명해 주셔서 잘 들었습니다. 감사합니다.
    • 프라
      여기까지 완료했습니다! 제 자신이 뿌듯하네용 ㅎㅎ
      이제다시 다음강의로 고고!
    • 강경호
      감사합니다
      170206
    • 방금해보니까 되네요 ㅎㅎ
      감사합니다!!
      대화보기
      • egoing
        물론이죠~ 해보셔요 ^^
        대화보기
        • html 파일 하나에 css 파일 두 개를 링크할 수도 있나요?
          각 파트 별로 링크가능한지 궁금합니다.
        • 첨지
          힘들었는데 통과!

          coding 이외에도 개발자의 사고방식에 대해 이해할 수 있어 정말 좋습니다*.*
        • 공학이 뭔가요
          감사합니다
        • Lucas
          백성우님은 아니지만, 제가 생각하기에는 구지 삭제하시지 않으셔도 됩니다.
          하지만 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
                  • 완료
                  • JintGram
                    크롬 종료 후 다시 켜보시면 됩니다.
                    대화보기
                    • 엄상혁
                      스타일봇 대박~!!!!!!!!!

                      좋은 강의 감사합니다^^
                    • 2016.12.01 완료
                      항상 감사히 생각하며 듣고 있습니다.
                      명쾌한 설명 덕분에 이해가 너무 잘 됩니다.
                    • harris
                      2016.12.01 11.30 완료
                    • 덜렁이
                      코드를 정확히 입력하고 저장했는 데도 안된다면 참고하세요
                      https://www.opentutorials.org......366
                      메인동영상화면 아래쪽에 설명을 보세요
                      대화보기
                      • SeungWoo Baek
                        style.css 최상단과 하단에 <style></style> 태그가 들어가 있다면, 삭제하고 해보시면 됩니다^^
                        대화보기
                        • dororing
                          2016 11 24
                        • 박정한
                          완료
                        • Bogwang Jung
                          11.6 완료
                        • Sanguk An
                          11.06.23.06분 완료
                        • 시드
                          스타일봇 안되시는분들!

                          저도안됐는데 크롬 끄고 다시 하니까 되네요^^~
                        • kwonhaemori@naver.com
                          스타일봇 재밌네요ㅋㅋㅋ
                        버전 관리
                        egoing
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기