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. 김라식
    직업을 바꿔야 한대요 ㅋㅋ
  2. 시티젠
    강의 잘듣고 있습니다. 저도 MAC OS에서 atom 에디터로 코딩을 하는데 저도 style.css 파일을 생성해서 그곳에 style태그를 작성해 넣어서 저장하면 atom에디터 에서
    linter-csslint:: Error while running CSSLint!
    env: node: No such file or directory
    이런 오류를 띄우는데 왜그러는지 알수 있을까요??
  3. wdb10004@gmail.com
    감사합니다...ㅎㅎ
  4. 소금돌
    재사용성에 대한 설명 잘 들었습니다.
    CSS 파일로 중복의 제거...
  5. jachie
    너무 재밌습니다 감사합니다 이고잉님!! 3일 동안 DATABASEn 다 듣고,WEBn html,css, homeserver,dns 다 듣는데 너무 재밌어서 php,javascript도 빨리 듣고 싶네요 ...!!!! 감사합니다. 요즘 코딩의 재미를 느껴가고 있습니다
  6. egoing
    아래에 크롬 개발자 도구의 네트워크 기능을 이용해서 왜 안되는지 찾아보셔요~

    https://opentutorials.org......868
    대화보기
    • 토이스토리
      link로 왜 연결이 안될까요... ㅠㅠ
      style.css파일을 만들어서 body~}까지 입력한다음에
      2.html에서 반복된 부분 지우고, style도 지우고
      <link rel="stylesheet" href="style.css">을 넣었는데 사이트에서 적용이 안되네요,, ㅠㅠ 왜그런걸까요,,,하
    • 스페이스몽키
      와 효율성 미쳤다.
    • 이하빛
      css 파일을 따로 저장한다(중복을 막기위해)
      -> 그런데 css파일은 따로 컴퓨터가 다운받받아야하는 부담이 있다?
      -> 캐싱?

      제가 캐싱에 대해 이해는 잘 못했어요ㅠ 필요할때마다 css 파일을 꺼내쓰는 방법인가요? 이번 강의에서 보여주신게 캐싱인가요?
      캐싱 어떻게 하는 건지 보고싶어요!
    • Dreaming_Joyy
      와우!!! 중복의 제거!! 엄청난데요!!! link연결되어있구나!! 하나로 묶어서...
      <link rel="stylesheet" href="style.css"> 엄청난 효율성이군요!!!
    • 털맨
      영어로 콘텐츠 제작해 보실 생각은 없으신가요? 수업이 너무 좋아서 타국인들도 공유했으면 좋을것 같아서요!!
    • 정승호
      중복의 제거! 코딩할 때 늘 고려해야 할 점인 것같네요!
    • 제준혁
      file:///로 열어서 볼 때는 적용시킨 css가 제대로 적용되어서 표시되었는데,
      Github에 업로드해서 열어보면 전혀 css가 적용이 되지를 않네요.. 왜그런 걸까요;3;
    • Freeplay Sims
      이런 기능이 있는줄 몰라서 이제껏 웹 페이지 하나 만들 때 마다 style 태그를 복붙 해왔는데
      오늘 학습을 통해 폭발적 효과를 몸소 체험하게 되었군요. 감사합니다.
    • jayxwoo
      강의 잘 들었습니다. 감사합니다.
    • 위버
      진짜 효율적! 쉽게 설명해주셔서 감사해요~ ^^
    • 토리
      동일 디자인코드를 사용할때 그것을 적용할 웹페이지에 연동시켜서 사용하는거면 엄청 편리하겠네요
      그런데 그렇게 적용해야 하는 웹페이지가 몇백개 정도 되면 이것도 하나하나 접근해서 연결시켜줘야하는건가요?
    • 제로스
      <link rel="stylesheet" href="CSS/style.css>
    • Mingi Son
      180210 감사합니다!
    • idanam
      페이지마다 디자인이 다르다면, 중복되는 것은 같이 사용하고, 특별한 디자인은 class를 여러개로 정의해서 사용합니다.
      옛날에는 navigation, body, footer 등의 스타일별로 css를 따로 만들기도 했는데,
      근래에는 보통 style.css라고 정의된 하나의 파일에 모두 넣어 사용합니다.
      복잡한 사이트는 스타일 정의만도 몇백줄이 훌쩍 넘지만 사용자나 개발자들의 환경이 많이 좋아진 이유입니다.
      대화보기
      • Park Sh
        궁금한 점이 생겼는데요 만일 각각의 페이지 마다 컨텐츠 내용이 다르고 디자인이 조금씩 다르다면 일일히 스타일 시트 페이지를 만들어야 하나요?
      • Meflow
        기존에 주위에서 CSS는 html 내부 <head> 에 <style> 태그넣는거는 추천하지 않는다는 걸 들었었는데, 여기선 이렇게 하네라고 의아해하며 강의영상을 보고 공부했는데, 오늘 드디어 그에 대한 답이 나왔네요^^
        이제 드디어 CSS 파일을 별도 관리하는 부분을 제대로 알았습니다. 너무 유용한 강의였습니다. 감사합니다!
      • 도기맘
        코딩의 효율성~~
      • Ryan.L
        *중복의 제거 !! 효율적으로 !!
      • seokhee
        재밌어요!
      • BY Chin
        감사합니다
      • PassionOfStudy
        18-01-14 1일차 - 9번째 강의

        수강완료!


        항상 강조하시는 재사용성의 중요성에 대해서 다시 한번 돌이킬 수 있는 강의였습니다. ^_^
        그 외에 style.css라는 파일을 별도로 관리하는 것이 여러가지 측면에서 이점이 있다는 것을
        알게되었습니다. 실제로는 style.css파일을 요청할 때 마다 받는 것이아니라 캐싱기능으로
        임시적으로 저장해놓는 다는 사실을 알게되었습니다. ^_^
      • goosen
        많이 배우고가요 감사합니다^^
      • 좋은 내용이었습니다 ^^
      • nowmary
        와 나도 이제 style.css 파일 만들수있다~!!!!
      • SanFrancisco
        나중에 서버 쪽의 백엔드 프로그래밍이랑 데이터베이스 배우시면 index.html 파일 하나로 모든 페이지를 표현할 수 있습니다.
        대화보기
        • Yuseong Park
          style태그 안에 있는 속성들을 css파일을 만들어서 넣으면,
          극단적인 상황에서 css파일 하나로 엄청나게 많은 다른 웹페이지에도
          css효과를 줄 수 있는 것을 배웠습니다!

          하지만, 의문점이 생기는 것은 <body>에 있는 id설정은
          한페이지 한페이지마다 직접 타이핑을 해야하나요?
        • 박신우
          중복의 제거!!! 링크 태그를 활용하여 css 파일을 별도로 분리할것
          캐싱 기술로 인하여 한번 css 파일을 html 파일로 다운로드 하면 css 파일의 내용이 수정되지 않는 이상 우리 컴퓨터에서 바로바로 로드하기 때문에 트래픽도 발생하지 않고 속도도 빠르다
        • Wallace Lee
          홈페이지가 살아나는 느낌이에요
        • GoldPenguin
          웹 애플리케이션 수업 중 CSS 내용을 다시 복습할 수 있는 강의였습니다!
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기