생활코딩 오프라인 수업 라이브 - 작심40시간

CSS

선택자

태그 선택자

<html>
    <head>
		<style>
			body {
				color: white;
			}
			div {
				background-color: red;
			}
			span{
				background-color: blue;
			}
			h1 {
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div>div</div>
		<span>span</span>
		<h1>h1</h1>
	</body>
</html>

클래스 선택자

<html>
    <head>
		<style>
			.active{
				color:red;				
			}
		</style>
	</head>
	<body>
		<ul>
			<li class="active">A</li>
			<li>B</li>
			<li class="active">C</li>
			<li>D</li>
		</ul>
	</body>
</html>

아이디 선택자

<html>
    <head>
		<style>
			#active{
				color:red;				
			}
		</style>
	</head>
	<body>
		<ul>
			<li id="active">A</li>
			<li>B</li>
			<li>C</li>
			<li>D</li>
		</ul>
	</body>
</html>

복합 선택자

<html>
    <head>
		<style>
			ul li {
				color:green;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>A</li>
			<li>B</li>
			<li>C</li>
			<li>D</li>
		</ul>
		<ol>
			<li>E</li>
			<li>F</li>
			<li>G</li>
			<li>H</li>
		</ol>
	</body>
</html>

선택자의 우선순위 (캐스케이딩)

<html>
    <head>
		<style>
			li {
				color:red;
			}
			.class_active{
				color:blue;
			}
			#id_active{
				color:green;				
			}
		</style>
	</head>
	<body>
		<ul>
			<li>A</li>
			<li class="class_active">B</li>
			<li class="class_active" id="id_active">C</li>
			<li>D</li>
		</ul>
	</body>
</html>

효과

테두리 (border)

<html>
    <head>
		<style>
			#s1 {
				border:1px solid red;
			}
			#s2 {
				border-left:1px solid red;
			}
			#s3 {
				border:1px dotted red;	
			}
			#s4 {
				border:10px solid red;	
			}
			li {
				margin:10px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li id="s1">A</li>
			<li id="s2">B</li>
			<li id="s3">C</li>
			<li id="s4">D</li>
		</ul>
	</body>
</html>

플로팅 (float)

<html>
    <head>
		<style>
			body {
				width:400px;
				font-size:2em;
			}
			img {
				width:100px;
			}
			#floatleft {
				float: left;
			}
			#floatright {
				float: right;
			}
		</style>
	</head>
	<body>
		<img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
		Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL.<br /><br />
		<img id="floatleft" src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
		CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design).<br /><br />
		<img id="floatright" src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
		CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.
		The CSS specifications are maintained by the World Wide Web Consortium (W3C). 
	</body>
</html>

박스모델

opentutorials.org.html

<!DOCTYPE html>
<html>
<head>
        <title></title>
        <style type="text/css">
                header {
                        border-bottom:1px solid gray;
                }
                nav {
                        float:left;
                        padding-top:10px;
                }
                article {                        
                        float:left;
                        width:600px;
                        padding-left:30px;
                }
                body {
                        font-size:0.8em;
                }
                h1 {
                        font-size:3em;
                }
                h2 {
                        font-size:2em;
                }                
        </style>
</head>
<body>
<header>
        <h1>JavaScript</h1>
</header>
<nav>
        <ul>
                <li>JavaScript란 무엇인가?</li>
                <li>변수</li>
                <li>상수</li>
                <li>반복문</li>
                <li>조건문</li>
        </ul>
