HTML 블럭/인라인 요소 정리

웹 2015. 7. 23. 15:16

인라인 요소

인라인 요소 특징 정리
영역 컨텐츠 크기 만큼
정렬 텍스트 정렬에 영향 받음. (텍스트의 위치를 지정하는 모든 속성)
박스모델 margin-left,right / padding, border ,float
중첩요소 인라인만 가능
특징 포지션이 텍스트와 유사하게 처리된다. (vertical-align 영향 받음)

블럭요소

블록요소 특징 정리
영역 지정 값 또는 지정 안할시 너비는 부모의 가로 크기, 세로는 컨텐츠 크기
정렬 마진(auto), 패딩 이용 (테이블 내의 경우 verertical aline)
박스모델 margin(auto 불가),padding,border ,float
중첩요소 블록,인라인 모두 가능
특징 양 옆에 요소를 둘수 없다.

인라인 블록요소

인라인 블록요소 특징 정리
영역 지정 값 또는 지정 안할시 너비는 컨텐츠 크기 만큼
정렬 텍스트 정렬에 영향 받음.(텍스트의 위치를 지정하는 모든 속성)
중첩요소 인라인만 가능
특징 포지션이 텍스트와 유사하게 처리된다. (vertical-align 영향 받음)

html5에서 추가된 기능

블록(block) 요소

블럭요소 정리
선택자 HTML사용 용도
article 아티클 콘텐츠
fieldset 필드셋 라벨
aside 어사이드 콘텐츠
figcaption 이미지 설명
blockquote 긴 인용
figure 그룹 미디어 콘텐츠 및 설명
body 페이지 바디
footer 영역 또는 페이지 푸터
br 줄바꿈
form 입력 폼
button 푸시버튼
h1-6 레벨 1-6의 헤더
canvas 드로잉 영역
head 페이지 관련 정보
caption 테이블 설명
header 섹션 또는 페이지 헤더
col 테이블 컬럼
hgroup 그룹 헤더 정보
colgroup 테이블 컬럼 그룹
hr 가로줄
dd 설명 정의
li 리스트 아이템
div 분할 영역
map 이미지 맵
dl 정의 목록
object 개체 임베딩
dt 정의 용어
ol 순서 지정 리스트
embed 외부 콘텐츠
output 폼 결과
p 단락
pre 미리 서식을 지정한 텍스트
progress 시간 소요 작업의 진행율 표시
section 웹 페이지 영역
table 테이블
tbody 테이블 바디
textarea 텍스트 입력 폼
tfoot 테이블 푸터
th 테이블 헤더
thead 테이블 헤더
tr 테이블 행
ul 순서없는 리스트
video 동영상 재생기

인라인요소(inline) 요소

인라인요소 정리
선택자 HTML사용 용도
a 앵커 링크
i 이탤릭
q 짧은 인용
abbr 줄임말
iframe 인라인 하위 윈도우
smalll 소형 인쇄
address 물리적인 주소
img 이미지 임베딩
select 선택 가능 목록
area 이미지 맵의 영역
input 입력 필드
source 미디어 리소스
audio 사운드 콘텐츠
ins 입력된 텍스트
span 지역화 적용 서식
bm 볼드 텍스트
keygen 폼에서 생성된 키
strong 굵은 강조
cite 짧은 인용
kbd 키보드 텍스트
sub 아래 첨자
code 코드 텍스트
label 폼 엘리먼트의 라벨
summary 상세정보 헤더
del 삭제된 텍스트
legend 필드셋 제목
sup 위 첨자
details 엘리먼트의 상세정보
link 리소스 참조
tbody 테이블 바디
dfn 정의된 용어
mark 마크 텍스트
td 테이블 데이터
command 명령 버튼
meter 측정 범위
time 날짜/시간
em 강조
nav 내비게이션 링크
var 변수
font 폰트 외양
optgroup 드롭다운 리스트 옵션

 

저작자표시 비영리 변경금지 (새창열림)

'웹' 카테고리의 다른 글

