사용법어찌 : HTML 태그

HTML IMG tag 사용법 : 그림 이미지 크기 조절 방법, 좌우 가운데 정렬 방법, 여백 설정 방법, 기타 속성 설정 하기

2019-07-24T06:08:00.000-04:00

웹페지에 HTML <Img> 태그로 그림 이미지를 넣을 때, 이미지 좌우 정렬, 이미지 크기 조절, 이미지 여백을 조절하게 됩니다. 방법은 스타일(style) 속성을 주면 간단하게 할 수 있습니다.

1. 그림 이미지 넣기

기본 태그 모양

실제 예

참고: 태그 끝에 빨강색으로 표시한 / 는 <img ~~ 태그를 마무리 하는 것입니다. / 가 없어도 대부분 무리없이 작동을 하지만, / 가 없으면 오류가 나는 경우도 있습니다. 특별한 사정이 없다면, 태그 규칙에 맞게 / 를 넣어 주는 것이 더 낫지 싶습니다.
참고: <img src = ~~ 에서, img는 image [이미지]의 약칭이고, src는 source [소스]의 약칭입니다.

2. 이미지 크기 조절 하기

위에서와 같이 이미지를 불러 오면, 원래의 크기대로 표시가 됩니다. 페이지에 잘 어울리도록 이미지 크기를 조절하려면, 아래와 같이 스타일(style) 속성에서 너비(width)와 높이(height)를 지정해 주면 됩니다.

태그 모양

실제 예

참고: 위와 같이 하면, 페이지에 불려지는 이미지는 원래 크기 그대로 이지만, 방문자가 보는 페이지에서는 속성에서 지정한 크기로 표시됩니다. 이미지 크기는 페이지 로딩 속도에 미치는 영향이 상대적으로 크다 할 수 있습니다. 그러므로, 이미지를 필요 이상의 크기로 만들고, 그것을 줄여서 표시되도록 하기 보다는, 애초에 적절한 크기의 이미지를 만드는 것이 더 좋을 것 같습니다.

참고: 너비와 높이 단위는 px pt em % 등으로 하면 됩니다. px과 pt는 고정된 수치이고, em과 %는 상대적인 가변 수치입니다. HTML 수치 단위에 대한 설명은 링크 페이지에 있습니다. HTML 단위: 글자 등의 크기를 지정하는 수치 단위 : px, pt, %, em 차이점

3. 이미지 좌우 가운데 정렬 하기

<img> 태그로 그림 이미지를 넣으면, 기본적으로 왼쪽에 위치하게 됩니다. 페이지 상황에 따라, 이미지를 왼쪽 오른쪽으로 정렬할 필요가 있을 때에는, 아래와 같이 스타일(style) 속성에서 float 를 left (왼쪽 정렬) 또는 right (오른쪽 정렬)로 지정하여 주면 됩니다.

1) 태그 모양 (이미지를 왼쪽으로 정렬): float: left;

실제 예 : 태그 모양 (이미지를 왼쪽으로 정렬): float: left;

2) 태그 모양 (이미지를 오른쪽으로 정렬): float: right;

실제 예: 태그 모양 (이미지를 오른쪽으로 정렬): float: right;

3) 태그 모양 (이미지를 가운데 정렬): display: block; margin: 0 auto;

실제 예: 태그 모양 (이미지를 가운데 정렬): display: block; margin: 0 auto;

참고: 위 예에서는 마진(margin)을 margin: 0 auto; 로 하였읍니다. 이렇게 하면, 이미지의 위쪽과 아래쪽 여백은 영(0)이 됩니다.
ㅇ 이미지의 위쪽 아래쪽 여백을 영(0)으로 하지 않으려면, margin: 0 auto; 대신에, margin-left: auto, margin-right: auto; 로 하면 됩니다.
ㅇ 이미지의 위쪽 아래쪽 여백을 설정하려면, margin: 20px auto 20px auto; 와 같이 위쪽 아래쪽 여백에 수치를 지정하면 됩니다. 마진의 여백 수치 순서는 margin: 위쪽 오른쪽 아래쪽 왼쪽 여백 순서입니다.

참고: 위 예에서, display: block; 속성을 준 것은, 이미지를 하나의 블록(영역)으로 잡아주기 위한 것입니다. 바꾸어 말하자면, 이미지를 하나의 독립적인 블록으로 잡아 주고, 좌우의 여백(margin)을 자동(auto)으로 설정해 줌으로써, 좌우 여백이 동일하게 되고, 결과적으로 이미지가 블록의 가운데에 위치하게 됩니다.

3-1. 이미지 좌우 정렬과 여백 설정 하기

이미지 정렬에 float 속성을 주면, 이미지 아래쪽에 있는 내용이 이미지 옆의 빈공간으로 딸려 올라가게 됩니다. 그리고 이미지의 기본 여백은 영(0)입니다. 그러므로, 이미지와 내용 사이에 여백을 설정해 주는 것이 보기에 더 나은 경우가 많습니다. 이미지 경계를 기준으로 바깥쪽 여백은 마진(margin) 속성으로, 그리고 안쪽 여백은 패딩(padding) 속성으로 주면 됩니다.

1) 태그 모양 (이미지 왼쪽 정렬 + 오른쪽과 아래쪽에 여백을 설정함)

실제 예: 이미지 왼쪽 정렬 + 오른쪽과 아래쪽에 여백 설정함

<img
src="https://1.bp.blogspot.com/pink-rose-250x250.png"
style="float: left; margin-right: 20px; margin-bottom: 10px; width:100px; height:100px;"
/ >

이 부분은 의미가 없으므로 읽지 마세요. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다.

이 부분은 의미가 없으므로 읽지 마세요. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다.

2) 태그 모양 (이미지 오른쪽 정렬 + 왼쪽과 아래쪽에 여백을 설정함)

실제 예: 이미지 오른쪽 정렬 + 왼쪽과 아래쪽에 여백 설정함

<img
src="https://1.bp.blogspot.com/pink-rose-250x250.png"
style="float: right; margin-left: 20px; margin-bottom: 10px; width:100px; height:100px;"
/ >

이 부분은 의미가 없으므로 읽지 마세요. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다.

