'html'에 해당되는 글 33건

Programming/.NET
현재 ASP.NET 에서는 일반적인 서버 컨트롤 이외에 다음과 같이 HTML 요소도 사용할 수 있습니다.


다만 위 요소는 단순한 HTML 요소일뿐 서버측에서 다룰 수 있는 컨트롤이 아닙니다. 만약 이들 요소를 서버컨트롤로서 사용하려면 <코드 1-1>처럼 기본 HTML 요소에 runat="server" 속성을 추가하기만 하면 됩니다.
<input id="Text1" type="text" runat="server" />
HTML 서버 컨트롤은 기본적으로 HtmlControl 에서 파생된 것이며 이 클래스는 기본적으로 다음과 같은 속성을 제공하고 있습니다.

 Attributes  Text1.Attributes["value"] = "abc"; 와 같이 사용하며 HTML 서버 컨트롤에 HTML 특유의 속성과 값을 부여할 수 있습니다.
 Disabled  HTML 컨트롤의 사용가능 여부를 지정합니다.
 EnableTheming  테마기능 사용 여부를 지정합니다.
 EnableViewState  페이지뷰 사용 여부를 지정합니다.
 id  HTML 컨트롤의 식별자를 지정합니다.
 Page  해당 HTML 컨트롤의 페이지를 확인합니다.
 Parent  해당 HTML 컨트롤의 부모 컨트롤을 확인합니다.
 SkinID  EnableTheming 을 true 로 설정한 경우 테마를 사용할 스킨을 지정합니다.
 Style  CSS 스타일을 지정합니다.
 TagName  해당 HTML 컨트롤의 Tag 이름을 가져옵니다. 예를 들어 <코드 1-1>의 경우에는 input 을 반환합니다.
 Visible  해당 HTML 컨트롤을 숨길지 지정합니다.

따라서 해당 클래스에서 상속받은 모든 HTML 서버 컨트롤은 위 속성에 대한 접근및 활용이 가능합니다. 또한 ASP.NET 에서는 HTML 컨트롤을 다루기 위한 다음 클래스들을 제공하고 있습니다.

 클래스  대응 요소
 HtmlAnchor  <a>
 HtmlButton  <button>
 HtmlForm  <form>
 HtmlHead  <head>
 HtmlImage  <img>
 HtmlInputButton  <input type="button">
 HtmlInputCheckBox  <input type="checkbox">
 HtmlInputFile  <input type="file>
 HtmlInputHidden  <input type="hidden">
 HtmlInputImage  <input type="image">
 HtmlInputPassword  <input type="password">
 HtmlInputRadioButton  <input type="radio">
 HtmlInputReset  <input type="reset">
 HtmlInputSubmit  <input type="submit">
 HtmlInputText  <input type="text">
 HtmlLink  <link>
 HtmlMeta  <meta>
 HtmlSelect  <select>
 HtmlTable  <table>
 HtmlTableCell  <td>
 HtmlTableRow  <tr>
 HtmlTextArea  <textarea>
 HtmlTitle  <title>
<div id="div_main" runat="server">
</div>
HtmlAnchor ha = new HtmlAnchor();
ha.Attributes["href"] = "http://cliel.com/";
ha.InnerText = "클리엘";

div_main.Controls.Add(ha);

'Programming > .NET' 카테고리의 다른 글

[ASP.NET] 테마 (Theme) 2 - 테마적용하기  (0) 2014.02.28
[ASP.NET] PlaceHolder  (0) 2014.02.27
[ASP.NET] HtmlControl  (0) 2014.02.26
[ASP.NET] 테마 (Theme) 1 - 테마구성(제작)하기  (0) 2014.02.25
[ASP.NET] HtmlContainerControl  (0) 2014.02.24
[ASP.NET] RangeValidator  (0) 2014.02.21
0 0
Programming/HTML CSS
스프라이트(sprite) 이미지(image)란 아래의 경우처럼 여러 이미지(image)를 한곳에 모아놓은 형태를 말합니다.

▶ 마리오(mario) 관련 스프라이트(sprite)

웹(web)에서 불러와야 하는 이미지(image)가 여러개인 경우 그 만큼의 요청을 해야 하지만 스프라이트(sprite) 이미지(image)를 사용하면 한번 요청으로 여러 이미지(image)를 한번에 받아오는 이점을 갖게 됩니다.

포토샵(photoshop) 등의 툴(tool)등을 사용하여 직접 스프라이트(sprite)를 만들 수도 있으나 아래와 같은 사이트(site)를 이용하면 간단하게 스프라이트(sprite)를 생성할 수 있습니다.

http://csssprites.com/

예제에서는 세개의 이미지(image)를 사용하여 아래와 같은 스프라이트(sprite)를 생성하였습니다.


스프라이트(sprite)가 생성되면 다음과 같이 생성된 스프라이트(sprite) 이미지(image)를 어떻게 사용할 수 있는지에 대한 css 코드(code)도 함께 보여집니다.


해당 css를 참고하여 html을 구성하면 다음과 같이 할 수 있을 것입니다.

#main_div {
   width: 206px;
   height: 50px;
   background: url('result.png');
}
▶CSS
<div id="main_div">
</div>
▶HTML

각각의 버튼모양을 따로 표시하려면 background-position 속성을 사용합니다.
#main_div_1 {
   width: 64px;
   height: 64px;
   background: url('result.png');
   background-position: 0px, 0px;
}

#main_div_2 {
   width: 64px;
   height: 64px;
   background: url('result.png');
   background-position: -74px, 0px;
}

#main_div_3 {
   width: 64px;
   height: 64px;
   background: url('result.png');
   background-position: -132px, 0px;
}
▶CSS
<div id="main_div_1">
</div>
<br />
<div id="main_div_2">
</div>
<br />
<div id="main_div_3">
</div>
▶HTML
0 0
Programming/HTML CSS
viewport meta 태그는 모바일 웹페이지 작성시 화면에 대한 특정 정보를 전달하기 위해 사용됩니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maxium-scale=1.0, minimum-scale=1.0, user-scalable=no" />
다음은 content 내부에 작성되는 주요속성입니다.

 width  화면의 넓이를 의미하며 150, 200과 같은 값을 지정할 수 있습니다. 다만 값을 device-width로 하면 모바일 장치의 화면 넓이를 따라가게 됩니다.
 height  화면의 높이를 의미하며 150, 200과 같은 값을 지정할 수 있습니다. 다만 값을 device-height로 하면 모바일 장치의 화면 높이를 따라가게 됩니다.
 initial-scale  화면의 초기 확대비율을 지정합니다.
 user-scaleble  사용자가 화면을 확대할 수 있는지 여부를 지정합니다.
 minimum-scale  화면을 축소할때 최소축소치입니다.
 maximum-scale  화면을 확대할때 최대확대치입니다.

● 안드로이드 뷰포트 정보

http://developer.android.com/guide/webapps/targeting.html

● 사파리 뷰포트 정보

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safarihtmlref/Articles/MetaTags.html

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 고정바(bar) 생성  (1) 2013.08.27
[CSS3] 글자 생략하기  (0) 2013.08.21
[HTML] viewport meta  (0) 2013.08.20
[CSS] 웹폰트(Web font)  (0) 2013.08.19
[CSS3] 초기화 코드 사이트  (0) 2013.07.01
[HTML5] track (video 자막)  (0) 2013.06.28
0 0
Programming/HTML CSS
1. base 사용
<head>
<title>html sample</title>
<base href="http://(절대경로주소)">
</head>

<body>
<a href="문서이름">연결</a>
</body>
▶ base에 절대경로를 지정해 두면 해당 문서안에 다른 페이지로의 링크가 걸리는 경우 base로 지정된 경로가 자동으로 지정됩니다.

2. base 속성

(1) href

문서가 연결될 절대 URL 주소를 지정합니다.

(2) target

링크된 화면을 어디에 표시할지를 지정하는 속성입니다. _blank(새창), _self(현재창), _parent(부모frame), _top(frame전체) 값을 설정할 수 있습니다.

