Well-made-plush (토론 | 기여) 편집 요약 없음 |
잔글 (봇: 자동으로 텍스트 교체 (-\{\{ *키눌림\|([^}]*)\}\} +{{키|\1}})) |
||
(사용자 17명의 중간 판 37개는 보이지 않습니다) | |||
1번째 줄: | 1번째 줄: | ||
{{쉽게 | {{:시리즈:쉽게 배우는 프로그래밍 입문}} | ||
=[[HTML]]= | =[[HTML]]= | ||
'''HTML'''은 모르면 간첩일 정도로 웹 페이지의 가장 기본적인 틀이자 알파이다! | '''HTML'''은 모르면 간첩일 정도로 웹 페이지의 가장 기본적인 틀이자 알파이다! | ||
==새 HTML 문서를 만들어 보자!== | ==새 HTML 문서를 만들어 보자!== | ||
{{--|HTML 4.1은 대세가 지났으니}} HTML5를 공부해보자. 우선 만만한 IDE를(...)연다. 그리고 새 HTML 문서를 만들면 | |||
<syntaxhighlight lang="html5"> | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>qwfp</title> | |||
</head> | |||
<body> | |||
arst | |||
</body> | |||
</html> | |||
</syntaxhighlight> | |||
뭐 이렇게 씌여 있을 것이다. {{--|F12로 본 건 안비밀}} | |||
여기서 필요한 부분만 살펴 보자. {{--|것보다 이거 기본 뼈대 아닌가;;}} | |||
*<!DOCTYPE html> HTML5 문서라고 알려주는 것이다. {{--|4.1이 왜 대세가 지났는 지 알 수 있는 구문이다.}} 왜 알려주느냐면 쉽게 생각해서 요즘의 [[브라우저]]들은 좋다. pdf 파일도 열고, doc 파일도 연다. 그런데 html 파일도 열어야 하는데 이게 pdf인지 html인지 브라우저 입장에서 알 방법이 없다. {{--|물론 우리는 알 생각도 없다.}} 이 때, 우리가 html이라고 브라우저에게 알려주는 게 바로 이 줄이다. {{--|[[만연체]]}} | |||
*<html> {{--|어... 이건 대체 왜 있는 거지...}} 물론 이렇게 html만 쓴다면 굳이 쓸 필요가 없게 만들어 두었을 것이다. 이래뵈도 개발자들은 꽤나 {{--|게으르다}}똑똑하다. html을 굳이 쓰는 이유는 {{키|F12}}를 눌러 페이지 소스 보기를 하면 html다음에 뭔가 다닥다닥(...) 붙어 있는 게 보인다. {{--|겨우}}이걸 붙이려고 html이 필요한 것이다. DOCTYPE 뒤에서 열고 끝에서 닫으면 된다. | |||
*<head> 페이지의 여러 가지 설정을 넣는 부분이다. 하면 할수록 body보다 신경을 더 쓰게 되는 곳. | |||
*<meta charset="UTF-8"> {{--|문자집합 설정을 하는 곳이다.}} 쉽게 배우는 프로그래밍 입문이니까 더 쉽게 설명하자면 [[占쓱옓]]이 안 나오게 하는 곳이다. {{--|나온다면 할 수 없다.}} | |||
*<title> [[리브레 위키:현관]]를 가보자. 브라우저 상단에 ''리브레 위키''라고 나오는 가? {{--|물론 {{키|F12}} 정도는 다들 켜 놓고 보고 있겠지?}} | |||
*<body> 페이지의 모양을 만드는 곳이다. 채색까지 하는 경우도 있는데, 모양만 만들자. CSS3 나뒀다 뭐 할 것인가. arst는... [[콜맥]]의 [[ㅁㄴㅇㄹ]]같은(...) 것이다. | |||
어쨌든 이 문서를 브라우저를 통해 보면 qwfp라는 제목에 arst라고 씌여 있을 것이다. 이제 이걸 Hello, world로(...)바꾸어 보자. | |||
<syntaxhighlight lang="html5"> | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Hello, world!!</title> | |||
</head> | |||
<body> | |||
<h1>Hello, my little PONNY!!!</h1> | |||
</body> | |||
</html> | |||
</syntaxhighlight> | |||
{{--|[[포확찢]]의 충동이 느껴진다.}} | |||
h1은 큰 제목이라고 알려주는 부분이다. 차후에 CSS에서 일반 글씨보다 더 작은 글씨로 바꾸는 변태짓(...)도 할 수 있다. | |||
=[[CSS]]= | =[[CSS]]= | ||
'''CSS'''는 HTML 언어로 미리 짜여진 페이지를 '''꾸미는 데''' 아주 유용한 언어이다. 당장 이 [[리브레 위키]]만 봐도, 아니 흔히 볼 수 있는 다른 사이트만 해도 CSS가 안 쓰이는 곳은 없다고 무방하다. | '''CSS'''는 HTML 언어로 미리 짜여진 페이지를 '''꾸미는 데''' 아주 유용한 언어이다. 당장 이 [[리브레 위키]]만 봐도, 아니 흔히 볼 수 있는 다른 사이트만 해도 CSS가 안 쓰이는 곳은 없다고 무방하다. | ||
==CSS의 기본적인 구조== | ==CSS의 기본적인 구조== | ||
==평소에 눈에 잘 안띄는 CSS 값을 밝혀 보자!== | ==평소에 눈에 잘 안띄는 CSS 값을 밝혀 보자!== | ||
다음과 같은 방법으로 어떻게 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|<nowiki><u><em><strong><span style="color: rgb(0, 158, 37); font-size: 16px; font-family: Verdana,Geneva,sans-serif;">펜을 쥔 모든 손에 권리를.</span></strong></em></u></nowiki>}} | ||
다음과 같은 HTML 코드를 확인할 수 있다. 중간에 {{Ruby|<code> | 다음과 같은 HTML 코드를 확인할 수 있다. 중간에 {{Ruby|<code><nowiki><u></nowiki></code>|밑줄}}, {{Ruby|<code><nowiki><em></nowiki></code>|글씨 기울이기}} 그리고 {{Ruby|<code><nowiki><strong></nowiki></code>|굵은 글씨}} 태그가 보이긴 하지만 <code><nowiki><span></nowiki></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를 직접 두 눈으로 보고싶다면 원하는 사이트에서 '요소 검사'를 통해 확인해야 한다. | ||
요소 검사를 하는 방법은 간단하다. 요소를 확인하고 싶은 구간에 우 클릭을 한 다음에 '요소 검사'를 클릭하면 된다. 그러면 오른쪽 아래에 있는 규칙에서 해당 태그에 어떤 CSS가 적용되었는지 알 수 있고, 또한 그것을 직접 조작해서(!) | 요소 검사를 하는 방법은 간단하다. 요소를 확인하고 싶은 구간에 우 클릭을 한 다음에 '요소 검사'를 클릭하면 된다. 그러면 오른쪽 아래에 있는 규칙에서 해당 태그에 어떤 CSS가 적용되었는지 알 수 있고, 또한 그것을 직접 조작해서(!) [[디버깅]]도 할 수 있다. 물론 현재 페이지에 CSS를 수정했다 하더라도 새로고침을 하면 다시 원래대로 돌아오니 참고하자. | ||
{{-}} | {{-}} | ||
==그래서 어떻게 HTML 문서에 CSS를 | ==그래서 어떻게 HTML 문서에 CSS를 넣는 건데요?== | ||
==ID와 Class== | |||
우선 ID와 Class의 차이를 살펴보자. ID는 HTML 문서 내에서 단 하나의 오브젝트를 지칭하는 데 쓰인다. 만약 같은 ID가 두 개 쓰이면 웹 표준에 어긋난 것이다. [http://validator.w3.org/ W3C에서 제공하는 마크업 검증 도구]에서 확인해 보면 같은 ID가 두 개 이상 쓰이면 오류가 났다고 뜰 것이다. 반면 Class의 경우 여러 개의 공통된 특성을 가진 오브젝트를 정의하는 데 쓰인다고 보면 된다. 즉 ID와 Class의 차이는 단 하나의 오브젝트를 지칭할 것인지, 여러 개의 공통된 특징을 가진 오브젝트를 묶을 때 쓸 것인지의 차이라고 보면 되겠다. | |||
하나의 태그에도 여러 가지의 Class를 사용할 수 있다. 서로 다른 Class를 정의할 때는 공백으로 구분해주면 된다. ID는 하나의 객체를 지칭할 때 쓰기 때문에 하나에다 ID를 여러 개 쓸 이유가 없다. ID에는 원칙적으로 공백을 넣으면 안 된다. | |||
<syntaxhighlight lang="html5"> | |||
<div id="foo" class="bar asdf">어쩌구저쩌구</div> | |||
</syntaxhighlight> | |||
위의 div 태그에는 foo라는 ID가 붙었고, Class로는 bar와 asdf 2개가 붙었다. | |||
CSS를 작성할 때는 ID에는 접두어로 #을, class는 접두어로 .(온점)을 쓴다. #foo, .bar, .asdf 이런 식으로 쓰면 된다. | |||
==선택자== | |||
==흔히 쓰이는 CSS 속성들을 알려주세요.== | ==흔히 쓰이는 CSS 속성들을 알려주세요.== | ||
=== | ===text-align 속성=== | ||
=== | text-align 속성은 텍스트를 정렬하는 속성입니다. left/center/right/justify 속성이 있는데, 이중 justify는 양쪽 정렬 속성입니다. | ||
=== | ===display 속성=== | ||
=== | {{빈 문단}} | ||
=== | |||
===margin과 padding 속성=== | |||
공간을 만드는 속성입니다. margin은 테두리 바깥쪽에, padding은 안쪽에 공간을 만드는데요, padding으로 공간을 내면 테두리 안쪽에 있기 때문에 공간에 배경색을 넣는 것 등이 가능합니다. px, em, rem, % 등의 단위를 사용할 수 있지만, 보통은 px로 하는 게 편합니다. margin의 경우 음수로도 지정이 가능합니다. | |||
===border 속성 === | |||
테두리를 어떻게 보이게 할지 지정하는 속성입니다. border: (굵기) (모양) (색상);으로 지정합니다. 예를 들어 border: 1px dotted gray;라고 한다면 회색의 점선을 1px의 굵기로 씌우는 것이 됩니다. | |||
===position 속성=== | |||
===float 속성=== | |||
==미디어 쿼리가 뭔가요?== | ==미디어 쿼리가 뭔가요?== | ||
=[[JavaScript]]= | =[[JavaScript]]= | ||
== 기초 문법 특징 == | |||
* 변수의 선언은 var 이라는 키워드로 하며, 변수의 자료형은 계속 변한다. | |||
* JavaScript의 기본적인 자료형은 수(number) , 문자열(String), 진위형(bool), 리스트(list), 객체(object)이다. | |||
* '''엄격모드'''<ref>제일 위에 "use strict" 줄을 추가하면 엄격모드가 적용된다.</ref>가 아닐 경우 앞에서 선언하지 않았다 하더라도, 변수명에 값을 대입하면 바로 변수가 생성된다. | |||
* function이 정말 많은 역할을 한다. | |||
== C과 다른 JavaScript 문법 == | |||
=== 객체 === | |||
C언어의 구조체와 흡사하다. 선언은 두 가지 방식이 있다. | |||
==== JSON를 이용한 객체 ==== | |||
<syntaxhighlight lang = "javascript"> | |||
var bullet = | |||
{ | |||
x:0, | |||
y:0, | |||
speed:10, | |||
getPoint:function() | |||
{ | |||
return {x:this.x , y: this.y}; | |||
} | |||
}; | |||
</syntaxhighlight> | |||
==== function을 이용한 객체 ==== | |||
<syntaxhighlight lang="javascript"> | |||
functon Bullet(x, y, speed) | |||
{ | |||
this.x = x; | |||
this.y = y; | |||
this.speed = speed; | |||
this.getPoint = function() | |||
{ | |||
return {x:this.x,y:this.y}; | |||
} | |||
} | |||
var bullet = new Bullet(0,0,10); | |||
</syntaxhighlight> | |||
==[[jQuery]]== | |||
Jquery는 자바스크립트 라이브러리로 여러 브라우저의 같은 기능이지만 쓰는 방법이 다른 것들을 하나로 묶어주는 역할을 한다. | |||
또한 Jquery는 자바스크립트에서 css나 HTML태그도 쉽게 만질 수 있도록 도와준다. 이거 없으면 하기 싫을 정도로... {{ㅊ|역으로 jQuery 안 쓰는 사람은 이거 있으면 하기 싫어한다}} | |||
=== 기본 사용법 === | |||
==== 선택자 ==== | |||
==== HTML 요소의 속성을 수정해보자 ==== | |||
다음과 같은 HTML문서가 있다고 해보자. | |||
<syntaxhighlight lang="html5"> | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="utf8"/> | |||
<title>쉽게 배우는 프로그래밍 입문</title> | |||
</head> | |||
<body> | |||
<p>프로그래밍이 너무 어려워요!</p> | |||
</body> | |||
</html> | |||
</syntaxhighlight> | |||
<!-- 뭐 이런 순서가 다 있어? --> | |||
p의 글을 바꿀 것이다. | |||
<syntaxhighlight lang="javascript"> | |||
$(document).ready(function() { | |||
$('p').click(function() { //글을 클릭하면 | |||
$('p').text('지금 당장 프로그래밍 할 수 있을 것 같습니다.'); //글을 바꾼다. | |||
}); | |||
}); | |||
</syntaxhighlight> | |||
text()를 이용하면 html 태그가 적용되지 않으므로, 태그를 적용하고 싶다면 다음과 같이 하면 된다. | |||
<syntaxhighlight lang="javascript"> | |||
$(document).ready(function() { | |||
$('p').click(function() { //글을 클릭하면 | |||
$('p').html('<del>지금 당장 프로그래밍 할 수 있을 것 같습니다.</del>'); //태그가 적용된 글로 바꾼다. | |||
}); | |||
}); | |||
</syntaxhighlight> | |||
{{각주}} | {{각주}} | ||
[[분류:프로그래밍 시리즈|웹 클라이언트 디자인]] |
2023년 8월 17일 (목) 03:49 기준 최신판
리브레 프로그래밍 시리즈 | |
---|---|
초급 프로그래밍 |
|
중급 프로그래밍 |
|
고급 프로그래밍 |
Python |
협업 |
HTML[편집 | 원본 편집]
HTML은 모르면 간첩일 정도로 웹 페이지의 가장 기본적인 틀이자 알파이다!
새 HTML 문서를 만들어 보자![편집 | 원본 편집]
HTML 4.1은 대세가 지났으니 HTML5를 공부해보자. 우선 만만한 IDE를(...)연다. 그리고 새 HTML 문서를 만들면
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>qwfp</title>
</head>
<body>
arst
</body>
</html>
뭐 이렇게 씌여 있을 것이다. F12로 본 건 안비밀
여기서 필요한 부분만 살펴 보자. 것보다 이거 기본 뼈대 아닌가;;
- <!DOCTYPE html> HTML5 문서라고 알려주는 것이다.
4.1이 왜 대세가 지났는 지 알 수 있는 구문이다.왜 알려주느냐면 쉽게 생각해서 요즘의 브라우저들은 좋다. pdf 파일도 열고, doc 파일도 연다. 그런데 html 파일도 열어야 하는데 이게 pdf인지 html인지 브라우저 입장에서 알 방법이 없다.물론 우리는 알 생각도 없다.이 때, 우리가 html이라고 브라우저에게 알려주는 게 바로 이 줄이다.만연체 - <html>
어... 이건 대체 왜 있는 거지...물론 이렇게 html만 쓴다면 굳이 쓸 필요가 없게 만들어 두었을 것이다. 이래뵈도 개발자들은 꽤나게으르다똑똑하다. html을 굳이 쓰는 이유는 F12를 눌러 페이지 소스 보기를 하면 html다음에 뭔가 다닥다닥(...) 붙어 있는 게 보인다.겨우이걸 붙이려고 html이 필요한 것이다. DOCTYPE 뒤에서 열고 끝에서 닫으면 된다. - <head> 페이지의 여러 가지 설정을 넣는 부분이다. 하면 할수록 body보다 신경을 더 쓰게 되는 곳.
- <meta charset="UTF-8">
문자집합 설정을 하는 곳이다.쉽게 배우는 프로그래밍 입문이니까 더 쉽게 설명하자면 占쓱옓이 안 나오게 하는 곳이다.나온다면 할 수 없다. - <title> 리브레 위키:현관를 가보자. 브라우저 상단에 리브레 위키라고 나오는 가?
물론 F12 정도는 다들 켜 놓고 보고 있겠지? - <body> 페이지의 모양을 만드는 곳이다. 채색까지 하는 경우도 있는데, 모양만 만들자. CSS3 나뒀다 뭐 할 것인가. arst는... 콜맥의 ㅁㄴㅇㄹ같은(...) 것이다.
어쨌든 이 문서를 브라우저를 통해 보면 qwfp라는 제목에 arst라고 씌여 있을 것이다. 이제 이걸 Hello, world로(...)바꾸어 보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello, world!!</title>
</head>
<body>
<h1>Hello, my little PONNY!!!</h1>
</body>
</html>
포확찢의 충동이 느껴진다.
h1은 큰 제목이라고 알려주는 부분이다. 차후에 CSS에서 일반 글씨보다 더 작은 글씨로 바꾸는 변태짓(...)도 할 수 있다.
CSS[편집 | 원본 편집]
CSS는 HTML 언어로 미리 짜여진 페이지를 꾸미는 데 아주 유용한 언어이다. 당장 이 리브레 위키만 봐도, 아니 흔히 볼 수 있는 다른 사이트만 해도 CSS가 안 쓰이는 곳은 없다고 무방하다.
CSS의 기본적인 구조[편집 | 원본 편집]
평소에 눈에 잘 안띄는 CSS 값을 밝혀 보자![편집 | 원본 편집]
다음과 같은 방법으로 어떻게 CSS가 굴러가는지 직접 두 눈으로 보면 어떤 요소가 어떤 역할을 하는거고 어떻게 써야 잘 굴러가는지, 또한 잘 설계된 디자인에서 영감을 받는 동시에 유용한 요령 몇 가지를 알아내는 데 큰 도움이 된다.
에디터 모드[편집 | 원본 편집]
리브레 위키 위키방이나 익명게시판의 댓글 쓰기에서 에디터 선택하기를 클릭해서 '에디터 모드'로 바꾸자. 그리고 아무 글자나 친 다음에 위에 보이는 각종 버튼을 클릭하거나 기능을 이용해서 글자를 최대한 꾸며보자.
그 예시로 리브레 위키 슬로건 "펜을 쥔 모든 손에 권리를."을
펜을 쥔 모든 손에 권리를.
위와 같이 꾸민 다음에 HTML 편집기 버튼을 눌러서 확인해보면
<u><em><strong><span style="color: rgb(0, 158, 37); font-size: 16px; font-family: Verdana,Geneva,sans-serif;">펜을 쥔 모든 손에 권리를.</span></strong></em></u>
다음과 같은 HTML 코드를 확인할 수 있다. 중간에 <u>
<em>
<strong>
<span>
태그 안에 들어 있는 저 style
과 그 속성들을 주목하라! 이것이 우리가 배우게 될 CSS가 적용된 비교적 접하기 쉬운 예시라 할 수 있다.
요소 검사[편집 | 원본 편집]
하지만 위 에디터 모드에서 확인할 수 있는 CSS가 전부는 아니며, <style>
태그 또는 <link rel="stylesheet" href="(주소)">
태그를 지원하지 않는 각 리브레 위키 문서들, 댓글란 등등을 제외하면 별로 권장하지 않는 방법이기도 하다. 따라서, 실제로 적용되는 CSS를 직접 두 눈으로 보고싶다면 원하는 사이트에서 '요소 검사'를 통해 확인해야 한다.
요소 검사를 하는 방법은 간단하다. 요소를 확인하고 싶은 구간에 우 클릭을 한 다음에 '요소 검사'를 클릭하면 된다. 그러면 오른쪽 아래에 있는 규칙에서 해당 태그에 어떤 CSS가 적용되었는지 알 수 있고, 또한 그것을 직접 조작해서(!) 디버깅도 할 수 있다. 물론 현재 페이지에 CSS를 수정했다 하더라도 새로고침을 하면 다시 원래대로 돌아오니 참고하자.
그래서 어떻게 HTML 문서에 CSS를 넣는 건데요?[편집 | 원본 편집]
ID와 Class[편집 | 원본 편집]
우선 ID와 Class의 차이를 살펴보자. ID는 HTML 문서 내에서 단 하나의 오브젝트를 지칭하는 데 쓰인다. 만약 같은 ID가 두 개 쓰이면 웹 표준에 어긋난 것이다. W3C에서 제공하는 마크업 검증 도구에서 확인해 보면 같은 ID가 두 개 이상 쓰이면 오류가 났다고 뜰 것이다. 반면 Class의 경우 여러 개의 공통된 특성을 가진 오브젝트를 정의하는 데 쓰인다고 보면 된다. 즉 ID와 Class의 차이는 단 하나의 오브젝트를 지칭할 것인지, 여러 개의 공통된 특징을 가진 오브젝트를 묶을 때 쓸 것인지의 차이라고 보면 되겠다.
하나의 태그에도 여러 가지의 Class를 사용할 수 있다. 서로 다른 Class를 정의할 때는 공백으로 구분해주면 된다. ID는 하나의 객체를 지칭할 때 쓰기 때문에 하나에다 ID를 여러 개 쓸 이유가 없다. ID에는 원칙적으로 공백을 넣으면 안 된다.
<div id="foo" class="bar asdf">어쩌구저쩌구</div>
위의 div 태그에는 foo라는 ID가 붙었고, Class로는 bar와 asdf 2개가 붙었다.
CSS를 작성할 때는 ID에는 접두어로 #을, class는 접두어로 .(온점)을 쓴다. #foo, .bar, .asdf 이런 식으로 쓰면 된다.
선택자[편집 | 원본 편집]
흔히 쓰이는 CSS 속성들을 알려주세요.[편집 | 원본 편집]
text-align 속성[편집 | 원본 편집]
text-align 속성은 텍스트를 정렬하는 속성입니다. left/center/right/justify 속성이 있는데, 이중 justify는 양쪽 정렬 속성입니다.
display 속성[편집 | 원본 편집]
margin과 padding 속성[편집 | 원본 편집]
공간을 만드는 속성입니다. margin은 테두리 바깥쪽에, padding은 안쪽에 공간을 만드는데요, padding으로 공간을 내면 테두리 안쪽에 있기 때문에 공간에 배경색을 넣는 것 등이 가능합니다. px, em, rem, % 등의 단위를 사용할 수 있지만, 보통은 px로 하는 게 편합니다. margin의 경우 음수로도 지정이 가능합니다.
border 속성[편집 | 원본 편집]
테두리를 어떻게 보이게 할지 지정하는 속성입니다. border: (굵기) (모양) (색상);으로 지정합니다. 예를 들어 border: 1px dotted gray;라고 한다면 회색의 점선을 1px의 굵기로 씌우는 것이 됩니다.
position 속성[편집 | 원본 편집]
float 속성[편집 | 원본 편집]
미디어 쿼리가 뭔가요?[편집 | 원본 편집]
JavaScript[편집 | 원본 편집]
기초 문법 특징[편집 | 원본 편집]
- 변수의 선언은 var 이라는 키워드로 하며, 변수의 자료형은 계속 변한다.
- JavaScript의 기본적인 자료형은 수(number) , 문자열(String), 진위형(bool), 리스트(list), 객체(object)이다.
- 엄격모드[1]가 아닐 경우 앞에서 선언하지 않았다 하더라도, 변수명에 값을 대입하면 바로 변수가 생성된다.
- function이 정말 많은 역할을 한다.
C과 다른 JavaScript 문법[편집 | 원본 편집]
객체[편집 | 원본 편집]
C언어의 구조체와 흡사하다. 선언은 두 가지 방식이 있다.
JSON를 이용한 객체[편집 | 원본 편집]
var bullet =
{
x:0,
y:0,
speed:10,
getPoint:function()
{
return {x:this.x , y: this.y};
}
};
function을 이용한 객체[편집 | 원본 편집]
functon Bullet(x, y, speed)
{
this.x = x;
this.y = y;
this.speed = speed;
this.getPoint = function()
{
return {x:this.x,y:this.y};
}
}
var bullet = new Bullet(0,0,10);
jQuery[편집 | 원본 편집]
Jquery는 자바스크립트 라이브러리로 여러 브라우저의 같은 기능이지만 쓰는 방법이 다른 것들을 하나로 묶어주는 역할을 한다.
또한 Jquery는 자바스크립트에서 css나 HTML태그도 쉽게 만질 수 있도록 도와준다. 이거 없으면 하기 싫을 정도로... 역으로 jQuery 안 쓰는 사람은 이거 있으면 하기 싫어한다
기본 사용법[편집 | 원본 편집]
선택자[편집 | 원본 편집]
HTML 요소의 속성을 수정해보자[편집 | 원본 편집]
다음과 같은 HTML문서가 있다고 해보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
<title>쉽게 배우는 프로그래밍 입문</title>
</head>
<body>
<p>프로그래밍이 너무 어려워요!</p>
</body>
</html>
p의 글을 바꿀 것이다.
$(document).ready(function() {
$('p').click(function() { //글을 클릭하면
$('p').text('지금 당장 프로그래밍 할 수 있을 것 같습니다.'); //글을 바꾼다.
});
});
text()를 이용하면 html 태그가 적용되지 않으므로, 태그를 적용하고 싶다면 다음과 같이 하면 된다.
$(document).ready(function() {
$('p').click(function() { //글을 클릭하면
$('p').html('<del>지금 당장 프로그래밍 할 수 있을 것 같습니다.</del>'); //태그가 적용된 글로 바꾼다.
});
});
각주
- ↑ 제일 위에 "use strict" 줄을 추가하면 엄격모드가 적용된다.