반응형
get 방식으로 값을 넘기는 경우 너무 많은 값을 넘기게 되면 전달할 수 없게 된다.
즉, 크기에 제한을 받는다.
URL 길이는 2083문자로 제한된다.
http://사이트/index.html?parameter1=값¶meter2=값2...
반응형
'html'에 해당되는 글 13건
- 2010.04.07 GET 방식으로 파라미터 길이(크기) 제한은 얼마나?
- 2009.11.02 css table 만들기 3
- 2009.11.02 css table 만들기 2
- 2009.07.25 CSS repeat에 대해서 알아보자.
- 2009.07.25 CSS 네비게이션 메뉴 만들기(세로형)
- 2009.07.25 CSS 블록레벨과 인라인?
- 2009.07.25 CSS 검색엔진에 노출하고 싶다면
- 2009.07.23 CSS line-height란?
- 2009.07.23 CSS 네비게이션 메뉴 만들기(가로형)
- 2009.07.23 CSS li 불릿, 기호,점 없애기
프로그램/php2010. 4. 7. 18:01
get 방식으로 값을 넘기는 경우 너무 많은 값을 넘기게 되면 전달할 수 없게 된다.
즉, 크기에 제한을 받는다.
URL 길이는 2083문자로 제한된다.
http://사이트/index.html?parameter1=값¶meter2=값2...
프로그램/html,css2009. 11. 2. 22:01
반응형
[table3.html]
<html>
<head>
<link rel="stylesheet" type="text/css" href="table3.css" />
</head>
<body>
<table class="boardList">
<tr>
<th class="number">번호</th>
<th class="title">제목</th>
<th class="writer">작성자</th>
<th class="date">작성일</th>
<th class="viewCnt">조회수</th>
</tr>
<tr>
<td>1</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
<tr>
<td>2</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
<tr>
<td>3</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
</table>
</body>
</html>
[table3.css]
.boardList
{
width:100%;
border-top: 1px solid #666;
border-left: 1px solid #666;
text-align:center;
border-collapse:collapse;
}
.boardList th, td
{
padding:10px;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
}
.boardList th.number {width: 53px;}
.boardList th.title {width: *;}
.boardList th.writer {width: 70px;}
.boardList th.date {width: 90px;}
.boardList th.viewCnt {width: 60px;}
[설명]
아래는 가느다란 실선 테이블을 만들기에서의 핵심이다.
1. 테이블의 맨 윗쪽선과 왼쪽선을 만드는 부분
.boardList
{
border-top: 1px solid #666;
border-left: 1px solid #666;
}
2. th, td의 오른쪽과 아래쪽 선을 만드는 부분
.boardList th, td
{
border-right: 1px solid #666;
border-bottom: 1px solid #666;
}
3. 1, 2번만 하면 선 사이의 간격(th, td)이 벌어져 있어서
간격을 붙여줘야 한다.
border-collapse:collapse;
반응형
프로그램/html,css2009. 11. 2. 21:46
반응형
[table2.htm]
<html>
<head>
<link rel="stylesheet" type="text/css" href="table2.css" />
</head>
<body>
<table class="boardList">
<tr>
<th class="number">번호</th>
<th class="title">제목</th>
<th class="writer">작성자</th>
<th class="date">작성일</th>
<th class="viewCnt">조회</th>
</tr>
<tr>
<td>1</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
<tr>
<td>2</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
<tr>
<td>3</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
</table>
</body>
</html>
[table2.css]
.boardList
{
clear: both;
table-layout: fixed;
font-size: 12px;
width: 100%;
border-collapse: collapse;
color: #ff2d88;
background-color: #fcfcfc;
text-align: center;
border-top: 2px solid #8f73d7;
border-bottom: 1px solid #ececec;
}
.boardList th
{
padding: 0;
font-weight:bold;
height:30px;
}
.boardList td
{
padding: 5px 0px 0px 0px;
font-weight:normal;
color:#333;
height:21px;
border-top:1px solid #ececec;
}
.boardList th.number {width: 53px;background: url('../images/menu_barbg.gif') right no-repeat;}
.boardList th.title {width: *;background: url('../images/menu_barbg.gif') right no-repeat;}
.boardList th.writer {width: 70px;background: url('../images/menu_barbg.gif') right no-repeat;}
.boardList th.date {width: 55px;background: url('../images/menu_barbg.gif') right no-repeat;}
.boardList th.viewCnt {width: 55px;}
반응형
프로그램/html,css2009. 7. 25. 18:16
반응형
[css-tip]CSS repeat에 대해서 알아보자.
예>
background:url(이미지 지정) repeat-x bottom;
예>처럼 배경이미지를 사용할 때 전체 화면에 지정한 이미지를 사용하고 싶으면
background:url(이미지 지정) 만 지정하면 된다.
[속성]
repeat-x => 가로로 계속 반복되어 표시가 된다.
repeat-y => 세로로 계속 반복되어 표시가 된다.
no-repeat => 한 번만 표시하고 반복하지 않는다.
bottom => 배경이미지를 화면의 하단부터 채우기 시작한다.
- bottom 대신 위치를 직접 지성할 수 있다.
: 0 50% => 배경이미지를 왼쪽 0, 위에서부터 50% 위치부터 채우기 시작한다.
예> 배경이미지를 한 번만 표시하고 왼쪽에 붙여서 세로 중앙에 위치시킨다.
background:url(이미지 지정) no-repeat 0 50%;
반응형
프로그램/html,css2009. 7. 25. 17:52
반응형
[css-tip]CSS 네비게이션 메뉴 만들기(세로형)
3개의 메뉴로 구성되어 있는 세로형 메뉴를 만들어 보자.
메뉸는 아래처럼 보여지게 된다.
[nav.htm]
<html>
<head>
<link rel="stylesheet" type="text/css" href="nav.css" />
</head>
3개의 메뉴로 구성되어 있는 세로형 메뉴를 만들어 보자.
메뉸는 아래처럼 보여지게 된다.
 |
