CSS 와 JavaScript 꼭 필요한 것만 빠르게 정리하기

HTML, CSS 그리고 JavaScript, 꼭 필요한 개념만 예제를 들어 빠르게 정리해 본다.
4.6 (24 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
613 students enrolled
Free
Start Learning Now
  • Lectures 128
  • Length 13 hours
  • Skill Level Beginner Level
  • Languages Korean
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2016 Korean

Course Description

아래와 같은 내용으로 구성되어 있습니다.

  1. HTML 및 HTML5 에 대해 37강의 강의
  2. CSS에 대해 25
  3. 자바스크립트에 대해 65

쉬운 개념들은 매우 빠르게 지나 갔습니다.

한번 동영상으로 쭉 훑어 보고나면, 교보문고 강남점에 가서 두꺼운 책 한권 사다본 것과 같은 효과가 있을 것입니다.

책보다 비디오가  나의 경우에는 훨씬 빨랐습니다. 잘 아는 부분은 1.5배속이나 2배속으로 지나가도 이해가 될 것입니다.

What are the requirements?

  • HTML5도 다루고 있으므로, 별도의 사전지식은 없어도 됨

What am I going to get from this course?

  • CSS와 자바스크립트에 대해 코드를 분석할줄 안다.

What is the target audience?

  • CSS와 자바스크립트의 기본 개념을 정리하고자 하는 사람

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: 소개
01:17

어떤 편집 프로그램을 사용하여도 무관합니다.

예를 들면 단순히 Text 를 편집할 수 있는 프로그램이면 됩니다. 즉 윈도우즈의 경우에는 notepad 같은 것도 html 태그를 입력한 후, .html 또는 .htm 으로 저장하면 웹브라우져에서 작동합니다.

그러나 오류 정정등 편의기능이 많이 포함된 전용 편집툴을 사용하는 것이 좋습니다.

특히 브라켓(brackets) 이라는 프로그램은 윈도우즈용과 맥용 모두 출시되었고, 무료이고 편리한 기능이 많으므로, 다운로드 사이트 brackets.io 에서 운영체제에 맞는 것을 다운로드 받아 설치합니다.

Section 2: HTML (h01~h08)
02:49

모든 HTML 문서는 타입선언으로부터 시작합니다. <!DOCTYPE html>

HTML 문서는 <html>로 시작해서 </html>로 끝납니다.

화면에 보일 부분은 <body>와 </body> 사이에 들어갑니다...

02:48

HTML 스타일 속성은 아래와 같은 문법을 사용합니다.

style="속성:값;"

스타일은 CSS 에서 왔는데, CSS는 뒤에 자세히 나옵니다.

background-color 속성은 배경 색상을 지정합니다.

<body style="background-color:lightgrey;">

01:56

<b> 태그로 글자를 굵게 합니다.

<p>일반 글자</p>
<p><b>굵게한 경우</b></p> ...

02:27

<q> 태그는 인용문("인용문")으로 표시합니다.

<p>다음 글은 인터넷에서 인용하였습니다:</p>
<p><q>월드 와이드 웹은 인터넷에 연결된 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.</q></p>

01:54

HTML 은 일반적으로 알파벳의 각 문자별로 크기와 간격을 다양하게 표시할 수 있습니다.

그러나 프로그래밍 코드를 표시할 때는 고정된 글자 크기와 간격으로 표현하는 것이 좋습니다.

<kbd>, <samp>, 및 <code> 태그는 고정된 글자 크기와 글자 간격으로 표시합니다.

<kbd>File &gt; Open...</kbd>

01:41

주석은 브라우저 화면에는 표시되지 않습니다.

자신의 HTML 코드에 대해 상기시키는 역할을 합니다.

<!-- 여기에 상기시킬 내용을 적습니다. -->
<p>본문 내용 부분입니다.</p>
<!-- 여기에 상기시킬 내용을 적습니다. -->

05:51

CSS 는 Cascading Style Sheets 의 두문자어 입니다.

HTML 태그에 스타일을 적용할 수 있는 스타일 모음이라고 생각할 수 있겠습니다.

HTML 태그에 스타일을 적용하는 방법은 3가지가 있습니다.

1. 태그내(인라인) : HTML 태그 내에 직접 스타일 속성을 사용하는 방법
2. 페이지 내부(인터널) : <head> 영역에  <style> 태그를 넣어 사용하는 방법
3. 페이지 외부(익스터널) : 별도의 CSS 파일을 외부에 두고 사용하는 방법

가장 일반적인 방법은, 별도의 CSS 파일에 스타일을 적어놓고 사용하는 방법입니다.

05:32

HTML 에서 다른 문서나 그림 등을 링크로 사용할 때는 <a> 태그를 사용합니다.</a>

여기서 href 속성에 이동하려는 주소를 넣습니다.

<a href="url">link text</a>

이때 링크를 갖는 글자(네이버)는 눈에 보이는 부분입니다.

링크 글자를 클릭하면, 링크된 주소로 이동합니다.

링크 글자는 반드시 글자일 필요는 없고, 이미지 일 수도 있고, 다른 태그 일수 도 있습니다.

Section 3: HTML (h11~h18)
04:02

HTML에서는 이미지 표시도 태그로 정의합니다. src 속성으로 이미지의 url 을 입력해 줍니다.

alt 속성은 이미지가 로드되지 않았을 때 대체 문자를 표시해 줍니다. 

또 alt 속성값은 페이지를 읽어주는 프로그램에서 사용되기도 합니다.

04:35

도표 형태를 <table> 태그로 표현할 수 있습니다. 

이 테이블은 다시 <tr> 태그로 테이블 열로 나뉘고, 그 안에서 <td> 태그로 테이블 데이터를 표현합니다.

td 는 '테이블 데이터'를 의미하는데, 이는 모든 HTML 요소들 즉, 문자, 이미지, 목록 또는 다른 테이들도 포함합니다.

테이블 열에서 <td> 태그 대신에 <th> 태그를 사용하면 도표의 머리글로 표현됩니다.

03:31

HTML 리스트 기능중에 <ul>태그로 시작하고, 각 리스트 항목이 <li>태그를 갖으면, 해당 리스트 항목들의 맨 앞에 검은 점이 표시됩니다.

02:44

모든 HTML 태그는 기본적으로 블록 태그와 인라인 태그로 나눌 수 있습니다.

블록 태그들은 화면의 전체폭을 갖으며 줄바꿈으로 시작합니다. 

<div> 태그가 이런 종류의 태그입니다.

<div>, <h1>, <h2>..., <p> 등이 있습니다.

02:28

어떤 단말기냐에 관계없이 각 장비에 맞게 최적화된 웹사이트를 보여주는 디자인을 반응형 웹디자인이라고 합니다. 

예를 들면 데스크탑에서는 큰 화면에 맞게 보이고, 또 타블렛이나 스마트폰에서는 그 화면의 크기에 맞게 자동으로 디자인이 변형됩니다.

반응형 웹 디자인은 CSS 스타일을 사용하여 HTML 요소들을 크기 변경이나 이동, 또는 숨기기와 같이 변형시켜 각 스크린에 최적화시키는 방법을 사용하게 됩니다.

반응형 웹 디자인을 위해서는 일반적으로 화면을 여러개의 영역으로 나눌 필요가 있는데, 주로 <div> 태그를 사용하여 HTML Layout 을 표현합니다.

06:09

<head> 태그는 메타데이터를 담기 위한 태그입니다.

메타데이터란 HTML 페이지 생성에 관계된 데이터인데, 문서의 본문에 표시되지는 않습니다.

메타데이터는 문서의 제목<title>, 스타일 지정<style>, 링크 지정<link>, 스크립트 탑재<script> 등을 포함합니다.

05:48

키보드에 없는 문자들도, 특수문자 입력에 의해 표현할 수 있습니다.

특히, less than (<) 이나 greater than (>) 문자의 경우에는 브라우저가 태그로 인식할 수가 있어서 혼란이 올 수 있는데 이 경우, 특수문자 입력 방식을 사용하면 됩니다. 아래와 같이 하면 코드가 아니라 문자로 인식하게 됩니다.

01:43

HTML 웹 페이지를 올바르게 표현하려면, 먼저 웹 브라우저가 사용할 문자셋을 알아야 합니다. 아스키(ASCII) 는 맨 처음 사용된 문자 부호화 체계입니다. 

모두 127 개의 알파벳 및 숫자로 된 문자를 가지고 인터넷 상에서 사용되었습니다. 

아스키(ASCII) 코드는 숫자 (0-9), 영어 문자 (A-Z), 

그리고 특수문자 ! $ + - ( ) @ < > 로 구성되었습니다...

Section 4: HTML (h21~h28)
02:06

URL 은 Uniform Resource Locators 의 약어로서 인터넷 상의 주소체계를 의미합니다.

이 URL 은 단어로도 표시될 수 있고 (never.com), 또는 인터넷 프로토콜 번호로도 표시될 수 있습니다(125.209.222.141). 

일반적으로 웹 서핑할 때는 이름을 사용하게 됩니다...

05:14

TV 및 computer 의 스크린은 세 가지 색상을 조합하여 표현합니다. 

적색, 녹색, 청색. 이것은 빛의 삼원색인데, HTML 에서 RGB 색상 값은 다음 공식에 값을 입력하여 색상을 생성합니다.

rgb(red, green, blue)

각 적, 녹, 청 칸에 0 에서 255 까지의 색상 밀도를 입력합니다.

01:24

자바스크립트는 HTML 페이지를 동적이면서 상호작용이 가능하도록 구현해 줍니다.

HTML 태그 안에 자바스크립트와 같은 사용자 측 (client-side) 스크립트를 담을 수 있습니다.

태그는 그 안에 스크립트를 담을 수도 있고 아니면 외부의 스크립트를 src 속성을 사용하여 위치를 지정할 수도 있습니다.

일반적으로 자바스크립트는 이미지 조작, 입력값 검증, 및 내용의 동적인 변화를 줄때 사용됩니다.

03:57

최근에는 브라우저 시장을 몇 개 회사가 점유하고 있는데 어떤 브라우저는 모바일 폰용으로도 배포되고 있습니다. 

예에서와 같이 HTML 태그들이 정확하게 작성되지 않은 경우에는, 대부분의 데스크탑용 브라우저에서는 잘 동작하지만, 모바일 폰에서는 종종 성능부족을 발생시키는 원인이 되기도 합니다.

06:46

<form> 태그는 사용자로부터 데이터를 입력받기 위해 사용되는데, <form> 태그는 HTML 의 형태를 정의하는 기능을 합니다.

이 폼 태그에는 여러가지 형태가 있는데, input 태그, 체크 박스, 라디오 버튼, submit 버튼 등이 있습니다.

<input> 태그는 가장 중요한 태그인데 <input> 태그는 형태 속성에 따라 종류가 많습니다.

03:18

HTML 폼 태그에 대해 다룰텐데, 다만, <input> 는 이전 장에서 다루었습니다. 

이번 장에서는 그외의 폼 태그들에 대해 설명합니다.

<select> 태그는 드롭다운 목록을 만들어줍니다. 

<option> 태그로 선택항목을 생성해 주는데, 일반적으로 맨 처음 항목이 보이게 됩니다. 

그러나 selected 속성을 입력해 주면 해당 옵션이 보이게 됩니다.

07:11

HTML5 는 HTML4 에서 개선된 마크업 언어인데, DOCTYPE 선언부터 매우 심플하게 바뀌었습니다. 

기본 문자셋 인코딩이 HTML5 에서는 UTF-8 입니다. UTF-8 은 모든 언어를 표현할 수 있습니다. 

HTML5 는 대부분의 브라우저에서 지원합니다.

06:31

HTML5 Semantic 태그라는 용어는 낱말에서 의미를 유추할 수 있는 유의미의 태그라는 의미입니다.

반면 무의미 태그는 <div> 또는 <span> 처럼 낱말에 어떤 특정한 의미가 없이 여러가지 용도로 구역을 구분하기 위해 쓰는 타입이라고 볼 수 있습니다.

유의미 태그들은 단어 자체에 의미가 포함된 것으로 예를 들면 <form>, <table>, 및 <img> 같은 것도 포함되는데 그 태그안에 포함될 내용을 그 태그가 의미하고 있습니다.

Section 5: HTML (h31~h38)
04:48

HTML5 표준을 잘 지킨 페이지를 하나 만들어 봅니다. HTML 에서 코딩할 때 종종 규칙이 불확실한 경우가 있습니다. 

예에서 HTML5 를 위한 코딩 규칙을 주석으로 입력하였습니다.

12:25

HTML <canvas> 태그는 일반적으로 자바스크립트를 사용하여 간편하게 그래픽을 그리는데 사용됩니다.

<canvas> 태그는 단지 그래픽을 담는 그릇입니다. 실제로 그래픽을 그릴려면 스크립트를 사용해야 합니다.

캔버스는 선, 사각형, 원, 문자, 그리고 이미지를 그리기 위한 몇개의 메소드를 가지고 있습니다.

06:40

SVG (Scalable Vector Graphics) 는 가변형 벡터 그래픽인데, 웹용 그래픽으로 사용되며 W3C 의 추천 포맷입니다. 

HTML <svg> 태그는 HTML5 에서 등장하였는데 SVG 그래픽을 담기 위한 영역을 생성합니다. 

SVG 는 직선, 사각형, 원형, 문자 및 그래픽 이미지를 그리기 위한 몇가지 메소드를 가지고 있습니다.

크롬, 사파리, 파이어폭스 및 IE9 이상의 대부분의 브라우저에서 <svg> 태그를 지원합니다.

01:58

웹 상에서 멀티미디어는 그림, 사운드, 음악, 비디오, 영화, 그리고 애니메이션 등이 있습니다.

웹 페이지는 다양한 형태의 멀티미디어 태그 들을 포함하고 있습니다.

사운드, 비디오, 애니메이션 같은 멀티미디어는 다양한 브라우저에서 다양하게 지원됩니다. 

어떤 형식은 플러그-인 같은 추가 프로그램이 필요할 수도 있습니다.

04:38

HTML5 이전에는 웹 페이지 상에서 비디오를 볼수 있는 표준이 없었습니다. 

이때는 플래시 같은 플러그-인으로 비디오를 플레이 할 수 있었습니다.

HTML5 <video> 태그는 웹 페이지에 비디오를 삽입하는 표준 방법을 제공하며, 크롬, 사파리, 파이어 폭스 및 IE9 이상의 모든 브라우저에서 <video> 태그를 완벽하게 지원합니다.

컨트롤 속성으로 비디오 컨트롤을 추가할 수 있습니다. 컨트롤에는 시작, 일시중지, 볼륨 등이 나타납니다.

01:21

웹 페이지에서 오디오의 실행은, HTML5 이전에는 표준이 없었습니다. 

이때는 플레시 같은 플러그-인으로 플레이 할 수 있었습니다.

HTML5 <audio> 태그는 웹 페이지에 오디오를 삽입하는 표준 방법을 제공합니다.

02:31

HTML "플러그-인"은 "헬퍼 애플리케이션"으로도 불리는데, 웹 브라우저의 표준 기능을 확장해 주는 컴퓨터 프로그램 입니다.

잘 알려진 플러그-인으로는 자바 애플릿 같은 것이 있는데, 플러그-인은 웹 페이지에 <object> 태그나 <embed> 태그로 삽입할 수 있습니다.

플러그-인으로 많은 기능을 할 수 있는데, 예를 들면 지도 표시, 바이러스 스캔, 사용자 은행 계정 검증 같은 것을 합니다.

다만 오디오 비디오 파일의 실행은, 앞 장에서 보았듯이 별도 태그가 마련되어 있습니다.

03:43

비디오 형식 때문에 곤란한 경우가 있습니다. 브라우저 버전마다 지원되는 비디오 형식이 달라지기도 합니다. 

그럴때 유튜브 비디오를 사용하면 가장 손쉽게 비디오를 플레이 할수 있습니다.

Section 6: HTML (h41~h45)
17:34

HTML 지리위치 API 는 사용자의 지리적 위치를 얻는데 사용합니다. 

프라이버시 침해 문제가 있기 때문에, 위치정보는 사용자의 동의가 있는 경우에만 사용될 수 있습니다.

08:49

HTML5 에서는 드래그 앤 드롭이 표준의 일부가 되었습니다. 어떤 태그 들도 드래그 앤 드롭을 할 수 있습니다.

04:46

HTML 내부 저장 기능은, 웹 애플리케이션이 사용자의 브라우저 내에 데이터를 내부적으로 저장할 수 있는 기능으로 쿠키보다 유용합니다.

HTML5 이전에는, 애플리케이션 데이터는 쿠키에 저장하여야 했습니다. 

내부 저장 기능은 쿠키 보다 보안이 더 좋습니다. 

또 웹 사이트 성능에는 영향을 주지 않으면서도 더 많은 데이터를 내부에 저장할 수 있습니다.

쿠키 와는 달리, 저장 한도가 최소 5MB 이상으로 훨씬 크고 또 정보가 서버로도 전송되지 않습니다.

03:57

애플리케이션 캐시는 HTML5 에서 소개되었는데, 웹 애플리케이션이 캐시되면 인터넷 연결 없이도 (캐시된 자원들을) 사용할 수 있게 됩니다.

애플리케이션 캐시는 세가지의 이점이 있습니다.

오프라인 브라우징 : 오프라인에서도 사용자가 애플리케이션을 사용할 수 있습니다.
속도 측면 : 캐시된 자원들은 더 빠르게 로드 됩니다.
서버측 부하 감소 : 브라우저는 갱신된 자원만 서버로부터 다운로드 합니다.

04:36

HTML 페이지에서 스크립트가 실행될 때, 페이지는 스크립트가 끝나기 전까지는 반응하지 않게 됩니다.

웹 워커는 백그라운드에서 작동하는 자바스크립트인데, 다른 스크립트와는 독립적으로 동작하며 웹 페이지의 성능에도 영향을 주지 않습니다.

따라서 웹 워커가 백그라운드에서 실행중인 동안에도 버튼 클릭, 데이터 선택 등 중단없이 할 수 있게 됩니다.

Section 7: CSS (c01~c08)
07:30

CSS 규칙은, 선택자(Selector) 와 선언부로 구성됩니다.

<blockquote><style>
p {color: blue; text-align: center;} 
</style>
<h3>CSS 세상에 들어오신 것을 환영합니다.</h3>
<p>이 문단에 CSS 스타일을 입혔습니다.</p>

03:19

배경 색상 속성으로, 태그의 배경 색상을 지정합니다.

CSS 에서 색상은 아래의 방법으로 지정합니다.

색상의 이름으로 지정하는 방법 "blue"
16진수 값으로 지정하는 방법 "#0000ff"
RGB 값 (빛의 3원색) "rgb(0,0,255)"

02:06

CSS 테두리 프로퍼티 (border property) 는 태그의 테두리 색상, 폭, 및 스타일을 지정합니다.

테두리-스타일 프로퍼티 (border-style property) 로는 테두리의 종류를 지정합니다...

04:20

CSS 마진 프로퍼티 (margin property) 는 테두리의 바깥쪽 여백의 크기를 설정 합니다.

마진은 완전히 투명해서 배경 색상을 갖을 수는 없습니다.

CSS 로 태그의 각 면 (위, 오른, 바닥, 왼쪽) 의 마진 (margin) 을 제어할 수 있습니다...

08:31

텍스트 색상 프로퍼티 (color property) 를 페이지에 적용하려면 body selector 에 정의해 줍니다...

07:54

몇 가지 CSS 프로퍼티를 조합하면 박스 형태의 버튼으로 링크를 표현할 수 있습니다.

09:10

기본적으로 테이블의 <th> 및 <td> 태그는 각각 테두리를 갖기 때문에 이중선으로 보이게 됩니다.

그러나 border-collapse 프로퍼티로 한 개의 실선으로 보이게 하였습니다...

03:18

디스플레이 프로퍼티는 레이아웃을 관리하기 위한 매우 중요한 CSS 프로퍼티입니다.

태그의 유형에 따라 기본 디스플레이 프로퍼티 값이 정해지는데, 기본 디스플레이 값은 블록(block)과 인라인(inline)이 있습니다.

Section 8: CSS (c11~c18)
14:34

포지션 프로퍼티 (position property) 은 태그들을 어떻게 위치시킬지에 대한 유형을 지정합니다.

모두 네가지의 포지션 값이 있는데 아래와 같습니다.

기본위치 : static
상대위치 : relative
고정위치 : fixed
절대위치 : absolute

태그들은 위, 아래, 왼쪽, 오른쪽 프로퍼티로 정렬 시키는데, 먼저 포지션 프로퍼티 값에 무엇을 설정 하느냐에 따라 가끔 정렬이 원하는데로 되지 않을 수 있습니다.

따라서, 위, 아래, 왼쪽, 오른쪽 속성 값들은, 포지션 프로퍼티 값에 따라 달리 보이게 될 것입니다.

08:23

CSS 레이아웃 프로퍼티에서, 플로우트 프로퍼티 (float property) 는 태그를 플로우트 할 것인지를 지정해 주는데, 플로우트란 텍스트 영역에서 이미지가 텍스트를 밀어내고 자리를 차지 하는 프로퍼티를 말합니다.

클리어 프로퍼티 (clear property) 는 플로우팅 태그의 동작을 제어할 때 사용됩니다.

플로우트 프로퍼티 (float property) 는 가장 단순하게는 이미지 주변에 텍스트가 둘러 싸도록 하는데 사용될 수 있습니다.

클리어 프로퍼티 (clear property) 는 플로팅 태그 다음의 태그 들은, 앞의 태그를 둘러 싸게 됩니다. 이렇게 하지 않으려고 할 때 클리어 프로퍼티를 사용합니다.

클리어 프로퍼티는 플로우팅 태그가 어느 방향으로 플로우트 되지 않도록 할 것인지를 지정합니다.

03:32

인라인-블록 (inline-block) 을 플로우트 (float) 대신 사용하면 좀더 편리합니다. 클리어 (clear) 를 하지 않아도 되기 때문입니다.

그리드 (격자) 형태로 배치된 박스들은 지금까지는 플로우트 속성을 사용하여, 브라우저의 폭에 맞게 채워 왔었습니다.

그런데, 디스플레이 속성 (display property) 의 인라인-블록 (inline-block) 을 지정하면, 브라우저 사이즈가 조정될 때 좀더 쉽게 플로우팅 되게 할 수 있습니다.

inline-block 태그는 inline 태그와 같은데 단지 폭과 높이를 갖는 블록에 적용된다는 것만 다릅니다.

04:50

플로우트 속성 (float property) 을 사용하여 태그를 정렬시킬 수 있습니다.

플로우트로 태그를 정렬할 때에 body 태그에 마진과 패딩을 0으로 설정하고 시작하면, 브라우저 별로 위치가 동일하게 보일 것입니다...

06:25

CSS 컴비네이터 (combinator) 는 선택자 (selector, 실렉터, 스타일의 묶음) 들간의 관계를 설정하는데 사용됩니다.

CSS 선택자 (selector) 는 하나 이상의 단순 선택자 (simple selector) 를 여러 개 갖을 수 있는데, 이때 컴비네이터 (combinator) 를 기호로 포함하게 됩니다.

CSS3 에는 4개의 컴비네이터 (combinator) 가 있습니다.

후손 선택자 : descendant selector (space)
자식 선택자 : child selector (>)
일반 형제 선택자 : general sibling selector (~)
가까운 형제 선택자 : adjacent sibling selector (+)

03:56

CSS 가상-클래스 는 태그의 특별한 상태를 정의하기 위해 사용됩니다. 예를 들면,

사용자 마우스가 태그위로 올라 갔을 때의 스타일 지정
링크에 대해 방문 했을 때와, 방문하지 않았을 때의 스타일의 차이 지정
커서가 포커스 (focus) 되었을 때의 태그의 스타일 지정

가상-클래스 (pseudo-classes) 의 구문은 아래와 같이 씁니다.

selector:pseudo-class {
property:value;
}

04:59

CSS 가상-태그 (Pseudo-Elements) 는 태그의 특정 부분의 스타일을 지정할 때 사용됩니다. 예를 들면 다음과 같은 경우에 사용됩니다.

어떤 태그 내에서 첫번째 문자 또는 줄 만에 대해 스타일을 지정할 때
어떤 태그의 내용이 있으면 그 내용의 전 또는 후에 다른 내용을 삽입할 때

가상-태그 (pseudo-elements) 의 구문은 아래와 같습니다.

selector::pseudo-element {
    property:value;
}

07:31

웹 사이트에서 내용을 쉽게 구분해서 찾기 쉽도록 해주는 것이 중요한데, CSS 가 지루한 HTML 메뉴를 보기 좋게 바꾸어 줄수 있습니다.

네비게이션 바 (Navigation Bar) 는 쉽게 링크 들의 목록인데 <ul>, <li> 태그를 활용하면 좋습니다.

<ul>, <li> 태그에서 나타나는 리스트 마커 (bullets), 마진, 패딩을 제거해야 합니다...

Section 9: CSS (c21~c27)
10:24

수평형 네비게이션 바 (horizontal navigation bar) 는 두가지 방법이 있는데, 인라인 (inline) 방식과 플로우팅 (floating list) 방식이 있습니다.

인라인 방식에서는 <li> 태그를 인라인으로 지정합니다...

11:40

드롭다운 박스는 사용자가 어떤 태그에 마우스를 올리면 나타나는 글이나 그림 상자 입니다.

11:26

CSS 로 말풍선 (Tooltip) 을 만들어 봅니다.

말풍선 (tooltip) 은 마우스가 태그 위로 올라가면 추가적인 정보가 보이도록 하는 기능입니다...

09:15

CSS 로 이미지 갤러리를 만들 수 있습니다. 
이미지 갤러리는 반응형 (responsive) 으로 만들어서, 브라우저 화면의 크기에 따라, 이미지의 크기와 배치가 조절되도록 하는 것이 일반적입니다...

02:57

Opacity 는 불투명도 이고, Transparency 는 투명도를 말합니다.

CSS 에서 이미지의 투명도를 지정하는 것은 쉽습니다.

CSS 불투명도 속성 (CSS opacity property) 은 CSS3 에서 권장하는 방식 이기도 합니다.

즉, CSS3 에서는 투명도 (transparency) 를 표현할 때 대해 opacity (불투명도) 를 사용합니다. 아래 opacity: 0.5; 에서 수치가 1에 가까울 수록 진하게 보입니다...

08:06

이미지 스프라이트 (Image Sprites) 는 하나의 이미지 파일에 여러개의 이미지 들을 묶어 놓은 것을 말합니다.

게임을 만들 때나 웹 페이지를 만들 때 여러개의 이미지 들이 사용 되는데, 하나의 이미지 판에 여러 이미지를 배치한 것입니다.

많은 이미지를 갖는 웹 페이지는 이미지 로딩에도 시간이 오래 걸리고, 서버에도 다중 요청을 하게 됩니다.

이미지 스프라이트를 사용하면 (한번에 필요한 이미지를 내려 받으므로) 서버에 요청하는 횟수를 줄이고 데이터 전송량을 절감하게 됩니다...

05:16

CSS 속성 선택자 (CSS Attribute Selectors) 는 특별한 속성 (또는 특정 속성값) 을 갖는 HTML 태그에만 선택적으로 스타일을 입히는 기능입니다.

[attribute] {} 
  [ ] 대 괄호 안에 특정 속성을 넣고, 그 속성을 갖는 태그에 적용할 스타일을 {} 중괄호 안에 지정합니다.

[attribute="value"] {} 
  특정 속성 및 속성값을 갖는 태그에 스타일을 지정합니다...

Section 10: CSS (c31~c32)
05:26

input 태그 중에서 특정 타입에만 스타일을 적용하려면, 아래와 같이 속성 선택자 (attribute selectors) 를 사용할 수 있습니다.

input[type=text] {} 
  텍스트를 입력받는 input 태그에 스타일을 지정합니다.

input[type=password] {} 
  비밀번호 (password) 를 입력받는 input 태그에 스타일을 지정합니다.

input[type=number] {} 
  숫자를 입력받는 input 태그에 스타일을 지정합니다.

04:57

CSS 카운터 (CSS counters) 는 변할 수 있는 숫자인 "변수" 와 같은 동작을 합니

이 변수 값은 CSS 규칙에 따라 사용할 때마다 숫자가 하나씩 증가합니다.

CSS 카운터 (CSS counters) 는 다음의 속성을 사용합니다.

counter-reset - 카운터를 생성하거나 초기화 합니다.
counter-increment - 카운터 값을 하나씩 증가 시킵니다.
content - 생성된 카운터를 삽입합니다.
counter() 또는 counters() 함수 - 카운터의 값을 태그에 추가해 줍니다.

Section 11: JS (j01~j08)
10:19

자바스크립트 (JavaScript) 는 모든 웹 개발자가 배워야 할 3가지 언어 중 하나 입니다.

1. HTML 은 웹 페이지의 내용을 정의합니다.
2. CSS 는 웹 페이지의 배치를 지정합니다.
3. 자바스크립트 (JavaScript) 는 웹 페이지의 동작을 프로그램 합니다.

자바스크립트는 지구상에서 가장 인기있는 프로그래밍 언어 입니다.

02:33

자바스크립트 태그의 위치는 어디에 두어야 할까요?

HTML 페이지 내에서 <body> 태그에 둘수도 있고, <head> 태그에 둘수도 있습니다. 

심지어 두곳에 다 있어도 되고, 스크립트를 몇 개를 넣어도 됩니다.

그러나 반드시 <script> 태그로 둘러싸서 그 안에 자바스크립트 코드를 입력하여야 합니다.

04:40

자바스크립트는 어떤 내장 프린트 (built-in print) 또는 디스플레이 (display) 기능 (functions, 함수)을 가지고 있지 않습니다.

자바스크립트에서 데이터를 "화면에 표시 (display)" 하는 방법은 아래와 같이 몇 가지가 있습니다.

(1) window.alert() 을 사용하여, 경고 상자 (alert box) 를 띄우는 방법
(2) document.write() 를 사용하여 HTML 로 출력하는 방법
(3) innerHTML 로 HTML 태그 안에 쓰는 방법
(4) console.log() 를 사용하여 브라우저 콘솔 (browser console) 에 보여주는 방법

06:32

자바스크립트 구문 (JavaScript syntax) 은 어떻게 자바스크립트 프로그램을 만들 것인지에 관한 규칙의 집합입니다.

자바스크립트 프로그램 (JavaScript Programs) 이란 컴퓨터에 의해 실행되어야 할 "일련의 명령 (a list of instructions)" 입니다.

프로그래밍 언어에서 프로그램 명령 (program instructions) 들은 지시문 (statements) 이라고 불립니다.

자바스크립트는 프로그래밍 언어입니다. 자바스크립트 지시문 (JavaScript statements) 은 세미콜론 (semicolons, ;) 으로 구분됩니다...

03:51

HTML 에서, 자바스크립트 지시문 (JavaScript statements) 은 웹 브라우저가 실행 해야할 명령들 입니다.

대부분의 자바스크립트 프로그램은 여러개의 자바스크립트 지시문 을 가지게 됩니다.

지시문 은, 쓰여진 순서대로, 하나씩 실행됩니다.

자바스크립트 프로그램과 자바스크립트 지시문 은, 종종 자바스크립트 코드라고 불립니다.

자바스크립트의 지시문 은, 세미 콜론 (Semicolons, ; ) 으로 구분합니다.

세미 콜론은 실행할 수 있는 각 지시문 의 끝에 추가되어야 합니다.

세미 콜론으로 구분되어 있기만 하다면, 여러개의 지시문 을 한줄에 써도 됩니다...

04:23

산술 연산, 등호 연산, 문자열 연산, 논리 연산 으로 구분하여 자바스크립트의 연산자에 대해 알아보겠습니다.

자바스크립트 문자열 연산자 (JavaScript String Operators, + ) 는 문자들을 더하기 (연결하기, concatenate) 해 줍니다.

문자열 에 + 연산자가 사용 되면, 연결 연산자 라고 부릅니다...

05:16

자바스크립트 자료형 (JavaScript Data Types) 은, 문자열 (String), 숫자 (Number), 불리언 (Boolean), 배열 (Array), 객체 (Object) 등이 있습니다.

자바스크립트 배열 (JavaScript Arrays) 은 대괄호 (square brackets, [] ) 로 씁니다.

배열 항목 들은 콤마 (commas, , ) 로 구분합니다...

07:10

자바스크립트 함수 (JavaScript function) 는 함수 키워드 (function keyword), 그 다음 이름 (name), 그 다음 소괄호 (parentheses, () ) 로 구성됩니다.

함수의 이름은 문자 (letters), 숫자 (digits), 언더스코어 (underscores), 그리고 달러 표시 (dollar signs) 를 포함할 수 있습니다. (즉 변수 때 규칙과 동일 합니다).

소괄호 (parentheses, () ) 에는 파라미터 들이 콤마로 구분하여 들어갈 수 있습니다. (parameter_1,  parameter_2, ... , parameter_N)

함수에 의해 실행될 코드는, 중괄호 (curly brackets, {} ) 안에 적습니다.

Section 12: JS (j11~18)
05:39

실제 생활에서의 객체 (Objects), 프로퍼티 (Properties), 그리고 메서드 (Methods) 의 의미를 먼저 알아보겠습니다.

예를 들어 실제 생활에서, 의자가 하나 있다고 해보겠습니다.

이 의자가 무겁다 거나, 또는 색깔이 파란색 이라거나 하는 것은, 이 의자의 프로퍼티 들 (properties) 입니다.

한편, 이 의자가 사람의 엉덩이를 받칠 수 있다거나, 또는 심지어 날아다니는 기능이 있다거나 이런 것은 메서드 들 (methods) 입니다.

05:59

자바스크립트 에서는 객체 (objects) 와 함수 (functions) 들도 또한 변수 (variables) 들 입니다.

자바스크립트 에서의 유효 범위 (scope, 스코프) 는, 접근할 수 있는 (access to) 변수들, 객체들, 함수 들의 설정입니다.

자바스크립트는 함수 유효 범위 (function scope) 를 갖는데, 이 유효 범위는 함수의 내에서, 변경될 수도 있습니다.

05:41

HTML 이벤트 (HTML events) 는 HTML 태그에 발생하는 "어떤 것 (things)" 인데, 

자바스크립트가 HTML 페이지에 사용되는 경우에는, 자바스크립트가 이러한 이벤트와 "상호 작용 (react)" 할 수 있습니다.

HTML 이벤트는 브라우저가 한 것 이거나, 사용자가 한 어떤 것일 수 있습니다.

HTML 이벤트에는 다음과 같은 것이 있습니다.

HTML 웹 페이지가 로딩을 끝냈다.
HTML 입력 필드 (input field) 가 변경되었다.
HTML 버튼 (button) 이 클릭 되었다.

이벤트가 발생하였을 때, 무엇인가 해야 할 때가 있습니다.

자바스크립트는 이벤트가 감지 되었을 때, 코드를 실행하도록 해줍니다...

07:14

자바스크립트 문자열 (JavaScript Strings) 은 텍스트를 저장하거나 조작하기 위해 사용됩니다.

문자열은 따옴표 안에 있는 어떤 텍스트도 될 수 있습니다. 단일 따옴표 ('') 또는 쌍따옴표 ("") 모두 가능합니다.

문자열 내부에서 따옴표를 사용하려면, 문자열을 둘러싸고 있는 따옴표와 혼돈이 없도록 하여야 합니다.

문자열은 따옴표 ("" 또는 '') 로 둘러 싸야 하기 때문에, 자바스크립트에서 이들 따옴표 ("" 또는 '') 문자는 오류 (misunderstand) 가 날 수 있습니다.

그래서 해결책으로, \ (백슬래시 확장 문자, backslash escape character) 를 사용하게 되었습니다.

이 "백슬래시 확장 문자 (backslash escape character)" 는 문자열 내에 특수 문자로 삽입됩니다.

08:16

자바스크립트 문자열 메서드 (JavaScript String Methods) 에는 다음과 같은 것이 있습니다.

메서드 설명
charAt() 특정 인덱스 (위치) 의 문자를 찾아 줍니다.
charCodeAt() 특정 인덱스에 있는 문자의 유니코드 (Unicode) 를 알려 줍니다.
concat() 두개 이상의 문자 (strings) 를 조합하여, 조합된 문자의 복사본 (copy) 을 돌려 줍니다.
fromCharCode() 유니코드 값 (Unicode values) 을 문자 (characters) 로 변환합니다.
indexOf() 문자열 (string) 에서 특정 값이 맨 처음 발견된 위치를 알려 줍니다.
lastIndexOf() 문자열 (string) 에서 특정 값이 맨 마지막 발견된 위치를 알려 줍니다.
localeCompare() 현재 위치 (the current locale) 에서 두 문자열 (strings) 을 비교합니다.
match() 정규 표현 (regular expression, 찾는 단어) 에 대해 일치하는 부분을 문자열 (string) 에서 찾고, 일치한 단어를 반환 합니다...

07:53

영어 문자열 들은 대문자 소문자 변환을 할 수 있는데, toUpperCase() 메서드는 대문자로 전환해 줍니다.

toLowerCase() 메서드는 문자열을 모두 소문자 (lower case) 로 바꿉니다.

concat() 메서드는 둘 이상의 문자열을 합치는데, 더하기 연산자도 동일하게 문자열을 합칩니다...

07:01

자바스크립트는 한가지 타입의 숫자만 가집니다.

숫자들은 소수점 (decimals) 이 있거나 또는 없을 수 있습니다.

또 아주 크거나 너무 작은 숫자는 지수 표기법 (exponent notation) 으로 합니다.

자바스크립트 숫자는 항상 64-비트 (64-bit Floating Point) 부동 소수점 입니다.

다른 프로그래밍 언어와는 달리, 자바스크립트는 숫자를 여러가지 타입으로 정의하지 않습니다.

따라서 integers, short, long, floating-point 등의 타입이 없습니다.

자바스크립트 숫자는 항상 "배 정밀도 부동 소수점 (double precision floating point numbers)" 으로 저장됩니다.

이것은 국제 IEEE 754 표준 규격입니다...

07:03

자바스크립트 숫자 메서드 (JavaScript number methods) 는 아래와 같은 것이 있습니다.

메서드 설명
toString() 숫자를 문자열로 반환합니다.
toExponential() 반올림 (rounded) 및 지수 표기 (exponential notation) 하여, 문자열 형태로 반환합니다.
toFixed() 반올림 (rounded) 및 소수점을 갖는 숫자 (a specified number of decimals) 로 표기하여, 문자열 형태로 반환합니다.
toPrecision() 지정한 길이로 숫자를 표기하여, 문자열 형태로 반환합니다.
valueOf() 숫자를 숫자 형태로 반환합니다.

모든 숫자 메서드는 새로운 값으로 반환합니다. 최초의 변수 (original variable) 를 변경하지 않습니다.

자바스크립트 전역 메서드 (JavaScript Global Methods) 는 모든 자바스크립트 자료형에 사용될 수 있는 함수 입니다.

메서드 설명
Number() 입력받은 인수 (argument) 를 숫자로 반환합니다.
parseInt() 입력받은 인수 (argument) 의 정수 부 (integer) 를 반환합니다.
parseFloat() 입력받은 인수 (argument) 의 부동소수점 숫자를 반환합니다.

Section 13: JS (j21~28)
02:32

자바스크립트 수학연산 객체 (JavaScript Math Object) 는 숫자에 대한 수학적 처리를 수행하게 합니다.

이 Math 객체에는 몇개의 수학연산 메서드 (mathematical methods) 가 있습니다.

Math.min() 과 Math.max() 는 인수 (arguments) 목록에 나열된 숫자 중에 가장 작은수, 또는 가장 큰수를 찾을 때 사용합니다.

Math.random() 는 0 (포함하고) 부터 1 (포함하지 않고) 까지 에서, 소수점 16째 짜리 까지의 무작위 수를 반환합니다...

06:44

자바스크립트 날짜 객체 (JavaScript Date object) 는 날짜 즉, 년, 월, 일, 시, 분, 초, 천분의 1초 (years, months, days, hours, minutes, seconds, 및 milliseconds) 를 다루는데 사용됩니다.

자바스크립트 날짜 표기 형식 (JavaScript Date Formats) 은 문자열로 하거나, 숫자로 표기 합니다.

즉 문자열로 표기할 경우, 아래 와 같습니다.

Thu Jan 01 1970 09:00:01 GMT+0900 (KST)

아니면 위의 날짜를 숫자로 표기하면 아래와 같습니다.

1000

위에 숫자로 표기된 날짜가 1000이 된 것은, 그리니치 표준시 (GMT, Greenwich Mean Time) 기준으로 1970년 1월 1일 00:00:00 초부터 밀리초 숫자를 나타내므로 1000 밀리초 즉 1초가 된 것입니다.

그런데 09:00:00 부터 시작한 것은 국제표준시 (UTC, Coordinated Universal Time = 그리니치 표준시, GMT, Greenwich Mean Time) 를 한국표준시 (KST) 로 환산하여 표기하였기 때문입니다.

07:18

날짜 메서드는 날짜 값 들 (년, 월, 일, 시, 분, 초, 밀리초) 을 구하거나, 설정할 수 있게 합니다.

날짜 Get 메서드 (Date Get Methods) 는 날짜의 일부를 얻는데 사용됩니다.

메서드 설명
getDate() 일자 (1 일 에서 31 일) 을 숫자로 가져옵니다.
getDay() 요일 (0 에서 6 까지) 을 숫자로 가져옵니다.
getFullYear() 4자리 년도 (yyyy) 를 가져옵니다.
getHours() 시간 (hour, 0 시에서 23 시) 을 가져옵니다.
getMilliseconds() 밀리 초 (milliseconds, 0 에서 999 밀리초) 를 가져옵니다.
getMinutes() 분 (minutes, 0 분에서 59 분) 을 가져옵니다.
getMonth() 월 (month, 0 에서 11 까지) 을 가져옵니다.
getSeconds() 초 (seconds, 0 에서 59 까지) 를 가져옵니다.
getTime() 1970년 1월 1일부터 경과된 시간을 밀리초 단위 (milliseconds since January 1, 1970) 로 가져옵니다...

12:01

배열 (array) 은 한번에 하나 이상의 값 (value) 을 가질 수 있는 특별한 변수 입니다.

위의 예에서 myRoom2 라는 하나의 변수에 여러개의 항목 즉, desk, bed, bookshelf 등을 저장할 수 있었습니다.

이와 같이 배열 (array) 은 하나의 이름에 여러개의 값 들을 담을 수 있고, 이들 값 들에 인덱스 번호 (index number) 를 참조하여 접근 (access) 할 수 있습니다.

자바스크립트 배열 (JavaScript Array) 을 생성하는 방법은 배열 이름 (array literal) 을 사용하는 것입니다.

다른 방법으로는 자바스크립트 키워드 (JavaScript Keyword) new 를 사용하여, 배열을 생성하고 그 안에 값을 할당하는 방법이 있습니다.

11:59

자바스크립트 배열의 강점은 배열 메서드 (array methods) 에 있습니다.

toString() 메서드는 배열안의 요소를 콤마로 구분된 문자열로 반환합니다.

join() 메서드는 배열의 모든 요소를 하나의 문자열로 조합해 줍니다.

배열에서 요소를 빼거나, 새로운 요소를 추가할 때 매우 쉽습니다.

이것을 팝핑 (Popping) 과 푸싱 (Pushing) 이라고 부르는데, 

팝핑 (Popping) 은 항목을 배열에서 빼내는 것이고, 푸싱 (pushing) 은 배열에 집어 넣는 것입니다...

07:42

sort() 메서드로 배열의 각 요소를 알파벳 순서로 정렬 할 수 있습니다.

한편 reverse() 메서드를 사용하면 배열내 각 요소를 역순으로 정렬 할 수 있습니다.

기본값으로, sort() 메서드는 값도 문자열로 정렬 시킵니다.

그래서 숫자를 정렬 할 때는 문제가 발생합니다.

예를 들어 1, 2, 100, 200 이 있다고 하면, sort() 메서드는 1, 100, 2, 200 으로 정렬시킬 것입니다.

문자에서는 100 의 1 이 2 보다 작기 때문에 앞에 올 것입니다.

그래서 sort() 메서드는 숫자를 정렬할 때는 잘못된 결과를 생성하게 됩니다.

이 문제는 비교 함수 (compare function) 로 해결할 수 있습니다...

03:37

자바스크립트 불리언은 참 (true) 또는 거짓 (false) 중 하나의 값을 나타냅니다.

프로그래밍을 하다보면, 두 값중에 하나만 갖는 자료형 (a data type) 이 자주 필요로 할 것입니다.

예를 들어 , YES 나 NO, 또는 ON 이나 OFF, 아니면 TRUE 나 FALSE 같은 것입니다.

자바스크립트에서 비교 (comparisons) 와 조건 (conditions) 을 위한 수식에 불리언 값 (Boolean value) 이 기본적으로 필요합니다.

연산자 설명 예제
== 같은가 if (local == "Seoul")
> 더 큰가 if (grade > 3)
< 더 작은가 if (width < 480)

불리언 (Boolean) 에서는 "실제 존재하지 않는 값" 은 모두 false 입니다...

09:37

자바스크립트 비교 (Comparison) 및 논리 연산자 (Logical Operators) 는 true 와 false 를 판별하기 위해 사용됩니다.

비교 연산자 (comparison operators) 는 변수나 값 들이 동일한지 다른지 알아보는 논리 문 (logical statements) 에 사용됩니다.

비교 연산자 (comparison operators) 는 조건 문 (conditional statements) 에서 값을 비교하여 그 결과에 따라 실행 여부를 결정할 때 사용됩니다.

논리 연산자 (Logical operators) 는 변수 또는 값 사이의 논리를 판단하는데 사용됩니다.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

NORTHPARD SNOWCOUNTRY, iOS/Android/Web/Unity3d Developer

Hello, I'm an engineer for KORAIL, in Korea. I'm writing and managing lots of manuals for repairing KTX train over 10 years.

And I want to use English language and Programming language, therefore I'm a student of Udemy, I'm learning more than 40 courses.

I am managing a web site and making android apps for the internal purpose of our company to give useful information needed for repairing KTX trains.

Ready to start learning?
Start Learning Now