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. 준Fe
    20201129
  2. 듀리
    2020.11.19
  3. 이태경
    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
      완료하였습니다
    • 와..이제 CSS가 무엇인지 알겠네요..감사합니다.
    • 난지단지
      완료!
    • andrew070124
      와..감사하비낟
    • banaba
      안그래도 이전 강의 들으면서, index 페이지에서 새로 추가한 style 들을 다른 페이지에 추가하면서 수정하느라 깝깝-했었는데! 이렇게 바로 해결책이 있다니 너무 신기해요! 역시 컴퓨터 언어의 세계란 무궁무진하군요...!
    • 10.08.20
    • 장정민
      즐코즐코
    • Jay1025
      2020.08.03. 완료
    • 조아라
      2020.08.02
    • 룰루링
      스타일 태그를 하나의 파일로 만들어 .css파일을 스타일 태그 위치에 link태그로 붙여넣기 7.29
    • 라피네
      css로 하나로 뭉치기
    • 혼원
      후,,좋았다
    • So Eun Choi
      2017년 생활코딩이 처음 생겼을 때 가입해 놓고 이제서야 CSS 강의까지 들었네요. 명료한 설명 늘 감사합니다!
    • 김성곤
      20200711
    • 우왕왕달려
      20.07.10 완료
    • 이뿐이
      완료
    • 장대영
      쏘머치 러뷰
    • 뽀짝이
      완료
    • dongmi95
      20.07.07완료
    • 오씅
      20200706
    • seungsang
      2020-07-06
    • jaehyunlee
      2020-06-27 완료
    • 2020/06/25 완료
    • 코딩지망생
      그런데 무슨 키를 눌렀는지 firefox인데 자꾸 Space를 누르거나 Enter을 누르거나 한/영을 누르지 않으면 파란색 글씨가 되요 어떡하죠
    • PlayerSEAN
      6/22 클리어!
    • simhae
      6/19 완료 캐싱이라는 단어와 link stylesheet href를 통해서 중복을 뺄수있었다.
    • 김광현
      6/18완료
    • 김혜린
      6월 16일 완료했습니다!
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기