[CSS] box-sizing 속성  (0) 2015.07.23
text-align 속성의 특징  (0) 2015.07.23
웹폰트 적용 방법  (0) 2015.07.23
font-family  (0) 2015.07.23
HTML5 Custom Data Attribute  (0) 2015.07.22
Posted by 캐논볼
,

웹폰트 적용 방법

웹 2015. 7. 23. 15:04

기본 시스템 폰트가 아닌 일반 사용자 폰트로 웹을 표시해주는 것을 웹폰트를 적용한다라고 말합니다. 웹폰트는 @font-face를 이용해 클라이언트가 서버의 폰트를 다운받아 표시해줌으로써 클라이언트 PC에 해당 폰트가 없어도 웹사이트에서 제작자가 원하는 폰트로 사용자에게 보여줄 수 있습니다.

웹폰트 적용이 가능해진 이후로 디자이너들은 텍스트를 꾸미기 위해 이미지로 텍스트를 만드는 일이 크게 줄었습니다. 하지만 한글은 웹폰트를 적용하고도 알파벳처럼 깔끔하게 나오지 않아 아직까지 텍스트를 이미지로 만드는 경우가 꽤 있습니다. 원하는 폰트로 원하는대로 웹사이트에 표시를 할 수 있다고해서 단점이 없는것은 아닙니다.  클라이언트는 웹사이트의 텍스트를 읽어들이기위해 폰트파일을 다운로드 해야하고 그 사이동안은 텍스트가 보이지 않습니다. 이는 폰트파일의 용량이 크고 서버간의 통신 상태가 좋지 않다면 웹사이트를 사용자가 보는데 있어 많은 지연시간이 걸릴 수 있다는 얘기입니다.

하지만 이미지로 텍스트를 만드는 상황보다는 웹폰트를 사용하는 것이 결과물로 보나 개발과 유지보수 입장에서 보나 더 진보된 방법이라고 할 수 있습니다.

웹폰트를 적용하는 방법은 여러가지가 있습니다. 몇 가지를 소개해보겠습니다. 폰트는 나눔고딕(Nanum Gothic)을 예로 들겠습니다.

1. google font service를 이용한 CDN 링크방식

이 방식은 자신의 웹서버내에 폰트가 없는 경우 구글이 제공하는 font 서비스를 이용해 적용하는 방법입니다. 이 방법의 치명적인 단점은 로딩이 느리다는 것입니다. 웹사이트를 사용자가 보기 위해서 웹서버 요청 후 구글 font 서비스 서버에서 폰트파일을 읽어와야하기 때문에 이중으로 부담이 생기게 되고 곧 웹페이지를 여는데 시간이 걸리게 됩니다. 이 방법은 실제 운영하는 서비스에서는 그다지 권장하지 않습니다.

 

2. 자신의 서버에서 폰트를 불러오기

보시다시피 폰트 경로가 지정돼 있습니다. 이 방법은 1번의 방법과의 차이점이라면 구글 폰트에서 받아오던 폰트파일을 자신의 서버에서 직접 받아온다는 점입니다. 속도는 좀더 향상되지만 이 방법에도 문제가 있습니다. 브라우저마다 웹폰트를 사용하는 폰트파일 형식이 다릅니다. 따라서 woff와 eot 파일 2개를 동시에 불러오게 됩니다. 2개의 파일 중 하나는 사용하지 않는 불필요한 데이터입니다.

 

3. 2번의 방법을 개선한 방식

이 코드는 브라우저 환경에 따라 필요한 폰트만을 다운로드 받게 해줍니다. 브라우저 환경에 따라서 eot, woff, ttf 중 하나의 폰트파일을 받게되고 웹사이트에 적용하게 됩니다. 불필요한 파일을 받지 않음으로써 데이터의 부담은 줄고 모든 브라우저에 적용될 수 있는 최적의 코드입니다.

 

 

### http://theeluwin.github.io/NotoSansKR-Hestia/

 

저작자표시 비영리 변경금지 (새창열림)

'웹' 카테고리의 다른 글