_parent는 현재 화면이 frame으로 구성되어 있을 경우 부모frame에 화면을 표시하며 _top은 frame으로 구성된 화면에서 이 frame을 무시하고 화면 전체로 링크된 화면을 표시하도록 합니다.

화면이 frame으로 구성되어 있다면 target 속성에 frame의 이름을 값으로 지정하여 해당 frame에 링크화면을 표시할 수도 있습니다. 예를 들어 특정 frame의 name속성이 view1 이라는 이름으로 지정되어 있다면 target 속성을 view1로 하여 view1이라는 이름을 가진 frame영역에 링크된 화면을 표시하도록 합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML5] track (video 자막)  (0) 2013.06.28
[CSS3] 선택자 - 상태 선택  (0) 2013.06.24
[HTML] base  (0) 2013.06.20
[CSS3] linear-gradient  (0) 2013.06.19
[CSS3] 선택자 - 자손 선택  (0) 2013.06.17
[HTML / HTML5] label  (0) 2013.06.13
0 0
Programming/HTML CSS
1. label 사용
<form>
 <label for="user_name">이름을 입력하세요.</label>
 <input type="text" id="user_name" name="user_name" />
 <input type="submit" value="전송" />
</form>
▶ input 태그로 데이터를 입력받을 때 해당 input 태그에 대한 설명을 label태그를 통해 붙여줍니다.

2. label 속성

(1) for

어떤 input 요소를 대상으로 하는지를 알려주기 위해 해당 input의 id를 지정합니다. 이렇게 하면 사용자가 label을 클릭하는등의 선택동작만으로 해당 input에 포커스를 자동으로 맞춰줄 수 있습니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] linear-gradient  (0) 2013.06.19
[CSS3] 선택자 - 자손 선택  (0) 2013.06.17
[HTML / HTML5] label  (0) 2013.06.13
[HTML5] header, nav, aside, section, article, footer (구조태그)  (0) 2013.06.12
[CSS3] display  (0) 2013.06.11
[CSS3] 선택자 - 태그 선택  (0) 2013.06.10
0 0
Programming/HTML CSS
1. frameset, frame 사용
<frameset cols="30%, 70%">
 <frame src="http://www.daum.net/" name="site1">
 
 <frameset rows="50%, 50%">
  <frame src="http://lab.cliel.com/">
  <frame src="http://cloud.cliel.com/">
 </frameset>
</frameset>
▶ frame은 하나의 화면에서 여러 웹페이지를 보여줄 수 있도록 화면을 분할합니다. frameset안에 frame이 들어가 화면을 구성하며 frameset안에 또다른 frameset이 들어가 분할된 화면을 다시 나눌 수 있습니다.

2. frameset, frame 속성

(1) cols

frameset 속성이며 화면을 좌우로 나눕니다. 30%, 70%와 같이 ,(콤마)로 나누어 값을 지정하며 값의 단위는 px나 %를 사용합니다. 값대신 *을 지정하면 나머지를 의미하는데 예를 들어 30%, * 처럼 지정하면 왼쪽 화면은 30%비율로, 오른쪽 화면은 그 나머지 전체를 의미하게 됩니다.

(2) rows

frameset 속성이며 화면을 상하로 나누는 속성입니다. 값의 지정과 단위는 cols와 같습니다.

(3) frameborder

frameset 속성이며 frame의 테두리를 표시할지 지정합니다. 0은 표시하지 않으며 1은 표시하도록 합니다.

(4) src

frame 속성이며 해당 frame에 표시할 웹페이지 이름이나 url주소를 지정합니다.

(5) name

frame 속성이며 frame의 이름을 지정합니다.

(6) bordercolor

frameset 속성이며 frameset의 테두리 색상을 지정합니다.

(7) scrolling

frame 속성이며 frame안에 스크롤바를 표시할지 지정합니다. yes면 표시, no면 표시하지 않습니다. auto로 설정하면 표시할 영역이 화면보다 넘칠경우 스크롤바를 표시하고 그렇지 않으면 표시하지 않습니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] display  (0) 2013.06.11
[CSS3] 선택자 - 태그 선택  (0) 2013.06.10
[HTML] frameset, frame  (2) 2013.06.07
[CSS3] 선택자 - 속성 선택  (0) 2013.06.04
[CSS3] 선택자 - 후손 선택  (0) 2013.06.03
[CSS3] visibility  (0) 2013.05.29
2 0
Programming/HTML CSS
 1. span 사용
안녕하세요.
<span>우리나라</span>
<span>대한민국</span>
반갑습니다.
▶ inline 형태로 위치하도록 합니다. 이는 화면 특정 너비 전체가 아닌 해당 영역만큼의 공간만 차지함을 의미합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 후손 선택  (0) 2013.06.03
[CSS3] visibility  (0) 2013.05.29
[HTML / HTML5] span  (0) 2013.05.28
[CSS3] 선택자 - 부정 선택  (0) 2013.05.23
[CSS3] 선택자 - 구조 선택  (0) 2013.05.22
[HTML5] video (비디오)  (0) 2013.05.20
0 0
Programming/HTML CSS
1. div 사용
안녕하세요.
<div>우리나라</div>
<div>대한민국</div>
반갑습니다.
▶ block 형태로 특정 영역을 나누도록 합니다. 하나의 div 영역이 가로영역을 기준으로 전체를 차지하는 형태입니다.


2. div CSS

(1) width, height

div의 넓이와 높이에 대한 크기를 설정합니다.

(2) margin, padding

padding은 border보다 한단계 더 안쪽에 대한 여백을 지정하며 padding-top(위쪽), padding-bottom(아래쪽), padding-left(왼쪽), padding-right(오른쪽) 속성을 사용합니다.

margin은 가장 외곽에 대한 속성이며 여백을 지정합니다. margin-top은 위쪽, margin-bottom은 아래쪽, margin-right는 오른쪽, margin-left는 왼쪽여백을 의미합니다.

위 두 속성은 margin-bottom, margin-left, margin-right, margin-top 처럼 속성을 지정해 각각의 면에 대한 크기를 지정할 수 있으며 만약 값을 margin: 10px 10px 10px 10px; 처럼 크기를 지정하면 왼쪽부터 top, right, bottom, left 로 적용됩니다. 또는 margin: 10px 10px; 로 두개의 값만을 사용하면 첫번째 값은 top, bottom으로 두번째 값은 left, right로 적용됩니다.

(3) box-sizing

이 속성의 값을 content-box로 지정하면 margin이나 border, padding와 같은 속성을 제외하고 width와 height속성의 값이 내부의 크기만을 지정하도록 합니다. 이 값은 기본값입니다.

반면 border-box로 지정하면 div의 크기에 margin, border, padding까지 모두 합산하여 width와 height 값이 적용되도록 합니다.

(4) box-shadow

박스에 그림자 효과를 주는 속성이며 아래와 같이 속성을 지정합니다.
text-shadow: 5px 3px 10px black;
첫번째 값은 오른쪽에 퍼질 그림자의 크기를 두번째는 아래쪽에 퍼질 그림자의 크기를 의미합니다. 세번째는 그림자의 선명도를 나타내며 마지막 네번째는 그림자의 색상입니다.

만일 여러 색상의 그림자를 동시에 구현하고자 한다면 위의 속성지정을 ,(콤마)를 사용해 원하는 만큼 여러번 작성하면 됩니다.
text-shadow: 5px 5px 10px black, 5px 5px 10px red;
(5) border

이 외에도 border로 시작하는 테두리 관련 CSS속성을 사용할 수도 있습니다. 이 속성은 아래 페이지에서

2013/03/28 - [Programming/HTML/CSS] - [HTML / HTML5 / CSS] table, caption, colgroup, thead, tr, th, td

[4. table, caption, tr, th, td CSS 속성] 부분의 6번을 참고해 주시기 바랍니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] opacity  (0) 2013.05.15
[CSS3] 선택자 - 링크 선택  (0) 2013.05.14
[HTML / HTML5] div  (0) 2013.05.13
[CSS3] 선택자 - 문자 선택  (0) 2013.05.09
[HTML / HTML5] fieldset, legend  (0) 2013.05.07
[CSS3] 선택자 - 동위 선택  (0) 2013.05.06
0 0
Programming/HTML CSS
1. fieldset, legend 사용
<fieldset>
 <legend>회원정보</legend>
 이름 : 홍길동<br />
 나이 : 100<br /><br />
 <input type="button" value="확인" />
