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. 오수정
    2021.09.14 am11:21
  2. 킹두
    썼던글이 날아갔네요 ㅠㅠ
    아래 링크 참조해보세요!
    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
    • 효몬드
      완료
    • 악어
      깔끔하고 핵심적인 강의 감사합니다~~
    • 단디
      완료
    • 저는 제 생각대로 조금 다르게만들다보니 문제가 발생했습니다.
      style.css파일에서 공통부분을 그대로 가져다 붙여놓았는데도 h1태그의 설정들이 적용되지 않는 것 입니다.
      더 신기하고 이해안되는것은 style.css파일에서 h1태그의 위치를 맨아래로 구조 조정하니 적용이 됩니다....?
    • 흑메리카노
      각 페이지마다 a의 내용이 달라서 그런걸까요?
      대화보기
      • 흑메리카노
        개발자 페이지에서 waterfall 은 뭔가요?
      • rose_lex
        완료
      • cxxerry
        완료요!
      • 21.02.22 완료
      • cookie
        완료
      • gkalsdlf
        완료!! 감사합니다
      • 고래상어
        21-02-13 완료
      • 서태
        210204
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기