text-align 속성의 특징  (0) 2015.07.23
HTML 블럭/인라인 요소 정리  (1) 2015.07.23
font-family  (0) 2015.07.23
HTML5 Custom Data Attribute  (0) 2015.07.22
CSS3 동위 선택자  (0) 2015.07.22
Posted by 캐논볼
,

font-family

웹 2015. 7. 23. 14:57

font-family = 일반적인 특성을 공유하는 폰트의 집합체

 

종류와 주로 쓰이는 상황

 

sans-serif : 컴퓨터 화면

 

serif : 신문

 

monospace : 소프트웨어 코드 예제(문자가 일정한 폭을 가짐)

 

cursive : 제목(흘림체)

 

fantasy : 화려한 양식

저작자표시 비영리 변경금지 (새창열림)

'웹' 카테고리의 다른 글

HTML 블럭/인라인 요소 정리  (1) 2015.07.23
웹폰트 적용 방법  (0) 2015.07.23
HTML5 Custom Data Attribute  (0) 2015.07.22
CSS3 동위 선택자  (0) 2015.07.22
HTML name과 id 태그 차이점  (0) 2015.07.22
Posted by 캐논볼
,

HTML5 Custom Data Attribute

웹 2015. 7. 22. 22:42

HTML 태그는 태그의 선언과 속성들로 구성됩니다. 

이때 태그의 속성(attribute)이라는 것은 어떻게 보면 현재 태그에 대한 추가적인 정보를 제공하는 일종의 메타데이터(Metadata)라고 생각할 수 있습니다.

메타데이터는 어떤 정보에 대한 정보를 의미합니다. 


기존의 HTML은 하나의 태그에 정해진 속성을 가집니다. ( id나 class, name 등과 같이 이미 정해진 속성들이 있습니다. )

그래서 기존에는 하나의 태그에 정해진 속성외에 다른 속성을 지정한다는것은 HTML의 표준을 위반하는 결과가 됩니다.


HTML5에서는 이러한 문제를 해결할 수 있는 커스텀 데이터 속성(Custom Data Attribute) 이 있습니다.


HTML5 커스텀 데이터 속성 (Custom Data Attribute) 특징

  - 속성의 시작은 반드시 data- 로 시작

  - 하나의 태그에 사용할 수 있는 커스텀 데이터 속성의 사용 제한은 없다. 즉 원하는 만큼 커스텀 데이터 속성 추가 가능.

  - 브라우저들은 커스텀 데이터 속성을 만나면 해석하지 않고 건너(Skip) 뛴다. 따라서 화면에 보이는데 아무런 영향을 주지 않음.

  - 자바스크립트와 CSS에서는 기존과 마찬가지로 커스텀 데이터 속성의 정보를 사용할 수 있다.

 

<!doctype html>
<html lang="ko"> 
<head>
  <meta charset="UTF-8">
  <title>HTML5와 커스텀 데이터 속성</title>  
  <style>
    input[data-type="number"] { background-color: yellow; }
  </style>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script>
    $(document).ready(function(e){

        //자바스크립트 
        var keyType0 = document.getElementById("key").getAttribute("data-type");    

        //jQuery data('dataName') : 해당 커스텀데이터속성의 값을 반환(dataName은 속성 'data-'를 제외한 이름)
        var keyType1 = $("#key").data("type");
        
        //jQuery attr('attrName') : 해당 속성의 값을 반환
        var keyType2 = $("#key").attr("data-type"); 

        alert("keyType0:"+keyType0+"\n"
             +"keyType1:"+keyType1+"\n"
             +"keyType2:"+keyType2+"\n");
    });
  </script>

 </head>
 <body>
    <input type="text" id="key" data-type="number"/>
 </body>
</html>

[출처] [HTML5] 커스텀 데이터 속성 (Custom Data Attribute)|작성자 자바킹

 

저작자표시 비영리 변경금지 (새창열림)

'웹' 카테고리의 다른 글

