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. BuerreNoisette
    선생님 먼저 양질의 강의를 무료로 제공해주심에 무한한 감사의 말씀을드립니다.

    이번 강의에서 Style.css파일을 링크하여 무자비한 숫자의 웹페이지를 일괄적으로 효율적으로 관리할 수 있음을 알았는데요.

    Style태그 내부의 내용은 위와같이 일괄적으로 수정한다지만, 이 태그가 작동하기 위해서는 body에 div와 같은 태그들이 필요한 경우가 있지 않습니까?

    이때 div태그를 추가하고 빼고는 제가 일일히 다 해야하는 과정일까요?

    수업의 흐름에 따라 고민해보면 분명 일일히 하지는 않을 것 같은데 무어라 검색해봐야 할지 도통 감이 잡히지 않아서 여쭤봅니다!
  2. 므갱이
    2023.11.12 완료
  3. KunWoo
    231031
  4. 정연세
    231001완
  5. 30늦은나이아니라고해줘
    2023-08-24 완료 기존에 내 맘대로 만들었던 페이지는 자꾸 뭔가 충돌해서 선이 없어지고 하길래.... 소스코드 html만든거 따와서 다시 만들었네요! 그래도 적용은 됬었는데 보니 감회가 새롭습니다. 항상 재밌게 배우고 있습니다 감사합니다~
  6. 코딩두
    23.07.08 완료
  7. 어흥
    23.06.18
  8. 코코
    23.05.26
  9. 23.05.16
  10. nightsunny
    23.05.05 check.
  11. heartsound2
    감동의 소름~~~
  12. 재미따
  13. ashkite12
    23.03.09
  14. 코딩척척석사
    2023.03.08
  15. 23.03.01
  16. otcace
    23.02.23
  17. 열공강아지
    2/7
  18. Sansol Park
    저작권은 법적인 문제라서 딱 정해서 말씀드리기가 어려운데,
    도의적으로도 그대로 CSS 코드를 복사해서 사용하는 것은 문제가 있겠죠?
    참고하는 것과 복사해서 그대로 사용하는 것은 다르니까요.

    참고할만한 링크 첨부합니다.

    https://www.nepla.net......건
    대화보기
    • sulga2
      저작권 관련 궁금한점이 있는데요.
      예를들어 제가 어떤 사이트의 글자체나, 줄간격, 레이아웃이 마음에 든다고 해서 개발자 도구를 통해 CSS 코드를 복사해 온 후 (또는 그 웹페이지의 CSS 시트를 그대로 하이퍼링크 걸어서) 사용한다고 하면 저작권에 문제가 발생하나요?
    • TheDuck
      2023. 02 .01 완료
    • 2023.01.19
    • 슬슬맨
      h1 :not(.selector)는
      h1의 자식들 중 selector 클래스가 아닌 것을 의미합니다.
      그리고 h1태그 안의 hello와 hi는 자식이 아닙니다.
      h1 :not(.selector)가 가리키는 것은 hello도, hi도 해당되지 않는 것 같습니다.
      대화보기
      • 메론소다맛젤리
        제가 따로 복습 겸 연습하면서 .css 파일을 따로 만들어 tag 별로 css 속성을 부여했습니다. 하지만 특정 html 코드 영역에서는 해당 tag css를 부여하고 싶지 않아 인터넷에서 :not(.selector)를 이용하는 방법을 찾아냈고
        style.css
        h1 :not(.selector) {
        color : red;
        }

        main.html
        <h1>hello</h1>
        <div class="selector">
        <h1>hi</h1>
        </div>

        이런 code를 입력했다면 hello만 빨간 글씨를 부여 받는다고 생각했는데 실제 코드를 작성해보면 hello, hi 둘다 css 속성을 부여 받지 못하는 것처럼 검은 글씨로 나타납니다. 다른 방법이 있는데 잘못된 것을 사용한 것인지, 아니면 :not()을 잘못 사용한 것인지 알고 싶습니다.
      • 2022.12.21
      • 엠제이
        10182022
      • 보통사람 박코딩
        할수있다
      • 아아뜨아
        221010
      • 서우
        221006
      • solfany
        202210.03 조금씩 어려워지고 있어요 ㅠ_ㅠ 화이팅
      • 코딩왕초보
        2022.09.27
      • 코딩드림
        22.09.24
      • 모카
        2022.09.10
      • 당당
        2022.09.09
      • 코딩다람쥐
        2022.09.04 수강완료
      • 컴맹
        바쁘실텐데 질문 하나드려도 될까요

        초보라서 반응형으로 화면이 작아질 때 이전 수업에서 삽입 해놓은 이미지를
        기준점 max-width 800일때는 마진 0으로 800이상일때는 원하는 마진 값을 넣는 코드를 넣어보고 싶은데
        style-#grid 종속된 어떤 식으로 코드를 넣어봐야 할지.. 모르겠습니다ㅜ
      • 제이드
        흐아악 다 똑같이 적었는데 이미지랑 리스트가 쬐끔씩 옮겨다녀서 신경쓰여 죽겠네요^.ㅠ 재밌습니다~~!
      • 히야
        2022년 8월 22일 수강 완료했습니다. 감사드립니다!
      • MelonMusk
        08/20
      • 뿔고래
        중복을 없애라!
      • 참새튀김
        22.08.17
      • gn0es
        22.08.11
      • 헤밍웨이
        220810 css 파일을 활용한 편의성
      • 여름이
        22.8.9.
      • phoenix0428
        2022-08-05
      • robert
        2022-07-29
        <link rel="stylesheet" type="text/css" href="style.css">
      • 코드만다
        22.07.26
      • toonfac
        220703 오후 4시 47분 완료
      • 22.06.29
      • 나룽
        저는 했는데 다시 옛날 버전으로 돌아가길래
        <link href="style.css" rel="stylesheet"> 이렇게 href랑 rel 자리를 바꾸니까 제대로 되더라구요
        혹시 저랑 같은 증상이셧던분은 바꿔보세요
      • TTimotti
        대답이 아니라서 죄송합니다

        저도 이 부분이 궁금합니다
        이미 만들어져 있는 여러개의 HTML에 CSS를 링크를 연결하는 방법은 없는건가요?
        물론 그런 식으로 HTML을 많이 작성하지는 않겠지만, 그저 궁금합니다.
        검색을 해봐도 관련 내용이 없네요.
        대화보기
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기