<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

'WEB > CSS' 카테고리의 다른 글

[CSS] px, pt, em, %의 크기 비교  (0) 2017.12.06
[CSS] text에 밑줄, 취소선, 윗줄 추가하기  (0) 2017.11.30
[CSS] 구글 웹폰트 사용하기  (0) 2017.11.27
[CSS] width에 padding과 margin을 포함시키기  (0) 2017.11.27
[CSS] 자간 설정  (0) 2017.11.27



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

https://fonts.google.com/


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

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


이 사이트를 참고해서 들어가면 되겠다.

간단하게 2줄 코드가 있다.
본 고딕체로 설명을 하겠다.

@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

위 소스는 css 파일 제일 위에, 아니면 <style> 시트의 제일 위에다가 넣어주면 된다.
그러면 웹폰트 사용 준비는 끝난 것이다.

그리고 원하는 태그에 font-family: 'Noto Sans KR'; 을 써주면 이제 웹폰트를 적용시킨 것이다.


'WEB > CSS' 카테고리의 다른 글

[CSS] text에 밑줄, 취소선, 윗줄 추가하기  (0) 2017.11.30
[CSS] <ul> <li>로 테이블 만들기  (0) 2017.11.27
[CSS] width에 padding과 margin을 포함시키기  (0) 2017.11.27
[CSS] 자간 설정  (0) 2017.11.27
[CSS] @font-face 사용하기  (0) 2017.11.27



<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

'WEB > HTML' 카테고리의 다른 글

[HTML] class와 id의 정의  (0) 2017.12.05
[HTML] 모바일 확대 방지  (0) 2017.11.29
[HTML] <select> 태그  (0) 2017.11.27
[HTML] <form> 태그  (0) 2017.11.27
[HTML] <input> 태그의 type 속성  (0) 2017.11.27



<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

'WEB > HTML' 카테고리의 다른 글

[HTML] 모바일 확대 방지  (0) 2017.11.29
[HTML] <table> 태그  (0) 2017.11.27
[HTML] <form> 태그  (0) 2017.11.27
[HTML] <input> 태그의 type 속성  (0) 2017.11.27
[HTML] <span> 태그  (0) 2017.11.27




<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



'WEB > HTML' 카테고리의 다른 글

[HTML] <table> 태그  (0) 2017.11.27
[HTML] <select> 태그  (0) 2017.11.27
[HTML] <input> 태그의 type 속성  (0) 2017.11.27
[HTML] <span> 태그  (0) 2017.11.27
[HTML] <p>와 <br> 태그  (0) 2017.11.27



<input> 태그에는 다양한 속성들이 있고, 그만큼 다양하게 사용하고 쓰인다.

먼저 어떤 속성이 있는지 알아보도록 하겠다.

text : 한줄로 된 입력 칸을 생성 ( 기본 가로 크기는 20px이다 )
password : 한줄로 된 password 입력 칸을 생성 ( text를 입력하게 되면 ● 표시로 뜨게 된다 )
checkbox : 체크박스 생성
radio : 동그라미 체크박스 생성
button : 버튼 생성 ( 단순히 누름 버튼 onclick을 사용해서 이동 )
submit : 전송 버튼 생성 ( form에 주로 쓰임 )
reset : 재설정 버튼 생성
file : 파일 선택 버튼 생성
hidden : 숨겨진 input 창을 생성 ( 데이터가 사용자에게 보여지지 않고 전송할 경우 사용 )
image : 이미지로 된 전송 버튼을 생성

html 5부터는 새로운 속성도 추가가 됐다.
color : 색상 선택창을 생성
time : 시간을 선택하는 창을 생성, 표준시간은 없음
week : 주와 년을 입력하는 창을 생성, 표준시간은 없음
month : 달과 년 창을 생성, 표준시간은 없음
date : 날짜 선택창을 생성 ( 년, 월, 일 )
datetime : 날짜와 시간을 선택하는 창을 생성 ( 년, 월, 일, 시, 분, 초 ) 표준 시간으로 설정
datetime-local : datetime과 동일, 하지만 표준 시간이 없음
email : 이메일 주소창을 생성
number : 숫자만 입력할 수 있는 input 생성 최소와 최대 숫자 크기 제한 가능 ( min="1" max="100" )

속성은 더 있지만 자주 사용하는 속성들은 이정도이다.
기본적으로 input을 가장 많이 사용하는 type은 text 타입이다.

