이 문서는 정말 쉽습니다.

문서의 내용이 너무 쉬워서 오늘부터 프로그래밍 할 수 있을 것 같습니다.

이 문서는 쉽게 알 수 있다 시리즈이며, 집단연구 문서입니다.

이 문서에는 독자적으로 연구한 내용이 들어갑니다. 다른 사람의 의견을 존중하면서 무례하지 않도록 작성해 주시고, 의견 충돌 시 토론 문서에서 토론해 주세요.

틀:토막글

틀:중급 프로그래밍 항목

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 편집기' 버튼을 눌러서 확인해보면

펜을 쥔 모든 손에 권리를.

다음과 같은 HTML 코드를 확인할 수 있다. 중간에 (밑줄), (글씨 기울이기) 그리고 (굵은 글씨) 태그가 보이긴 하지만 태그 안에 들어 있는 저 style과 그 속성들을 주목하라! 이것이 우리가 배우게 될 CSS가 적용된 비교적 접하기 쉬운 예시라 할 수 있다.

요소 검사

파이어폭스에서 <h2> 태그에 요소 검사를 하고 있는 모습.

하지만 위 에디터 모드에서 확인할 수 있는 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" 줄을 추가하면 엄격모드가 적용된다.

[1] 제일 위에 "use strict" 줄을 추가하면 엄격모드가 적용된다.

[1]

시리즈:중급 프로그래밍 시리즈/웹 클라이언트 디자인

목차