</fieldset>
▶ 특정 내용을 group box로 묶어 표시합니다. legend는 filedset으로 생성된 group box의 제목을 표시하는 것으로 생략이 가능합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML / HTML5] div  (0) 2013.05.13
[CSS3] 선택자 - 문자 선택  (0) 2013.05.09
[HTML / HTML5] fieldset, legend  (0) 2013.05.07
[CSS3] 선택자 - 동위 선택  (0) 2013.05.06
[CSS] z-index, top, left, zoom, float  (0) 2013.05.01
[CSS3] 선택자 - 반응 선택  (0) 2013.04.29
0 0
Programming/HTML CSS
1. CSS z-index, top, left, zoom, float 사용
.css_img {
 position: relative;

 top:10px;
 left:10px;

 height:100px;
 width:100px;
}

.css_div {
 position: absolute;

 top:10px;
 left:50px;
}
▶CSS 정의 - img에서 지정한 이미지의 위치를 위쪽에서 10px, 왼쪽에서 10px 떨어진 지점에 배치합니다.
<img class="css_img" src="sample.jpg">
<div class="css_div">CLIEL</div>
▶CSS 적용 - div 위치를 위쪽에서 10px, 왼쪽에서 50px 떨어진 지점에 배치합니다.

2. CSS z-index, top, left, zoom, float 속성

(1) z-index

요소가 겹쳐서 배치될때 배치되는 순서를 지정합니다. 정수로 지정하며 숫자가 높을 수록 위로 올라오게 됩니다.

(2) position

위치와 관련된 속성을 설정합니다. 이 속성의 값을 absolute로 설정하면 top과 left 속성에 지정된 좌표값(절대값)에 해당하는 위치에 요소가 배치되도록 합니다.

(3) top

요소가 배치되는 세로위치를 지정합니다. 단위로는 in(인치), cm(센치미터), mm(밀리미터), pt(포인터), pc(피카스) 단위를 사용하며 em(배수, 1.5 = 150%), ex(em대비 1/2크기), px(픽셀), %(%단위)등의 상대적 단위크기를 사용하기도 합니다.

(4) left

요소가 배치되는 가로위치를 지정합니다. 단위는 top과 같습니다.

(5) zoom

요소가 배치될때 확대비율을 지정합니다. 1이면 100%를 1.5면 150%를 의미하며 100%, 150%의 단위를 사용하여 지정할 수도 있습니다.

(6) float

텍스트와 함께 배치되는 경우의 표시위치를 지정합니다. left(왼쪽), right(오른쪽) 값을 사용할 수 있으며 none(적용없음)을 지정할 수도 있습니다. none는 기본값입니다.

본래 이 속성은 이미지에만 사용하는 것을 기본으로 하지만 필요에 따라 div등 화면의 레이아웃을 구성하기 위한 다른 태그에도 적용이 가능합니다.

(7) overflow

부모 요소안에 자식요소의 배치가 포함되어 있는 경우 자식 요소가 부모요소의 범위를 벗어날때 어떻게 처리되느냐를 지정하는 속성입니다.

이 속성값을 hidden으로 하는 경우 안에 포함된 자식 요소가 범위를 벗어나면 벗어나는 부분을 숨기게 되고 scroll 로 지정하면 벗어나는 부분을 표시하되 그 영역이 브라우저 화면을 넘으면 스크롤을 생성하게 됩니다.

이 속성은 부모 요소에 적용해야 합니다.
0 0
Programming/HTML CSS
1. CSS vertical-align 사용
.va {
 vertical-align:super;
}
▶ CSS 정의
<span class="va" style="font-size:30px;">대한민국</span>우리나라
▶ CSS 적용

2. CSS vertical-align 속성

(1) vertical-align

같은 라인에 서로다른 크기와 글꼴의 글자가 사용된 경우 혹은 이미지와 글자가 같이 사용된 경우에 대한 정렬방식을 지정합니다.

이 속성에는 baseline(기본정렬), sub(아래첨자형태), super(윗첨자형태), middle(가운데) 값을 사용합니다. 다만 이미지와 같은 라인에 있는 경우 텍스트 부분을 위로 올리려면 text-top 혹은 top를 사용하고 아래로 내리려면 text-bottom 혹은 bottom 값을 사용합니다.
0 0
Programming/HTML CSS
1. form, input, select, textarea 사용
<form>
이름 : <input type="input"> <br />
주소 :
<select>
  <optgroup label="컴퓨터">
   <option>CPU</option>
   <option>Memory</option>
   <option>HardDisk</option>
  </optgroup>
  <optgroup label="자동차">
   <option>트럭</option>
   <option>승용차</option>
  </optgroup>
 </select> <br />
자기소개 :
<textarea>안녕하세요.</textarea>
▶ 사용자에게 어떠한 입력을 받아들이기 위해 입력양식을 작성하며 form은 입력양식의 전체적인 부분을, input는 실질적으로 데이터입력을 받아들이는 역활을 합니다. 이때 form은 내부에 포함된 input에 입력사항을 지정된 곳으로 전송하도록 합니다.

select는 option태그로 항목을 추가하며 해당 항목이 콤보박스 형태로 표시되도록 합니다. optgroup 태그를 select 태그 내부에 사용하면 특정 항목을 group으로 나눌 수 있습니다. 다만 group으로 나눌 필요가 없는 경우에는 optgroup태그는 생략될 수 있습니다.

textarea는 여러줄의 텍스트 입력을 가능하게 합니다. 미리 어떠한 내용을 보이게 하려면 textarea내부에 원하는 내용을 입력하고, 그렇지 않으면 비워두면 됩니다.

textarea 태그는 특별한 경우가 위 예제와 같이 사용하고 아래 처럼은 쓰지 않는 것이 좋습니다. 원하는 방식대로 출력되지 않을 수 있기 때문입니다.
<textarea>
    안녕하세요.
    반갑습니다.
</textarea>
2. form, input, select, textarea 속성

(1) form 속성

 action  입력된 데이터를 처리하는 페이지를 지정합니다.
 enctype  action 속성에 설정된 페이지에 데이터를 보낼때의 휴형을 지정합니다. application/x-www-form-urlencoded 는 기본값이며 데이터를 encode합니다. multipart/form-data 값은 파일을 업로드하고자 하는 경우에 사용하며 text/plain은 공백을 +로 바꿀뿐 특수문자를 endcode하지 않습니다.
 name  form의 이름을 지정합니다.
 method  get과 post 두가지를 지정할 수 있는데 기본값은 get입니다. 대게는 post가 많이 사용되며 get으로 지정하면 'http://action주소?user_name=입력값' 형태로 주소뒤에 값을 붙여 전송하게 됩니다.
 target  target 에 action 속성과 같이 페이지를 지정하면 action 속성에 지정된 페이지로 데이터를 보낸 후 target에 지정된 페이지로 이동하게 됩니다. 대게는 action에서 데이터를 처리하고 결과를 target에서 보는 것으로 사용됩니다.

(2) input 속성

 type  input 이 어떤 형태로 데이터를 받아들일지 지정하며 사용할 수 있는 값은 별도의 표에 정리하였습니다.
 name  input 의 이름을 지정합니다.
 value  표시될 기본값을 지정하거나 form의 action에 데이터를 전송할때 실질적으로 전송되어야 하는 데이터를 지정합니다. 예를 들어 "<input type="checkbox" value="1">서울" 과 같이 사용된 경우 해당 input을 선택했을때 전달되는 데이터는 '서울'이 아니라 1이 됩니다.
 size  숫자로만 지정하며 type의 값이 text나 password인 경우 입력될 수 있는 최대문자열 길이를 지정합니다.

아래는 input 태그의 type에 일반적으로 사용되는 내용입니다.

 button  버튼
 checkbox  체크박스
 file  파일 업로드
 hidden  요소 숨김
 image  이미지 버튼
 password  비밀번호 입력
 radio  라디오 버튼
 reset  초기화 버튼
 submit  전송 버튼(입력완료 후)
 text  문자열 입력

