생활코딩

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. Seohee Kim
    완료!
  2. cosmic08
    와~~~ 좀오래걸려도 혼자 해보니까 더 뿌듯하네요
  3. 1.html 에서 밑줄을 삭제하고,
    2.html 에서 css 코드를 긁어와서 그렇습니다.
    대화보기
    • lygon
      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
                  공감!
                • 시간속으로
                  완료
                • 이시권
                  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"> 엄청난 효율성이군요!!!
                  • 털맨
                    영어로 콘텐츠 제작해 보실 생각은 없으신가요? 수업이 너무 좋아서 타국인들도 공유했으면 좋을것 같아서요!!
                  • 정승호
                    중복의 제거! 코딩할 때 늘 고려해야 할 점인 것같네요!
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기