CSS 수업

HTML을 꾸며주는 아름다운 언어

CSS 수업 HTML을 꾸며주는 아름다운 언어

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 자세히 보기