</nav>
<article>
        <h2>JavaScript란 무엇인가?</h2>

        <p>JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다. 그렇기 때문에 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어이다. 최근에는 HTML5의 적용이 가속화되면서 지금까지 모바일 환경에서 네이티브 앱(안드로이드, IOS)으로 구현해왔던 기능이 웹에서도 대부분 구현할 수 있게 되고 있다. 웹이 크로스플랫폼이라는 점, 검색 가능하다는 점, 네이티브 디바이스를 제어할 수 있는 하드브리드 시스템(phonegap 등)이 존재한다는 점에서 웹의 중요함은 더욱 확대될 전망이다. 자연스럽게 웹에서 구동되는 유일한 언어인 JavaScript의 중요함도 점점 커질 것으로 예상된다.</p>

        <p><a href="#goal">자바스크립트로 할 수 있는 일</a>을 참고하면 알 수 있지만, 최근에는 자바스크립트가 웹을 벗어나서 광범위하게 사용되고 있다. 그 효용이 다각적이면서도 배우기 쉬운 점 때문에 자바스크립트는 중급 개발자나 프로그래밍 입문자 모두가 도전해볼만한 언어다.</p>

        <h3>역사</h3>

        <p>HTML이 한번 화면에 출력된 후에는 그 형태나 동작방법을 바꿀 수 없는 문제를 해결하기 위해서 네스케이프에서 만들어졌다. 이후에 이 언어는 마이크로소프트의 인터넷 익스플로러에 jscript라는 이름으로 탑재된다. 후에 ECMA라는 표준화 기구로 이 언어의 관리 주체가 옮겨졌다.</p>

        <h3>ECMAScript</h3>

        <p>ECMAScript는 표준화 기구인 Ecma International에 의해서 관리되는 자바스크립트 표준안이다. 현재의 자바스크립트는 ECMAScript 3 기반으로 만들어졌고, 현재 시점(2013년)에서는 ECMAScript 5가 표준으로 정의 되었고 이 버전의 자바스크립트를 브라우저 벤더들이 자신들의 브라우저에 구현하는 작업이 한창이다. 곧 ECMAScript 5의 새로운 기능들을 웹에서도 문제 없이 사용할 수 있게 될 것이다. ECMAScript 4는 기존의 자바스크립트와 너무 큰 차이점 때문에 표준으로 채택되지 못했다.</p>

        <h3>JavaScript 학습에 요구되는 선행학습</h3>

        <p>웹페이지를 동적으로 제어하기 위한 목적으로 자바스크립트를 학습한다면 아래 내용은 반드시 선행해야한다. 아래 내용을 학습 한 후에 본 수업을 공부하고 DOM을 학습하면 웹페이지를 프로그래밍적으로 제어 할 수 있다. 최근에는 DOM을 직접 제어하는 것 보다는 jQuery와 같은 라이브러리를 사용하는 것이 일반적이다. DOM에 대한 내용은 <a href="http://opentutorials.org/course/49/24" target="_blank">DOM 수업</a>을 참고하고 jQuery에 대한 내용은 <a href="http://opentutorials.org/course/53" target="_blank">jQuery 수업</a>을 참고한다.</p>

</article>
</body>
</html>

나중에 공부해주세요.

생활코딩 CSS 수업

댓글

