CSS

HTML과 CSS가 만나는 법

이번 시간에는 HTML에 CSS를 삽입하는 방법을 알아봅니다. 

예제 - html_css1.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{color:blue}
    </style>
  </head>
  <body>
    <h1 style="color:red">Hello World</h1>
    <h2>Hello world</h2>
  </body>
</html>

아래는 실습환경 없이도 코드를 온라인에서 실행해볼 수 있는 서비스인 codepen입니다.을 누르면 온라인에서 실행해 볼 수 있습니다.

댓글

댓글 본문
작성자
비밀번호
  1. 강지후
    강의 완료 20170630
  2. dandan
    위의 style 태그도 html문법
    h2{color:blue} 가 css 문법

    아래도

    <h1 style="color:red"> hello world </h1>
    여기서 color:red 가 css 문법임.
  3. 쿠쿠다스
    감사합니다
  4. 14번째
    5.5.
  5. php가 첫취업?
    2017.4.30
  6. 지나가던 듣보잡
    <html>
    <head>
    <link href="파일이름.css" type="text/css" rel="stylesheet" />
    </head>
    </html>

     이렇게 따로 CSS파일에 링크 거는게 훨씬 코드 가독성도 좋고 효율적일거 같다는 의견입니다.
    왼쪽에는 html 에디터, 오른쪽에는 css 에디터를 두고 보면서 양쪽으로 하는거죠.
  7. jgatsby
    감사감사합니다.!
  8. matheios
    Good! 넵넵 강의 감사합니다! HTML의 문법과 CSS의 문법의 구분 감사합니다~
  9. 만복이
    감사합니다.
  10. 2016.12.25 done!
  11. 임지호
    HTML에 CSS를 삽입하는 방법
    1. CSS를 적용하고자 하는 태그 속성으로 style="..."을 준다. (...에는 CSS문법이 들어가야함)
    2. <head>태그에 <style>태그를 작성하고 그 안에 적용하고자 하는 태그와 CSS문법을 적는다.
  12. 브라우저 상에서 보여지는 부분이 <body>태그여서 <head>태그에 <Style>을 넣으면 헛갈리지 않을까 생각했습니다. 정보와 디자인의 분리라는 측면으로도 봐도 괜찮네요~
    대화보기
    • 권용식
      아마 보기 좋게 정리하려고 그렇게 하는 게 아닐까요? 정보와 디자인의 분리 때문에 html과 css가 분리된 것처럼요 정궁금하시면 한 번 해보셔도 ^^
      대화보기
      • CSS 삽입방법 2번째에서 <style> </style>을 <body>태그 안에 넣으면 안 되는 건가요?
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기