편집을 취소할 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 게시해주세요.
최신판 | 당신의 편집 | ||
1번째 줄: | 1번째 줄: | ||
{{ | {{쉽게 알 수 있다 시리즈|이 문서는 정말 쉽습니다.|문서의 내용이 너무 쉬워서 오늘부터 프로그래밍 할 수 있을 것 같습니다.}} | ||
{{토막글}} | |||
=[[HTML]]= | =[[HTML]]= | ||
'''HTML'''은 모르면 간첩일 정도로 웹 페이지의 가장 기본적인 틀이자 알파이다! | '''HTML'''은 모르면 간첩일 정도로 웹 페이지의 가장 기본적인 틀이자 알파이다! | ||
==새 HTML 문서를 만들어 보자!== | ==새 HTML 문서를 만들어 보자!== | ||
{{--|HTML 4.1은 대세가 지났으니}} HTML5를 공부해보자. 우선 만만한 IDE를(...)연다. 그리고 새 | {{--|HTML 4.1은 대세가 지났으니}}HTML5를 공부해보자. 우선 만만한 IDE를(...)연다. 그리고 새 HTML문서를 만들면 | ||
< | <source lang="html5"> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
16번째 줄: | 16번째 줄: | ||
</body> | </body> | ||
</html> | </html> | ||
</ | </source> | ||
뭐 이렇게 씌여 있을 것이다. {{--|F12로 본 건 안비밀}} | 뭐 이렇게 씌여 있을 것이다. {{--|F12로 본 건 안비밀}} | ||
여기서 필요한 부분만 살펴 보자. {{--|것보다 이거 기본 뼈대 아닌가;;}} | 여기서 필요한 부분만 살펴 보자. {{--|것보다 이거 기본 뼈대 아닌가;;}} | ||
*<!DOCTYPE html> HTML5 문서라고 알려주는 것이다. {{--|4.1이 왜 대세가 지났는 지 알 수 있는 구문이다.}} 왜 알려주느냐면 쉽게 생각해서 요즘의 [[브라우저]]들은 좋다. | *<!DOCTYPE html> HTML5 문서라고 알려주는 것이다. {{--|4.1이 왜 대세가 지났는 지 알 수 있는 구문이다.}} 왜 알려주느냐면 쉽게 생각해서 요즘의 [[브라우저]]들은 좋다. pdf파일도 열고, doc파일도 연다. 그런데 html파일도 열어야 하는데 이게 pdf인지 html인지 브라우저 입장에서 알 방법이 없다. {{--|물론 우리는 알 생각도 없다.}} 이 때, 우리가 html이라고 브라우저에게 알려주는 게 바로 이 줄이다. {{--|[[만연체]]}} | ||
*<html> {{--|어... 이건 대체 왜 있는 거지...}} 물론 이렇게 html만 쓴다면 굳이 쓸 필요가 없게 만들어 두었을 것이다. 이래뵈도 개발자들은 꽤나 {{--|게으르다}}똑똑하다. html을 굳이 쓰는 이유는 | *<html> {{--|어... 이건 대체 왜 있는 거지...}} 물론 이렇게 html만 쓴다면 굳이 쓸 필요가 없게 만들어 두었을 것이다. 이래뵈도 개발자들은 꽤나 {{--|게으르다}}똑똑하다. html을 굳이 쓰는 이유는 F12를 눌러 페이지 소스 보기를 하면 html다음에 뭔가 다닥다닥(...) 붙어 있는 게 보인다. {{--|겨우}}이걸 붙이려고 html이 필요한 것이다. DOCTYPE 뒤에서 열고 끝에서 닫으면 된다. | ||
*<head> 페이지의 여러 가지 설정을 넣는 부분이다. 하면 | *<head> 페이지의 여러 가지 설정을 넣는 부분이다. 하면 할 수록 body보다 신경을 더 쓰게 되는 곳. | ||
*<meta charset="UTF-8"> {{--|문자집합 설정을 하는 곳이다.}} 쉽게 배우는 프로그래밍 입문이니까 더 쉽게 설명하자면 [[占쓱옓]]이 안 나오게 하는 곳이다. {{--|나온다면 할 수 없다.}} | *<meta charset="UTF-8"> {{--|문자집합 설정을 하는 곳이다.}} 쉽게 배우는 프로그래밍 입문이니까 더 쉽게 설명하자면 [[占쓱옓]]이 안 나오게 하는 곳이다. {{--|나온다면 할 수 없다.}} | ||
*<title> [[ | *<title> [[FrontPage]]를 가보자. 브라우저 상단에 ''리브레 위키''라고 나오는 가? {{--|물론 F12정도는 다들 켜 놓고 보고 있겠지?}} | ||
*<body> 페이지의 모양을 만드는 곳이다. 채색까지 하는 경우도 있는데, 모양만 만들자. CSS3 나뒀다 뭐 할 것인가. arst는... [[콜맥]]의 [[ㅁㄴㅇㄹ]]같은(...) 것이다. | *<body> 페이지의 모양을 만드는 곳이다. 채색까지 하는 경우도 있는데, 모양만 만들자. CSS3 나뒀다 뭐 할 것인가. arst는... [[콜맥]]의 [[ㅁㄴㅇㄹ]]같은(...) 것이다. | ||
어쨌든 이 문서를 브라우저를 통해 보면 qwfp라는 제목에 arst라고 씌여 있을 것이다. 이제 이걸 Hello, world로(...)바꾸어 보자. | 어쨌든 이 문서를 브라우저를 통해 보면 qwfp라는 제목에 arst라고 씌여 있을 것이다. 이제 이걸 Hello, world로(...)바꾸어 보자. | ||
< | <source lang="html5"> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
39번째 줄: | 39번째 줄: | ||
</body> | </body> | ||
</html> | </html> | ||
</ | </source> | ||
{{--|[[포확찢]]의 충동이 느껴진다.}} | {{--|[[포확찢]]의 충동이 느껴진다.}} | ||
50번째 줄: | 50번째 줄: | ||
다음과 같은 방법으로 어떻게 CSS가 굴러가는지 직접 두 눈으로 보면 어떤 요소가 어떤 역할을 하는거고 어떻게 써야 잘 굴러가는지, 또한 잘 설계된 디자인에서 영감을 받는 동시에 유용한 요령 몇 가지를 알아내는 데 큰 도움이 된다. | 다음과 같은 방법으로 어떻게 CSS가 굴러가는지 직접 두 눈으로 보면 어떤 요소가 어떤 역할을 하는거고 어떻게 써야 잘 굴러가는지, 또한 잘 설계된 디자인에서 영감을 받는 동시에 유용한 요령 몇 가지를 알아내는 데 큰 도움이 된다. | ||
===에디터 모드=== | ===에디터 모드=== | ||
리브레 위키 위키방이나 익명게시판의 댓글 쓰기에서 | 리브레 위키 위키방이나 익명게시판의 댓글 쓰기에서 '에디터 선택하기'를 클릭해서 '에디터 모드'로 바꾸자. 그리고 아무 글자나 친 다음에 위에 보이는 각종 버튼을 클릭하거나 기능을 이용해서 글자를 최대한 꾸며보자. | ||
그 예시로 리브레 위키 [[슬로건]] "펜을 쥔 모든 손에 권리를."을 | 그 예시로 리브레 위키 [[슬로건]] "펜을 쥔 모든 손에 권리를."을 | ||
{{인용문2|<u><em><strong><span style{{=}}"color: rgb(0, 158, 37); font-size: 16px; font-family: Verdana,Geneva,sans-serif;">펜을 쥔 모든 손에 권리를.</span></strong></em></u>}} | {{인용문2|<u><em><strong><span style{{=}}"color: rgb(0, 158, 37); font-size: 16px; font-family: Verdana,Geneva,sans-serif;">펜을 쥔 모든 손에 권리를.</span></strong></em></u>}} | ||
위와 같이 꾸민 다음에 | 위와 같이 꾸민 다음에 'HTML 편집기' 버튼을 눌러서 확인해보면 | ||
{{인용문2| | {{인용문2|<u><em><strong><span '''style="color: rgb(0, 158, 37); font-size: 16px; font-family: Verdana,Geneva,sans-serif;"'''>펜을 쥔 모든 손에 권리를.</span></strong></em></u>}} | ||
다음과 같은 HTML 코드를 확인할 수 있다. 중간에 {{Ruby|<code> | 다음과 같은 HTML 코드를 확인할 수 있다. 중간에 {{Ruby|<code><u></code>|밑줄}}, {{Ruby|<code><em></code>|글씨 기울이기}} 그리고 {{Ruby|<code><strong></code>|굵은 글씨}} 태그가 보이긴 하지만 <code><span></code>태그 안에 들어있는 저 강조된 <code>style</code>과 그 속성들을 주목하라! 이것이 우리가 배우게 될 CSS가 적용된 비교적 접하기 쉬운 예시라 할 수 있다. | ||
===요소 검사=== | ===요소 검사=== | ||
[[파일:CSSelement.png|thumb|[[파이어폭스]]에서 <code><h2></code> 태그에 요소 검사를 | [[파일:CSSelement.png|thumb|[[파이어폭스]]에서 <code><h2></code> 태그에 요소 검사를 하고있는 모습.]] | ||
하지만 위 에디터 모드에서 확인할 수 있는 CSS가 전부는 아니며, <code><style></code> 태그 또는 <code><link rel="stylesheet" href="(주소)"></code> 태그를 지원하지 않는 각 리브레 위키 문서들, 댓글란 등등을 제외하면 별로 권장하지 않는 방법이기도 하다. 따라서, 실제로 적용되는 CSS를 직접 두 눈으로 보고싶다면 원하는 사이트에서 '요소 검사'를 통해 확인해야 한다. | 하지만 위 에디터 모드에서 확인할 수 있는 CSS가 전부는 아니며, <code><style></code> 태그 또는 <code><link rel="stylesheet" href="(주소)"></code> 태그를 지원하지 않는 각 리브레 위키 문서들, 댓글란 등등을 제외하면 별로 권장하지 않는 방법이기도 하다. 따라서, 실제로 적용되는 CSS를 직접 두 눈으로 보고싶다면 원하는 사이트에서 '요소 검사'를 통해 확인해야 한다. | ||
70번째 줄: | 70번째 줄: | ||
하나의 태그에도 여러 가지의 Class를 사용할 수 있다. 서로 다른 Class를 정의할 때는 공백으로 구분해주면 된다. ID는 하나의 객체를 지칭할 때 쓰기 때문에 하나에다 ID를 여러 개 쓸 이유가 없다. ID에는 원칙적으로 공백을 넣으면 안 된다. | 하나의 태그에도 여러 가지의 Class를 사용할 수 있다. 서로 다른 Class를 정의할 때는 공백으로 구분해주면 된다. ID는 하나의 객체를 지칭할 때 쓰기 때문에 하나에다 ID를 여러 개 쓸 이유가 없다. ID에는 원칙적으로 공백을 넣으면 안 된다. | ||
< | <source lang="html5"> | ||
<div id="foo" class="bar asdf">어쩌구저쩌구</div> | <div id="foo" class="bar asdf">어쩌구저쩌구</div> | ||
</ | </source> | ||
위의 div 태그에는 foo라는 ID가 붙었고, Class로는 bar와 asdf 2개가 붙었다. | 위의 div 태그에는 foo라는 ID가 붙었고, Class로는 bar와 asdf 2개가 붙었다. | ||
80번째 줄: | 80번째 줄: | ||
==흔히 쓰이는 CSS 속성들을 알려주세요.== | ==흔히 쓰이는 CSS 속성들을 알려주세요.== | ||
=== | ===Text-align 속성=== | ||
===Display 속성=== | |||
=== | ===Margin과 Padding 속성=== | ||
===Position 속성=== | |||
===Float 속성=== | |||
=== | |||
=== | |||
=== | |||
==미디어 쿼리가 뭔가요?== | ==미디어 쿼리가 뭔가요?== | ||
=[[JavaScript]]= | =[[JavaScript]]= | ||
96번째 줄: | 90번째 줄: | ||
* 변수의 선언은 var 이라는 키워드로 하며, 변수의 자료형은 계속 변한다. | * 변수의 선언은 var 이라는 키워드로 하며, 변수의 자료형은 계속 변한다. | ||
* JavaScript의 기본적인 자료형은 수(number) , 문자열(String), 진위형(bool), 리스트(list), 객체(object)이다. | * JavaScript의 기본적인 자료형은 수(number) , 문자열(String), 진위형(bool), 리스트(list), 객체(object)이다. | ||
* '''엄격모드''' | * '''엄격모드'''가 아닐 경우 앞에서 선언하지 않았다 하더라도, 변수명에 값을 대입하면 바로 변수가 생성된다. | ||
* function이 정말 많은 역할을 한다. | * function이 정말 많은 역할을 한다. | ||
== C과 다른 JavaScript 문법 == | == C과 다른 JavaScript 문법 == | ||
=== 객체 === | === 객체 === | ||
C언어의 구조체와 흡사하다. 선언은 | C언어의 구조체와 흡사하다. 선언은 두가지 방식이 있다. | ||
==== JSON를 이용한 객체 ==== | ==== JSON를 이용한 객체 ==== | ||
< | <source lang = "javascript"> | ||
var bullet = | var bullet = | ||
{ | { | ||
114번째 줄: | 107번째 줄: | ||
} | } | ||
}; | }; | ||
</ | </source> | ||
==== function을 이용한 객체 ==== | ==== function을 이용한 객체 ==== | ||
< | <source lang="javascript"> | ||
functon Bullet(x, y, speed) | functon Bullet(x, y, speed) | ||
{ | { | ||
128번째 줄: | 121번째 줄: | ||
} | } | ||
var bullet = new Bullet(0,0,10); | var bullet = new Bullet(0,0,10); | ||
</ | </source> | ||
==[[jQuery]]== | ==[[jQuery]]== | ||
Jquery는 자바스크립트 라이브러리로 여러 브라우저의 같은 기능이지만 쓰는 방법이 다른 것들을 하나로 묶어주는 역할을 한다. | Jquery는 자바스크립트 라이브러리로 여러 브라우저의 같은 기능이지만 쓰는 방법이 다른 것들을 하나로 묶어주는 역할을 한다. | ||
또한 Jquery는 자바스크립트에서 css나 HTML태그도 쉽게 만질 수 있도록 도와준다. 이거 없으면 하기 싫을 정도로... | 또한 Jquery는 자바스크립트에서 css나 HTML태그도 쉽게 만질 수 있도록 도와준다. 이거 없으면 하기 싫을 정도로... | ||
=== 기본 사용법 === | === 기본 사용법 === | ||
==== HTML 요소의 속성을 수정해보자 ==== | ==== HTML 요소의 속성을 수정해보자 ==== | ||
다음과 같은 HTML문서가 있다고 해보자. | 다음과 같은 HTML문서가 있다고 해보자. | ||
< | <source lang="html5"> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
151번째 줄: | 142번째 줄: | ||
</body> | </body> | ||
</html> | </html> | ||
</ | </source> | ||
{{각주}} | {{각주}} | ||
{{쉽게 배우는 프로그래밍 입문}} | |||