본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었습니다. 개편된 수업에서 뵙겠습니다. 본 수업은 2015년 6월 이후에 폐지됩니다. http://opentutorials.org/course/1688
댓글 본문
  1. 이경수
    감사합니다.
  2. 이은자
    정말 감사합니다
  3. 이은자
    정말 감사합니다
  4. 후반양반무
    잘봤습니다 밑의 코드들은 나중에 시간 나면 한번 봐야겠네요
  5. 정월초승달
    강의 정말 알차고 재미 있읍니다. '진작에 이런 사이트를 알았으면 얼마나 더 좋았을까 ?'라는 생각이 드네요.

    그리고 '8. CSS (2/3)'에서 16진수를 이용한 색상지정 방법도 소개해 주셨었죠?

    #000000 과 같이 16진수 6자리를 이용하여 표현할 수 있는 색상의 수는 16^6 = 16,777,216 가지가 맞는 것 같네요.

    감사합니다.
  6. 초바비
    정말 재밌습니다.
    코딩이 이리 재밌다 하면
    미쳤다 하겠지...?
  7. egoing
    중요한 내용이 전혀 아니랍니다. 그냥 무시해주세요~
    대화보기
    • 초바비
      선생님처럼...
      html 치고 텝을 누르면 깔끔하게 안나오고, 이것저것 군더더기가 많이 붙습니다.
      분명 패키지 한 것 같은데.. 패키지가 주는. ol>li를 치면 알아서 나오는 기능은 적용이 되었는데
      저처럼 다른 분들도 쌤처럼
      html만 딱 나오고, 다른 것들은 안나오나요?
      왜이렇게 지저분...한 거죠
    • song cook
      목소리두 좋으시구 수업 받으시는 분들 좋으시겠어요
    • couldbe
      기초를 차근히 쌓아가는 좋은 강의 감사드립니다. 가끔 서브라인 텍스트나 html 코딩에 이용하시는 팁 사용법이 순간 지나가 잊어버리게 되는데 자주 언급해 주셨으면 좋겠습니다.
    • Kimchobo
      언제나 감사드립니다. 좋은 강의를 남겨주신 덕분에 많은 도움이 되고 있습니다!
    • 빛나는새벽
      감사합니다. 잘 배워 나가고 있습니다
    • Organic media
      건물의 골격 구조만을 배운 느낌이에요.
      아, 건물이 저렇게 만들어졌겠구나! 하는 느낌을 받았습니다.
      나도 구조를 만들수 있겠다는 자신감도 생겼어요.
    • 카푸치노
      천천히 따라하고 있습니다. 고맙습니다.
    • Ralkim
      정말감사드립니다.
      비전공자라 막막했었는데,
      하나하나 차근차근배우고있습니다.

      감사합니다. 열심히할게요!
    • YOUNG
      맥에서 서브라임 Column selection은
      Left Mouse Button + Option
      OR: Middle Mouse Button
      이라고 서브라임 홈페이지에 나와있네요.
    • Greatboss
      좋은 강의 잘 듣고 있습니다.
      감사합니다.
    • 배중욱
      강의 잘 들었습니다~~
    • 박한일
      강의할때 PC에 글씨쓰는 프로그램 뭔가요 넘 좋아보여서요..
    • Sunghyun Hwang
      평소 웹 공부를 시작하려고 할 때마다 css 떄문에 공부하기가 싫어지는 (..) 그런 현상이 있었는데, 좋은 강의 덕에 잘 공부하고 갑니다. 어서 다음 강의를 보러 가야겠어요! 재능 기부 정말 감사드립니다 :-)
    • 환글
      좋은 강의 잘 들었습니다. 고맙습니다.
    • 기웃기웃
      floating 과 padding, margin 부분은 3번째 강의에서 구두로만 설명해 주시고, 따로 강의하신 동영상은 없는건가요? 구두로 설명듣고 바로 실습하면서 이해는 대강 했지만 혹시나 하고 여쭤봅니다^^
    • 구름할배
      오늘도 css 강의 잘들었습니다. 많은거 알게된거 같네요. 여러번 더들어야 겠지만.
      고맙게 듣고 갑니다. 내가카페에 보탬이될수 있는 일을 할수 있는게 없는거 같아
      아쉽네요. 답글 주신거 감사합니다. 즐거운 주말 보내시기바랍니다.
    • jin-young
      정확한 코드는 어떤지는 모르겠지만
      nav에 부모엘리먼트가 있다면 그것도 height가 100%여야 하는걸로 알고있습니다.
      대화보기
      • egoing
        별말씀을요!
        대화보기
        • JKIM
          CSS는 항상 막연했는데 이 강의 덕분에 많이 이해할 수 있게 됐습니다. 정말 감사합니다!
        • 홍즈
          nav의 border-right로 설정한 테두리를 100%로 늘리기 위해선 어떻게하나요?

          <style>
          nav {
          border-right:1px solid black;
          height:100%;
          }
          </style>

          을 해도 적용이 안되던데.테두리 높이를 현 생활코딩처럼 보여지는 화면 전체에 주고 싶을때요.
        버전 관리
        egoing@gmail.com
        현재 버전
        선택 버전
        graphittie 자세히 보기