3-2. 아래쪽 내용이 따라 올라오지 않도록 하기

위에서 보듯이, float 로 이미지를 좌우 정렬하면, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가게 됩니다. 이미지는 왼쪽 또는 오른 쪽에 정렬을 하되, 아래쪽 내용이 따라 올라가지 않도록 하는 방법은 몇 가지를 생각해 볼 수 있겠습니다. 아래의 예는 <div> 태그에 clear: both; 속성을 설정한 것입니다.

태그 모양 (이미지 왼쪽 정렬 + 아래쪽 내용 따라 올라오지 않게: clear: both;)

실제 예: 이미지 왼쪽 정렬 + 아래쪽 내용이 따라 올라가지 않게 함: clear: both;

<img
src="https://1.bp.blogspot.com/pink-rose-250x250.png"
style="float: left; clear:both; width:100px; height:100px;"
/ >
<div style="clear: both;"></div>

이 부분은 의미가 없으므로 읽지 마세요. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다.

이 부분은 의미가 없으므로 읽지 마세요. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다.

참고: 예에서 보듯이, <div> 태그는 영역을 나누되 기본 여백이 영(0)이므로, 이미지와 그 아래쪽 내용 사이에 여백 없이 딱 붙게 됩니다. <div style="clear: both; margin-bottom: 20px; "></div> 와 같이, 마진(margin)을 지정해 주거나, 줄바꿈을 하는 <br /> 태그를 넣거나... 상황에 알맞게 여백을 조절하면 되겠습니다.

4. 기타 이미지 속성 설정하기

<img 태그에는 위에서 본 속성 밖에, 이미지의 테두리 속성을 지정하는 border, 이미지에 대한 설명을 보여주는 alt 등이 있습니다.

참고: 테두리 (border)의 종류와 특성에 대한 설명은 링크 페이지에 있습니다.
>> HTML DIV tag - 테두리 그리기 STYLE - BORDER
>> HTML HR tag : 가로줄 넣기와 굵기 색상 정렬 등 속성 지정하는 방법
>> 테두리선 종류 - BORDER LINE TYPE : solid, dotted, dashed, double, groove, inset, outset, ridge

5. 클래스(class)로 이미지 속성 일괄 적용하기

특정한 이미지 하나에만 속성을 주어 꾸밀 때는 위와 같이 스타일(style) 속성을 사용하면 편합니다. 그러나, 여러개의 이미지에 동일한 속성을 일괄적으로 적용하여야 하는 경우라면, 아래와 같이 클래스(class)를 이용하면, 적용하기도 쉽고, 수정하기도 쉽습니다.

태그 모양

참고: 위의 .myimage에서, 앞의 점(.)은 클래스(class) 이름임을 표시하는 것입니다. 클래스 이름 myimage는 기억하기 편하고 사용하기 쉽게 임의로 붙이면 됩니다. 다만, 같은 이름이 중복되어서는 안됩니다.

클래스를 활용하는 실제 예:

이 부분은 의미가 없으므로 읽지 마세요. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다.이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다.이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다. 이 부분은 단순히, float 속성에 의하여, 이미지 아래쪽 내용이 이미지 옆의 빈 공간으로 따라 올라가는 현상과 그에 따른 여백 설정을 설명하기 위한 것입니다.

참고: 위 예에서는 이미지를 하나만 넣었지만, 이미지를 여러개 넣으면, 모두 같은 설정이 적용 됩니다.

>> HTML IMG tag: 이미지 테두리 둥글게 하기 (border-radius)
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML @media, class=visible : 화면 스크린 크기에 따라 영역이나 가젯을 표시 / 숨김 - 반응형 테마에서 모바일 데스크탑에서만 보이게 / 안보이게

2018-05-17T13:59:00.002-04:00

반응형 테마는 스크린이 작은 모바일 기기와 해상도가 높은 데스크탑 모니터까지 동일한 테마가 보이게 됩니다.

그러한 특성상, 스크린 사이즈에 따라 특정한 영역이나 위젯(가젯) 등을 숨기거나 보이게 할 필요가 있을 때가 있습니다.

아래는 그러한 기능을 구현할 수 있는 코드들입니다.

주의할 것은, 실제로는 불려 올라오지만, 외견상으로만 표시되지 않는 것이므로, 웹페이지의 소스보기를 하면, 내용이 그대로 노출 됩니다.

그러므로, 그래서는 안되는 경우에는사용하면 안되겠습니다.
예컨대, 구글 애드센스는 숨기거나 가려서는 안된다는 규정이 있으므로, 이 코드를 사용하면, 실제로는 애드센스가 불려 오지만, 숨겨져 보이지 않게 되므로, 정책위반에 해당할 가능성이 높을 것입니다.

1. HTML 가젯을 추가하고, 해당 가젯은 스크린 사이즈가 450px 이하일 때만 보이게 하는 코드입니다.

[스크린 사이즈가 450px 이하일 때만 표시되게 하는 코드]

@media screen and (min-width: 450px) {
#HTML {display:none;}
}

위 태그는 min-width 를 max-width 로 바꾸어서 해도 됩니다.

@media screen and (max-width: 999px) {
#HTML {display:none;}
}

2. 접속하는 스크린 크기에 따라, 보여줄 내용을 각각 다르게 하려면, 아래와 같은 방식으로 하면 됩니다.

[ (1) 접속하는 스크린 크기에 따라 표시/숨김을 제어하는 CSS ]

@media all and (max-width: 959px) {
    .naeyong .x700{display:block;}
    .naeyong .x490{display:none;}
    .naeyong .x290{display:none;}
}

@media all and (max-width: 720px) {
    .naeyong .x700{display:none;}
    .naeyong .x490{display:block;}
    .naeyong .x290{display:none;}
}

@media all and (max-width: 479px) {
    .naeyong .x700{display:none;}
    .naeyong .x490{display:none;}
    .naeyong .x290{display:block;}
}

[ (2) 스크린 크기에 따라 보여줄 내용]

