생활코딩

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. 엠제이
    10182022
  2. 보통사람 박코딩
    할수있다
  3. 아아뜨아
    221010
  4. 서우
    221006
  5. solfany
    202210.03 조금씩 어려워지고 있어요 ㅠ_ㅠ 화이팅
  6. 코딩왕초보
    2022.09.27
  7. 코딩드림
    22.09.24
  8. 모카
    2022.09.10
  9. 당당
    2022.09.09
  10. 코딩다람쥐
    2022.09.04 수강완료
  11. 컴맹
    바쁘실텐데 질문 하나드려도 될까요

    초보라서 반응형으로 화면이 작아질 때 이전 수업에서 삽입 해놓은 이미지를
    기준점 max-width 800일때는 마진 0으로 800이상일때는 원하는 마진 값을 넣는 코드를 넣어보고 싶은데
    style-#grid 종속된 어떤 식으로 코드를 넣어봐야 할지.. 모르겠습니다ㅜ
  12. 제이드
    흐아악 다 똑같이 적었는데 이미지랑 리스트가 쬐끔씩 옮겨다녀서 신경쓰여 죽겠네요^.ㅠ 재밌습니다~~!
  13. 히야
    2022년 8월 22일 수강 완료했습니다. 감사드립니다!
  14. MelonMusk
    08/20
  15. 뿔고래
    중복을 없애라!
  16. 참새튀김
    22.08.17
  17. 22.08.11
  18. 헤밍웨이
    220810 css 파일을 활용한 편의성
  19. 여름이
    22.8.9.
  20. phoenix0428
    2022-08-05
  21. robert
    2022-07-29
    <link rel="stylesheet" type="text/css" href="style.css">
  22. 코드만다
    22.07.26
  23. toonfac
    220703 오후 4시 47분 완료
  24. 22.06.29
  25. 나룽
    저는 했는데 다시 옛날 버전으로 돌아가길래
    <link href="style.css" rel="stylesheet"> 이렇게 href랑 rel 자리를 바꾸니까 제대로 되더라구요
    혹시 저랑 같은 증상이셧던분은 바꿔보세요
  26. 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 완료
        • ywbyeol
          22.2.16
        • 드림보이
          2022.02.13. WEB2 - CSS - CSS 코드의 재사용 파트 수강완료
        • 유도영
          stylesheet로 링크를 걸었을 때 a에 대한 text decoration: none , body에 대한 margin: 0; 이 적용되지 않는 이유를 찾느라 헤맸는데(스타일 정의에 대한 순서를 바꾸니까 적용이 되긴 하더라고요) 알고보니 제가 css 파일에 <style> 태그를 걸어두었어서 그걸 지우니까 기존 코드로도 작동하네요. ㅋㅋ ㅠㅠ 민망하지만 비슷한 분이 계시면 참고하십사 남겨둡니다..
        • 미래에 후회안할 자신있어?
          2022-02-08 완료
        • 꿈꾸는고양이
          2022.02.07 완료
        • 20220124
        • 요Q르트
          2022/01/18 완료
        • 달수
          20220110
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기