웹폰트 적용 방법  (0) 2015.07.23
font-family  (0) 2015.07.23
CSS3 동위 선택자  (0) 2015.07.22
HTML name과 id 태그 차이점  (0) 2015.07.22
code / samp / kbd / var / pre 태그 차이  (0) 2015.07.22
Posted by 캐논볼
,

CSS3 동위 선택자

웹 2015. 7. 22. 22:10

<!DOCTYPE html>

<html lang="ko">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>

         h2 + h2  {
            background-color: red;
        }

         h1 ~ h2 {
             background-color: blue;
         }

    </style>
</head>


<body>
    <h1>Header-1</h1>
    <h2>Header-2</h2>
    <h2>Header-2</h2>
    <h2>Header-2</h2>
    <h2>Header-2</h2>

</body>
</html>

 

A + B 는 코드 배치 상 A 태그 뒤에 오는 B 선택

A ~ B 는 태그 계층 구조 상 A 뒤에 오는 모든 B 선택

저작자표시 비영리 변경금지 (새창열림)

'웹' 카테고리의 다른 글

font-family  (0) 2015.07.23
HTML5 Custom Data Attribute  (0) 2015.07.22
HTML name과 id 태그 차이점  (0) 2015.07.22
code / samp / kbd / var / pre 태그 차이  (0) 2015.07.22
HTML 태그 약어 정리  (0) 2015.07.22
Posted by 캐논볼
,

HTML name과 id 태그 차이점

웹 2015. 7. 22. 16:03

▶ name
(1) document.폼객체명.폼원소명.value
(2) document.getElementsByName("name")


name은 page 안에서 중복되어 사용이 가능하며 action에 해당하는 페이지로 전달하는 파라미터로 사용된다.

GET/POST 방식으로 값을 전달하고 싶은 TAG에 사용. Form 객체들(input , radio box ,checkbox )에서 전송되어지는 Parameter의 Key값으로 사용이 됩니다. 서버단에서는 request.getParameter(parameterName) 이런 식으로 값을 가져오죠.


 

▶ id
(1) document.all.id.value
(2) id.value
(3) document.getElementById("폼 id").value

 

 id는 page 안에서 중복 사용 불가하며 주로 JavaScript에서 다룰려고 지정하는 것이다. name도 자바스크립트로 속성이나 값을 변경 할 수 있으나 중복값을 갖기 때문에 id로 접근하는 것을 주로 사용한다. document.getElementById(id) 를 통해서 해당 엘리먼트Object 를 가져온다.

XML문서(DOM Tree) 내에서 node를 식별하는 용도로 사용되어 페이지 안에 이름이 한개만 존재해야 한다.

보통은 특정 tag를 지정하기 위해서 사용합니다. 태그 내용을 바꾸는 dhtml 작업에서 주로 사용합니다.

참고로 id로 설정된 값은 서버쪽으로 파라미터로 넘어가지 않기 때문에 서버쪽에서 접근이 안된다.

 

* 파이어 폭스나 크롬에서는 document.getElementById는 id로만 읽습니다.

 

 

저작자표시 비영리 변경금지 (새창열림)

'웹' 카테고리의 다른 글

font-family  (0) 2015.07.23
HTML5 Custom Data Attribute  (0) 2015.07.22
CSS3 동위 선택자  (0) 2015.07.22
code / samp / kbd / var / pre 태그 차이  (0) 2015.07.22
HTML 태그 약어 정리  (0) 2015.07.22
Posted by 캐논볼
,

code / samp / kbd / var / pre 태그 차이

웹 2015. 7. 22. 14:37

 

<code>태그는 컴퓨터나 프로그래밍 코드 일부를 그대로 표시하고자 할 때 유용합니다

 

<samp>태그는 컴퓨터 프로그램에서 샘플을 출력할 때

 

<kbd>태그는 키보드 입력을 지정할 때

 

<var>태그는 변수를 입력할 때 유용합니다.

 

 

<pre> 역시, 미리 작성된 텍스트를 있는 그대로 표시해주며, 블록 형태로 사용될 수 있습니다.

 

