'css'에 해당되는 글 17건

Programming/HTML CSS
html 페이지(page)가 화면크기를 벗어나 스크롤(scroll)되는 경우에도 자주 사용하는 메뉴(menu)등을 담고 있는 특정영역은 스크롤(scroll)되지 않도록 화면에 고정시킬 수 있습니다.
<div id="bar">
  Bar Menu
</div>
<div id="body">
  Military Grid Reference System (MGRS) coordinates may be displayed at the bottom of the A-G Mode page on a black background.
</div>
고정바(bar)를 생성하려면 먼저 위에서 처럼 본문 영역(body 이름의 div)이외에 메뉴(menu)나 특정 내용을 담고 있는 div영역(bar)하나를 생성하도록 합니다. 이 div를 고정바(bar)로 활용할 것이므로 다음과 같이 고정시킬 영역에 대한 위치를 지정합니다.
#bar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 50px;
   background: yellow;
}
position을 fixed로 하여 화면에 고정되도록 하며 top 속성을 0으로 하여 화면 상단에 위치하도록 하였습니다. 만약 고정바(bar)가 왼쪽에 위치해야 하는 경우 left 속성을, 오른쪽인 경우 right를, 화면 아래의 경우 bottom 속성값만을 0으로 처리하면 됩니다.

이때 고정바(bar)를 제외한 본문영역은 고정바(bar)에 의해 가려질 수 있으므로 고정바(bar)가 위치한 영역과 크기에 따라 그 만큼의 margin이나 padding속성을 부여 하여 문제를 해결합니다. 예제에서는 고정바(bar)에 해당하는 'bar'이름의 div가 상단(top)에 위치하고 50px크기를 갖고 있으므로
#body {
   margin-top: 50px;
}
50px 만큼 margin-top 속성을 부여하면 됩니다.

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

