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. 곤비
    0220
  2. 덕자
    유지보수 편의성
  3. DreamBoy
    2023.09.24. CSS - 유지보수 - link와 import 파트 수강했습니다.
  4. AgainstartJH
    2022년 12월 01일 목요일 학습완료!
  5. INJE
    22/03/19
  6. 임앤강
    2022-01-28 수강 완료.
  7. 드림보이
    2021.11.19. link와 import 파트 수강완료
  8. vogueupp
    완료
  9. choi
    완료
  10. jeisyoon
    2021.06.24 Link & Import - OK
  11. 외부로 파일을 빼는 법
    1. <link rel="stylesheet" href="style.css"> -html태그로 하는법
    2. <style>@import url("style.css")</style> -css로 style태그에서 하는법
  12. 스마일가이
    2021.02.01 완료 감사합니다
  13. 따뜻한츄르
    210101
  14. 201225 크리스마스에 외롭게...강의듣고 있습니다..흑흑
  15. 박병진
    완료
  16. 콜라
    20201001완료
  17. 김성곤
    20200729 감사합니다!
  18. 한강
    link : html , import : css
    중복의 제. 오늘도 감사합니다.
    200616
  19. 지쇼핑
    공동된 디자인과 별도의 디자인이 공존해야할때는 import를 써야겠군요...
  20. 코딩
    완료
  21. Blanc
    2020.01.06
  22. evenbetter4@gmail.com
    오타도 이렇게 스윗하게 대처하시다니.. 이 강의 너무 따뜻했어요. ㅎㅎ
    몇 년 동안 도움 많이 받고 있습니다. 항상 감사드립니다.
  23. 다나가
    190807 - 수강완료
  24. lygon
    2019-03-12 완료
  25. 숨이
    완료햇습니당
  26. 김민영
    완료
  27. 스페이스몽키
    감사합니다~!
  28. 학습자
    link와 import에서
    페이지 이동시 ink나 import로 참조한 모든 정보가 다시 로드되는지 궁금합니다.
    만약 그렇다면 소스 유지보수에는 만점이겠으나, 자원을 낭비하는게 아닌가 싶어서요
    감사합니다
  29. 푸른하늘
    12일차 공부 감사합니다
  30. 무한감사
    감사합니다 ^^
    대화보기
    • 오빠는다르다
      감사합니다~!!!!!
    • Yohan Lee
      좋은 수업 감사합니다.^^
    • 세븐나이츠
      감사합니다
    • php가 첫취업?
      완료
    • 광뀨
      감사합니다 ㅎㅎ
      대화보기
      • 광뀨
        완료
      • sprignstar
        저두 또 봐떠온
      • jgatsby
        엄청 비꼬는 시선을 갖고 계시네요.
        공부에 있어서 가만히 듣기만 하는것 보다
        글로써나 말로써나 한번 정리하거나 쓰는게 훨씬 효율적입니다.
        따로 공책이나 메모장을 켜서 하는것보다
        바로 밑에 마련되있는 댓글을 활용하는게 또한 더 효율적이지 않을까요?
        눈살 찌푸리기에 앞서, 왜그럴까 한번 생각해보세요.
        대화보기
        • 폭스킴
          href = hypertext reference 의 약자
          rel = relation 의 약자
          입니다.
          제가 몰라서 한 번 검색해서 남겨봅니다.
          저처럼 모르시는 분이 있을 거 같네요. ^^
        • 임지호
          link, import : 중복의 제거를 위해 css파일을 외부로 빼는 기능
          - 중복이 일어나면 : 유지보수가 어렵고 / 코드이해도가 낮아지고 / 사용자와 개발자의 비용이 증가하는등의문제
          - 방법 : <link> 태그 혹은 <style> 태그 안에 @import로 css파일 삽입
        • 윤제제
          이고잉님이 전에 올리신 경고문? 같은 게 있는데 거기에 댓글로 기록하시지 마시고 공동참여를 이용해달라고 하신 적이 있어요. 왜냐면 댓글들이 전부 이고잉님 메일로 보내지거든요...ㄷ
          대화보기
          • W.Machine
            남이 뭘 어떻게 하건 님이 무슨 상관임??ㅋㅋ

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

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

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

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

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