생활코딩

Coding Everybody

코스 전체목록

닫기

CSS 코드의 재사용

강의 

 

 

소스코드

변경사항

2.html

<!doctype html>
<html>
<head>
  <title>WEB - CSS</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <div id="grid">
    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <div id="article">
        <h2>CSS</h2>
        <p>
          Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
        </p>
      </div>
  </div>
  </body>
  </html>

style.css

body{
  margin:0;
}
a {
  color:black;
}
h1 {
  font-size:45px;
  text-align: center;
  border-bottom:1px solid gray;
  margin:0;
  padding:20px;
}
ol{
  border-right:1px solid gray;
  width:100px;
  margin:0;
  padding:20px;
}
#grid{
  display: grid;
  grid-template-columns: 150px 1fr;
}
#grid ol{
  padding-left:33px;
}
#grid #article{
  padding-left:25px;
}
@media(max-width:800px){
  #grid{
    display: block;
  }
  ol{
    border-right:none;
  }
  h1 {
    border-bottom:none;
  }
}

 

댓글

댓글 본문
작성자
비밀번호
  1. Hyeon-Jun Ha
    finished!
  2. 허공
    190504 감사합니다.
  3. 코초
    스타일 태그는 css파일로 중복을 막을 수 있는데 만약 속성으로 정의된 css 가 중복된다면 어떤 방법으로 중복을 막을 수 있을까요?
  4. html은 의미론적인 전달을 전담하는 게 좋다, 라는 게 html5로 갈수록 더더욱 명확해지고 있는 추세여서 디자인 적인 건 왠만하면 css에 주는 게 권장됩니다. div를 쓰시던지 span 태그를 쓰신 뒤 아이디를 부여하셔서 특정하시는 게 좋아보입니다. 이러한 역할 분담은 이고잉님이 강의에서도 강조하고 계신 바라고 이해하고 있습니다.
    대화보기
    • 최승윤
      완료!
    • pfulmil
      공통적인 것은 style.css에서 갖다 사용하고, 아닌 것만 별도로 html파일에 정의하면 안될까요?
      대화보기
      • pfulmil
        띄어쓰기는 모르겠는데 tab은 되요.
        대화보기
        • cooipop
          완료요~~~^^
        • 재밌다
          링크를 줬더니 그리드가 사라지는 것은 무슨 이유일까요ㅠㅜ 다른 페이지도 아니고 예제 연습하던 메인 페이지였는데 말이죠...ㅠㅜㅠㅜㅠㅜㅜ
        • 끝가지간다
          완료! 4월 1일 전역 13일 전
        • 주워니
          완료!!
        • supernet
          감사합니다.
        • ZANYABI
          CSS 코드의 재사용

          지금까지 우리는 박스모델과 그리드를 통해 CSS 페이지를 보다 직관성있게 만들었습니다. 1.HTML 3.JavaScript 페이지 역시 같은 형태로 만드려면 CSS 페이지의 <style> 내의 코드들을 복사해주면 됩니다.

          만일 적용해야하는 페이지가 수천개라면 어떨까요? 수천번 직접 복사하는건 비효율적이고 이를 간단하게 하기위해 다음과 같이 <link> 태그를 이용합니다.

          1. style.css 라는 파일을 새로 만들고, <style> 태그 내의 내용들을 전부 복사해 넣습니다. (태그 자체는 복사x)
          2. html 페이지 내의 <style> 태그를 이제 지워버리고, <link> 태그를 이용해 <link rel="stylesheet" href="style.css">를 대신 삽입합니다.

          이 과정을 통해코 드의 양이 줄어 훨씬 직관적이 되며, 웹페이지를 수정해야 할때도 Style.css 파일만 수정하면 되기때문에 효율성이 폭발적으로 늘어납니다.

          이렇게 코딩에서 중요한 중복의 제거를 통해 훨씬 효율적이고 수정이 파격적으로 쉬운 웹페이지를 만들수있습니다. CSS 수업 초기에 언급했던 '정보로써의 html' 의 가치또한 퇴색되지 않습니다.

          캐시(Cache)
          한번 페이지를 방문해서 Style.css 파일을 다운받았다면, 다음부터 방문할때 웹브라우저는 컴퓨터 내에 저장된 Style.css 파일을 불러와서 빠르게 훨씬 페이지를 읽고 네트워크 트래픽 또한 다시 사용하지 않습니다.
        • 김교령
          잘읽고 가요 핵심적인걸 잘 짚어주셨네요.
        • Soyeon Yoon
          그럼 혹시 여러 페이지에서 똑같은 대량의 html태그가 중복될 경우 그것도 .css처럼 별도의 파일로 빼서 링크로 불러올 수 있나요?
        • 완료!
        • 미니
          완료
        • Seohee Kim
          완료!
        • cosmic08
          와~~~ 좀오래걸려도 혼자 해보니까 더 뿌듯하네요
        • 1.html 에서 밑줄을 삭제하고,
          2.html 에서 css 코드를 긁어와서 그렇습니다.
          대화보기
          • 2019-02-16 완료
          • 주하쿠
            감사합니다
          • 호두
            고맙습니다.
          • boriku
            완료:)
          • Juyeon Heo
            완료!
          • 지미츄
            완료 감사합니당
          • 최종민
            190125 완료!
          • 와 css 파일을 따로 만들어 링크로 연결하니 효율성이 확 높아지네요.
            정말 배우면 배울수록 신기한 세계 ㅎㅎㅎㅎ 오늘도 잘 배웠습니다!
          • 삼색냥
            완료
          • Aimhee
            완료!
          • HongKyu Lim
            감사합니다:)
          • 김정훈
            완료.
          • ddnd11
            네 삭제하셨습니다
            대화보기
            • 쥬시후레쉬
              html 파일에서 <style></style>태그를 삭제 하셨나요?
              대화보기
              • Min Sang Shin
                완료
              • 돼지천재
                감사합니다.
              • waitingjesus@snu.ac.kr
                css 파일을 따로 만들 때 원래 제거했었던 밑줄이 다시 생기는 이유가 무엇인가요?
              • 박원희
                답글 감사합니다!
                그런데 제가 'DB에서 불러오는 방법'으로 어떻게 중복을 제거하는지 짐작이 안가네요.
                혹시 검색 키워드 알려주실 수 있으실까요?
                대화보기
                • 특작군
                  DB에서 불러오는 방법이 있겠네요!
                  대화보기
                  • 키보드치는남자
                    잘들었습니다
                  • 박원희
                    List(li 태그)도 중복 제거할 줄 알았는데 안하네요..
                    저 메뉴 List 아이템이 100개라면 아이템이 하나 더 추가 시 100개 html을 일일이 수정해야하는데..
                    혹시 CSS 외에 javaScript나 node.js 같은걸로 중복을 제거할 수 있는 방법이 있나요?
                    너무 궁금하네요.. 혹시 아시는 분 검색 키워드라도 알려주시면 감사하겠습니다(_ _ )
                  • asdqwer123
                    감사합니다.
                  • icdoit
                    감사합니다.
                  • 완료
                  • 한라봉
                    완료
                  • Jennie
                    realnine님 : "시작점 마우스 클릭>shift키>끝점 마우스 클릭>tab키" 이 순서로 하시면 동시에 띄어쓰기 할 수 있어요 !
                    대화보기
                    • realnine
                      마우스로 코드 전체를 드래그해서 전체를 동시에 띄어쓰기 하는거 어떻게 하나요??
                    • darkghost
                      혹시 CSS파일을 따로 만들어 보셨나요? 오류를 보니 파일이 없다고 하는 것 같아서요...
                      대화보기
                      • Hstory84
                        강의 내용 너무 감사합니다!

                        강의를 마치고 한가지 질문사항이 있어서 댓글을 적게 되었습니다.

                        강의 내용은 모두 따라해서 파일로 해봤을때는 style.css가 잘 적용이 되는데

                        깃허브에 올렸을때는 어떻게 해야 style.css를 적용할수 있는지가 궁금합니다!
                      • Lee Sangjun
                        공감!
                      버전 관리
                      egoing
                      현재 버전
                      선택 버전
                      graphittie 자세히 보기