WEB2 - CSS

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. 2020.09.24 [09:41]
  2. 김승현
    정보기술에 있어서 중복을 없애서 재사용, 유지보수, 가독성을 높이는 일이 아주 중요하다!
    <link= rel="" href="">
  3. it'syoojong
    완료! 대체 왜인지 제가 작성한 코드로는 오류가 발생하고 소스코드를 복붙하면 정상 작동하네요ㅠㅠㅠㅠ
  4. cgoing
    cgoing / 200914
  5. wndals20
    20.09.14
  6. 지은
    2020.09.14 완료
  7. 말해뭐해
    유지보수의 편리성의 중요함.
  8. 허우룩
    2020.09.02
  9. chapter5447
    완료하였습니다
  10. 와..이제 CSS가 무엇인지 알겠네요..감사합니다.
  11. 난지단지
    완료!
  12. andrew070124
    와..감사하비낟
  13. banaba
    안그래도 이전 강의 들으면서, index 페이지에서 새로 추가한 style 들을 다른 페이지에 추가하면서 수정하느라 깝깝-했었는데! 이렇게 바로 해결책이 있다니 너무 신기해요! 역시 컴퓨터 언어의 세계란 무궁무진하군요...!
  14. 10.08.20
  15. 장정민
    즐코즐코
  16. Jay1025
    2020.08.03. 완료
  17. 조아라
    2020.08.02
  18. 룰루링
    스타일 태그를 하나의 파일로 만들어 .css파일을 스타일 태그 위치에 link태그로 붙여넣기 7.29
  19. 라피네
    css로 하나로 뭉치기
  20. 혼원
    후,,좋았다
  21. So Eun Choi
    2017년 생활코딩이 처음 생겼을 때 가입해 놓고 이제서야 CSS 강의까지 들었네요. 명료한 설명 늘 감사합니다!
  22. 김성곤
    20200711
  23. 우왕왕달려
    20.07.10 완료
  24. 이뿐이
    완료
  25. 장대영
    쏘머치 러뷰
  26. 뽀짝이
    완료
  27. dongmi95
    20.07.07완료
  28. 오씅
    20200706
  29. seungsang
    2020-07-06
  30. jaehyunlee
    2020-06-27 완료
  31. 2020/06/25 완료
  32. 코딩지망생
    그런데 무슨 키를 눌렀는지 firefox인데 자꾸 Space를 누르거나 Enter을 누르거나 한/영을 누르지 않으면 파란색 글씨가 되요 어떡하죠
  33. PlayerSEAN
    6/22 클리어!
  34. simhae
    6/19 완료 캐싱이라는 단어와 link stylesheet href를 통해서 중복을 뺄수있었다.
  35. 김광현
    6/18완료
  36. 김혜린
    6월 16일 완료했습니다!
  37. hpyseun
    06/12/2020 완료
  38. psyless
    20200606
  39. HanLee
    감사합니다
  40. WinnieKim
    5/26
  41. HyeonHui Jeong
    5/24
  42. goodluck
    style.css !!
  43. 그래난쭈구리
    드디어 1억개란 숫자의 편린이라도 맛본 기분입니다.

    끔찍하군요!
  44. Yunnew Yun
    완료
  45. 수환잉
    저도 궁금...
    대화보기
    • 완료 200427
      나중에 한번 더 봐야 겠어요!
    • 완료
    • 코딩하는렌즈쟁이
      2020-04-16
      코드의 재사용(css별도로만들기)
      캐싱
    • 태현
      4/6
      감사합니다.
    • 혹등고래
      완료
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기