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. switpotato
    20201122: 2차학습 완료
  2. 몽밍
    2020.11.10
  3. 켄드릭
    2020.10.29(목) 1차 학습완료
  4. hanjong
    ok
  5. jaehyunlee
    완료
  6. 오석민
    완료
  7. 박병진
    20200930완료
  8. 콜라
    20200926완료!
  9. 여니여니
    20200913 완료요~^^
  10. switpotato
    20200824 완료!감사합니다!!
  11. 김성곤
    20200716 감사합니다!
  12. 열심히사는사람
    완료
  13. 한강
    Css 입력 방법 배웠습니다~~!!! ^^
    200526
  14. 김선경
    2020-03-24 완료
  15. html과 css가 만나는 법
    html속성 style=""기입 안에 color=red<css언어
    head태그에 style태그 삽입 사이에 h2{color=red}<css언어
  16. 무지개반사
    완료
  17. 2020. 1. 6 수업완료
  18. 2020.01.04
  19. Grigo
    완료
  20. alpha
    191001 수강완료
  21. 치디우기
    2019/8/25 수강완료
  22. 배미경
    수강완료요!
  23. 다나가
    190718 - 수강완료!!
  24. 김주엽
    수업완료
  25. 잘될자
    190502 수강완료!
  26. 김예은
    190402 수강완료 감사합니다
  27. lygon
    2019-02-22 완료
  28. 한승민
    190212
  29. 테디
    완료
  30. 황근두
    항상 잘 듣고 있습니다 감사합니다 화이팅~!
  31. 수미
    완료했습니당
  32. asdqwer123
    완료
  33. 김민영
    완료
  34. 신비
    감사합니다!
  35. 로버트한
    잘 보았습니다.^^
  36. SlowStarter
    감사합니다!
  37. 스페이스몽키
    감사해요~!
  38. JN87
    180101 감사합니다!
  39. 푸른하늘
    9일차 공부 감사합니다
  40. Jupi
    html문서에 css를 적용하면 방법은 3가지 있습니다.
    (아마도 다음 강의에서 설명해 주시겠지만..)

    # HTML태그내 스타일 지정(Inline Styles)
    ex) <h1 style="color:red">Hello world!</h1>

    # 내부 스타일 시트(Internal Style Sheet)
    ex) <head>태그 안에
    <style>
    h2{
    color: blue;
    }
    </style>

    # 외부 스타일 시트(External Style Sheet)
    ex) <head>태그 안에
    <link rel="stylesheet" type="text/css" href="파일이름.css">

    #### 추가 ####
    리체님이 정리해주신 페이지가 있어서 링크를 올려놓도록 하겠습니다~
    https://opentutorials.org......148
  41. 우영국
    항상 쉽게 풀어서 해지시는 설명 너무 감사히 듣고갑니다.
  42. css왕초보
    감사합니다!!!
  43. 오빠는다르다
    감사합니다~!!!
  44. 강지후
    강의 완료 20170630
  45. dandan
    위의 style 태그도 html문법
    h2{color:blue} 가 css 문법

    아래도

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

     이렇게 따로 CSS파일에 링크 거는게 훨씬 코드 가독성도 좋고 효율적일거 같다는 의견입니다.
    왼쪽에는 html 에디터, 오른쪽에는 css 에디터를 두고 보면서 양쪽으로 하는거죠.
  50. jgatsby
    감사감사합니다.!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기