<div class="naeyong">
    <div class="x700">데스크탑과 같은 큰 스크린으로 접속시 보여줄 내용</div>
    <div class="x490">타블렛과 같은 중간 크기 스크린으로 접속시 보여줄 내용</div>
    <div class="x290">스마트폰 같은 작은 크기 스크린으로 접속시 보여줄 내용</div>
</div>

3. <DIV> 영역을 데스크탑 모니터에서만 표시되게 하는 코드 입니다.

[데스크탑 컴퓨터 등의 해상도가 높은 큰 모니터에만 보이게 하는 코드]

위와는 반대로 <DIV> 영역을 모바일 기기등과 같이 스크린 사이즈가 작은 경우에만 표시되게 하는 코드 입니다.

[모바일 기기와 같이 해상도가 낮은 작은 스크린에서만 보이게 하는 코드]

4. 위는 스크린 사이즈에 따라 표시(visible)하는 코드이고, 아래는 그와 반대로 스크린 사이즈에 따라 숨기는(hidden) 코드입니다. 사용법은 위와 같습니다.

[모바일 기기와 같이 해상도가 낮은 작은 스크린에서만 보이게 하는 코드]

hidden-sm
hidden-md
hidden-xs

5. <A> 링크 태그를 보이거나 숨기려면 아래와 같이 할 수 있습니다

도움이 되기를 바랍니다.

HTML BUTTON tag : 버튼 태그 사용법 - 버튼 만들기와 꾸미기 - 글자 폰트 테두리 색상 여백 스타일

2018-04-08T05:05:00.002-04:00

블로그나 웹페이지에 잘 어울리는 예쁜 버튼을 만들어 다는 것은 그리 쉬운 일이 아닌 것 같습니다. 그림 이미지나 아이콘을 만들어 멋있게 만들 수 있지만, 경우에 따라서는 버튼 이미지가 표시되지 않아 보기가 좋지 못한 경우도 볼 수 있습니다.

HTML의 버튼 태그 <button>를 사용하면, 손쉽게 만들 수 있고, 표시되지 않는 문제도 없으니 좋은 것 같습니다. DIV 태그나 SPAN 태그와 A 링크 태그를 사용하여 만들어도 되지만, 자체로서 버튼의 기능을 가진 Button 태그가 편한 것 같습니다. 아래는 버튼 태그를 사용하여 만든 몇 가지 예입니다.
참고: HTML A tag: 글자(텍스트)로 버튼 만들기: DIV, SPAN

1. 버튼 만들기

[버튼 태그 기본 모양]

버튼 태그에서 버튼의 크기는 기본적으로 버튼안에 들어 가는 글자나 그림의 크기에 따라 자동으로 조절이 됩니다.

[홈(Home)으로 가기]

실제 적용한 모양

[이전 페이지로 가기 : 브라우저의 이전 페이지로 가기 기능 Go back]

<button onclick="goBack()">앞쪽 페이지로</button>
<script>
function goBack() {
window.history.back();
}
</script>

실제 적용한 모양

[뒤쪽 페이지로 가기 : 브라우저의 뒤쪽 페이지로 가기 Go forward]

<button onclick="goForward()">뒤쪽 페이지로</button>
<script>
function goForward() {
window.history.forward();
}
</script>

실제 적용한 모양

[현재 페이지에서 맨 위로 가기]

실제 적용한 모양

[특정한 페이지로 가기]

실제 적용한 모양

[안내 말 띄우기]

실제 적용한 모양

[폼 만들기]

실제 적용한 모양 : 이 예제는 <button> 태그를 <form> 태그에서 사용하는 예를 보인 것으로, 폼의 데이타를 받는 서버가 설정되지 않았으므로, 제대로 작동하지 않습니다.

[버튼을 페이지 폭 전체 크기로 만들기]

실제 적용한 모양 : 이 예제는 버튼을 페이지 가로폭 전체 크기로 만든 예를 보인 것입니다. 버튼의 속성은 아래쪽 예제를 참고하여 알맞게 적용하면 됩니다.

2. 버튼 태그 <button> 꾸미기

페이지에 여러개의 버튼을 두고, 동일한 속성으로 꾸미려면 클래스(class)로 지정하면 편할 것입니다. 그렇지 않고 버튼이 하나이거나, 여러개이지만 각각 속성을 달리 하려면, <button> 태그 안에 스타일(style) 속성을 주어 꾸미면 되겠습니다.

[버튼 태그에 직접 스타일 속성 주기 기본 모양]

[버턴 태그에 직접 속성을 준 예 1]

실제 적용한 모양

[버턴 태그에 직접 속성을 준 예 2]

실제 적용한 모양

[버턴 태그에 직접 속성을 준 예 3 : 버튼을 가로 가운데 두기]

실제 적용한 모양

[버턴 태그에 직접 속성을 준 예 3 : 버튼을 가로 오른쪽에 두기]

실제 적용한 모양

버튼을 위치시킬 때, 줄바꿈이 일어나지 않게 하려면, 위와 같이 줄바꿈이 일어나지 않는 <span>태그를 사용하면 되고, 줄을 바꾸어 영역을 설정하고, 그 영역 안에 버튼을 위치 시키려면, <div> 태그를 사용하면 됩니다.

[버튼 태그를 <div> 영역에 넣고, 위치를 지정한 태그 기본 모양]

ㅇ 버튼을 <div> 영역의 오른쪽에 위치시키려면, <div align="right">
ㅇ 버튼을 감싸고 있는 <div> 영역에 여백, 색상 등의 속성을 주려면, 아래와 같이 스타일(style)을 지정해 주면 됩니다.
<div align="center" style="border:1px solid red">

참고:
HTML DIV tag: 좌우정렬하기 ALIGN : left, center, right
HTML DIV tag : DIV 영역 자체를 페이지의 가로 가운데에 위치시키는 방법
HTML DIV tag: 영역내 글자(폰트) 종류, 크기, 색상, 굵기, 줄간격 등을 설정하는 방법

버튼이 여러개 일 경우에 일괄적으로 동일한 속성을 주려면, 아래와 같이 클래스(class)를 지정하여 주면 편리합니다.

[버튼 태그에 클래스(class)를 지정한 태그 기본 모양]

[버튼에 스타일 속성을 일괄 적용하기 위한 클래스(class) 예]

