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. daniellee123456
    완.료 @_@
  2. eddylee123456
    완료
  3. 완료
  4. 규몽
    완료
  5. Harry
    감사합니다.완료
  6. 뉴빈
    다시 따라해볼 것!
  7. King of kings
    2020 02 10 완료
  8. moon
    정말 감사합니다.!!
  9. 장폴
    완료
  10. Ram Lee
    감사합니다!
  11. thsths
    완료
  12. Yamto
  13. dofvmrhwk
    와! 완료!
  14. 스티븐잡숴
    완료
  15. 그런경우에는
    그런 경우에는
    <link href="StyleSheet.css" rel="stylesheet" /> 이 부분에서 href를 수정하면 됩니다.
    이를테면 StyleSheet.css가 있는 폴더에다가 test 라는 폴더를 만들어서 집어넣었다면

    href = test\StyleSheet.css 라고 바꿔주시면 적용 됩니다.

    이런 주소 관련된 문법은 다른 곳에사도 모두 적용될 수 있으니 알아두시면 좋을 것 같습니다.
    대화보기
    • 메메
      CSS코드를 재사용(중복제거)하기 위해서는 <head>에 <link rel="stylesheet" href="style.css">를 추가
      style.css에는 <style>코드를 제외한 순수한 CSS코드만 입력
    • 안녕하세요!! 질문이 있습니다.
      애초에 처음 만들 때 알았다면 이렇게 만들겠지만, 만약 style.css파일을 안 만들고 1억개를 만든 상태에서 수정하려면 어떻게 해야하나요? 1억개를 동시 조작하려면 1억개 웹페이지에다 <link rel="stylesheet" href="style.css"> 를 모두 입력해야 하는 건가요???
    • 하(ha)
      css파일 만들었는데 html파일이랑 같은 폴더안에 있어야 링크태그를 쓸 수 있군요...이것 때문에 한참 삽질했네요ㅠㅠ href 뒤에 오는 파일주소 맨 끝에 ?after를 붙이라는 소리도 있었는데 아니었고 css확장자가 없는 것도 아니었네요
    • 오오우우얍
      다음!
    • 서혜민
      완료
    • 윤장원
      2020.1.6
    • 민스티티아
      완료!
    • 샬롬
      완료
    • csrcomp21
      완료!!
    • Eileen
      2019.12.29
    • 김태완
      2019.12.21 완료
    • 딥허브
      2019.12.20
    • <link rel="stylesheet" href="style.css">

      각 시트마다 id는 반복적으로 다 적어줘야 하는 거겠죠?^_ㅠ
    • 홍주호
      20191211 완료
    • sonjme@naver.com
      여기서 <link rel="stylesheet" href="style.css"> 의 rel 은 뭘 의미하는 거에요? 저는 스타일 말고 목록(li) 을 가져오고 싶은데 어떻게 하는지 모르겠어요ㅠㅠㅠㅠㅠㅠㅠㅠ
    • 이상민
      11-28완료
    • 리진
      20191127 완료
    • 이승연
      20191126 완료
    • 이명준
      <link rel="stylesheet" href="style.css">
      Css파일을 통한 코드의 재사용ㅡ중복 제거
    • 굼벵이
      완료
    • 육포
      20191015
    • 20191010
      --------------
      한번 더 보기!
    • 흥성무
      20191006 00:42 흥성무 완료!
    • 잘 보고 갑니다 ㅎㅎ
    • 코딩만이 살길이다
      완료!
    • 성규니
      완료
    • 라미
      완료
    • 몽글몽글솜사탕
      감사합니다
    • 다에
      완료
    • 7273322@naver.com
      완료
    • 효진
      완료
    • 박창신
      완료
    • 완료
    • 정완료
      완료
    • 현우
      완료
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기