아래 값은 HTML5 에서 새롭게 적용된 내용이며 일부 오페라를 제외한 일부 브라우저에서는 제대로 표현되지 않을 수 있습니다.

 color  색상 입력
 date  일 입력
 datetime  날짜 입력
 datetime-local  지역 선택
 email  이메일 입력
 month  월 입력
 number  숫자입력
 range  범위값 입력
 search  검색어 입력
 tel  전화번호 입력
 time  시간 입력
 url  url 입력
 week  주단위 입력

(3) select (optgroup, option) 속성

 name  select 의 이름을 지정합니다.
 value  option에 사용되는 속성으로서 form의 action에 select에서 선택한 option 데이터를 전송할때 실질적으로 전송되어야 하는 데이터를 전달합니다. 예를 들어 <option value="1">서울</option>으로 option을 추가해 놓고 select에서 서울항목을 선택했다면 전달되는 데이터는 '서울'이 아니라 '1'이 됩니다.
 multiple  select 항목은 기본적으로 하나의 항목만 선택이 가능하지만 이 속성에 multiple 값을 지정하면 여러개의 항목을 다중적으로 선택할 수 있습니다.
 label  select 항목을 여러개의 group으로 나누고자 optgroup 태그를 사용한 경우 해당 태그에 붙일 수 있는 속성입니다. 이 속성에는 각 항목에 대한 이름을 붙이는데 사용됩니다. 

(4) textarea 속성

 name  textarea 의 이름을 지정합니다.
 cols  textarea 의 넓이를 지정합니다.
 rows  textarea 의 높이를 지정합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS] vertical-align  (0) 2013.04.23
[HTML / HTML5] ruby, rt, rp (루비문자)  (0) 2013.04.22
[HTML / HTML5] form, input, select, textarea  (0) 2013.04.18
[HTML / HTML5] a (링크)  (0) 2013.04.17
[HTML5] audio (오디오)  (0) 2013.04.16
[CSS] color  (0) 2013.04.15
0 0
Programming/HTML CSS
1. a 사용
<a href="http://www.cliel.com">CLIEL</a>
<a href="#target">이동</a>
.
.
.
<a name="target">지점</a>
▶ 문서내에서 링크를 생성합니다. HTML5에서도 같은 용도로 사용되는 표준태그입니다.
 
2. a 속성

(1) href

a 링크에서 이동할 웹주소나 같은 페이지내 이동할 위치를 지정합니다. 다른 웹 주소로 이동하고자 하는 경우 <a href="http://www.cliel.com/">cliel.com</a> 형식으로 지정하며 문서내에 이동하고자 하는 경우 #target 처럼 #을 사용하여 이동할 해당 영역을 지정하면 됩니다.

a 에서 #을 사용해 위치를 지정하는 경우 이동될 해당 위치는 a 태그를 통해 name 속성이 지정되어 있어야 합니다.

만약 같은 문서가 아닌 다른 웹페이지의 위치로 이동하고자 하는 경우에는 <a href="http://www.cliel.com/#target">www.cliel.com#target</a> 처럼 웹주소 다음에 #을 사용하여 이동할 위치의 이름을 붙여 href속성을 지정하면 됩니다.

경우에 따라 href를 제거한 빈 링크를 생성해야 하는 경우도 있습니다. 다만 href속성이 필요없는 경우 href속성을 사용하지 않는 것이 아니라 href="#" 과 같이 #으로 속성을 지정해야 합니다. 이것은 웹표준을 따르는 것입니다.

(2) name

같은 문서안에서 #[이름] 처럼 href 속성이 지정되었을때 실제 a 링크를 클릭하여 이동해올 위치를 이 속성으로 지정합니다. 예를 들어 #target 로 href가 지정된 경우 이동할 위치의 a 태그 name 속성은 target 여야 합니다.

(3) target

링크된 화면을 어디에 표시할지를 지정하는 속성입니다. _blank(새창), _self(현재창), _parent(부모frame), _top(frame전체) 값을 설정할 수 있습니다.

_parent는 현재 화면이 frame으로 구성되어 있을 경우 부모frame에 화면을 표시하며 _top은 frame으로 구성된 화면에서 이 frame을 무시하고 화면 전체로 링크된 화면을 표시하도록 합니다.

화면이 frame으로 구성되어 있다면 target 속성에 frame의 이름을 값으로 지정하여 해당 frame에 링크화면을 표시할 수도 있습니다. 예를 들어 특정 frame의 name속성이 view1 이라는 이름으로 지정되어 있다면 target 속성을 view1로 하여 view1이라는 이름을 가진 frame영역에 링크된 화면을 표시하도록 합니다.

(4) id

위 2번과 같이 지점을 나타낼때는 a 태그에 name을 지정할 수도 있는데 좀 다르게 특정 태그에 id를 a의 name속성과 같이 지정할 수도 있습니다.
<h2 id="target">대상 항목</h2>
위와 같이 하면 a 에서 name을 지정한 것과 같은 방식으로 동작하게 됩니다.

만약 같은 id가 여러개 존재하면 제일 먼저 나오는 항목에 위치하게 되지만 표준에서 벗어나므로 권장하지 않습니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML / HTML5] ruby, rt, rp (루비문자)  (0) 2013.04.22
[HTML / HTML5] form, input, select, textarea  (0) 2013.04.18
[HTML / HTML5] a (링크)  (0) 2013.04.17
[HTML5] audio (오디오)  (0) 2013.04.16
[CSS] color  (0) 2013.04.15
[HTML / HTML5] br (개행)  (0) 2013.04.12
0 0
Programming/HTML CSS
1. CSS color 사용
.span_color {
 color:red;
}

.p_color {
 color:blue;
}
▶CSS 정의 
<span class="span_color">lab</span>

<p class="p_color">cliel</p>
▶CSS 적용

2. CSS color 속성

(1) color

여러 다양한 태그에 적용이 가능한 CSS 속성으로 글자색을 지정합니다. 이 속성의 값으로는 red, blue와 같은 색상명 또는 #RRGGBB 나 #RGB 와 같은 형식의 값을 사용할 수 있으며 RGB(x, x, x) 혹은 RGB(x%, x%, x%) 와 같은 형태(예: color:RGB(255, 0, 0))도 사용할 수 있습니다. 이때 x는 0~255까지의 값이여야 하며 #RGBA 형식이라면 A(투명도)는 0.0 ~ 1.0 사이 값을 지정합니다.

RGB 형식 이외에 HSL 혹은 HSLA 형식의 단위도 사용이 가능합니다.
color: hsl(37, 100%, 100%)
HSL은 순서대로 색상, 채도, 명도를 나타내며 각 값에 정수를 사용하되 S와 L값에는 %단위를 사용해야 합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML / HTML5] a (링크)  (0) 2013.04.17
[HTML5] audio (오디오)  (0) 2013.04.16
[CSS] color  (0) 2013.04.15
[HTML / HTML5] br (개행)  (0) 2013.04.12
[HTML] embed  (0) 2013.04.11
[HTML] iframe  (0) 2013.04.09
0 0
Programming/HTML CSS
1. br 사용
안녕<br />
하세요.
▶ 한칸 개행합니다. HTML5에서도 같은 용도로 사용됩니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML5] audio (오디오)  (0) 2013.04.16
[CSS] color  (0) 2013.04.15
[HTML / HTML5] br (개행)  (0) 2013.04.12
[HTML] embed  (0) 2013.04.11
[HTML] iframe  (0) 2013.04.09
[HTML / HTML5] hr (수평선)  (0) 2013.04.08
0 0
Programming/HTML CSS
1. embed 사용
<embed src="sample.wmv" width="100" height="100">
▶ 음악이나 동영상, flahs등의 외부요소를 실행합니다. 다만 원활한 실행을 위해서는 compter에 음악, 동영상, flash를 실행시킬 수 있는 Plug-in Program이 설치되어 있어야 합니다.

2. embed 속성

(1) src

실행할 file명이나 해당 file이 있는 url 경로를 지정합니다.

(2) width

