선생님을 위한 프로그래밍 수업

코스 전체목록

닫기

CSS의 사용

HTML에서 CSS 사용하기

  • inline 방식 (예제1)
    • 엘리먼트에 스타일을 직접 기술하는 방식
    • 셀렉트가 필요 없다.
    • CSS 선언이 분명해서 style tag 방식에 비해 엘리먼트에 영향을 주고 있는 CSS를 추적하기가 쉽다.
    • 코드가 많아지고, 의미와 디자인의 분리라는 CSS의 취지와 벗어난다.
       
  • style tag 방식 (예제2)
    • style 태그에 기술하는 방식
    • inline 방식 대비 경제적으로 코딩할 수 있다.
    • 의미와 디자인의 분리라는 CSS의 취지에 부합한다.
       
  • 외부 파일 방식 (예제3)
    • CSS를 별도의 파일로 분리해서 링크하는 방식
    • 문법적으로는 style tag와 동일
    • 파일의 교체로 디자인을 변경할 수 있다는 점에서 유지보수가 편리하다.

예제1. inline 방식

<html>
    <body>
       <!-- 태그 안에 스타일 시트를 직접 기술, selector 불필요 -->
       <h1 style="color:red">생활코딩 CSS 강의</h1>
       <p>CSS는 쉽습니다.</p>
    </body>
</html>

예제2. style tag 방식

<html>
    <head>
        <style type="text/css">
           h1 {
              color:red;
           }
        </style>
    </head>
    <body>
       <!-- 태그 안에 스타일 시트를 직접 기술, selector 불필요 -->
       <h1>생활코딩 CSS 강의</h1>
       <p>CSS는 쉽습니다.</p>
    </body>
</html>

예제3. 외부 파일 방식

<html>
    <head>
        <link type="text/css" href="http://opentutorials.org/file/style.css" rel="stylesheet" />
    </head>
    <body>
       <!-- 태그 안에 스타일 시트를 직접 기술, selector 불필요 -->
       <h1>생활코딩 CSS 강의</h1>
       <p>CSS는 쉽습니다.</p>
    </body>
</html>
/* http://opentutorials.org/file/style.css 의 내용 */
h1{
  color:red;
}

 

댓글