[ <Button> 태그를 <A> 링크 태그 안에 넣은 예제]

위의 예제들과는 달리, <button> 태그를 <A>태그 안에 넣은 경우입니다. 대체로는 위의 예제들과 같이 하면, 잘 작동을 하지만, 어떤 특수한 조건에 닿으면, 제대로 작동하지 않는 경우가 있습니다. 이럴 때에는, 이 예제와 같이 하면 해결이 될 수 있습니다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML 간격 조절: 글자간격 단어간격 줄간격 letter-spaceing word-spacing line-height

2017-04-01T06:08:00.001-04:00

블로그에서는 일반적으로 어느 정도 틀이 짜여 있으므로, 별도로 글자 간격이나 단어 간격 또는 줄 간격을 조절할 일은 없는 것 같다.
메뉴나 특정한 영역 등에서는 간격 조절이 필요할 때가 있다. 방법은 다음과 같이 태그 속성을 주면 된다.

[글자/단어/줄 간격 조절 속성]

letter-spacing: 1.1em; 글자 간격
word-spacing: 1.2em; 단어(낱말) 간격
line-height: 1.5em; 줄 간격

글자간격 (letter-spacing)과 낱말간격(word-spacing) 차이점

말 그대로 글자간격(letter-spaicng)은 글자 (영어에서는 알파벳) 하나 하나의 간격을 조절하는 것이고, 낱말간격 (word-spacing)은 낱말 하나 하나의 간격을 조절하는 것이다. 여기서 낱말은 띄어 쓰기를 기준으로 하나의 낱말로 인식된다. 간격 속성을 준 모습을 비교해 보면 아래와 같다.

간격 속성을 설정하지 않은 모습

3세 단군 가륵께서 삼랑 을보륵으로 하여금 정음 38자(正音三十八字)를 만들게 하시고 이를 가림토(加臨土) 또는 가림다(加臨多)라 하였다.

글자 간격을 실제 적용한 모습 letter-spacing: 1em

3세 단군 가륵께서 삼랑 을보륵으로 하여금 정음 38자(正音三十八字)를 만들게 하시고 이를 가림토(加臨土) 또는 가림다(加臨多)라 하였다.

글자 간격 (letter-spacing)을 주었으므로, 하나 하나의 글자 간격이 벌어짐

낱말 간격을 실제 적용한 모습 word-spacing: 1em

3세 단군 가륵께서 삼랑 을보륵으로 하여금 정음 38자(正音三十八字)를 만들게 하시고 이를 가림토(加臨土) 또는 가림다(加臨多)라 하였다.

낱말 간격 (word-spacing)을 주었으므로, 띄어 쓰기를 기준으로 하여 낱말 하나 하나의 간격이 벌어짐

간격 속성을 설정하지 않은 모습

I don't think of anything except that I could keep on proving my figuring was right.

글자 간격을 실제 적용한 모습 letter-spacing: 1em

I don't think of anything except that I could keep on proving my figuring was right.

낱말 간격을 실제 적용한 모습 word-spacing: 1em

I don't think of anything except that I could keep on proving my figuring was right.

줄 간격 설정 line-height

줄 간격 속성을 주지 않은 모습 (블로거 자체 설정이 적용됨)

3세 단군 가륵께서 삼랑 을보륵으로 하여금 정음 38자(正音三十八字)를 만들게 하시고 이를 가림토(加臨土) 또는 가림다(加臨多)라 하였다. 신시에는 산목이 있었고 치우 때에는 투전목이 있었으며 부여에는 서산이 있었다.

줄 간격 속성을 0으로 준 실제 모습 line-height: 0em

줄간격을 0em으로 주면 줄 간의 간격이 없으므로, 위와 같이 겹쳐 보인다.

줄 간격 속성을 1.5em으로 준 실제 모습 line-height: 1.5em

줄 간격 속성을 3em 으로 준 실제 모습 line-height: 3em

글자간격, 낱말간격 그리고 줄간격을 주는 수치 단위는 px, pt로 하여도 되지만, 그 보다는 em 이나 % 로 주는 것이 좋을 것 같다.

px(픽셀)과 pt(포인트)는 고정되므로 블로거나 웹페이지의 전체적인 글자 크기를 조절하여도 반영이 되지 않지만, em이나 %는 해당 영역의 글자 크기에 대한 비율 개념이므로 글자 크기를 조절하면 그에 따라 간격도 조절이 되므로 유동성이 있기 때문이다.

>> HTML FONT tag: 폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법
>> HTML 단위: 글자 등의 크기를 지정하는 단위 : px, pt, %, em 특성과 차이점
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML 정렬하기 : 왼쪽 오른쪽 가운데 양쪽 정렬 - text-align: left right center justify

2017-04-01T04:21:00.002-04:00

블로그나 웹페이지에서 특정 영역의 내용을 왼쪽 오른쪽 가운데 또는 양쪽 정렬을 할 필요가 있을 때는 다음과 같이 태그 속성을 주면 된다.

text-align: left;       왼쪽 정렬
text-align: right;    오른쪽 정렬
text-align: center; 가운데 정렬
text-align: justify;   양쪽 정렬

아래는 DIV 영역에 정렬 속성 (text-align)을 준 실제 모습들을 비교한 것이다.
얼핏보면 별 차이가 없어 보일 수 있지만, 왼쪽과 오른쪽 끝 선을 보면 차이가 있다.

실제 적용한 모습 : 왼쪽 정렬 text-align: left;

서울특별시 부산광역시 대구광역시 인천광역시 광주광역시 대전광역시 울산광역시 세종특별자치시 경기도 강원도 충청북도 충청남도 전라북도 전라남도 경상북도 경상남도 제주특별자치도

우리는 이에 우리 조선이 독립한 나라임과 조선 사람이 자주적인 민족임을 선언한다. 이로써 세계 만국에 알리어 인류 평등의 큰 도의를 분명 히 하는 바이며, 이로써 자손만대에 깨우쳐 일러 민족의 독자적 생존의 정당한 권리를 영원히 누려 가지게 하는 바이다. 吾等은 玆에 我朝鮮의 獨立國임과 朝鮮人의 自主民임을 宣言하노라. 此로써 世界萬邦에 告하야 人類平等의 大義를 克明하며, 此로써 子孫萬代에 誥하야 民族自存의 正權을 永有케 하노라.