Plug-in Program 화면의 가로크기를 지정합니다. px혹은 %단위를 사용합니다.

(3) height

Plug-in Program 화면의 세로크기를 지정합니다. px혹은 %단위를 사용합니다.

(4) loop

반복적으로 실행할지 지정합니다. true나 false값을 가질 수 있습니다.

(5) autostart

자동적으로 실행할지 지정합니다. true나 false값을 가질 수 있습니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS] color  (0) 2013.04.15
[HTML / HTML5] br (개행)  (0) 2013.04.12
[HTML] embed  (0) 2013.04.11
[HTML] iframe  (0) 2013.04.09
[HTML / HTML5] hr (수평선)  (0) 2013.04.08
[HTML / HTML5 / CSS] img (이미지)  (0) 2013.04.05
0 0
Programming/HTML CSS
1. iframe 사용
<!DOCTYPE html>
<html>
<head>
<title>html sample</title>
</head>
<body>

안녕하셔요~?

<iframe src="http://www.daum.net/">
</body>
</html>
▶ iframe은 전체 문서안에서 부분적으로 다른 문서의 내용이나 웹사이트를 보여주기 위한 용도로 사용됩니다.

2. iframe 속성

(1) src

frame영역에 표시할 웹페이지나 주소를 설정합니다.

(2) name

frame영역의 이름을 지정합니다.

(3) height

iframe의 높이를 설정합니다. px 또는 %를 사용합니다.

(4) width

iframe의 넓이를 설정합니다. px 또는 %를 사용합니다.

(5) scrolling

scrollbar를 표시할지 지정합니다. yes(표시), no(없음), auto(자동)값을 설정할 수 있습니다.

(6) frameborder

iframe의 테두리를 표시할지 지정합니다. 0(표시없음), 1(표시함) 값을 설정할 수 있습니다.

(7) align

문서내에서 iframe의 정렬위치를 지정합니다. left(왼쪽), center(가운데), right(오른쪽)값을 사용합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML / HTML5] br (개행)  (0) 2013.04.12
[HTML] embed  (0) 2013.04.11
[HTML] iframe  (0) 2013.04.09
[HTML / HTML5] hr (수평선)  (0) 2013.04.08
[HTML / HTML5 / CSS] img (이미지)  (0) 2013.04.05
[CSS] background  (0) 2013.04.04
0 0
Programming/HTML CSS
1. hr 사용
<hr width="100">
▶ 수평선을 긋습니다. HTML5에서도 같은 용도로 사용됩니다.

2. hr 속성

(1) size

정수로 값을 지정하며 두께를 설정합니다.

(2) width

정수로 값을 지정하며 길이를 설정합니다.

(3) align

left, center, right 값을 지정하며 수평선의 정렬상태를 지정합니다.

(4) noshade

값이 없는 속성이며 음영효과를 제거합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML] embed  (0) 2013.04.11
[HTML] iframe  (0) 2013.04.09
[HTML / HTML5] hr (수평선)  (0) 2013.04.08
[HTML / HTML5 / CSS] img (이미지)  (0) 2013.04.05
[CSS] background  (0) 2013.04.04
[CSS] letter-spacing  (0) 2013.04.03
0 0
Programming/HTML CSS
1. img 사용
<img src="sample.jpg">
▶sample.jpg 이미지를 표시합니다. HTML5에서도 같은 용도로 사용됩니다.

img 사용시 아직 존재하지 않는 이미지를 처리해야 하는 경우 placehold.it 을 사용하면 됩니다. src 속성에

http://placehold.it/300x200

위와 같이 placehold.it 주소와 뒤에 원하는 크기를 지정하면 해당 크기만큼의 이미지를 생성하게 됩니다.

2. img 속성

(1) src

표시할 이미지가 있는 위치를 url형태로 지정합니다. 만약 이미지에 대한 크기만 알고 실제 이미지가 없는 경우 src속성에 'http://placehold.it/300x100' 과 같이 지정하면 해당 크기에 맞는 대체이미지를 표시해 줍니다.

(2) alt

해당 이미지를 표시할 수 없는 경우 대신 표시할 내용을 문자열 형태로 지정합니다.

(3) align

이미지의 정렬 방식을 지원하며 left(왼쪽), center(가운데), right(오른쪽)값을 사용할 수 있습니다. 만약 이미지가 텍스트와 같이 사용되는 경우라면 top(위쪽), middle(가운데), bottom(아래쪽)값을 사용해 텍스트가 표시될 상대적인 위치를 지정할 수도 있습니다.

(4) height

이미지를 표시할때 이미지의 높이값을 나타냅니다. 성능상 이 속성을 지정하는 것이 좋습니다.

(5) width

이미지를 표시할때 이미지의 넓이값을 나타냅니다. 성능상 이 속성을 지정하는 것이 좋습니다.

(6) hspace

이미지의 가로 여백을 지정합니다.

(7) vspace

이미지의 세로 여백을 지정합니다.

(8) border

이미지를 표시할때 외곽선의 굵기를 지정합니다. 기본값은 0이며 px단위입니다.

3. CSS img 사용
.css_img {
 width:100px;
 height:100px;
}
4. CSS img 속성

(1) width

이미지의 가로 크기를 지정합니다. 크기 단위는 in(인치), cm(센치미터), mm(밀리미터), pt(포인터), pc(피카스), em, ex(em대비 1/2크기), px(픽셀), %(%단위)등의 상대적 단위크기를 사용하기도 합니다.

(2) height

이미지의 세로 크기를 지정합니다. 단위는 width와 같습니다.

(3) vertical-align

이미지가 텍스트와 함께 사용되는 경우 텍스트의 위치를 지정하는 속성입니다. top(위쪽), middle(가운데), bottom(아래쪽) 값을 사용할 수 있습니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML] iframe  (0) 2013.04.09
[HTML / HTML5] hr (수평선)  (0) 2013.04.08
[HTML / HTML5 / CSS] img (이미지)  (0) 2013.04.05
[CSS] background  (0) 2013.04.04
[CSS] letter-spacing  (0) 2013.04.03
[CSS] line-height  (0) 2013.04.02
0 0
Programming/HTML CSS
1. CSS background 사용
.bk {
 background-image:url(./sample.jpg);
 background-position:50%, 0%;
}
▶ CSS 정의
<body class="bk">
</body>
▶ CSS 적용

2. CSS background 속성

(1) background-color

배경색을 지정합니다. 이 속성의 값으로는 red, blue와 같은 색상명 또는 #RRGGBB 나 #RGB 와 같은 형식의 값을 사용할 수 있으며 RGB(x, x, x) 혹은 RGB(x%, x%, x%) 와 같은 형태(예: color:RGB(255, 0, 0))도 사용할 수 있습니다. 이때 x는 0~255까지의 값이여야 합니다.

transparent 라는 값도 지정할 수 있는데 이 속성의 의미는 투명입니다.

(2) background-image

배경이미지를 지정합니다. 이미지는 url을 사용하여 해당 이미지가 위치한 url경로를 지정하면 됩니다. CSS에서 url 단위를 입력할때는 통상 url 함수를 사용합니다.
background-image: url('./sample.jpg'); /* 최상위 에서의 sample.jpg */
background-image: url('sample.jpg'); /* 현재 경로에서의 sample.jpg */
background-image: url('sample/sample.jpg'); /* 현재 경로에서의 sample 안에 sample.jpg */
CSS3에 들어서는 이 속성을 사용해 아래와 같이 여러개의 이미지를 동시에 지정할 수 있게 됐습니다.
background-image: url('sample1.jpg'), url('sample2.jpg'), url('sample3.jpg');
이런 경우 맨 오른쪽의 이미지 부터 왼쪽 이미지까지의 순으로 겹쳐서 표시하게 됩니다. 따라서 가장 왼쪽의 이미지가 가장 위로 올라오게 됩니다.

(3) background-repeat

background-image를 사용한 경우 해당 이미지의 반복형태를 지정합니다. repeat(수직, 수평 반복), no-repeat(반복없음), repeat-x(수평반복), repeat-y(수직반복)값을 사용합니다.

(4) background-attachment