즉, 여러 줄의 코드를 그대로 출력하고자 할 때  위의 code, samp, kbd, var등을 둘러싼 형태로 사용 합니다.

 

 

code 사용 예:

 

 

<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>

 

 

▶실행화면

 

function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}

 

 

 

 

samp 사용 예:

 

<p>컴퓨터를 하던 중 <samp>Oops…the system encountered a problem (#707)</samp>라는 에러 메시지가 떴다</p>

 

 

▶실행화면

 

컴퓨터를 하던 중 Oops…the system encountered a problem (#707)라는 에러 메시지가 떴다

 

kbd 사용 예: 

 

<p>취소하려면 <kbd><kbd>Ctrl</kbd>+<kbd>z</kbd></kbd>를 입력하시오</p>

 

 

▶실행화면

취소하려면 Ctrl+z를 입력하시오

 

 

var 사용 예:  

 

<p><var>n</var>의 수만큼 곱하시오</p>

 

▶실행화면

 

n의 수만큼 곱하시오

 

 

pre 사용 예:

 

<pre>                maxling

it is with a          heart
               heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07</pre>  

 

▶실행화면

 

                maxling

it is with a          heart
               heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07

 

저작자표시 비영리 변경금지 (새창열림)

'웹' 카테고리의 다른 글

font-family  (0) 2015.07.23
HTML5 Custom Data Attribute  (0) 2015.07.22
CSS3 동위 선택자  (0) 2015.07.22
HTML name과 id 태그 차이점  (0) 2015.07.22
HTML 태그 약어 정리  (0) 2015.07.22
Posted by 캐논볼
,

HTML 태그 약어 정리

웹 2015. 7. 22. 13:50

<a href="url"> ... </a>   anchor hypertext reference="url"    
         
<b> ... </b>   bold   텍스트를 볼드체로 표현
<body bgcolor="#000000">   body background color="#000000"   배경색 지정
<br> ... </br>   break   줄을 바꾸지만, 새로운 문단이 시작되지는 않음
         
<dd> ... </dd>   definition-list definition    
<dl> ... </dl>   definition list     
<dt> ... </dt>   definition-list term    
         
<em> ... </em>   emphasized text    
         
<hr>   horizontal rule   수평선
<h1> ... </h1>   header 1   표제어의 크기. "h1"이 가장 크고, "h6"이 가장 작음
         
<i> ... </i>    italic   글꼴을 이탤릭체로 표현
<img src="url" alt="text">   image source = "url" alternate text = "text"    
         
<kbd> ... </kbd>   keyboard text    
         
<li> ... </li>   listed item    
         
<ol> ... </ol>   ordered list    번호 있는 목록
         
<p> ... </p>   paragraph   문단의 새로운 시작을 위해 줄을 바꾸고, 한 줄을 띄운 후 내용이 시작
<pre> ... </pre>   preformatted text    
         
<samp> ... </samp>   sample computer code    
<sub> ... </sub>   subscript   텍스트를 아래 첨자로 만듦 
<sup> ... </sup>   superscript   텍스트를 윗 첨자로 만듦 
         
<td> ... </td>   table data   데이터 정보를 갖는 셀
<th> ... </th>   table heading   헤더 정보를 갖는 셀
<tr> ... </tr>   table row    
<tt> ... </tt>   teletype text    
         
<u> ... </u>   underline   문장 아래에 밑줄을 그음 
<ul> ... </ul>   unordered list    번호 없는 목록
         
<var> ... </var>   variable    
< ... vlink="color" ...>   visited link    

 

 

저작자표시 비영리 변경금지 (새창열림)

'웹' 카테고리의 다른 글

font-family  (0) 2015.07.23
HTML5 Custom Data Attribute  (0) 2015.07.22
CSS3 동위 선택자  (0) 2015.07.22
HTML name과 id 태그 차이점  (0) 2015.07.22
code / samp / kbd / var / pre 태그 차이  (0) 2015.07.22
Posted by 캐논볼
,

티스토리툴바