실제 적용한 모습 : 오른쪽 정렬 text-align: right;

실제 적용한 모습 : 가운데 정렬 text-align: center;

실제 적용한 모습 : 양쪽 정렬 text-align:justify;

왼쪽 오른쪽 가운데 정렬은 대부분 익숙한 것 같고 양쪽 정렬 (justify)는 흔히 쓰이지는 않는 것 같다.

양쪽 정렬은 폭이 좁은 일정한 박스 영역 안에 메뉴 링크 등을 넣을 때 사용하면 좋은 것 같다. 폭이 좁은 영역에서는 오른쪽 끝 선이 들쭉 날쭉 하여 어지러워 보이는 경우가 많으므로 그럴 때 양쪽 정렬을 하면, 왼쪽과 오른쪽 끝 선이 가지런하여 깔끔해 보인다.
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML 공백(space)과 공백문자( )의 차이점과 사용방법

2015-04-18T19:50:00.001-04:00

HTML에서는 공백(space)을 인식하되, 들어간 스페이스 수에 상관없이 1 칸으로 처리하여 보여준다. 행의 맨 앞에 있는 공백(space)는 무시되어 표시되지 않으므로, 행 맨앞에는 공백문자를 쓰야 한다.

공백문자 코드는   이고, 키보드의 스페이스 키 한 번을 친 것과 같이 한 칸을 띄운다. 여러 칸의 공백을 주려면, 원하는 만큼 공백문자를 연이어 붙여 쓰면 된다.   는 non-breaking space (줄바꿈을 하지 않는 공백)의 줄임말이다.

[공백 예 1]

0123
01234
01234

0123 0123
0123 0123

[실제 적용한 모습]

0123
01234
01234

0123 0123
0123 0123

첫 째줄, 둘 째줄, 셋 째줄을 비교하면, 행 맨앞의 스페이스는 모두 무시되어 없는 것과 마찬가지로 표시됨을 알 수 있다.
네 째줄과 다섯 째 줄을 비교하면, 문자 사이의 공백은 그 수에 상관없이 한 칸으로 인식하여 처리됨을 알 수 있다.

[공백 예 2]

01234
 01234
  01234
   01234
    01234
     01234

[실제 적용한 모습]

01234
01234
  01234
   01234
    01234
     01234

공백문자는 위치에 상관없이 원하는 공백만큼 연이어 붙여 쓰면 된다

[공백 예 3]

01234
 01234
01234

[실제 적용한 모습]

01234
01234
01234

행 맨앞에 공백을 준 경우와 공백문자를 넣은 경우의 차이를 볼 수 있다. 세째줄의 맨 앞에 준 공백은 무시되어 표시되지 않음을 볼 수 있다.

[공백 예 4]

    01234
    01234
   01234

[실제 적용한 모습]

01234
01234
01234

문자와 문자 사이의 공백(space)은 1칸으로 인식되므로, 공백문자를 4개 연이어 쓰는 것과 공백문자+공백+공백문자+공백 은 같은 결과가 된다 (첫째줄과 둘째줄 비교).
세번째 줄은 맨앞에 공백을 주었고, 행 맨 앞의 공백은 무시되므로 공백이 3개로 인식되어 처리되었다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML FONT tag: 폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법

2015-03-23T03:59:00.000-04:00

폰트에 속성을 주는 방법은 <font >태그와 다른 태그 안의 스타일(style) 속성 두 가지를 쓸 수 있겠다.

이전에는 폰트를 적용할 때 <font > ~~ </font>와 같이 하였는데, HTML5에서는 <font>태그를 지원하지 않는다. 물론, HTML5가 일반화되고 브라우저 버전이 올라가도 이전에 만들어진 HTML 문서의 <font>태그는 이상없이 작동을 할 것이므로 걱정할 일은 아니다.
단지, 앞으로 만드는 HTML문서는 가급적이면 스타일(style) 속성으로 주는 것이 낫지 않을까 싶다.

<font> ~ </font>태그로 속성주기
[ 예 ]

[실제 적용한 모습]

이 글자는 font 태그로 속성을 주었다

위에서 <font>태그를 설정한 내용과 실제 적용된 모습이 다르다.
이렇게 된 이유는, 구글블로그는 페이지 첫머리에 <!DOCTYPE HTML>로 선언하여 HTML5가 적용되기 때문이고, 위의 예에서 준 <font> 태그를 강제로 스타일 속성으로 바꾸어 적용하기 때문이다.

스타일(style)로 속성주기

스타일(style)은 <div> <p> <span> 등과 같이 여러 태그에서 쓸 수 있다. (각 태그에 대한 자세한 설명은 링크페이지를 참조)

[예]

<span style = " font-size:1.5em; color: green;">
이 글자는 Span에 스타일(style)로 속성을 주었다
</span>

[실제 적용한 모습]

이 글자는 Span에 스타일(style)로 속성을 주었다

스타일(style)로 폰트 속성을 줄 때, 한꺼번에 줄 수도 있고, 항목을 각각 지정하여 줄 수도 있다.

스타일에서 폰트 속성을 한번에 주기

[한꺼번에 폰트 속성을 주는 예]

[실제 적용한 모습]

여기는 폰트 속성을 한꺼번에 주었다

ㅇ font: 다음의 각 항목 순서는
폰트스타일(font-style) 폰트웨이트(font-weight) 폰트사이즈(font-size)/줄간격(font-height) 글꼴(font-family) 이다.

ㅇ 폰트스타일과 폰트웨이트는 순서가 바뀌어도 이상없이 잘 보여진다.
ㅇ 색상은 스타일 안에 별도로 지정하여 속성을 주어야 한다.

[한꺼번에 폰트 속성을 주고 색상을 지정한 예]

[실제 적용한 모습]

여기는 폰트 속성을 한꺼번에 주고 색상을 녹색으로 주었다