익스플로러 전용속성으로 background-image 속성을 사용한 경우 해당 이미지의 고정형태를 지정하는 것인데 이 속성의 값을 scroll로 지정하면 스크롤을 올리거나 내림에 따라 배경이미지도 같이 이동하며 fixed로 지정하면 스크롤 올림/내림 여부와는 상관없이 이미지가 고정됩니다.

(5) background-position

background-image 속성을 사용한 경우 이미지를 표시할 위치를 지정합니다. 이 위치는 50% 50% 와 같은 형태로 지정하는데 왼쪽 %값은 가로를, 오른쪽 %값은 세로를 의미합니다. 값의 단위를 %이외에 px단위 입력도 가능합니다.
background-position: 50px, 50%;
위 예제에서 처럼 값을 지정하는 것 이외에 bottom(아래), center(가운데), left(왼쪽), right(오른쪽), top(위)등의 키워드를 사용할 수도 있습니다.

(6) background-size

% 또는 px 단위를 사용하여 이미지의 크기를 지정합니다. 값의 지정은 다음과 같이 하며
background-size: 50px, 100px;
첫번째 값은 넓이 두번째 값은 높이를 의미하게 됩니다. 참고로 크기 값의 지정에서 넓이에 contain 키워드를 사용하는 경우 100%로 지정한 것과 같고, cover 키워드를 사용한 경우 높이를 100%로 지정한 것과 같습니다.

만일 background-image 속성에서 두개 이상의 이미지를 지정한 경우 각각의 이미지에 크기를 지정하려면 쉼표를 통해 각 이미지에 대한 크기를 순서대로 지정하면 됩니다.
background-size: 50px 100px, 40%, 50%;
이 속성은 CSS3 전용이므로 웹 브라우저가 비교적 최신이어야 합니다.

(7) background

1 에서 6번까지 소개해 드린 모든 속성은 아래와 같은 순서를 통해 한꺼번에 입력할 수 있습니다.

background: background-image background-position / background-size background-repeat background-attachment background-color;

'Programming > HTML CSS' 카테고리의 다른 글

[HTML / HTML5] hr (수평선)  (0) 2013.04.08
[HTML / HTML5 / CSS] img (이미지)  (0) 2013.04.05
[CSS] background  (0) 2013.04.04
[CSS] letter-spacing  (0) 2013.04.03
[CSS] line-height  (0) 2013.04.02
[CSS] text  (0) 2013.04.01
0 0
Programming/HTML CSS
1. CSS letter-spacing 사용
._text {
 letter-spacing:10px;
}
▶ CSS 정의
<span class="_text">대한민국</span>
▶ CSS 적용

2. CSS letter-spacing 속성 

(1) letter-spacing

글자 사이의 간격을 지정합니다. 숫자로 값을 지정하며 in(인치), cm(센치미터), mm(밀리미터), pt(포인터), pc(피카스) 단위를 사용합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML / HTML5 / CSS] img (이미지)  (0) 2013.04.05
[CSS] background  (0) 2013.04.04
[CSS] letter-spacing  (0) 2013.04.03
[CSS] line-height  (0) 2013.04.02
[CSS] text  (0) 2013.04.01
[HTML / HTML5] dl, lh, dt, dd (정의목록)  (0) 2013.03.29
0 0
Programming/HTML CSS
1. CSS line-height 사용
._lh {
 line-height:30mm;
}
▶CSS 정의
<span class="_lh">대한<br />민국</span>
▶CSS 적용

2. CSS line-height 속성

(1) line-height

글자 줄 사이의 간격을 지정합니다. 숫자를 사용해 값을 지정하며 in(인치), cm(센치미터), mm(밀리미터), pt(포인터), pc(피카스) 단위를 사용합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS] background  (0) 2013.04.04
[CSS] letter-spacing  (0) 2013.04.03
[CSS] line-height  (0) 2013.04.02
[CSS] text  (0) 2013.04.01
[HTML / HTML5] dl, lh, dt, dd (정의목록)  (0) 2013.03.29
[HTML / HTML5 / CSS] table, caption, colgroup, thead, tr, th, td (테이블)  (2) 2013.03.28
0 0
Programming/HTML CSS

1. CSS text 사용
._text {
 text-align:center;
 text-decoration:overline;
}
▶CSS 정의
<p class="_text">abcdefg</p>
▶CSS 적용

2. CSS text 속성

(1) text-align

글자의 정렬형태를 지정합니다. left(왼쪽), center(가운데), right(오른쪽), justify(양쪽정렬) 값을 사용합니다. 이 속성은 span과 같은 좌우 공간이 존재하지 않는 태그의 경우에는 적용되지 않으므로 주의해야 합니다.

(2) text-decoration

글자를 장식하며 none(없음), underline(밑줄), overline(윗줄), line-through(가로선), blink(깜빡임)값을 사용합니다. blink는 넷스케이프에서만 지원합니다.

(3) text-indent

들여쓰기를 나타내며 숫자를 사용해 px단위나 %단위로 값을 지정합니다.

(4) text-transform

영문사용시 대소문자 표시 형태를 나타냅니다. none는 효과없음에 해당되며 capitalize는 첫문자만을 대문자로, uppercase는 모든 문자를 대문자로 표시합니다. 반면 lowercase는 모든 문자를 소문자로 변환합니다.

(5) text-shadow

글자에 그림자 효과를 주는 속성이며 아래와 같이 속성을 지정합니다.
text-shadow: 5px 3px 10px black;
첫번째 값은 오른쪽에 퍼질 그림자의 크기를 두번째는 아래쪽에 퍼질 그림자의 크기를 의미합니다. 세번째는 그림자의 선명도를 나타내며 마지막 네번째는 그림자의 색상입니다.

만일 여러 색상의 그림자를 동시에 구현하고자 한다면 위의 속성지정을 ,(콤마)를 사용해 원하는 만큼 여러번 작성하면 됩니다.
text-shadow: 5px 5px 10px black, 5px 5px 10px red;
0 0
Programming/HTML CSS
1. dl, lh, dt, dd 사용
<dl>
 <lh>목록제목</lh>
 <dt>용어1</dt>
 <dd>용어1 설명</dd>
 <dt>용어2</dt>
 <dd>용어2 설명</dd>
</dl>
▶ 용어에 대한 설명 목록을 만듭니다. HTML5에서도 같은 용도로 사용되는 표준태그입니다.

2. dl, dt 속성

(1) compact

값이 없으며 dt 다음에 줄바꿈을 하지 않고 바로 옆에 dd의 내용을 표시하도록 합니다.
dd, dl, DT, html, html5, LH
0 0
Programming/HTML CSS
1. table, caption, colgroup, thead, tr, th, td 사용
<table border="1">
<caption>table 예시</caption>
<colgroup>
 <col style="background:red;" />
 <col style="background:blue;" />
</colgroup>
<thead style="background:green;">
 <tr>
  <th>설명1</th>
  <th>설명2</th>
 <tr>
</thead>
  <td>1행1열</td>
  <td>1행2열</td>
 </tr>
 <tr>
  <td>2행1열</td>
  <td>2행2열</td>
 </tr>
</table>
▶ table 태그는 표 전체를 의미하며 tr은 table안에서의 행을, td는 tr안에서의 각 열(cell)을 의미합니다. th는 각 열에대한 제목부분, caption은 table 전체에 대한 제목부분에 해당합니다.

colgroup은 테이블의 각 열에 스타일을 별도로 지정하고자 하는 경우 사용되는 태그입니다. colgroup안에 col태그로 각 열을 지정할 수 있으며 만약 다수의 열을 합쳐저 지정하고자 한다면 span="2" 처럼 col 태그안에 span속성을 사용하여 다수의 열에 대해 하나의 스타일을 공통적으로 적용할 수 있습니다.

만약 col안에 span속성을 사용하지 않는다면 col 태그 하나당 순서대로 왼쪽부터 열이 하나씩 자동으로 지정됩니다.

thead는 th에 대한 스타일을 별도로 지정하는 경우 사용되는 태그입니다. 적용방식은 colgroup과 유사합니다.