[nav.htm]
<html>
<head>
<link rel="stylesheet" type="text/css" href="nav.css" />
</head>
<body>
<ul id="nav">
<li><a href="http://okkks.tistory.com" target="_blank">여기는</a></li>
<li><a href="http://okkks.tistory.com" target="_blank" class="active">http://okkks.tistory.com</a></li>
<li><a href="http://okkks.tistory.com" target="_blank">입니다.</a></li>
</ul>
</body>
</html>
메뉴에 주로 사용하는 ul, li 태그의 조합으로 구성을 한다.
[nav.css]
#nav
{
list-style-type:none;
}
#nav li
{
background:url(images/page_btn_next.gif) no-repeat 0 50%;
padding-left:25px;
}
#nav a
{
font-weight:bold;
font-size:12px;
text-decoration:none;
color:#7878E1;
}
#nav a.active, #nav a:hover
{
color:#00008C;
}
#nav 설명
list-style-type:none; => 블릿을 없앤다.
#nav li 설명
background:url(이미지 지정) no-repeat 0 50%;
=> 블롯을 대체할 다른 이미지 지정
no-repeat => 배경 이미지를 한 번만 출력하고 반복하지 않게 지정
0 50% => 왼쪽에서 0, 위에서부터 50%에 이미지를 위치 시킨다.(즉, 세로 중간에 위치)
보다 쉬운 방법으로 list-style-image:url(이미지 지정); 속성을 사용해 기본 불릿 이미지를 다른 이미지로 지정할 수 있다.
예>
ul
{
list-style-image:url(이미지 지정);
}
하지만, 각종 브라우저와 버전에 따라 기본 이미지 위치가 다르기 때문에 <li>엘리먼트 배경이미지로 같은 효과를 줬다.
#nav a 설명
font-weight:bold; => 굵은 글자
font-size:12px; => 글자 크기
text-decoration:none; => 글자의 꾸미기를 보통 모양으로 지정.(밑줄을 없앤다.)
color:#7878E1; => 글자 색상
#nav a.active, #nav a:hover 설명
color:#00008C; => 글자 색상
a.active
=> <a>엘리먼트(a 태그)에 class="active" 형태로 사용한다.
메뉴를 선택하면 해당 메뉴를 선택했다는 효과를 주기위해 class에서 사용할 수 있게 active 라는 이름을 직접 만들었다. 선택한 메뉴는 class="active" 를 사용하고 그렇지 않은 메뉴들은 class="" 를 사용한다.
예:선택 안한 메뉴 효과>
<li><a href="http://okkks.tistory.com" target="_blank" class="">여기는</a></li>
예:선택한 메뉴 효과>
<li><a href="http://okkks.tistory.com" target="_blank" class="active">http://okkks.tistory.com</a></li>
a:hover
=> 마우스 오버시 글자 색상
이처럼 같은 속성을 여러군데에서 사용하려면 "," 를 이용해서 설정할 수 있다.
반응형
프로그램/html,css2009. 7. 25. 12:08
반응형
CSS 블록레벨과 인라인?
HTML 엘리먼트는 블록레벨과 인라인으로 구분할 수 있다.
블록레벨 엘리먼트는 줄을 바꿔 각각 독립된 줄에 표시한다. 즉 한 줄에 이어서 표시가 되지 않고 다음 줄에 표시가 된다.
인라인 엘리먼트는 다른 인라인 엘리먼트와 같은 줄에 표시한다. 즉 한 줄에 이어서 표시가 된다.
블록레벨 엘리먼트는 블록레벨과 인라인 엘리먼트를 모두 포함할 수 있으나 인라인 일레먼트는 블록레벨 엘리먼트를 포함할 수 없다.
블록레벨 엘리먼트
<h1>~<h6>, <div>, <form> 등
인라인 엘리먼트
<strong>,<em>,<span>,<q> 등
반응형
프로그램/html,css2009. 7. 25. 00:56
반응형
CSS 포털 등에서 검색할때 자신의 사이트를 노출하고 싶다면
머리글 태그(<h1>~<h6>를 사용한다.
<h1>자신의 게시글을 검색엔진에 노출하고 싶다면</h1>
대부분의 검색엔진의 웹 로봇은 머리글 태그인 <h1> ~ <h6>의 중요도를 높게 평가하고 있기 때문에 사이트들을 돌아다니다가 <title>, <meta> 태그를 색인하고 나서 페이지 내의 머리글 태그를 색인하게 된다.
따라서, 머리글 태그를 사용하게되면 검색엔진에 노출되고 서람들이 쉽게 자신의 글을 검색할 수 있게 된다.
W3C는 머리글 순서를 건너뛰는 것은 좋지 않은 방법이라고 한다. 즉 <h1>, <h2>, ... 처럼 순서에 맞춰서 사용하지 않고 <h1>, <h3>, <h2>,... 식으로 순서를 무시하는 경우를 말한다.
반응형
프로그램/html,css2009. 7. 23. 22:22
반응형
[css-tip]CSS line-height란?
줄 간격 설정이다.
줄 간격 설정이다.
인라인 요소의 높이를 설정하는 값으로 즉 줄 간격 설정이다.
만약 블록 레벨 요소에 값을 지정한 경우에는 해당 박스에 포함될 인라인 요소 박스의 최소 높이를 지정하는 것이 된다.
설정 값은 하위 요소로 상속된다.
※ IE7과 Firefox2에서 인라인 요소에 대한 기본 높이값의 차이가 많이 나기기 때문에 상위레벨(body 등)에서 픽셀이나 포인트로 결정해 주는 것이 좋다.
normal
: 기본값. 기본 크기
크기 및 단위(px,em,pt,%) : 크기 지정 예>10px, 10em, 10pt, 10%
- 백분율(%)은 부모 요소를 기준으로 계산된다.
inherit
: 부모 요소의 값을 상속하도록 지정한다.(IE6, IE7 지원 안한다.)
기본값은 normal이며, 브라우저가 적절한 줄간격을 설정한다.
(실수값+단위 형태"로 지정할 수 있다.)
전각(em)의 경우는, 해당 글꼴의 줄 간격을 1로 간주하고 백분율(%)은 100%로 간주하고 계산된다. 즉, 상위레벨의 값을 1(em), 100(%)으로 계산하여 표현한다. 픽셀(px) 및 포인트(pt)등과 같은 값을 지정할 수도 있다. 단, 인라인 레벨의 박스 높이인 만큼 음수값을 지정할 수 없다.
반응형
프로그램/html,css2009. 7. 23. 22:16
반응형
[css-tip]CSS 네비게이션 메뉴 만들기(가로형)
3개의 메뉴로 구성되어 있는 가로형 메뉴를 만들어 보자.
메뉸는 아래처럼 보여지게 된다.
[nav.htm]
<html>
<head>
<link rel="stylesheet" type="text/css" href="nav.css" />
</head>
<body>
<ul id="nav">
<li><a href="http://okkks.tistory.com" target="_blank">여기는</a></li>
<li><a href="http://okkks.tistory.com" target="_blank" class="active">http://okkks.tistory.com</a></li>
<li><a href="http://okkks.tistory.com" target="_blank">입니다.</a></li>
</ul>
</body>
</html>
메뉴에 주로 사용하는 ul, li 태그의 조합으로 구성을 한다.
[nav.css]
#nav
{
margin:0;
padding:0;
}
#nav li
{
margin:0;
padding:0;
list-style-type:none;
display:inline;
float:left;
}
#nav a
{
line-height:14px;
font-weight:bold;
margin:0 10px 4px 10px;
text-decoration:none;
font-size:12px;
color:#9c9;
}
#nav a.active, #nav a:hover
{
color:#363;
}
#nav 설명
magin, padding => 여백을 없앤다.
#nav li 설명
margin:0;
padding:0;
=> 여백 및 들여쓰기 없앤다.
list-style-type:none =>블릿을 없앤다.
display:inline; => 리스트를 같은 줄에 표시하한다.
float:left; => 리스트를 왼쪽으로 붙여서 표시
#nav a 설명
line-height:14px; => 줄 간격 지정
font-weight:bold; => 굵은 글자
margin:0 10px 4px 10px; => 여백 간격을 조정한다.(순서대로 위,오른쪽,아래,왼쪽=시계방향)
text-decoration:none; => 글자의 꾸미기를 보통 모양으로 지정
font-size:12px; => 글자 크기
color:#9c9; => 글자 색상
#nav a.active, #nav a:hover 설명
color:#363; => 글자 색상
a.active
=> <a>엘리먼트(a 태그)에 class="active" 형태로 사용한다.
메뉴를 선택하면 해당 메뉴를 선택했다는 효과를 주기위해 class에서 사용할 수 있게 active 라는 이름을 직접 만들었다. 선택한 메뉴는 class="active" 를 사용하고 그렇지 않은 메뉴들은 class="" 를 사용한다.
예:선택 안한 메뉴 효과>
<li><a href="http://okkks.tistory.com" target="_blank" class="">여기는</a></li>
예:선택한 메뉴 효과>
<li><a href="http://okkks.tistory.com" target="_blank" class="active">http://okkks.tistory.com</a></li>
a:hover
=> 마우스 오버시 글자 색상
이처럼 같은 속성을 여러군데에서 사용하려면 "," 를 이용해서 설정할 수 있다.
반응형
프로그램/html,css2009. 7. 23. 01:06
반응형
[css-tip]CSS li 불릿, 기호,점 없애기
li 태그를 사용하게 되면 기본적으로 불릿이 생성이 된다.
예> 불릿 사용
<ul>
<li>안녕하세요.</li>
<li>http://okkks.tistory.com</li>
<li>블로그입니다.</li>
</ul>
결과>
● 안녕하세요.
● http://okkks.tistory.com
● 블로그입니다.
예> 불릿 없애기
<style>
ul{
list_style:none;
}
</style>
결과>
안녕하세요.
http://okkks.tistory.com
블로그입니다.
예> 불릿 없애기 + 들여쓰기 없애기
<style>
ul{
list_style:none;
padding-left:0px;
}
</style>
결과>
안녕하세요.
http://okkks.tistory.com
블로그입니다.
[용어]
불릿 => ●
반응형