[색상을 지정하는 방법]
파랑(blue), 빨강(red) 등과 같이 HTML에서 지정할 수 있는 이름은 기본색상 17개를 포함하여 모두 140가지가 있다.
어떤 브라우저에서든 문제없이 정확하게 표현할 수 있는 웹안전색상(Web safe colors) 또는 웹표준색상(Web standard color)은 216가지가 있다.

예) 녹색을 윗쪽은 이름인 'green'으로 지정하고, 아래쪽은 Hex코드인 #008000 으로 지정함

<div style="color: green;">
이곳은 DIV 영역이며, 글자색을 green(녹색)으로 지정함
</div>

<div style="color: #008000;">
이곳은 DIV영역이며, 글자색을 Hex코드 #008800(녹색)으로 지정함
</div>

[HTML에서 이름으로 색상을 지정할 수 있는 기본 색상 17가지]

aqua	#00FFFF	olive	#808000
black	#000000	orange	#FFA500
blue	#0000FF	purple	#800080
fuchsia	#FF00FF	red	#FF0000
gray	#808080	silver	#C0C0C0
green	#008000	teal	#008080
lime	#00FF00	white	#FFFFFF
maroon	#800000	yellow	#FFFF00
navy	#000080

스타일에서 폰트 속성을 항목별로 각각 주기
스타일에 폰트에 속성을 주고자 하는 항목만 넣고 속성을 주면 되고, 항목의 순서는 상관이 없다.

[폰트 속성을 주는 항목들]

색   상 color: 색상이름 또는 색상코드 ;
굵   기 font-weight: bold ;
기울임 font-style: italic;
크   기 font-size: 숫자px, 숫자% 또는 숫자em ;
글   꼴 font-family: 굴림, 돋움, 궁서, Arial, 등등 ;
줄높이 line-height: 숫자px, 숫자% 또는 숫자em ;

[예: Style에서 폰트 속성을 준 코드 모습]

<span
style="
font-style: italic ;
font-weight: bold;
font-size: 1.5em;
line-height: 1.0em;
color: navy;
font-family: arial;
">
여기는 스타일에서 폰트 속성을 각각 주었다
</span>

[실제 적용한 모습]

여기는 스타일에서 폰트 속성을 각각 주었다

폰트의 각 항목별 상세 설명
ㅇ 각 항목의 수자는 픽셀(px), 퍼센트(%), 이엠(em), 포인트(pt) 등을 쓸 수 있다. (단위에 관한 자세한 설명은 링크페이지 참조)
ㅇ 아래의 실제 적용 모습은 페이지의 설정에 따라 달라진다. 아래에서 보여지는 것은 현재 페이지의 설정을 기준으로 보여지는 것이다.

[글자크기: 폰트 사이즈 font-size]

xx-large [더블 엑스 라쥐] 아주 크게
x-large [엑스 라쥐] 조금 크게
large [라쥐] 크게
medium [미디엄] 중간 - 기본 글자 크기
small [스몰] 작게
x-small [엑스 스몰] 조금 작게
xx-small [더블 엑스 스몰] 아주 작게

smaller [스몰러] 더 작게 - 상위 요소(parent element)의 폰트 크기에 비해 더 작게
larger [라쥐어] 더 크게 - 상위 요소(parent element)의 폰트 크기에 비해 더 크게

initial [이니셜] 초기(기본, default) 폰트 크기
inherit [인헤리트] 상위요소(parent element)의 폰트 크기

[실제 적용한 모습]

이 글자의 폰트크기는 xx-large [더블 엑스 라쥐]이다
이 글자의 폰트크기는 x-large [엑스 라쥐]이다
이 글자의 폰트크기는 large [라쥐]이다
이 글자의 폰트크기는 medium [미디엄]이다
이 글자의 폰트크기는 small [스몰]이다
이 글자의 폰트크기는 x-small [엑스 스몰]이다
이 글자의 폰트크기는 xx-small [더블 엑스 스몰]이다

이 글자의 폰트크기는 smaller [스몰러]이다
이 글자의 폰트크기는 larger [라쥐어]이다

이 글자의 폰트크기는 initial [이니셜]이다
이 글자의 폰트크기는 inherit [인헤리트]이다

ㅇ HTML문서에서 폰트의 기본 크기(default font size)를 1.2로 주었다면, medium은 12pt, small은 10tp, x-small은 8pt, large는 14pt, x-large는 16pt 정도된다고 볼 수 있다.
ㅇ HTML에서 기본폰트크기는 방문자와 페이지의 내용 등을 잘 헤아려서 결정할 필요가 있다. 문서 안에서 폰트 크기를 조절할 때 대체로 기본폰트크기를 기준으로 하기 때문이다.

[글자꾸밈: 폰트 스타일 font-style]

normal [노멀] 브라우저가 보여주는 기본(default) 스타일
italic [이탤릭] 기울임
oblique [오블맄] 기울임
initial [이니셜] 초기(기본, default) 스타일
inherit [인헤리트] 상위요소(parent element)의 스타일

[실제 적용한 모습 : 쉽게 구분되도록 하기 위해 font-size:1.2em;로 함]

이 글자의 스타일은 normal [노멀] 이다
이 글자의 스타일은 italic [이탤릭] 이다
이 글자의 스타일은 oblique [오블맄] 이다
이 글자의 스타일은 initial [이니셜] 이다
이 글자의 스타일은 inherit [인헤리트] 이다

[글자변형: 폰트 베리언트 font-variant]

normal [노멀] small-caps [스몰 캡스] 영문자를 작은 대문자로 표시함
initial [이니셜] 초기(기본, default) 값으로 표시함
inherit [인헤리트] 상위요소(parent element)와 같이 표시함

[예: 아래의 실제적용한 모습의 코드]

<span style="font-variant:normal;">이 글자의 VARIANT는 normal [노멀] 이다</span>
<span style="font-variant:small-caps;">이 글자의 VARIANT는 small-caps [스몰 캡스] 이다</span>
<span style="font-variant:initial;">이 글자의 VARIANT는 initial [이니셜] 이다</span>
<span style="font-variant:inherit;">이 글자의 VARIANT는 inherit [인헤리트] 이다</span>

[실제적용한 모습]