여기서 속성으로 name값은 값을 받을 때 이 name 값의 이름으로 받기 때문에 페이지를 넘겨서 데이터를 받을 것이라면
name 값은 필수이다.

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


'WEB > HTML' 카테고리의 다른 글

[HTML] <select> 태그  (0) 2017.11.27
[HTML] <form> 태그  (0) 2017.11.27
[HTML] <span> 태그  (0) 2017.11.27
[HTML] <p>와 <br> 태그  (0) 2017.11.27
[HTML] <div> 태그  (0) 2017.11.27



<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>

'WEB > HTML' 카테고리의 다른 글

[HTML] <form> 태그  (0) 2017.11.27
[HTML] <input> 태그의 type 속성  (0) 2017.11.27
[HTML] <p>와 <br> 태그  (0) 2017.11.27
[HTML] <div> 태그  (0) 2017.11.27
[HTML] 오른쪽 클릭, 드래그, 선택 방지  (1) 2017.11.27



이번에는 <p> 태그와 <br> 태그에 대해서 공부 해봤다.

일반적으로 <p> 태그는 하나의 문단을 의미하고,

<br> 태그는 강제로 줄바꿈을 의미한다.

<p> 태그를 사용하면 문단으로 정의되기 때문에
<p></p>
<p></p>
사이에 어느정도 공백이 존재합니다.

<br> 태그를 사용하게 되면 강제 줄바꿈 ( Enter )가 되기 때문에
줄바꿈<br>
줄바꿈
이 된다면 사이 공백이 존재하지 않는다.

정도의 차이지만 HTML5의 웹표준으로 <br> 태그의 남용을 자제하고 있다.

<br> 태그를 사용하지 않고, 원하는 곳에서 줄바꿈 처리하는 방법
1. <p> 태그를 사용하고 style을 줘서 문단과 문단 사이의 간격을 없애도록 하자
2. <p> 태그에 고정 가로크기를 줘서 그 이상 넘어가면 자동으로 줄바꿈이 처리된다



'WEB > HTML' 카테고리의 다른 글

[HTML] <input> 태그의 type 속성  (0) 2017.11.27
[HTML] <span> 태그  (0) 2017.11.27
[HTML] <div> 태그  (0) 2017.11.27
[HTML] 오른쪽 클릭, 드래그, 선택 방지  (1) 2017.11.27
[HTML] div를 이용하여 타이틀 상단 고정, 내용만 움직이기  (0) 2017.11.27



div 태그는 분할하는 역할을 한다.

div 태그 같은 경우는 header, side-bar, main-body, footer 등등 위치를 지정하고
각각 독립된 영역을 지정해주는 엘리먼트이다.

<div> header </div>
<div> side-bar </div>
<div> main-body </div>
<div> footer</div>

라고 했을 때 각각 독립적인 영역이 지정된 것이고
css를 이용해서 스타일을 주면 된다.

div의 특징으로는 

<div> 내용</div><div> 내용</div>

이렇게 썻을때
`내용내용`
이런 식으로 출력되는 것이 아닌
내용
내용
이런 형식으로 출력이 된다.

css로 스타일을 지정해주지 않는 이상
div는 width의 전체를 차지하고, 내용이 없는 부분에는 margin으로 채워져서
내용
내용
형식으로 출력되게 되는 것이다.



'WEB > HTML' 카테고리의 다른 글

[HTML] <input> 태그의 type 속성  (0) 2017.11.27
[HTML] <span> 태그  (0) 2017.11.27
[HTML] <p>와 <br> 태그  (0) 2017.11.27
[HTML] 오른쪽 클릭, 드래그, 선택 방지  (1) 2017.11.27
[HTML] div를 이용하여 타이틀 상단 고정, 내용만 움직이기  (0) 2017.11.27



간혹 width에 padding과 margin을 사용하게 되면 width 따로 padding과 margin이 따로 적용되어서
원하는 사이즈가 나오지 않을 때가 있다.
그럴 때에는 width와 padding, margin을 합치는 css를 이용하면 된다.

box-sizing: border-box;

'WEB > CSS' 카테고리의 다른 글

[CSS] <ul> <li>로 테이블 만들기  (0) 2017.11.27
[CSS] 구글 웹폰트 사용하기  (0) 2017.11.27
[CSS] 자간 설정  (0) 2017.11.27
[CSS] @font-face 사용하기  (0) 2017.11.27
[CSS] 슬라이드하기  (0) 2017.11.27

+ Recent posts

티스토리툴바