생활코딩

Coding Everybody

코스 전체목록

닫기

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. 열공강아지
    2/7
  2. 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
      • 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을 많이 작성하지는 않겠지만, 그저 궁금합니다.
        검색을 해봐도 관련 내용이 없네요.
        대화보기
        • 김재원
          5/16
        • Albert86
          안녕하세요 좋은 강의 잘 들었습니다 감사하게 생각합니다.
          한가지 질문드리고 싶습니다.
          각 html페이지에 중복되는 스크립트를 편이와 효율을 위해 css에 적용하여 공통된 링크를 주는 것은 잘 이해가 됩니다.
          다만, 조금 더 고민해보면 html의 페이지가 1억개라면(물론 그정도의 페이지는 없다고 생각합니다.) 링크 태그를 일일이 다는 것도 우리를 불행하게 한다고 생각됩니다.
          혹시 이런 방법에서 대체될 수 있는 방법도 있을까요?
        • 고배배
          220417
        • 너무 편하구
        • 강신찬
          제 생각으로는 index에만 필요한 css라면 style 태그로 하는것이 좋고(이럴 경우 누가 열어봐도 아 이건 여기서만 적용시키려고 그랬구나 하는 약속)

          2개이상이라도 같은 css를 사용할 수 있다면 링크로 거는 것이 좋을듯합니다. (2개 이상이라면 설령 처음은 2개일지라도 나중에 1억개가 될 수 있기 때문)

          그냥 현재의 코린이인 제 생각입니다 ㅎㅎ
          대화보기
          • 주파랑
            stlye.css파일을 따로 만들어서 저장하면 작업 효율성이 증가하는 측면에서 너무 좋다.

            그리고 궁금한 건 현재 html.1~html.3까지는 같은 형식을 사용해서 style.css 파일을 만들어서 영상에서 배운 대로 적용했는데,
            index.html은 다른 레이아웃을 사용하고 있어서 얘도 전용 css 파일을 만들어서 링크를 거는 게 좋을지, 아니면 어차피 얘 하나에만 적용되면 되니까 굳이 만들 필요 없이 <style> 태그를 남겨놓은 채로 둬도 되는지가 궁금하다.
          • 중복된 코드가 있을 때 대신 파일을 삽입하면 더 간편하고 경제적인 효과도 볼 수 있다.
          • 너구리기린
            2022.03.28
          • DH니스
            2022.03.17
          • ^^
          • new 개발자
            220309 완료
          • 지구
            2022.03.08.
          • keepgoing
            22.03.04
            결국은 효율적으로 정보를 제공하기 위해 기술들이 사용되는 것이다. 폭발적 효과.
            <link rel = "stylesheet" href = "---.css">
            keepgoing
          • Yoonbin Kim
            헉 저도 그거 때문에 계속 파일별로 뭐가 다른지 보고 있었는데 댓글 덕분에 해결했네요 ㅎㅎ 감사합니다!
            대화보기
            • tfx5470h
              2022-02-20
            • 2022.02.18 완료
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기