이 글자의 VARIANT는 normal [노멀] 이다
이 글자의 VARIANT는 small-caps [스몰 캡스] 이다
이 글자의 VARIANT는 initial [이니셜] 이다
이 글자의 VARIANT는 inherit [인헤리트] 이다

[글자굵기: 폰트 웨이트 font-weight]

normal [노멀] 기본(default)bold [볼드] 두껍게
bolder [볼더] 더 두껍게
lighter [라이터] 더 가늘게

initial [이니셜] 초기(기본, default) 값으로 표시
inherit [인헤리트] 상위요소(parent element)와 같이 표시

<수자로 폰트 웨이트 설정>
수자가 클 수록 더 두터워지며, 위의 normal [노멀]은 400과 같고, bold [볼드]는 700과 같다.
100 200 300 400 500 600 700 800 900

[실제 적용한 모습]

이 글자의 폰트웨이트는 normal [노멀] 이다
이 글자의 폰트웨이트는 bold [볼드] 이다
이 글자의 폰트웨이트는 bolder [볼더] 이다
이 글자의 폰트웨이트는 lighter [라이터] 이다

이 글자의 폰트웨이트는 initial [이니셜] 이다
이 글자의 폰트웨이트는 inherit [인헤리트] 이다

이 글자의 폰트웨이트는 100 이다
이 글자의 폰트웨이트는 200 이다
이 글자의 폰트웨이트는 300 이다
이 글자의 폰트웨이트는 400 이다
이 글자의 폰트웨이트는 500 이다
이 글자의 폰트웨이트는 600 이다
이 글자의 폰트웨이트는 700 이다
이 글자의 폰트웨이트는 800 이다
이 글자의 폰트웨이트는 900 이다

[줄간격: 라인 하이트 line-height]

normal [노멀] 기본(default). 브라우저들이 대체로 150%를 기본으로 하는 것 같다.
initial [이니셜] 초기(기본, default)값
inherit [인헤리트] 상위요소(parent element)와 같이 표시
수자로 지정: 픽셀(px), 퍼센트(%), 이엠(em), 포인트(pt) 등으로 지정함

[실제 적용한 모습]

이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다.

이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다.

이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다.

이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다.

이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다.

이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다.

이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다.

이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다.

[글꼴: 폰트 패밀리 font-family]

글꼴은 아래와 같이 여러가지를 줄 수 있다.
글꼴과 글꼴의 구분은 쉼표( ,)로 하고, 첫번째 글꼴은 따옴표(" ")로 감싸 준다.

font-family: "Hanna", Jeju Gothic, Nanum Gothic, Serif;

브라우저는 첫번째 글꼴을 표시할 수 있으면 첫번째 글꼴로 표시를 하고, 첫번째 글꼴이 없으면 두번째 글꼴로 표시를 한다. 두번째 글꼴도 없으면 세번째 글꼴.... 순서로 표시한다.

위의 예에서는 한나(Hanna)체가 있으면 한나체로 표시하고 한나체가 없으면 그 다음의 제주고딕체(Jeju Gothic)로 표시한다. 두번째의 제주고딕체도 없으면 또 그 다음의 나눔고딕체(nanum Gothic)로 표시하고..... 그런 순서로 표시가 된다.

글꼴이 있느냐는 웹페이지를 보는 방문자의 컴퓨터에 해당 글 꼴이 있는가를 말한다. 그러니까, 방문자의 컴퓨터에 해당 글꼴이 없으면, 위와 같이 글꼴을 지정해 주어도, 의미가 없다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...
>> HTML 간격 조절: 글자간격 단어간격 줄간격 letter-spaceing word-spacing line-height

HTML HR tag : 가로줄 넣기와 굵기 색상 정렬 등 속성 지정하는 방법

2015-01-28T12:39:00.007-05:00

블로그나 웹페이지에 가로줄을 넣는 태그는 <hr>이며, hr은 horizontal rule의 두문자어이다.
<hr>이라고만 간단하게 넣으면 가로줄이 그으진다. 이 때는 블로그나 웹페이지에서 지정한 기본 설정이 적용된다.

[1] 가로줄 넣기 - 기본

<hr>

실제 적용한 모습

[2] 가로줄의 선종류 굵기 색상 지정
가로줄에 속성을 지정하면 아래와 같은 모양이 된다.

선종류: solid dotted dashed double groove ridge inset outset 등이 있다
선굵기: 단위는 px, pt, %, em 등을 쓸 수 있다
선색상: red blue black 등과 같이 색상이름을 쓰도 되고, #eeeeee 와 같이 코드로 쓰도 된다

아래의 예에서는 선의 특징을 보이기 위해 선굵기를 10px로 굵게 하였다. 선굵기를 1px와 같이 가늘게 하면 다르게 보이므로 알맞게 조절하여 꾸미면 된다.

[선종류: solid]

실제 적용한 모습

[선종류: dotted]

실제 적용한 모습

[선종류: dashed]

실제 적용한 모습

[선종류: double]

실제 적용한 모습

[선종류: groove]

실제 적용한 모습

[선종류: ridge]

실제 적용한 모습

[선종류: inset]

실제 적용한 모습

[선종류: outset]

실제 적용한 모습

[3] 가로줄에 길이를 지정하고 정렬하기

[길이를 지정하고 왼쪽 정렬]

실제 적용한 모습

[길이를 지정하고 가운데 정렬]

실제 적용한 모습

[길이를 지정하고 오른쪽 정렬]

실제 적용한 모습

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML 단위: 글자 등의 크기를 지정하는 수치 단위 : px, pt, %, em 차이점

2014-01-01T01:34:00.002-05:00

블로그나 웹페이지를 작성할 때, 글자나 줄간격 등의 크기를 수자로 지정하게 되는데, 이때 사용되는 단위로는 px(pixel), pt(point), %(percent), em 등이 있다.

수치 크기 단위 종류

px (Pixel / 픽셀) :
픽셀은 모니터에 가로/세로로 이루어진 하나의 격자(사각형)를 말한다. 모니터의 격자 간격을 픽셀피치라고 하며, 대체로 데스크탑 모니터 보다 노트북 모니터가 픽셀피치가 작고, 따라서 글자가 더 작게 보인다. 어쨋거나 1px은 격자 하나의 크기를 뜻한다.

