CSS

link와 import

똑같은 CSS를 적용해야 하는 웹페이지가 1000개가 있을 때 CSS의 내용이 바뀌었다면 어떻게 해야할까요? 아마 천개의 웹페이지를 모두 수정해야 할 것입니다. 이것은 CSS의 수정을 소극적으로 만들고 그것은 곧 아름다움을 억압하는 암담한 장애물이 될 것입니다. 여기서는 이런 문제를 근본적으로 해결할 수 있는 방법인 link 태그와 @import에 대해서 알아봅니다. 

외부로 파일을 빼는 방법은 크게 두가지입니다. 

1. <link rel="stylesheet" href="style.css">

2. <style>@import url("style.css")</style>

예제

link_1.html

<!doctype html>
<html>
<head>
<!--    <link rel="stylesheet" href="style.css">-->
    <style>
        @import url("style.css")
    </style>
</head>
<body>
    <h1>page2</h1>
</body>
</html>

style.css

h1{
    color:red;
}

 

댓글

댓글 본문
작성자
비밀번호
  1. php가 첫취업?
    완료
  2. 광뀨
    감사합니다 ㅎㅎ
    대화보기
    • 광뀨
      완료
    • sprignstar
      저두 또 봐떠온
    • jgatsby
      엄청 비꼬는 시선을 갖고 계시네요.
      공부에 있어서 가만히 듣기만 하는것 보다
      글로써나 말로써나 한번 정리하거나 쓰는게 훨씬 효율적입니다.
      따로 공책이나 메모장을 켜서 하는것보다
      바로 밑에 마련되있는 댓글을 활용하는게 또한 더 효율적이지 않을까요?
      눈살 찌푸리기에 앞서, 왜그럴까 한번 생각해보세요.
      대화보기
      • 폭스킴
        href = hypertext reference 의 약자
        rel = relation 의 약자
        입니다.
        제가 몰라서 한 번 검색해서 남겨봅니다.
        저처럼 모르시는 분이 있을 거 같네요. ^^
      • 임지호
        link, import : 중복의 제거를 위해 css파일을 외부로 빼는 기능
        - 중복이 일어나면 : 유지보수가 어렵고 / 코드이해도가 낮아지고 / 사용자와 개발자의 비용이 증가하는등의문제
        - 방법 : <link> 태그 혹은 <style> 태그 안에 @import로 css파일 삽입
      • 윤제제
        이고잉님이 전에 올리신 경고문? 같은 게 있는데 거기에 댓글로 기록하시지 마시고 공동참여를 이용해달라고 하신 적이 있어요. 왜냐면 댓글들이 전부 이고잉님 메일로 보내지거든요...ㄷ
        대화보기
        • W.Machine
          남이 뭘 어떻게 하건 님이 무슨 상관임??ㅋㅋ

          여기가 님 개인공간도 아니고 이 공간을 누가 어떻게 쓰건 이고잉님께서 쓰게 허락하신거면

          어떤 용도로 쓰건 자기 자유 아님?

          그걸 보고 뭐가 이렇네 저렇네 하는것도 웃기다고 생각하지 않음?

          왜 자기 편한대로 쓰는 사람들을 싸잡아서 비꼬시나요?? ㅋㅋ 무슨 권리로 ㅋㅋ

          자기 일이나 잘하세요 ㅋㅋㅋ
          대화보기
          • 스크류바
            왜 이렇게 꼬이셨어요? 스크류바세요? 다음에 봤을때 내가 언제 공부했는지, 공부한 내용인지, 확인하는 용도도 되고 의지를 다 잡는 행동이라고 볼수도 있쬬
            대화보기
            • 비단뱀성애자
              근데. 막 시작했다. 완료했다 그런거 날짜서서 남기는게 뭐임? 나 공부했다. 자 봐라! 이런 거임??ㅋㅋㅋ
            • 2016.09.18 완료!
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기