생활코딩

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. 장돌
    21.11.30
  2. 민택기
    21.11.29 완료
    <head>
    <link ~~~~~> CSS파일로 저장한 style을 가져오는 기능
    </head>
  3. 고형주
    link rel href
  4. survive
    21.11.21
  5. 아니그게아니고
    21.11.18 재밌습니다!
  6. 검정고무신
    감사합니다.^^
  7. 다스비다냐
    2021.10.20
  8. 나무빠따
    감사합니다!
  9. 최성현
    211010
  10. 야옹아왈해봐
    10.2
  11. 야옹냐옹
    21.09.28 두번은 더 봐야될거 같아요 ~_~
  12. 김관호
    2021.09.23.
  13. 한헌이
    꺅 넘죠아
  14. 오수정
    2021.09.14 am11:21
  15. 킹두
    썼던글이 날아갔네요 ㅠㅠ
    아래 링크 참조해보세요!
    https://kyung-a.tistory.com/18
    대화보기
    • 이나크로
      20210821
    • supernova
      영상 감사히 잘봤습니다! 그런데 한가지 궁금점이 있어 이곳에 올린 후 해결 방법 찾아보겠습니다.
      style sheet를 따로 만들어서 이 링크를 넣는 방법으로 하는 것은 정말 좋지만,
      이 css에 해당하는 선택자를 HTML 본문에 넣는일은 수작업으로 해야하는 일인가요?
    • 호놀룰루
      감사합니다
    • inwhan
      2021.08.05
    • 서울 2020년 가을
      2021.8.4
    • 커넥티드 허트
      2021.08.01 완료
    • 조유빈
      완료
    • 아자가자
      210721 성공
    • 아자가자
      210722 성공~
    • 너클볼러
      감사합니다.
    • 완료
    • OrzlHB
      완료
    • 정용헌
      와우 잘봤습니다~
    • 윤동욱
      20210706
    • 박사장
      21.06.30 시청 완료
    • 황철갑
      21.6.27
    • 호찬
      2021.06.23.(수) 진행중
    • B=loom
      21.06.21
    • drinkdrink
      잘 봤습니다~ 효율의 결정체...중복의제거 진짜 너무 신기해요
    • 김휘철
      잘 봤습니다~
    • 최세미
      2021 05 24
    • 김새암
      2021.05.18
    • GelandeWagen
      210518 ok
    • super1Nova
      210516
    • RedMaple
      2021.05.14
    • 가보자
      2021.05.13
    • 초딩 개발자
      2021/05/08
    • Jeong Il Haan
      20210430
    • 스문
      <link rel="stylesheet" href="style.css"> 이용하여 중복 제거
    • 별거
      2021.04.22 파일의 중복을 제거했다.

      style.css 등과 같이 css 확장명이 있는 파일의 사용법을 알았다.
    • 역사단 보존서고지원병
      2021.04.12 완료
    • nptncloud
      4/4완료
    • 김도현
      완료
    • seonhong Kim
      2021.03.26 완료
    • 요모
      2021-03-25
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기