pt (Point / 포인트):
포인트는 인치(inch)의 개념이고, 1인치(inch)는 2.54 센티미터(cm : centimeter)이다. 1pt는 72분의 1인치(1/72)를 말한다. 따라서, 포인트는 1pt~ 72pt까지 있다.

% (Percent / 퍼센트):
퍼센트는 백분율이며, 상위요소(부모요소, parent element)에 대한 상대적인 비율을 말한다. 즉, 50%는 부모요소 크기의 절반크기라는 뜻이며, 100%는 부모요소와 크기가 같다는 뜻이다.

em (이엠)
이엠은 현재 지정되어 있는 폰트에서 알파벳 대문자 "M"의 가로 너비를 기준으로 한 상대적인 크기를 배율로 표시하는 단위이다. 따라서, 기본적으로는 위의 퍼센트(%)와 같은 개념이다.

즉, 1em은 현재 지정되어 있는 글자 크기와 같은 크기를 뜻하고, 100%와 같은 결과가 된다. 0.5em은 현재 적용되어 있는 크기의 절반 크기를 뜻하고, 50%와 같은 크기가 되며, 1.5em은 현재 적용되어 있는 크기의 1.5배를 말하고, 150%와 같은 크기가 된다.

<> em 이 무엇의 약자인가에 대한 명확한 설명을 찾을 수 없다. 다만, "Equal to the width of the capital letter M / 대문자 M의 가로폭과 같다" 라고 설명하는 것에 비추어 볼 때 Equal의 e와 M을 합쳐 만든 것이 아닌가 추측할 따름이다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML 줄바꿈(br 태그), 문단지정(p 태그), 영역지정(div 태그), 범위지정(span 태그) 차이점 비교

2013-12-24T01:23:00.006-05:00

<br />태그의 br은 break(Line break)의 약자로서, 줄을 바꾼다는 뜻이고,
<p> </p>태그의 p는 paragraph의 두문자어로 '문단'이란 뜻이다.

<div> </div>의 div는 division의 약자이며, '영역을 나눈다'는 뜻이고,
<span> </span>의 span은 '무엇이 적용되는 범위'라는 뜻이다.

쓰임의 목적으로 보면,
br태그는 하나의 문단안에서 줄을 끊어서 줄바꿈을 하는 것이 목적이고,
p태그는 문단과 문단을 나누는 것이 목적이다.
div태그는 하나의 페이지 안에서 영역을 나누는 것이 목적이고,
span태그는 줄을 바꾸거나 영역을 나누지 않고 일정한 범위를 지정하여 속성을 주는 것이 목적이므로, 줄바꿈을 하지않은 채 글꼴, 색상, 여백 등을 조절할 때 주로 사용된다.

태그를 넣는 위치로 보면,
br태그는 줄을 끊어 바꾸고자 하는 위치에 넣게되며,
p태그는 하나의 문단을 p태그로 싸게 되므로 <p>하나의 문단</p> 모양이 되고,
div태그는 하나의 영역을 div태그로 싸게 되므로 <div>하나의 영역</div> 모양이 되고,
span태그는 일정한 범위를 sapn태그로 싸게 되므로 <span>일정한 범위</span> 모양이 된다.

줄바뀜 측면에서 보면,
br태그는 줄바뀜이 한 번 일어나고
p태그는 줄바뀜이 한 번 일어나되, 문단사이에 빈줄이 들어가므로, br태그가 두 번 들어간 것과 같은 모양이 된다. 즉, 줄바뀜이 두 번 일어나는 셈이다.
div태그는 줄바뀜이 한 번 일어나므로, div영역과 바깥과의 사이에 여백이 없다.
span태그는 줄바뀜이 일어나지 않는다.

태그에 주는 속성으로 보면,
br태그는 쓰임상 속성이 아주 단순하지만,
p태그, div태그, span태그는 태그로 싸인 부분에 다양한 속성과 스타일을 줄 수 있다.

br태그 예)
이 문장은 br태그의 앞쪽에 있는 문장이다.<br />이 문장은 br태그 뒤쪽에 있는 문장이다.

이 문장은 br태그의 앞쪽에 있는 문장이다.
이 문장은 br태그 뒤쪽에 있는 문장이다.

p태그 예)
<p>이 문단은 p태그로 감싼 첫 번째 문단이다.</p><p>이 문단은 p태그로 감싼 두 번째 문단이다.</p>

이 문단은 p태그로 감싼 첫 번째 문단이다.

이 문단은 p태그로 감싼 두 번째 문단이다.

br태그를 연속으로 주면 p태그와 같은 결과가 된다.
"이 문장은 br태그 앞쪽의 문장이다.<br /><br />이 문장은 br태그 뒤쪽의 문장이다."

이 문장은 br태그 앞쪽의 문장이다.

이 문장은 br태그 뒤쪽의 문장이다.

div태그 예)
이 부분은 div태그 앞에 있는 문장이다.<div>이 문장은 div태그 속에 들어간 문장이다.</div>

이 부분은 div태그 앞에 있는 문장이다.

이 문장은 div태그 속에 들어간 문장이다.

span태그 예)
이 부분은 span태그 앞에 있는 글이고, <span>이 부분은 span태그 안에 있는 글이다</span>

이 부분은 span태그 앞에 있는 글이고, 이 부분은 span태그 안에 있는 글이다

※ span태그에 아무런 속성을 주지 않았기 때문에, 외관상으로는 span태그가 없는 것과 차이가 없다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML IMG tag: 이미지 테두리 둥글게 하기 (border-radius)

2013-12-23T11:39:00.001-05:00

블로그나 웹페이지에 그림을 넣을 때, 테두리를 둥글게 다듬고자 한다면 이미지의 스타일에서 radius 값을 지정해 주면 된다.

[이미지의 스타일 속성 주기]

윗쪽의 그림은 "radius 값을 일괄적으로 7"로 주었을 때의 모양이고, 아래쪽 그림은 일괄적으로 "70"을 주었을 때의 모습이다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...