HTML5에서도 같은 용도로 사용되는 표준태그입니다. 다만 속성의 경우 HTML5에서는 border, rowspan, colspan 속성만 가지고 있습니다.

2. table, caption, colgroup, thead, tr, th, td 속성

(1) border (table)

외곽선의 두께를 지정하는 속성으로 픽셀단위 입니다.

(2) align (table, caption, th, tr, td)

left (왼쪽), center (가운데), right (오른쪽) 세개의 값을 사용할 수 있으며 table의 정렬상태를 지정합니다.

(3) width (table)

table의 넓이를 지정하는 것으로 정수를 사용할때는 픽셀단위이며 뒤에 %를 붙이면 %단위가 됩니다.

(4) height (table)

table의 높이를 지정하며 픽셀단위 입니다.

(5) bgcolor (table, td)

배경색을 지정합니다. 이 속성의 값으로 #ffff00 의 색상코드나 red와 같은 색상명을 사용할 수 있습니다.

(6) background (table, tr, th, td)

배경이미지를 지정하는 속성으로 background="./sampe.jpg" 와 같이 해당 이미지의 경로를 지정합니다.

(7) cellpadding (table)

table 안에 있는 각 셀(td) 내부의 내용과 외곽선과의 여백을 지정합니다.

(8) cellspacing (table)

table 안에 있는 각 셀(td)과 table 자체의 외곽선과의 여백을 지정합니다.

(9) frame (table)

table 외곽선 표시 형태를 지정하며 void(없음), above(위), below(아래), hsides(위, 아래), vsides(좌, 우), lhs(좌), rhs(우), border(전체) 값을 사용할 수 있습니다.

(10) rules (table)

table 안에 있는 각 셀(td) 사이의 외곽선 표시 형태를 지정합니다. none(없음), rows(행만), cols(열만), all(모두) 값을 사용할 수 있습니다.

(11) valign (tr, td)

내부에 요소들에 대한 수직 정렬 상태를 지정합니다. top(위), middle(가운데), bottom(아래)값을 사용할 수 있습니다.

(12) rowspan (th, td)

현재열이 합쳐질 행의 수를 지정합니다.

(13) colspan (th, td)

현재열이 합쳐질 열의 수를 지정합니다.

3. table, caption, tr, th, td CSS
.table_css {
 margin-top:50px;
 margin-bottom:50px;
}
▶ CSS 정의
<table border="1" class="table_css">
<caption>table 예시</caption>
 <tr>
  <th>설명1</th>
  <th>설명2</th>
 <tr>
  <td>1행1열</td>
  <td>1행2열</td>
 </tr>
 <tr>
  <td>2행1열</td>
  <td>2행2열</td>
 </tr>
</table>
▶ CSS 적용

4. table, caption, tr, th, td CSS 속성

(1) padding

table의 border보다 한단계 더 안쪽에 대한 여백을 지정하며 padding-top(위쪽), padding-bottom(아래쪽), padding-left(왼쪽), padding-right(오른쪽) 속성을 사용합니다.

(2) width

table의 넓이를 지정합니다. 이 속성은 정수를 사용해 px, pt, cm단위와 %를 사용할 수 있습니다.

(3) height

table의 높이를 지정합니다. 값의 지정은 width와 같습니다.

(4) float

table의 정렬방식을 지정하며 none(없음), left(왼쪽), right(오른쪽) 값을 사용할 수 있습니다.

(5) margin

table의 가장 외곽에 대한 속성이며 여백을 지정합니다. margin-top은 위쪽, margin-bottom은 아래쪽, margin-right는 오른쪽, margin-left는 왼쪽여백을 의미합니다.

(6) border

table의 margin에서 한단계 안쪽인 외곽선을 의미하며 세부 항목은 다음과 같습니다.

 border-width 외곽선의 굵기를 지정합니다. thin, medium, thick와 같은 값을 지정할 수 있으며 정수를 사용해 pt, px, cm단위로 지정할 수 있습니다.

border-width만 사용하면 table전체에 적용되며 border-top-width 와 같이 top(위쪽), right(오른쪽), bottom(아래쪽), left(왼쪽)속성을 사용하면 각각에 대한 별도의 설정을 적용할 수 있습니다.

이 속성은 border-style이 적용되어야 합니다.
 border-color 외곽선의 색상을 나타냅니다. 16진수 값이나 red와 같은 명칭을 사용할 수 있으며 border-color만 사용하면 table전체에 적용되고 border-top-color 와 같이 top(위쪽), bottom(아래쪽), left(왼쪽), right(오른쪽) 속성을 사용하면 각각에 대한 별도의 설정을 적용할 수 있습니다.

이 속성은 border-style이 적용되어야 합니다.
 border-style 외곽선의 형태를 지정합니다. 이 속성의 값으로는 none(없음), dotted(점선), dashed(굵은 점선), solid(실선), double(이중 실선), groove(오목한 테두리), ridge(볼록한 테두리), inset(오목함+명암효과), outset(볼록함+명함효과)을 사용할 수 있습니다.
 border-collapse table안의 각 셀에 대한 외곽선 표시 형태를 지정합니다. collapse값은 셀간에 겹치는 외곽선을 하나로 표시하며 separate는 겹치는 외곽선을 합치지 않고 모두 표시합니다.
 border-spacing table안 셀간의 여백을 지정합니다. 10px 처럼 값을 하나만 주는 경우 상하좌우 모두 같은 여백을 가지도록 하며 10px 15px 처럼 두개의 값을 적용하면 첫번째 값은 좌우여백을 두번째 값은 상하여백을 지정하도록 합니다.
 border-radius 외곽선을 둥글게 처리합니다. 이 속성은 CSS3전용으로 해당 브라우저가 CSS3를 지원해야 합니다. 값을 하나만 쓰는 경우 전체 테두리를, 10px 20px 10px 20px 처럼 네개의 값을 순차적으로 쓰는 경우에는 왼쪽상단, 오른쪽상단, 오른쪽하단, 왼쪽하단 순으로 둥근처리가 적용됩니다.

위 속성부분에서 border 라는 속성을 이미 봤는데 같은 이름으로 CSS에서도 지정이 가능합니다. 이런 경우 border-width와 border-color 그리고 border-style 속성을 한꺼번에 지정할 수 있습니다.
.table_css {
   border: 10px solid red;
}
값은 왼쪽부터 border-width, border-style, border-color 순으로 적용되며 빈 공백으로 값을 구별합니다. 뿐만 아니라 border-top 또는 border-top-color, border-top-width, border-top-style 처럼 부분적인 속성에서도 border와 같은 방법으로 값을 적용시킬 수 있습니다.

(7) caption-side

table에서 caption 태그를 사용한 경우 해당 caption이 위치할 영역을 지정합니다. top(위쪽), bottom(아래쪽)값을 사용할 수 있습니다.

(8) empty-cells

table의 내용중 비어 있는 부분에 대한 표시방법을 지정합니다. hide값을 사용하면 비어있는 부분의 외곽선은 표시하지 않지만 show는 비어 있더라도 외곽선을 표시합니다.
2 0
Programming/HTML CSS
1. em, string, code, samp, kbd, cite, dfn, var, q, acronym 사용
<em>강조</em>
<strong>강한 강조</strong>
<code>코드 문자</code>
<samp>상태 문자</samp>
<kbd>키보드 문자</kbd>
<cite>인용구</cite>
<dfn>내용정의</dfn>
<var>변수표현</var>
<q>짧은인용</q>
<acronym>머릿글</acronym>
▶ 각 태그에 맞게 표현합니다.
0 0
Programming/HTML CSS
b (굵게), i (기울임), u (밑줄), ins (밑줄), tt (타자체), sup (위첨자), sub (아래첨자), s (가로선), del (가로선), small (작게), big(크게)
<b>굵게</b><br />
<i>이탤릭</i><br />
<u>밑줄</u><br />
<ins>밑줄</ins><br />
<tt>타자</tt><br />
위첨자<sup>위첨자</sup><br />
아래첨자<sub>아래첨자</sub><br />
<s>가로선</s><br />
<del>가로선</del><br />
<small>한단계 작게</small><br />
<big>한단계 크게</big>
small, big는 웹브라우저에 설정된 크기를 기준으로 합니다.


