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. HWANG
    완료
  2. 한라봉
    완료
  3. Jennie
    realnine님 : "시작점 마우스 클릭>shift키>끝점 마우스 클릭>tab키" 이 순서로 하시면 동시에 띄어쓰기 할 수 있어요 !
    대화보기
    • realnine
      마우스로 코드 전체를 드래그해서 전체를 동시에 띄어쓰기 하는거 어떻게 하나요??
    • darkghost
      혹시 CSS파일을 따로 만들어 보셨나요? 오류를 보니 파일이 없다고 하는 것 같아서요...
      대화보기
      • Hstory84
        강의 내용 너무 감사합니다!

        강의를 마치고 한가지 질문사항이 있어서 댓글을 적게 되었습니다.

        강의 내용은 모두 따라해서 파일로 해봤을때는 style.css가 잘 적용이 되는데

        깃허브에 올렸을때는 어떻게 해야 style.css를 적용할수 있는지가 궁금합니다!
      • Lee Sangjun
        공감!
      • 시간속으로
        완료
      • 이시권
        css강의도 어느덧 마무리 되어 가는군요~!! 항상 감사의 마음을 가집니다.
      • aimerthis(이성민)
        감사합니다...
      • 감사합니다!
      • 송진영
        뭔가 많이 배웠다기 보다는 마인드와 어떤 방법론을 배운 수업이네요! 감사합니다 ㅎ
      • 김라식
        직업을 바꿔야 한대요 ㅋㅋ
      • 시티젠
        강의 잘듣고 있습니다. 저도 MAC OS에서 atom 에디터로 코딩을 하는데 저도 style.css 파일을 생성해서 그곳에 style태그를 작성해 넣어서 저장하면 atom에디터 에서
        linter-csslint:: Error while running CSSLint!
        env: node: No such file or directory
        이런 오류를 띄우는데 왜그러는지 알수 있을까요??
      • wdb10004@gmail.com
        감사합니다...ㅎㅎ
      • 소금돌
        재사용성에 대한 설명 잘 들었습니다.
        CSS 파일로 중복의 제거...
      • jachie
        너무 재밌습니다 감사합니다 이고잉님!! 3일 동안 DATABASEn 다 듣고,WEBn html,css, homeserver,dns 다 듣는데 너무 재밌어서 php,javascript도 빨리 듣고 싶네요 ...!!!! 감사합니다. 요즘 코딩의 재미를 느껴가고 있습니다
      • 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 자세히 보기