멋쟁이 사자처럼 at 한국교통대학교 7기

2019 KNUT X LIKE LION #7

코스 전체목록

닫기

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.04.12 완료
  2. nptncloud
    4/4완료
  3. 김도현
    완료
  4. seonhong Kim
    2021.03.26 완료
  5. 요모
    2021-03-25
  6. 효몬드
    완료
  7. 악어
    깔끔하고 핵심적인 강의 감사합니다~~
  8. 단디
    완료
  9. 저는 제 생각대로 조금 다르게만들다보니 문제가 발생했습니다.
    style.css파일에서 공통부분을 그대로 가져다 붙여놓았는데도 h1태그의 설정들이 적용되지 않는 것 입니다.
    더 신기하고 이해안되는것은 style.css파일에서 h1태그의 위치를 맨아래로 구조 조정하니 적용이 됩니다....?
  10. 흑메리카노
    각 페이지마다 a의 내용이 달라서 그런걸까요?
    대화보기
    • 흑메리카노
      개발자 페이지에서 waterfall 은 뭔가요?
    • rose_lex
      완료
    • cxxerry
      완료요!
    • 21.02.22 완료
    • cookie
      완료
    • gkalsdlf
      완료!! 감사합니다
    • 고래상어
      21-02-13 완료
    • 서태
      210204
    • 완료오
    • 시장조사
      완료
    • Dongwon Park
      30.01.21 Fertig
    • 완료
    • 완료
    • 임찬혁
      완료
    • 선린 이원석
      완료
    • 추장
      완료
    • 김세훈
      다른 코드의 경우 style.css를 만들어 저장했을 때 정상적으로 이전과 같이 출력이 되는데
      a 에 대해 덱스트 데코레이션을 none으로 지정해놓은 값은 적용이 되지 않습니다.
      각 페이지에 다시 스타일 값을 정해줄 경우 다시 동작하는데요.
      혹시 무슨 문제가 있는지 궁금합니다!
    • chimhyangmoo
      2021.01.12
    • 버석군
      좋은 강의 감사드립니다.
      아직 안 해봤지만 응용하면 홈페이지 최하단에 들어가곤 하는 "copyright 어쩌고" 하는 문구 같은 것도 파일 하나 만들어서 한번에 변환 가능할 수 있지 않을까 하는 생각이 드네요~
    • younghwani
      완료~
    • 걸어가는신사
      2021.01.09
    • T.Hwang
      완료~
    • 지현
      5일차 @media 미디어쿼리 활용법
    • jeisyoon
      감사합니다.
    • 이현수
      2021.01.07(목)
    • 얍얍얍
      df
    • 이동훈
      <link rel="stylesheet" href="style.css">
    • 2020.12.28 완료!
    • 서울사이버대학을다니고
      <!doctype html>
      <html>
      <head>
      <link rel="stylesheet" href="style.css">
      <title>WEB1 - CSS</title>
      <meta charset="utf8">

      </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>
    • 샴파뉴
      2020.12.26
    • 고니스타크
      5일차
      style태그를 xx.css로 만들고 link href로 가져온다
    • 모히또
      완료! 진짜, 효율성 엄청나네요
    • Sung San Kim
      2020.12.21 우와...
    • 생활둘기
      2020 12 18
    • 호놀률류
    • 스쳐간바람
      감사합니다
    • 조성호
      2020.12.11 완료
      소중한시간감사합니다.
    • 지두두
      20201208
      완료
    • 20201129
    • 듀리
      2020.11.19
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기