'웹' 카테고리의 다른 글
| 자바스크립트 예제 (0) | 2015.07.27 |
|---|---|
| [HTML] table의 border-spacing (0) | 2015.07.24 |
| http://css3generator.com/ (0) | 2015.07.23 |
| [CSS] line-height 속성으로 수직정렬 (0) | 2015.07.23 |
| [CSS] box-sizing 속성 (0) | 2015.07.23 |
'분류 전체보기'에 해당되는 글 178건
- 2015.07.23 http://www.colorzilla.com/gradient-editor/
- 2015.07.23 http://css3generator.com/
- 2015.07.23 [CSS] line-height 속성으로 수직정렬
- 2015.07.23 [CSS] box-sizing 속성
- 2015.07.23 text-align 속성의 특징
- 2015.07.23 HTML 블럭/인라인 요소 정리 1
- 2015.07.23 웹폰트 적용 방법
- 2015.07.23 font-family
- 2015.07.23 PHP echo와 print의 차이
- 2015.07.22 HTML5 Custom Data Attribute
'웹' 카테고리의 다른 글
| [HTML] table의 border-spacing (0) | 2015.07.24 |
|---|---|
| http://www.colorzilla.com/gradient-editor/ (0) | 2015.07.23 |
| [CSS] line-height 속성으로 수직정렬 (0) | 2015.07.23 |
| [CSS] box-sizing 속성 (0) | 2015.07.23 |
| text-align 속성의 특징 (0) | 2015.07.23 |
CSS는 block 형식을 가지는 태그를 수직 정렬할 수 있는 스타일 속성이 업서 line-height와 block의 컨텐츠 height를 동일하게 맞추어 수직정렬한다.
'웹' 카테고리의 다른 글
| http://www.colorzilla.com/gradient-editor/ (0) | 2015.07.23 |
|---|---|
| http://css3generator.com/ (0) | 2015.07.23 |
| [CSS] box-sizing 속성 (0) | 2015.07.23 |
| text-align 속성의 특징 (0) | 2015.07.23 |
| HTML 블럭/인라인 요소 정리 (1) | 2015.07.23 |
box-sizing: content-box (width와 height가 컨텐츠 크기를 설정)
box-sizing: border-box (width와 height가 border까지의 총 합으로 설정)
'웹' 카테고리의 다른 글
| http://css3generator.com/ (0) | 2015.07.23 |
|---|---|
| [CSS] line-height 속성으로 수직정렬 (0) | 2015.07.23 |
| text-align 속성의 특징 (0) | 2015.07.23 |
| HTML 블럭/인라인 요소 정리 (1) | 2015.07.23 |
| 웹폰트 적용 방법 (0) | 2015.07.23 |
text-align 속성은 블록 요소 안에 있는 모든 인라인 콘텐츠를 정렬한다.
적용한 요소 내부에 있는 블록 요소는
적용된 요소의 text-align 속성을 상속받아 동일하게 적용된다.
'웹' 카테고리의 다른 글
| [CSS] line-height 속성으로 수직정렬 (0) | 2015.07.23 |
|---|---|
| [CSS] box-sizing 속성 (0) | 2015.07.23 |
| HTML 블럭/인라인 요소 정리 (1) | 2015.07.23 |
| 웹폰트 적용 방법 (0) | 2015.07.23 |
| font-family (0) | 2015.07.23 |
인라인 요소
| 영역 | 컨텐츠 크기 만큼 |
|---|---|
| 정렬 | 텍스트 정렬에 영향 받음. (텍스트의 위치를 지정하는 모든 속성) |
| 박스모델 | 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 |
기본 시스템 폰트가 아닌 일반 사용자 폰트로 웹을 표시해주는 것을 웹폰트를 적용한다라고 말합니다. 웹폰트는 @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 |
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 |
echo와 print의 차이점
echo와 print는 실제 함수가 아니라 언어 구조라고 합니다. 그런데 print는 함수처럼 사용할 수 있습니다. 함수는 쉽게 생각하면 초등학교 때 상자 안에 넣어 계산 문제를 푸는 것처럼 그런 구조를 가지고 있습니다. 함수는 어떤 것을 넣으면 계산하고 결과를 출력해주는 역할을 합니다. 어떤 것을 넣는 것을 인자라고 하고 결과를 출력해주는 것을 리턴 값이라고 해요.
인자(입력)값
리턴(출력)값
함수의 개념
print는 입력이 한 개이고 리턴 값을 가집니다. 항상 1이라는 숫자를 리턴해요. print는 함수는 아니지만 함수처럼 사용할 수 있어요.
echo는 하나 이상의 문자열을 출력합니다. 입력 값이 여러 개라는 이야기이지요. 아무것도 결과물로 돌려주지 않아요. 물론 HTML로 출력해주는 역할을 하지만 리턴 값이 없습니다.
int print ( string $arg ) - 문자열을 하나를 출력
- int는 리턴 값이 정수형이라는 것을 말하며 string은 문자열을 말하고 $는 변수, string은 문자열을 뜻합니다.
void echo ( string $arg1 [, string $... ] ) - 하나 이상의 문자열을 출력
- void는 리턴 값이 없다는 것을 말하며 string은 문자열을 말하고 $는 변수, string은 문자열을 뜻합니다.
'프로그래밍' 카테고리의 다른 글
| PHP 날짜함수 정리 (0) | 2015.08.24 |
|---|---|
| MySQL Type 종류 (0) | 2015.08.19 |
| BASH shell script - connect to MySQL (0) | 2015.08.19 |
| MySQL 권한 설정 (0) | 2015.08.19 |
| PHP 5 example source code (0) | 2015.07.20 |
HTML 태그는 태그의 선언과 속성들로 구성됩니다.
이때 태그의 속성(attribute)이라는 것은 어떻게 보면 현재 태그에 대한 추가적인 정보를 제공하는 일종의 메타데이터(Metadata)라고 생각할 수 있습니다.
메타데이터는 어떤 정보에 대한 정보를 의미합니다.
기존의 HTML은 하나의 태그에 정해진 속성을 가집니다. ( id나 class, name 등과 같이 이미 정해진 속성들이 있습니다. )
그래서 기존에는 하나의 태그에 정해진 속성외에 다른 속성을 지정한다는것은 HTML의 표준을 위반하는 결과가 됩니다.
HTML5에서는 이러한 문제를 해결할 수 있는 커스텀 데이터 속성(Custom Data Attribute) 이 있습니다.
HTML5 커스텀 데이터 속성 (Custom Data Attribute) 특징
- 속성의 시작은 반드시 data- 로 시작
- 하나의 태그에 사용할 수 있는 커스텀 데이터 속성의 사용 제한은 없다. 즉 원하는 만큼 커스텀 데이터 속성 추가 가능.
- 브라우저들은 커스텀 데이터 속성을 만나면 해석하지 않고 건너(Skip) 뛴다. 따라서 화면에 보이는데 아무런 영향을 주지 않음.
- 자바스크립트와 CSS에서는 기존과 마찬가지로 커스텀 데이터 속성의 정보를 사용할 수 있다.
<!doctype html>
<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>
'웹' 카테고리의 다른 글
| 웹폰트 적용 방법 (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 |
