CSS 수업

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

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

CSS란?

CSS란?

  • HTML이 정보를 표현한다면
  • CSS는 HTML을 시각적으로 꾸며주는 역할을 한다.

example1.html - 정보로서의 html (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<h1>생활코딩이란?</h1>
		<p>
			일반인을 위한 프로그래밍 커리큘럼입니다.
		</p>
		<p>
			누구나 프로그래밍을 할 수 있습니다.
		</p>
	</body>
</html>

example2.html - html을 꾸며주는 역할로서 CSS (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<style type="text/css">
			h1 {
				color: red;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<h1>생활코딩이란?</h1>
		<p>
			일반인을 위한 프로그래밍 커리큘럼입니다.
		</p>
		<p>
			누구나 프로그래밍을 할 수 있습니다.
		</p>
	</body>
</html>

CSS를 통해서 기대되는 효과들

  • 정보(HTML)과 디자인(CSS)를 분리할 수 있다.
  • 정보를 수정하지 않고 디자인만 변경할 수 있다. (참고 : css Zen Garden)
  • 검색엔진이 HTML을 해석 가능하도록 하기 때문에 더 많은 방문자들이 방문하도록 유도할 수 있다.
  • HTML에서 디자인 분리함으로서 시각장애인을 위한 프로그램인 스크린리더가 HTML을 해석할 수 있도록 할 수 있다.

참고

댓글

댓글 본문
작성자
비밀번호
  1. ㅇㅇ
  2. 김종엽
    2016.08.24 완료!
  3. 세 번째 완주 스타트 잘 끊었습니다!
  4. Daehyeop Ko
    CSS 시작!
  5. wonhee lee
    css도 시작해봅니다. zen garden은 대단하네요
  6. 이주하
    학원을 통해 웹디자이너 과정을 밟고있는 학생입니다 너무 너무 좋은 곳을 알게되었다고 생각합니다 공부 열심히 하겠습니다
  7. Ian Si Mong Seong
    수강완료
    2016.08.01
  8. Html에서 CSS으로 넘어왔는데 css는 넘 어렵네요..... ㅠㅠ
    링크 꾸미기 까지 봤다가 다시 처음부터 보는중입니다. 넘 이해하기 어려워서...
  9. wookim
    Html은 2015년에 만드셨는데 css는 2011년에 만들었네요...
    대화보기
    • Rhys Jung
      오늘 세번째로 CSS 정주행 시작합니다.
      그런데 이고잉님 목소리가... 넘 달라요...ㅠㅠ
      과거에 만드신것 같네요
      그래도 강의만큼은 명강의라 기대됩니다.^^
    • JustStudy
      고맙습니다
    • 젠가든 이라는 사이트는 새창으로 링크를 해두심이 어떨까요 ㅎㅎ
      강의를 보다가 링크를 누르니 동영상이 없어져서요~
      강의 잘보겠습니다
    • 비니
      명강의 감사합니다 :)
    • 빨강머리앤
      유익한 강의 감사합니다.
    • WayneKing
      난 잡종이 될거야
    • 주성완
      오늘은 css편 시작합니다~ 잘볼게요 ㅎㅎ
    • 이웃집토토로
      모바일로 처음 방문해봤는데 Flat 디자인 스타일이 아주 예쁘네요 ^ㄴ^
    • 효니
      css가 이런 용도로 쓰였던 거군요 ㅎㅎ
    • David Kim
      Thank you so much
    • sudesigner
      매번좋은내용 감사합니다.
    • 크레용샘
      늘 감사합니다.
      너무너무 유익하네요.
    • Frank
      고맙습니다. ^^
    • 늘생릭코네
      유튭 잘 봤습니다.
    • YellowBall
      css 시작
      잘 들었습니다.2015/5/6
    • 김수빈
      어린나의에 이런거 해도 이해못할거 같았는데 잘되네요.
      감사합니다. ㅎ
    • 임선동
      강의 너무 유익합니다.

      감사합니다.
    • 스마트
      강의 감사합니다.
    • 별양
      여기 질문해도 되는지 모르겟지만..ㅠㅠ 급해서요..
      홈페이지에 해상도별로 스타일 적용하고 싶어서 CSS안에 해상도를 500px단위로 쪼개서 각각 작성했는데
      뭘 잘못했는지 처음엔 적용이 잘 되다가.. IE에서 100%이하로 축소를 하면 스타일 적용이 하나도 되지 않습니다.ㅠㅠ 뭐가 잘못일까요...주저리주저리 질문드려 죄송합니다.ㅠㅠ
    • 주니
      안녕하세요. 유용한 강의를 잘 보고 있습니다. (__)

      예제를 토대로 내용을 작성해 보면 IE와 크롬에서 모두 깨져보이는데요..

      브라우저의 인코딩을 보면 UTF-8로 되어 있는데 한국어로 하면 또 제대로 보입니다.

      작성한 에디터는 Acroedit인데요.. 에디터의 문제일까요? ㅠ
    • hongsaem
      목소리 듣기 좋습니다.
    • proSiGi
      HTML도 잘 모르지만, CSS가 정확히 뭔지 모르는 상태였는데 하나하나 배워가겠습니다.
      감사합니다 ^^
    • 유형찬
      HTML에 이어 CSS 시작입니다! 감사합니다!
    • 될때까지
      감사합니다..잘보고 배웟어요
    • mimiandchopa
      감사합니다.
    • huziya
      드뎌 그동안 헤매었던 CSS를 시작하게 되었습니다.
      차근차근 배워나갈께요~ 감사합니다^^
    • 정익
      '엔지니어가 할 수 중요한 휴머니즘의 하나~' 멋진 설명이네요.
    • 토마스
      늘 좋은정보 제공해 주셔서 감사해요.
    • mimiandchopa
      잘보았습니다. ^^
    • Hyunduk Yi
      스크린리더 흥미롭네요. 강의 잘 봤습니다.
    • woosuk kim
      ^^ 넹 답변감사합니다
      대화보기
      • Egoing
        토렌토를 아직은 실험적으로 운영하고 있고요. 조만간에 정식적&체계적으로 올리겠습니다.
        대화보기
        • Woosuk Kim
          안녕하세요^^ 요즘 열심히 공부중인데 생활코딩 싸이트를 알고 동영상을 보면서 다시한번 더 놓친 부분이 없나 하면서 잘 보고 있습니다.
          HTML에서는 동영상을 토렌트파일로 올려주셧는데 혹시 css도 다운받는 곳이 있나요?
          ipadorusa@gmail.com
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기