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. 조유빈
    완료
  2. 아자가자
    210721 성공
  3. 아자가자
    210722 성공~
  4. 너클볼러
    감사합니다.
  5. Chae
    완료
  6. OrzlHB
    완료
  7. 정용헌
    와우 잘봤습니다~
  8. 윤동욱
    20210706
  9. 박사장
    21.06.30 시청 완료
  10. 황철갑
    21.6.27
  11. 호찬
    2021.06.23.(수) 진행중
  12. B=loom
    21.06.21
  13. drinkdrink
    잘 봤습니다~ 효율의 결정체...중복의제거 진짜 너무 신기해요
  14. 김휘철
    잘 봤습니다~
  15. 최세미
    2021 05 24
  16. 김새암
    2021.05.18
  17. GelandeWagen
    210518 ok
  18. super1Nova
    210516
  19. RedMaple
    2021.05.14
  20. 가보자
    2021.05.13
  21. 초딩 개발자
    2021/05/08
  22. Jeong Il Haan
    20210430
  23. 스문
    <link rel="stylesheet" href="style.css"> 이용하여 중복 제거
  24. 별거
    2021.04.22 파일의 중복을 제거했다.

    style.css 등과 같이 css 확장명이 있는 파일의 사용법을 알았다.
  25. 역사단 보존서고지원병
    2021.04.12 완료
  26. nptncloud
    4/4완료
  27. 김도현
    완료
  28. seonhong Kim
    2021.03.26 완료
  29. 요모
    2021-03-25
  30. 효몬드
    완료
  31. 악어
    깔끔하고 핵심적인 강의 감사합니다~~
  32. 단디
    완료
  33. 저는 제 생각대로 조금 다르게만들다보니 문제가 발생했습니다.
    style.css파일에서 공통부분을 그대로 가져다 붙여놓았는데도 h1태그의 설정들이 적용되지 않는 것 입니다.
    더 신기하고 이해안되는것은 style.css파일에서 h1태그의 위치를 맨아래로 구조 조정하니 적용이 됩니다....?
  34. 흑메리카노
    각 페이지마다 a의 내용이 달라서 그런걸까요?
    대화보기
    • 흑메리카노
      개발자 페이지에서 waterfall 은 뭔가요?
    • rose_lex
      완료
    • cxxerry
      완료요!
    • 21.02.22 완료
    • cookie
      완료
    • gkalsdlf
      완료!! 감사합니다
    • 고래상어
      21-02-13 완료
    • 서태
      210204
    • 완료오
    • 시장조사
      완료
    • Dongwon Park
      30.01.21 Fertig
    • 완료
    • 완료
    • 임찬혁
      완료
    • 선린 이원석
      완료
    • 추장
      완료
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기