댓글 본문
  1. Seung Lee
    감사합니당
  2. asitai
    시작합니당!
  3. sting
    complete
  4. 김종엽
    2016.08.24 완료!
  5. Ian Si Mong Seong
    수강완료
    2016.08.01
  6. 올어라운더
    감사합니다
  7. 이승민
    강의 잘보았습니다. 감사드립니다~
  8. 이승민
    매번 좋은정보 잘보고 있습니다 ㅎ
    대화보기
    • Rhys Jung
      감사합니다. 오늘도 열공모드 돌입했어요...
    • JustStudy
      고맙습니다
    • 빨강머리앤
      감사합니다.
    • 이웃집토토로
      - [구글링 검색어](priority of css inline style tag link tag)
      - [참고자료] [http://www.w3schools.com/css/css_howto.asp]

      1. 우선순위는 인라인->아웃라인(스타일태그와 외부방식) 입니다.

      2. 스타일태그와 외부방식 끼리는 우열관계가 아닙니다. 브라우저마다 다릅니다.
      어차피 head에 한번에 묶기 때문에 둘 중 한가지 방식만 사용하게 됩니다. 걱정하실 필요는 없습니다.

      3. 1번 사항을 응용하면 아웃라인에 의해 일괄적으로 스타일이 지정된 html 태그 중에서
      한 두개 정도만 가볍게 고치기에 좋습니다. 마찬가지로 하다보면 손 쉽게 다 됩니다.
      대화보기
      • pillage
        음 강의를 보다가 궁금한 부분이 생겼는데..

        CSS가 Inline, Style Tag, 외부파일 요 세방식이 있는데.

        위 세방식을 혼합해서 사용했을경우.. 어느 방식이 1순위로 적용이 되나요..?

        뭐 Style Tag 와 외부파일 방식을 혼합해서 사용할일은 드물것 같긴 한데..그래도 궁금하긴 하네요 ㅎㅎ
      • Yong Jin Kim
        감사합니다 이고잉님~~^^
      • 크레용샘
        이번에도 유익한 강의였습니다.
        항상 감사합니다.
      • 김민석
        감사합니다.
      • 제이크 리
        너무 좋아요 감사합니다~~!!
      • 늘생릭코네
        이번 강의 유튜브 봤어요
      • 개미
        좋은정보 또 얻고갑니다 감사합니다
        html에서 오늘 넘어왔어요
      • YellowBall
        잘 들었습니다.
      • 딱정벌레
        1.간단히 생각하세요. inline방식은 egoing님이 강좌에서 말씀하셨듯
        html내에 같은 CSS(스타일)를 적용할 부분이 많아질 경우
        처음부터 끝까지 일일이 고쳐줘야 하는 사태가 발생하게 되어
        CSS를 html에서 분리시킨 의미가 없어집니다.
        ( 하지만 스타일 적용할 부분이 한두 군데에 한정된다면 그냥 inline방식을 써도 무방한 것이죠.)

        코딩이 길 경우 head부분에 CSS를 이용, 스타일 적용을 해 두면 body를 손대지 않아도
        적용된 CSS만 수정하면 되니까 엄청 간단하게 일을 할 수 있겠죠.
        바로전의 강좌(실습방법과 개발도구)에서 보여주신 Zen Garden사이트가 이것을 아주 잘 표현하고 있습니다.

        2.답변은 머머님이 말씀하신 내용대로입니다.
        대화보기
        • 머머
          style tag 방식도 head태그의 style 안에서 적용하고 싶은 선택자를 선택해서 지정하는 개념 아닌가요? 저도 해깔리네요 ^^;

          2번에 대한 답변은 확장자가 .css로 되어 있습니다. 그 파일이 존재하지 않다면 디자인이 적용되지 않겠지요?
          대화보기
          • kush
            html 일주일 강의 완독하고
            css로 오늘 넘어왔습니다!

            염치없게도 질문 두가지 남겨봅니다.

            1.
            <!-- 태그 안에 스타일 시트를 직접 기술, selector 불필요 --> 라고 쓰셨는데,
            사실 select가 단순히 '선택하다' '블록지정하다' 정도의 의미라고 해석한다면
            inline 방식은, (제가 생각했을 땐) 셀렉을 해서 (스타일을 입힐 구역을 지정해서) 적용시키는거라 생각하는데,
            제 이해가 잘못된건지 궁금합니다.

            (저는, style tag 방식은 이미 head에서 스타일을 기술했기 때문에, 셀렉을 따로 하지 않아도 되고,
            inline 은, 적용시키려면 그 부분에 직접 셀렉해서 태그를 넣어야 된다고 이해했습니다)


            2. 외부 파일 방식에 대한 질문인데요.
            -혹시 그 파일이 존재하지 않는다면 적용되지 않는가요?
            -그 파일의 정체가 궁금합니다. (확장자가 *.css 인 파일인건지... (마치 메모장에서 적고 저장을 .html로 하듯이말이죠)...)


            늘 감사합니다 :)
          • Kevin Ahitub Che
            와 진짜 명강의인데 이렇게 공유를 해주시다니 감사합니다~!!!
          • 도레미
            정말 알아듣기 쉽게 설명해주시네요!! 한번들었다가 감동...자주올게요~~^^*
          • 서현뿌뿌
            강의 유용하게 잘 듣고 있습니다~~
          • 뒷산메아리
            잘 보고 있습니다. 감사..
          • proSiGi
            감사합니다 ㅎㅎ
          • 베이직스터더
            이유 말씀드리죠. 인코딩이 달라서입니다.
            자세한 건 검색해보세요.
            아마 님 사이트가 유니코드 기반이였나 봅니다.

            비번 : Basic
            대화보기
            • 유형찬
              감사합니다!
            • 로키즈
              <!-- 내용 --> 요 안에 들어가는 내용은 출력이 되지 않습니다
              대화보기
              • 에디터에 <!-- 태그 안에 스타일 시트를 직접 기술, selector 불필요 -->도 똑같이 쳤는데
                브라우저 화면에는 안나오네요.... 왜 그런건가요? 태그로 인식하는 건가?

                그거랑 style tag랑 외부파일 방식에도 selector 불필요라고 예제에 적어있는데
                inline 방식 외에 나머지 두개는 selector가 필요한거 아닌가요?
              • pyj4104
                텍스트 인코딩 방식이 달라서 그런 것입니다. 제가 알기로는 한국어의 텍스트는 특수한 인코딩을 따라하는데 그 부분을 명시하지 않으면 다른 인코딩 방식으로 인코딩을 해서 그런 것입니다.
                대화보기
                • huziya
                  쉽게 이해가 되어서 좋아요^^
                • 로망
                  강좌 잘보고 있습니다~
                  동영상때매 서브메뉴가 가려지네요.
                • ksh368
                  1. 제가 소스코드를 다음과 같이 작성하였습니다.
                  <html>
                  <body>
                  <h1 style="color:red">생활코딩 강의</h1>
                  <p>이건 쉬워요...</p>
                  </body>
                  </html>

                  2. 그런데 웹페이지 출력이 다음과 같았습니다.
                  원래 의도한 출력 실제 출력
                  생활코딩 강의 -> 생활코딩 강의
                  이건 쉬워요... -> 이건 쉬워요...

                  3. 그런데 다음 코드를 추가하니 원래 의도한 출력이 나왔습니다.
                  <head>
                  <meta charset="utf-8" />
                  </head>

                  4. 왜 그런지 알고 싶어요.
                • egoing
                  정확하게 어떤 상황을 말씀 하시는지 잘 모르겠습니다.
                  대화보기
                  • ksh368
                    생활코딩 강의

                    이건 쉬워요...

                    inline방식을 사용하여
                    <html>
                    <body>
                    <h1 style="color:red">생활코딩 강의</h1>
                    <p>이건 쉬워요...</p>
                    </body>
                    </html>
                    위와 같이 결과가 나왔어요... 왜 이렇게 나온 건가요??
                  • egoing
                    예 맞습니다. 그런데 스타일 태그에는 사실상 CSS 밖에 오지 않기 때문에 html5부터는 type 속성이 생략가능한 것으로 알고 있습니다.
                    대화보기
                    • HyeongJun
                      정말 사소한 질문 하나 해도 될까요...제가 정말 초보자인데.. 아무리 찾아봐도 자료가 없길래 하나만 여쭤보겠습니다. 스크립트태그나 스타일 태그를 사용할 때 type 속성 값은 무엇을 의미하는 건지 확실하게 알고 싶습니다.. 이 태그는 css문서이다 라고 정의해주는게 맞는건가요??
                    • mimiandchopa
                      잘 보았습니다.^^ 감사합니다.
                      http://opentutorials.org......css 파일이 없어진듯 합니다.
                    • annabelle
                      'rel = stylesheet' rel은 relationship 의 약자로 문서간의 관계를 지정해 주는 것 같은데요^^ (잘 모르지만요~)
                      대화보기
                      • 유성두개
                        css의 외부파일 방식 적용에서, 맨 끝의 're=stylesheet' 는 무엇을 의미하나요?
                      • 삽군난무붑샤
                        "http://opentutorials.org/file/..." 파일이 날아간것 같습니다.
                      버전 관리
                      egoing
                      현재 버전
                      선택 버전
                      graphittie 자세히 보기