[CSS3] 2차원/3차원 구현(transform)  (0) 2013.11.24
[CSS3] 스프라이트 이미지(sprite image) 활용  (0) 2013.08.29
[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
1 0
Programming/HTML CSS
다음 CSS 코드(code)는 표시할 내용이 현재 화면보다 큰 경우 '동해물과 백두산...' 처럼 ...으로 글자를 생략하도록 합니다. white-space, overflow, text-overflow 이 세개의 속성에 주목하십시오.
#main_div {
   width: 150px;
   
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
▶CSS
<div id="main_div">
  Military Grid Reference System (MGRS) coordinates may be displayed at the bottom of the A-G Mode page on a black background.
</div>
▶HTML

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

[CSS3] 스프라이트 이미지(sprite image) 활용  (0) 2013.08.29
[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
0 0
Programming/HTML CSS
보통 웹 브라우저에 특정 폰트로 글자를 표시하려면 해당 폰트가 사용자의 컴퓨터에 설치되어 있어야 합니다.  하지만 세상에 존재하는 모든 폰트가 사용자의 컴퓨터에 다 담겨져 있다는 보장은 할 수 없기에 그 대안으로 웹폰트를 사용합니다.

웹폰트는 사용자가 웹에 접속하게 되면 필요한 웹폰트를 자동으로 내려받아 설치하고 설정된 폰트대로 웹문서를 볼 수 있도록 합니다.

웹폰트는 문서의 헤더에 다음과 같은 구문을 추가함으로서 설치할 수 있습니다.
<head>
 <link href='http://fonts.googleapis.com/css?family=Fruktur' rel='stylesheet' type='text/css'>
</head>
참고로 예제에 설정된 웹폰트는 구글에서 제공하는 것으로 아래 사이트를 방문하면 더 많은 폰트를 보실 수 있습니다.

http://www.google.com/fonts

위에서 처럼 폰트를 설치하고 나면 해당 폰트가 적용될 부분을 CSS로 지정하기만 하면 됩니다.
<style>
 #ff {
  font-family: 'Fruktur', cursive;
 }
</style>
이렇게 하면 아래와 같은 내용이 본문에 포함되는 경우 ff  아이디의 div 내용이 위에서 설치한 폰트로 보여지도록 처리가 이루어 질 수 있습니다.
<div id="ff">KOREA</div>

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

[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
[CSS3] 선택자 - 상태 선택  (0) 2013.06.24
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. 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. 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. 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
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. 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
Programming/HTML CSS
1. h 사용

<h1>본문 제목</h1>
h 다음에 1~6까지 숫자를 사용합니다. 숫자가 작을 수록 내부 글자가 크게 표시됩니다.

HTML5에서는 제목을 나타내는 표준 태그입니다. 단, 브라우저 마다 크기는 같으나 폰트가 다르므로 폰트를 지정하는 경우도 있습니다.

2. h 속성

(1) align

left, center, right 세가지 값을 사용하며 내부 글자를 정렬합니다.

'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
css, H, html
0 0
Programming/HTML CSS
Hyper Text Markup Language 라고 불리우며 < 로 시작해 >로 끝나는 수많은 태그(Tag)를 통해 문서구조를 이루며 웹브라우저가 이를 해석해 표시하게 됩니다.

 1. HTML
<html>
    <head>
        <title>문서제목</title>
    </head>
    <body>
        본문
    </body>
</html>
html문서는 태그로 이우러지며 <> 사이에 사용됩니다.

html 문서자체는 <html>로 시작해 </html>로 끝납니다. <head>와 </head>사이에는 문서제목과 기타 관련 정보가 들어가는 머릿부분이며 <body>와 </body>사이에 실질적인 문서표시 부분인 몸체에 해당합니다.

문서의 확장자는 .html 혹은 .htm으로 저장되어야 합니다.

 2. CSS

Cascading Style Sheets라고 하여 웹문서의 대부분 디자인 정의에 사용됩니다.
<html>
<head>
<style type="text/css">
    .ft {
        font-size:50pt;
    }
</style>
</head>
<body>
    <span class="ft">CLIEL</span>
</body>
</html>

css를 문서내에서 정의하려면 head 태그사이에 style태그로 정의합니다. 위 예제는 문서내에서 ft라는 클래스명으로 font 사이즈를 정의하였으며 body안에서 ft클래스를 사용하는 방법을 보여주고 있습니다.

.ft 부분은 선택자(selector)라고 하며 font나 h1처럼 특정 태그를 지정하여 해당 태그에만 적용하는 스타일을 정의할 수 있으며 적용해야할 태그가 여러개인 경우 font, h1 처럼 콤마(,)를 사용하여 다중적으로 선택자를 지정할 수도 있습니다.

위에서 처럼 css에 점(.)을 시작으로 붙여진 이름은 css의 class에 해당합니다. 이 class는 class="ft" 처럼 지정되어 해당 태그에 css가 적용될 수 있도록 합니다. 위 예제 아래 span태그는 css에서 지정한 스타일을 적용하기 위해 생성한 태그이며 font나 h태그등에도 동일하게 class를 지정하면 됩니다.

이 방법은 다수의 태그에 공통적인 css를 적용하기에 적당한 방법입니다.

다만 여러개의 DIV 에서 다른 class를 적용해야 하는 경우에는 다음 방법을 사용할 수도 있습니다.

DIV.first {
 font-size:20px;
}

DIV.second {
 font-size:50px;
}
위 예제는 first와 second라는 두개의 css를 정의하고 있는데 둘다 DIV가 사용되고 있습니다. 이 css는 다음처럼 두개의 DIV안에서 다르게 작용합니다.
<div class="first">
FIRST
</div>

<div class="second">
SECOND
</div>
태그에 id가 부여된 경우 #문자를 사용하여 해당 태그만을 지정할 수 있습니다. 예를 들어

<p id="first">첫번째</p>
<p>두번째</p>
위와 같은 태그에서 첫번째 p 태그에 id를 부여하면 css에서는 다음과 같이 id를 지정하여
#first {
 font-size:20px;
}
해당 태그만을 대상으로한 css를 적용할 수 있습니다.

물론 다음과 같이 태그안에서 직접 사용할 수 있으며
<span style="font-size:50pt;">CLIEL</span>
css를 통해 정의해야할 내용이 많은 경우 따로 css문서를 만들어 정의하고 해당 문서를 포함시키는 방식을 사용할 수 있습니다.
<link rel="stylesheet" type="text/css" href="css 문서 위치">

'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
블로그 이미지

클리엘