이아임의 블로그

//css 추가
$(".class_name").css('css 속성', '변경 값');

//Class 추가 (추가는 id 값으로 체크하는 것이 좋음)
$("#id_name").addClass('추가될 클래스명')

//Class 삭제
$("#id_name").removeClass('삭제될 클래스명');

function ajax_example(idx){
    $.ajax({ 
        url: url, 
        type: "post",  // 전송할 타입
        //datatype : "JSON", // success에서 받을 타입
        data: { 
            "idx" : idx 
        }, //전송할 파라미터
        success : function(data){ 
            alert(data); 
        } 
    });
}

url='경로'; 

var $form = $('<form></form>'); 
$form.attr('action', url); 
$form.attr('method', 'post'); 
$form.appendTo('body'); 

var example_1 = $('<input type="hidden" value="" name="">'); 
var example_2 = $('<input type="hidden" value="" name="">'); 

$form.append(example_1).append(example_2);

$form.submit();

<ul>과 <li>로 테이블을 대체할수 있다.

하지만 요즘 다시 웹표준으로 <table>을 많이 사용하기 때문에 간단하게 어떻게 사용하는지
알아보고 가도록 한다.

<ul>과 <li>는 style 속성이 제일 중요하다.

div { width: 300px; border: 1px solid #000000; border-top: none; border-right: none; } 
div ul { clear: left; margin: 0; padding: 0; list-style-type: none; position: relative; border-top: 1px solid red; display: inline-block; } 
div ul li { box-sizing: border-box; width: 100px; float: left; text-align: center; margin: 0; padding: 2px 1px; position: relative; border-right: 1px solid red; }

div는 table 을 나타내고, ul은 tr로, li는 td를 나타낸다.

div의 사이즈를 정해주고 ul의 list-style-type을 none을 줘야지 ul의 특성인 ●로 뜨는 리스트를 방지할수 있다.
그리고 display: inline-block을 줌으로써 ul이 이어지게 설정을 했다.

li는 margin과 padding에 의해서 표가 깨지는걸 방지하기 위해 width에 포함시키려고 box-sizing을 사용,
float를 left를 줌으로써 list 특유의 아래로 들어가는 설정을 방지했다.

예제를 보도록 하겠다.

http://hyoseung930.cafe24.com/bolg_poster/ul_li_table_test_page.php

구글 웹폰트는 이미 만들어진 다양한 웹폰트를 제공해준다.
모두 무료이며 어디서든 어떻게든 가져다 쓸수 있다.

https://fonts.google.com/

위 사이트는 영어 전용 웹폰트를 지원해주는 사이트이다.
500개 이상의 웹폰트가 존재하며, 역시나 무료이다.

하지만 한글이 들어간 웹폰트를 찾는다면
https://fonts.google.com/earlyaccess

<table> 태그는 엑셀처럼 표로 만드는 것이다.

게시판의 글 목록이나, 글의 간단한 목록들은 거의 테이블로 작성되지만
요즘은 <ul><li> 태그로 대체되고 있는 실적이다..

<table> 태그에 기본적 하위 태그는 <thead> <tbody> <tr> <th> <td> 태그가 있다.

<thead>는 머릿말, 표의 제목을 쓰는 곳이다.
<tbody>는 몸통, 즉 내용을 뜻한다.

<tr>은 가로줄을 만드는 역할을 하는 태그이고,
<th>는 표의 제목에 들어가는 태그이고, 세로줄을 만드는 역할을 한다. (기본으로 굵은 글씨체와 중앙 정렬을 지원한다.)
<td>는 몸통에 들어가는 태그이고, 세로줄을 만드는 역할을 한다. (기본으로 기본 글씨체와 왼쪽 정렬을 지원한다.)

그 다음은 <table> 태그 속성이다.

colspan : 가로줄을 합치는 역할
rowspan : 세로줄을 합치는 역할
border : 테두리를 그려주는 역할
bgcolor : 배경색을 설정하는 역할
width : 가로 크기 지정 역할
height : 세로 크기 지정 역할
cellpadding : 셀과 경계선 사이의 여백 설정
cellspacing : 셀과 셀사이의 여백 설정
align : 가로 정렬
valign : 세로 정렬

등등이 있다.
하지만 html5에서는
width, height, cellpadding, cellspacing, align, valign, bgcolor, border 등을 지원하지 않는다.

위에 적혀있는 속성들은 css에서 설정해주는 것이 바람직하다.

이 예제는 예제 사이트에서 정확히 알아보겠다.

http://hyoseung930.cafe24.com/bolg_poster/table_test_page.php

<select></select> 태그는 클릭하면 메뉴가 나타나 선택하는 박스이다.

기본적으로 값을 선택하기 위해선 중간에 <option>이 필요하며 <option>의 value 값으로 <select> 변수 값이 정해진다.

<select>는 기본적으로 날짜중에 월이나 일만 선택하거나, 나이, 휴대폰 번호 앞자리 선택 등
다양한 곳에서 사용된다.

<select> 박스에서 value 값을 한글로 줘도 되지만 되도록이면 영어로 주도록한다.

<select name="select_box" id="select_box" onChange="change_event(this.value);"> 
<option value="number_1_data">첫번째 데이터</option> 
<option value="number_2_data">두번째 데이터</option> 
<option value="number_3_data">세번째 데이터</option> 
<option value="number_4_data">네번째 데이터</option> 
</select>

예시 페이지에서 가져온 <select>박스문의 기본이다.

<select>박스에서는 주로 onChange 이벤트를 많이 사용한다.
<option>이 변경되었을 경우 스크립트를 실행해준다는 내용이다.

this.value 일 경우 현재 <select> 박스가 선택한 <option>의 value 값을 가져간다는 뜻이다.
좀 더 정확한건 예시 페이지에서 보도록 하겠다.

http://hyoseung930.cafe24.com/bolg_poster/select_test_page.php

<form>은 게시글이나 로그인 등등 값을 post 및 get으로 넘길 때 사용되기 때문에
꼭 알아두는 것이 좋다.

기본적인 베이스는 php와 병행하면서 사용하도록 하겠다.

<form>은 다양한 속성이 있다.

<form name="text_test_form" method="post" onsubmit="return form_submit()">

가장 기본적으로 써주는 속성들이다.

name은 스크립트에서 form 값을 가져올때 사용되고, method는 무엇으로 넘겨줄지 선택하는 속성이다.
그리고 onSubmit은 스크립트에서 체크할 것을 체크하고 return 값을 다시 받아 넘겨주는 역할을 한다.

그리고 action 속성을 넣어주고 url을 입력하면 앞서 포스팅한
<input type="submit"> 속성을 클릭할 경우 url로 이동하는 역할을 한다.

만약 위 예시처럼 action을 넣어주지 않는 다면 이 페이지로 다시 로딩이 되는 것이기 때문에
페이지를 굳이 변환하지 않고 사용하려면 action을 넣어주지 않아도 된다.

PHP일 경우에는 action="<?=$PHP_SELF?>" 를 넣어줘도 form이 있는 페이지로 넘어오게 된다.

예시를 보자.

http://hyoseung930.cafe24.com/bolg_poster/form_test_page.php

<span> 태그는 <div> 태그와 같은 역할을 하지만
전혀 다른 태그이다. 그리고 <div>와 <span> 모두 레이아웃 구성을 할 때
없어서는 안될 페이지이다.

<div> 태그는 앞서 설명했듯이 가로 크기를 모두 차지하지만
<span> 태그는 문장 단위로 크기가 지정된다..
즉, 안에 내용에 따라서 <span> 태그의 크기가 지정되는 것이다.

<div>와 <span>의 사용방법을 보자면
<div>에 background-color 스타일을 주면 글을 쓴 곳의 전체의 배경색이 바뀌지만
<span>에 background-color 스타일을 주면 글자가 있는 곳의 배경색만 바뀐다.

원하는 곳에 따라 적용하는 방법이  다르니 자신이 원하는 곳에 맞춰서 쓰도록 하자.

예시

style 부분

<style type="text/css">
    body {
        background-color: #E1E1E1;
    }
    #div {
        background-color: #CCCC99;
        padding: 10px;
    }
    #span {
        background-color: #CCFFFF;
    }
</style>

body 부분

<body>
    <div id="div">
        오늘은 무슨 공부를 해보지?
        오늘은 div태그를 공부해봐야겠다.
    </div>
    <br/>
    <span id="span">
        오늘은 무슨 공부를 해보지?
        오늘은 span 태그를 공부해봐야겠다.
    </span>
</body>