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. Mongsil
    매번 매 페이지마다 코드 넣어주는거에 대해 좀 귀찮음이라는 목마름이 있었는데 이렇게 간편한 방법이 있따니 ㅠ_ㅠ 너무 좋네요 알아갈수록 매력있는 코딩의 세게입니다!!
  2. 둥치둥치아재
    강의를 들을 수록 극단적의 기준이 '1억'이 되어 갑니다.

    요새 서울 3극단적 가지고는 서울 어디 집 사기 힘드네요...

    적어도 5에서 6극단적 정도는 있어야 서울에 조그만 집이라도 살 수 있을 듯 합니다 휴
  3. lovejun
    완료
  4. MINTO
    따로 style.css 를 만들어서 link를 사용한다면 장점이
    1. 1억애의 코드를 사용하고 있을때 하나의 수정사항이 있을때 훨씬 효율적이고
    2. 캐쉬효과 때문에 저css파일을 우리는 컴퓨터 안에 자동으로 저장되어 있다가 다시 요청하면 저장된걸 사용하기
    때문에 속도를 높일수 있고 사업자들은 돈을 덜 쓸 수 있다.(네트워크를 덜 쓰기때문에)
    3. 가독성이 높아지고 유지 보수가 편리해진다. 그리고 누구든지 그 코드가 파일화되서 사용하기도 편리해진다.
  5. 바보
    최고십니다
  6. OneJae EE
    20.03.16 월 / 37세 비전공자 / 완료
  7. yoozahang
    잘봤습니다
  8. 0cddo
    감사합니다! 완료!
  9. 송우영
    완료!!
  10. Horang
    잘봤어요
  11. 짱아찌
    완료
  12. radio2016
    진짜 재밌어요! <link rel="stylesheet" href="style.css"> 는 말 그대로 함수 같은거네요!
  13. 완료
  14. 코딩하쟈
    완료!
  15. daniellee123456
    완.료 @_@
  16. eddylee123456
    완료
  17. 완료
  18. 규몽
    완료
  19. 감사합니다.완료
  20. 뉴빈
    다시 따라해볼 것!
  21. King of kings
    2020 02 10 완료
  22. 정말 감사합니다.!!
  23. 장폴
    완료
  24. Ram Lee
    감사합니다!
  25. thsths
    완료
  26. dofvmrhwk
    와! 완료!
  27. 스티븐잡숴
    완료
  28. 그런경우에는
    그런 경우에는
    <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
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기