생활코딩

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. Min Sang Shin
    완료
  2. 돼지천재
    감사합니다.
  3. waitingjesus@snu.ac.kr
    css 파일을 따로 만들 때 원래 제거했었던 밑줄이 다시 생기는 이유가 무엇인가요?
  4. 박원희
    답글 감사합니다!
    그런데 제가 '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
            공감!
          • 시간속으로
            완료
          • 이시권
            css강의도 어느덧 마무리 되어 가는군요~!! 항상 감사의 마음을 가집니다.
          • aimerthis(이성민)
            감사합니다...
          • 감사합니다!
          • 송진영
            뭔가 많이 배웠다기 보다는 마인드와 어떤 방법론을 배운 수업이네요! 감사합니다 ㅎ
          • 김라식
            직업을 바꿔야 한대요 ㅋㅋ
          • 시티젠
            강의 잘듣고 있습니다. 저도 MAC OS에서 atom 에디터로 코딩을 하는데 저도 style.css 파일을 생성해서 그곳에 style태그를 작성해 넣어서 저장하면 atom에디터 에서
            linter-csslint:: Error while running CSSLint!
            env: node: No such file or directory
            이런 오류를 띄우는데 왜그러는지 알수 있을까요??
          • wdb10004@gmail.com
            감사합니다...ㅎㅎ
          • 소금돌
            재사용성에 대한 설명 잘 들었습니다.
            CSS 파일로 중복의 제거...
          • jachie
            너무 재밌습니다 감사합니다 이고잉님!! 3일 동안 DATABASEn 다 듣고,WEBn html,css, homeserver,dns 다 듣는데 너무 재밌어서 php,javascript도 빨리 듣고 싶네요 ...!!!! 감사합니다. 요즘 코딩의 재미를 느껴가고 있습니다
          • egoing
            아래에 크롬 개발자 도구의 네트워크 기능을 이용해서 왜 안되는지 찾아보셔요~

            https://opentutorials.org......868
            대화보기
            • 토이스토리
              link로 왜 연결이 안될까요... ㅠㅠ
              style.css파일을 만들어서 body~}까지 입력한다음에
              2.html에서 반복된 부분 지우고, style도 지우고
              <link rel="stylesheet" href="style.css">을 넣었는데 사이트에서 적용이 안되네요,, ㅠㅠ 왜그런걸까요,,,하
            • 스페이스몽키
              와 효율성 미쳤다.
            • 이하빛
              css 파일을 따로 저장한다(중복을 막기위해)
              -> 그런데 css파일은 따로 컴퓨터가 다운받받아야하는 부담이 있다?
              -> 캐싱?

              제가 캐싱에 대해 이해는 잘 못했어요ㅠ 필요할때마다 css 파일을 꺼내쓰는 방법인가요? 이번 강의에서 보여주신게 캐싱인가요?
              캐싱 어떻게 하는 건지 보고싶어요!
            • Dreaming_Joyy
              와우!!! 중복의 제거!! 엄청난데요!!! link연결되어있구나!! 하나로 묶어서...
              <link rel="stylesheet" href="style.css"> 엄청난 효율성이군요!!!
            • 털맨
              영어로 콘텐츠 제작해 보실 생각은 없으신가요? 수업이 너무 좋아서 타국인들도 공유했으면 좋을것 같아서요!!
            • 정승호
              중복의 제거! 코딩할 때 늘 고려해야 할 점인 것같네요!
            • 제준혁
              file:///로 열어서 볼 때는 적용시킨 css가 제대로 적용되어서 표시되었는데,
              Github에 업로드해서 열어보면 전혀 css가 적용이 되지를 않네요.. 왜그런 걸까요;3;
            • Freeplay Sims
              이런 기능이 있는줄 몰라서 이제껏 웹 페이지 하나 만들 때 마다 style 태그를 복붙 해왔는데
              오늘 학습을 통해 폭발적 효과를 몸소 체험하게 되었군요. 감사합니다.
            • jayxwoo
              강의 잘 들었습니다. 감사합니다.
            • 위버
              진짜 효율적! 쉽게 설명해주셔서 감사해요~ ^^
            • 토리
              동일 디자인코드를 사용할때 그것을 적용할 웹페이지에 연동시켜서 사용하는거면 엄청 편리하겠네요
              그런데 그렇게 적용해야 하는 웹페이지가 몇백개 정도 되면 이것도 하나하나 접근해서 연결시켜줘야하는건가요?
            • 제로스
              <link rel="stylesheet" href="CSS/style.css>
            • Mingi Son
              180210 감사합니다!
            • idanam
              페이지마다 디자인이 다르다면, 중복되는 것은 같이 사용하고, 특별한 디자인은 class를 여러개로 정의해서 사용합니다.
              옛날에는 navigation, body, footer 등의 스타일별로 css를 따로 만들기도 했는데,
              근래에는 보통 style.css라고 정의된 하나의 파일에 모두 넣어 사용합니다.
              복잡한 사이트는 스타일 정의만도 몇백줄이 훌쩍 넘지만 사용자나 개발자들의 환경이 많이 좋아진 이유입니다.
              대화보기
              • Park Sh
                궁금한 점이 생겼는데요 만일 각각의 페이지 마다 컨텐츠 내용이 다르고 디자인이 조금씩 다르다면 일일히 스타일 시트 페이지를 만들어야 하나요?
              • Meflow
                기존에 주위에서 CSS는 html 내부 <head> 에 <style> 태그넣는거는 추천하지 않는다는 걸 들었었는데, 여기선 이렇게 하네라고 의아해하며 강의영상을 보고 공부했는데, 오늘 드디어 그에 대한 답이 나왔네요^^
                이제 드디어 CSS 파일을 별도 관리하는 부분을 제대로 알았습니다. 너무 유용한 강의였습니다. 감사합니다!
              • 도기맘
                코딩의 효율성~~
              • Ryan.L
                *중복의 제거 !! 효율적으로 !!
              • seokhee
                재밌어요!
              • BY Chin
                감사합니다
              • PassionOfStudy
                18-01-14 1일차 - 9번째 강의

                수강완료!


                항상 강조하시는 재사용성의 중요성에 대해서 다시 한번 돌이킬 수 있는 강의였습니다. ^_^
                그 외에 style.css라는 파일을 별도로 관리하는 것이 여러가지 측면에서 이점이 있다는 것을
                알게되었습니다. 실제로는 style.css파일을 요청할 때 마다 받는 것이아니라 캐싱기능으로
                임시적으로 저장해놓는 다는 사실을 알게되었습니다. ^_^
              • goosen
                많이 배우고가요 감사합니다^^
              • 좋은 내용이었습니다 ^^
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기