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. Noah
    완료
  2. mymie
    완료
  3. 임찬혁
    완료
  4. 선린 이원석
    완료
  5. 추장
    완료
  6. 김세훈
    다른 코드의 경우 style.css를 만들어 저장했을 때 정상적으로 이전과 같이 출력이 되는데
    a 에 대해 덱스트 데코레이션을 none으로 지정해놓은 값은 적용이 되지 않습니다.
    각 페이지에 다시 스타일 값을 정해줄 경우 다시 동작하는데요.
    혹시 무슨 문제가 있는지 궁금합니다!
  7. chimhyangmoo
    2021.01.12
  8. 버석군
    좋은 강의 감사드립니다.
    아직 안 해봤지만 응용하면 홈페이지 최하단에 들어가곤 하는 "copyright 어쩌고" 하는 문구 같은 것도 파일 하나 만들어서 한번에 변환 가능할 수 있지 않을까 하는 생각이 드네요~
  9. younghwani
    완료~
  10. 걸어가는신사
    2021.01.09
  11. T.Hwang
    완료~
  12. 지현
    5일차 @media 미디어쿼리 활용법
  13. jeisyoon
    감사합니다.
  14. 이현수
    2021.01.07(목)
  15. 얍얍얍
    df
  16. 이동훈
    <link rel="stylesheet" href="style.css">
  17. 2020.12.28 완료!
  18. 서울사이버대학을다니고
    <!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>
  19. 샴파뉴
    2020.12.26
  20. 고니스타크
    5일차
    style태그를 xx.css로 만들고 link href로 가져온다
  21. 모히또
    완료! 진짜, 효율성 엄청나네요
  22. Sung San Kim
    2020.12.21 우와...
  23. 생활둘기
    2020 12 18
  24. 호놀률류
  25. 스쳐간바람
    감사합니다
  26. 조성호
    2020.12.11 완료
    소중한시간감사합니다.
  27. 지두두
    20201208
    완료
  28. 20201129
  29. 듀리
    2020.11.19
  30. 이태경
    link 라고 치면 자동으로 입력해줍니다
    대화보기
    • 둘기
      20.11.08 완료
    • hKa2020
      <!doctype html>
      <html>
      <head>
      <title>WEB - CSS</title>
      <meta charset="utf-8">
      <link rel="stylesheet" href="style.css">
      </head>
      <body>
      이건 그냥 외워야 되겠죠? atom에서 html만 치면 자동으로 입력해주는데, <link rel="stylesheet" href="style.css">는 따로 입력해야 하네요.
    • 2020.11.02.MON.
    • 훼리
      2020/11/01 css code만 따로 빼서 <link> 사용
      검사->network를 누르면 현재 보고 있는 파일을 reload했을 때 내부적으로 어떤 파일을 웹서버에서 다운받는지를 보여줌
    • 현콜
      2020/10/21
    • Patrick
      좋은 강의 감사합니다!!
    • 바부대지
      2020.10.09 23:19
    • 허태민
      20.10.03
    • 문성석
      2020.10.2 완료!
    • 알파카파카
      2020/09/29
    • 여니여니
      200928 시청완료. 감사해요!
    • 2020.09.24 [09:41]
    • 김승현
      정보기술에 있어서 중복을 없애서 재사용, 유지보수, 가독성을 높이는 일이 아주 중요하다!
      <link= rel="" href="">
    • it'syoojong
      완료! 대체 왜인지 제가 작성한 코드로는 오류가 발생하고 소스코드를 복붙하면 정상 작동하네요ㅠㅠㅠㅠ
    • cgoing
      cgoing / 200914
    • wndals20
      20.09.14
    • 지은
      2020.09.14 완료
    • 말해뭐해
      유지보수의 편리성의 중요함.
    • 허우룩
      2020.09.02
    • chapter5447
      완료하였습니다
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기