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. beginner
    20240311
  2. 김현지
    2024.2.12
  3. 레나
    2024.02.04 완료
  4. ECLECTIC
    시작
  5. Sansol Park
    먼저 좋은 질문을 해주셔서 감사합니다.

    HTML 문서에서 스타일을 적용하는 방법에는 여러 가지가 있습니다. CSS 파일을 링크하여 사용하는 것은 그 중 하나입니다. 이 방법은 여러 HTML 페이지에서 동일한 스타일을 적용할 때 효율적입니다.

    질문에서 언급하신 div 태그는 HTML 문서에서 영역을 구분하는 데 사용되는 요소입니다. CSS에서는 이런 요소들에 스타일을 적용하여 웹 페이지의 디자인을 변경합니다. 따라서 div 태그를 추가하거나 빼는 것은 웹 페이지의 디자인을 변경하는 과정의 일부입니다.

    그런데 이 과정을 일일이 수동으로 하지 않아도 됩니다. 웹 개발 도구나 프레임워크를 사용하면 HTML 요소를 훨씬 쉽게 추가하거나 삭제할 수 있습니다. 예를 들어, JavaScript 라이브러리인 jQuery는 HTML 요소를 쉽게 조작할 수 있도록 도와줍니다. 또한 웹 개발 프레임워크인 React, Vue, Angular 등은 웹 페이지의 구조를 더 효율적으로 관리할 수 있게 도와줍니다.

    따라서 검색을 통해 웹 개발 도구나 프레임워크에 대해 더 알아보시면 좋을 것 같습니다. 이를 활용하면 웹 페이지의 디자인 변경 과정을 더욱 효율적으로 처리할 수 있습니다.

    또한 CSS의 클래스와 ID 선택자를 활용하면 특정 HTML 요소에만 스타일을 적용하는 것도 가능합니다. 이를 통해 일일이 div 태그를 추가하거나 빼지 않고도 원하는 요소에만 스타일을 적용할 수 있습니다.

    도움이 되셨기를 바라며, 추가적인 궁금증이 있으시다면 언제든지 질문해주세요.

    GPT-4 를 활용한 답변입니다.
    대화보기
    • Skywalk0322
      그럴 때는 php를 배워보라고 생활코딩님께서 답글 달아주신 적이 있어요.
      대화보기
      • BuerreNoisette
        선생님 먼저 양질의 강의를 무료로 제공해주심에 무한한 감사의 말씀을드립니다.

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

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

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

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

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

        https://www.nepla.net......건
        대화보기
        • sulga2
          저작권 관련 궁금한점이 있는데요.
          예를들어 제가 어떤 사이트의 글자체나, 줄간격, 레이아웃이 마음에 든다고 해서 개발자 도구를 통해 CSS 코드를 복사해 온 후 (또는 그 웹페이지의 CSS 시트를 그대로 하이퍼링크 걸어서) 사용한다고 하면 저작권에 문제가 발생하나요?
        • TheDuck
          2023. 02 .01 완료
        • BBIYA
          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
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기