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. BY Chin
    감사합니다
  2. PassionOfStudy
    18-01-14 1일차 - 9번째 강의

    수강완료!


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

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