CSS 와 JavaScript 꼭 필요한 것만 빠르게 정리하기
4.3 (84 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.
1,936 students enrolled
Wishlisted Wishlist

Please confirm that you want to add CSS 와 JavaScript 꼭 필요한 것만 빠르게 정리하기 to your Wishlist.

Add to Wishlist

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

HTML, CSS 그리고 JavaScript, 꼭 필요한 개념만 예제를 들어 빠르게 정리해 본다.
4.3 (84 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.
1,936 students enrolled
Last updated 6/2016
Korean
Price: Free
Includes:
  • 13 hours on-demand video
  • 127 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • CSS와 자바스크립트에 대해 코드를 분석할줄 안다.
View Curriculum
Requirements
  • HTML5도 다루고 있으므로, 별도의 사전지식은 없어도 됨
Description

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

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

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

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

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

Who is the target audience?
  • CSS와 자바스크립트의 기본 개념을 정리하고자 하는 사람
Students Who Viewed This Course Also Viewed
Curriculum For This Course
128 Lectures
12:47:14
+
소개
1 Lecture 01:17

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

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

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

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

i01 소개 및 brackets 설치
01:17
+
HTML (h01~h08)
8 Lectures 24:58

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

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

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

h01 HTML 기본 태그들
02:49

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

style="속성:값;"

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

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

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

h02 HTML 스타일 속성
02:48

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

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

h03 HTML 텍스트 태그들
01:56

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

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

h04 HTML 인용문 태그들
02:27

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

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

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

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

h05 HTML 프로그래밍 코드 표시
01:54

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

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

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

h06 HTML 주석달기
01:41

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

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

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

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

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

h07 HTML CSS 스타일
05:51

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

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

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

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

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

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

h08 HTML 링크
05:32
+
HTML (h11~h18)
8 Lectures 31:00

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

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

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

h11 HTML 이미지 태그
04:02

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

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

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

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

h12 HTML 도표
04:35

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

h13 HTML 리스트 태그
03:31

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

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

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

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

h14 HTML 블록 태그 및 인라인 태그
02:44

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

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

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

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

h15 HTML 반응형 웹 디자인
02:28

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

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

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

h16 HTML 헤드 태그
06:09

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

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

h17 HTML 특수문자 입력
05:48

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

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

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

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

h18 HTML 인코딩 문자 설정
01:43
+
HTML (h21~h28)
8 Lectures 36:27

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

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

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

h21 HTML URL 주소 체계
02:06

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

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

rgb(red, green, blue)

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

h22 HTML 색상
05:14

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

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

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

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

h23 HTML 자바스크립트
01:24

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

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

h24 XHTML
03:57

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

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

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

h25 HTML 폼 개요
06:46

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

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

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

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

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

h26 HTML 폼 태그
03:18

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

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

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

h27 HTML5 개요
07:11

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

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

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

h28 HTML5 태그
06:31
+
HTML (h31~h38)
8 Lectures 38:04

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

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

h31 HTML5 페이지 코딩 규칙
04:48

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

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

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

h32 HTML5 캔버스 그래픽
12:25

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

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

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

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

h33 HTML5 벡터 그래픽
06:40

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

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

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

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

h34 HTML 멀티미디어 개요
01:58

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

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

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

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

h35 HTML5 비디오
04:38

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

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

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

h36 HTML5 오디오
01:21

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

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

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

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

h37 HTML 기능확장 플러그-인
02:31

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

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

h38 HTML 유튜브 비디오 재생
03:43
+
HTML (h41~h45)
5 Lectures 39:42

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

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

h41 HTML5 지리위치 정보의 사용
17:34

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

h42 HTML5 드래그 앤 드롭
08:49

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

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

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

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

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

h43 HTML5 내부 저장 기능
04:46

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

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

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

h44 HTML5 애플리케이션 캐시
03:57

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

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

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

h45 HTML5 웹 워커 및 서버 전송 이벤트
04:36
+
CSS (c01~c08)
8 Lectures 46:08

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

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

c01 CSS 구문 및 선택자
07:30

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

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

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

c02 CSS 배경 색상 및 배경 이미지
03:19

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

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

c03 CSS 테두리 프로퍼티
02:06

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

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

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

c04 CSS 마진, 패딩
04:20

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

c05 CSS 텍스트와 폰트 프로퍼티
08:31

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

c06 CSS 링크 버튼
07:54

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

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

c07 CSS 테이블 및 목록
09:10

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

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

c08 CSS 디스플레이 프로퍼티
03:18
+
CSS (c11~c18)
8 Lectures 54:10

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

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

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

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

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

c11 CSS 포지션 프로퍼티
14:34

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

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

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

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

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

c12 CSS 플로우트와 클리어 프로퍼티
08:23

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

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

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

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

c13 CSS 플로우트와 인라인-블록의 차이
03:32

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

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

c14 CSS 수평 정렬
04:50

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

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

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

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

c15 CSS 컴비네이터
06:25

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

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

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

selector:pseudo-class {
property:value;
}

c16 CSS 가상-클래스
03:56

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

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

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

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

c17 CSS 가상-태그
04:59

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

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

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

c18 CSS 수직형 네비게이션 바
07:31
+
CSS (c21~c27)
7 Lectures 59:04

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

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

c21 CSS 수평형 네비게이션 바
10:24

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

c22 CSS 드롭다운
11:40

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

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

c23 CSS 툴팁 또는 말풍선
11:26

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

c24 CSS 반응형 이미지 갤러리
09:15

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

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

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

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

c25 CSS 이미지 투명도 조절하기
02:57

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

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

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

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

c26 CSS 이미지 스프라이트
08:06

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

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

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

c27 CSS 속성 선택자
05:16
+
CSS (c31~c32)
2 Lectures 10:23

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

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

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

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

c31 CSS 폼 태그
05:26

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

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

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

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

c32 CSS 카운터
04:57
9 More Sections
About the Instructor
NORTHPARD SNOWCOUNTRY
4.3 Average rating
84 Reviews
1,936 Students
1 Course
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 trains over 10 years.

And I want to use English language and Programming language, therefore I'm a student of udemy, and 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.