b, i, small, sub, sup, ins, del 태그는 HTML5에서 같은 용도로 사용되는 표준태그입니다.
b, Big, css, html, html5, I, s, small, Sub, SUP, TT, U
0 0
Programming/HTML CSS
1. ol 사용
<ol>
 <li>목록1
 <li>목록2
</ol>
▶ ol 은 순서가 있는 목록을 만듭니다.
<ul>
 <li>목록1
 <li>목록2
</ul>
▶ ul 은 순서없는 목록을 만듭니다.

HTML5에서도 같은 용도로 사용되는 표준태그입니다. 목록은 ol 이나 ul 안에 또다른 ol 혹은 ul을 작성함으로써 중복으로 목록을 생성할 수도 있습니다.

2. ol 속성

(1) start

ol 에만 설정이 가능하며 정수로 값을 지정합니다. 이 속성은 li 목록의 시작번호를 지정합니다.

(2) value

ol 에서 사용된 li 에만 정수로 값을 지정하는 속성으로 현재 li 목록의 번호를 임의로 지정합니다.

(3) type

ul 에서 사용시 disk, square, circle 값을 지정하면 목록 모양(●, ■, ○)을 지정할 수 있습니다.

3. ol, ul CSS
.ol-css {
 list-style-type:lower-roman;
 list-style-position:outside;
}
▶CSS 정의

4. ol, ul CSS 속성

(1) list-style-type

목록의 형태를 지정합니다. 이 속성에 지정할 수 있는 값으로는 다음과 같습니다.

 decimal  목록을 1부터 시작하도록 합니다.
 decimal-leading-zero  목록을 0부터 시작하도록 합니다.
 lower-roman  목록을 소문자 로마자로 표시합니다.
 upper-roman  목록을 대문자 로마자로 표시합니다.
 lower-alpha  목록을 소문자 영문자로 표시합니다.
 upper-alpha  목록을 대문자 영문자로 표시합니다.
 lower-greek  목록을 소문자 그리스문자로 표시합니다.
▶ 순서 있는 목록의 경우 값

 none  목록에 대한 모양을 만들지 않습니다.
 disc  목록을 점으로 표시합니다.
 circle  목록을 원으로 표시합니다.
 square  목록을 사각형으로 표시합니다.
▶ 순서 없는 목록의 경우 값

(2) list-style-image

목록 리스트에 표시할 모양을 이미지로 지정할 수 있습니다. none와 url값을 줄 수 있으며 url의 경우 url('../image/abc.png') 와 같은 형태로 이미지에 대한 해당 경로를 지정합니다.

(3) list-style-position

이 속성에 inside값을 지정하면 들여쓰기를 적용하며 outside를 지정하면 리스트가 목록 제목의 첫글자 위치에서 보이도록 합니다.
css, html, li, OL, ul
0 0
Programming/HTML CSS
1. p 사용
<p>문단내용</p>
▶ 문서 내에서 본문을 나타내는 용도로 사용되며 HTML5에서도 단락을 나타내는 표준태그입니다.
 
2. p 속성

(1) align

p 태그 안에 내용을 정렬하며 left(왼쪽), center(가운데), right(오른쪽) 값을 지정할 수 있습니다.
html, P
0 0
Programming/HTML CSS
1. font 사용
<font color="red">붉은색</font>
2. font 속성

(1) size

1~7까지의 값을 사용, 각 숫자에 해당하는 글자 크기는 다음과 같습니다.

 1  8pt
 2  10pt
 3  12pt
 4  14pt
 5  18pt
 6  24pt
 7  36pt

(2) color

글자의 색상을 부여합니다. 색은 red 처럼 직접 색상이름을 지정하거나 #ffa500 처럼 16진수 RGB값을 사용합니다.

(3) face

"명조체" 처럼 글꼴를 지정합니다. 다만 해당 글꼴는 사용자(엄밀히 웹사이트 방문자)의 컴퓨터에 설치된 글꼴이어야 하며 해당 글꼴이 없으면 '굴림'체로 표시됩니다.

글꼴은

<font face="글꼴1, 글꼴2...">글자내용</font>

처럼 여러개 지정할 수 있으며 컴퓨터에 글꼴1이 존재하는 경우 글꼴1을 사용하고 글꼴1이 없으면 그 다음 글꼴2를 사용하는 식으로 작용합니다.

(4) title

title 속성에는 원하는 내용을 담을 수 있으며 title 속성이 사용된 해당 font 태그내용에 마우스를 가져다 대면 지정한 내용을 풍선도움말로 표시합니다.


3. FONT CSS
.css_font {
 font-family:굴림;
 font-size:xx-large;
}
▶css 정의
<span>일반글자</span><br />
<span class="css_font">css 적용</span>
▶적용 HTML

4. FONT CSS 속성

(1) font-family

글꼴 종류를 지정합니다. 해당 글꼴에는 font-family:폰트1, 폰트2, 폰트3... 처럼 연속해서 지정할 수 있으며 폰트1이 없는 경우 폰트2를.. 폰트2가 없는 경우 폰트3이 적용됩니다.

모든 웹사이트 방문자가 설정된 폰트를 가지고 있다고 장담할 수 없으므로 대부분의 경우 마지막에 Serif 나 Sans-serif 또는 Mono space를 지정합니다. 이러한 폰트지정한 앞에서 먼저 제시된 폰트를 표시할 수 없는 경우 사용자의 웹브라우저에 기본적으로 설정된 폰트를 대신 적용하도록 합니다.

폰트명을 지정할때 Tahoma 처럼 한 단어로 이루어진 경우는 별 문제가 안되지만 Arial Black 처럼 공백을 사이에 두고 두 단어로 이루어진 폰트명을 사용할때는
font-family: 'Arial Black';
처럼 따옴표를 붙여야 합니다.

(2) font-style

글꼴 모양을 지정합니다. 이 속성에는 normal(일반), italic(이탤릭체), oblique(기울임) 값을 지정할 수 있습니다.

(3) font-size

글꼴의 크기를 지정합니다. 크기는 숫자로 지정할 수 있으며 font-size:1pt 처럼 정수를 사용해 지정할 수도 있습니다. 정수를 사용하는 경우 in(인치), cm(센치미터), mm(밀리미터), pt(포인터), pc(피카스) 단위를 사용하며 em(1당 기본글꼴 2배), ex(em대비 1/2크기), px(픽셀), %(%단위)등의 상대적 단위크기를 사용하기도 합니다.

정수가 아니면 xx-small, x-small, small, medium, large, x-large, xx-large 와 같이 문자로 지정할 수 있습니다. 이때는 xx-small부터 font-size 값을 1로 하여 1씩 늘어나는 크기와 같습니다.

(4) font-variant

normal, small-caps 값을 지정할 수 있습니다. small-caps값을 지정하는 경우 영문자를 사용할때 소문자를 대문자로 바꾸게 됩니다.

(5) font-weight

글꼴의 두께를 지정합니다. 숫자로 값을 지정하는 경우 100~900사이 값을 사용하며 normal, bold, bolder, lighter등의 문자값을 사용할 수도 있습니다.

(6) line-height

글자의 높이를 지정합니다. 이 속성을 사용하면 실제 글자가 세로로 커지는 것이 아니라 해당 글자가 세로로 차지하는 공간을 넓히게 됩니다.

(7) font

이미 설명드린 1 ~ 6 번까지의 속성을 한번에 지정할 수 있는 속성으로 다음과 같은 순서로 입력합니다.

font: [font-style] [font-weight] [font-size] / [line-height] [font-family];

'Programming > HTML CSS' 카테고리의 다른 글

[HTML / HTML5 / CSS] ol, ul, li (목록)  (0) 2013.03.25
[HTML / HTML5] p (문단)  (0) 2013.03.22
[HTML / CSS] font  (0) 2013.03.21
[HTML / HTML5] h (제목)  (0) 2013.03.20
[HTML] 특수문자 코드표  (0) 2013.03.19
[HTML] HTML / CSS  (0) 2013.03.18
0 0
1 2
블로그 이미지

클리엘