[CSS] Text Property (속성 ) : text-shadow
[CSS] Text Property (속성 ) : text-shadow
☞ Text 관련 14개 속성(Property)
01. color - 텍스트의 색상 설정
02. direction - 텍스트 방향을 설정
03. letter-spacing - 글자 사이의 여백 설정
04. line-height - 줄 높이를 정하는 속성
05. text-align - 텍스트의 정렬
06. text-decoration - 선으로 텍스트를 꾸밀 수 있게 해주는 속성
07. text-indent - 들여쓰기 또는 내어쓰기 속성
08. text-shadow - 글자에 그림자 효과를 주는 속성
09. text-transform - 대문자 또는 소문자로 바꾸는 속성
10. text-overflow - 글자 자르기
11. unicode-bidi ※ 참조
12. vertical-align - 세로 정렬 방식 설정
13. white-space - 요소 안의 공백 처리 방법을 지정
14. word-spacing - 단어 사이의 간격을 정하는 속성
※ unicode-bidi : direction 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
08. text-shadow - 글자에 그림자를 주는 속성
text-shadow 는 글자에 그림자를 주는 속성이다. 그림자의 수평 수직 거리를 지정하고 흐림정도와 색상값을 따로 줄 수 있다.
- 버전 : CSS 3
- IE 10 이하 버전을 제외한 모든 주요 브라우저에서 지원
- 속성값 (value)
h-shadow : 글자의 수평 그림자 위치를 지정하며 음수값도 허용
v-shadow : 글자의 수직 그림자 위치를 지정하며 음수값도 허용
blur : 흐림정도의 값을 지정
color : 색상값을 지정
/* 구문 */ { text-shadow:h-shadow v-shadow blur color; } /* example */ div { text-shadow:2px 2px #ff0000; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
[CSS] Text Property (속성 ) : text-overflow (0) | 2018.05.01 |
---|---|
[CSS] Text Property (속성 ) : text-transform (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-indent (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-decoration (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-align (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-indent
[CSS] Text Property (속성 ) : text-indent
☞ Text 관련 14개 속성(Property)
01. color - 텍스트의 색상 설정
02. direction - 텍스트 방향을 설정
03. letter-spacing - 글자 사이의 여백 설정
04. line-height - 줄 높이를 정하는 속성
05. text-align - 텍스트의 정렬
06. text-decoration - 선으로 텍스트를 꾸밀 수 있게 해주는 속성
07. text-indent - 들여쓰기 또는 내어쓰기 속성
08. text-shadow - 글자에 그림자 효과를 주는 속성
09. text-transform - 대문자 또는 소문자로 바꾸는 속성
10. text-overflow - 글자 자르기
11. unicode-bidi ※ 참조
12. vertical-align - 세로 정렬 방식 설정
13. white-space - 요소 안의 공백 처리 방법을 지정
14. word-spacing - 단어 사이의 간격을 정하는 속성
※ unicode-bidi : direction 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
07. text-indent - 첫 번째 줄의 텍스트 들여쓰기를 지정
text-indent 속성은 텍스트 블럭 안에서 첫 번째 줄의 들여쓰기 값을 지정한다.
- 버전 : CSS 1
- 모든 주요 브라우저에서 지원
- 속성값 (value)
length : px, pt, cm, em 단위로 들여쓰기를 지정
% : 부모요소의 너비값을 % 로 계산하여 들여쓰기를 지정
inherit : 지정 요소의 들여쓰기 속성을 부모(상위) 요소로부터 상속받음
/* 구문 */ { text-indent:value; } /* example */ p { text-indent:50px; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
[CSS] Text Property (속성 ) : text-transform (0) | 2018.05.01 |
---|---|
[CSS] Text Property (속성 ) : text-shadow (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-decoration (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-align (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : line-height (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-decoration
[CSS] Text Property (속성 ) : text-decoration
☞ Text 관련 14개 속성(Property)
01. color - 텍스트의 색상 설정
02. direction - 텍스트 방향을 설정
03. letter-spacing - 글자 사이의 여백 설정
04. line-height - 줄 높이를 정하는 속성
05. text-align - 텍스트의 정렬
06. text-decoration - 선으로 텍스트를 꾸밀 수 있게 해주는 속성
07. text-indent - 들여쓰기 또는 내어쓰기 속성
08. text-shadow - 글자에 그림자 효과를 주는 속성
09. text-transform - 대문자 또는 소문자로 바꾸는 속성
10. text-overflow - 글자 자르기
11. unicode-bidi ※ 참조
12. vertical-align - 세로 정렬 방식 설정
13. white-space - 요소 안의 공백 처리 방법을 지정
14. word-spacing - 단어 사이의 간격을 정하는 속성
※ unicode-bidi : direction 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
06. text-decoration - 텍스트의 꾸밈을 지정
text-decoration 속성은 텍스트에 효과를 주는 것으로 line 스타일과 관련이 있다.
- 버전 : CSS 1
- 모든 주요 브라우저에서 지원
- 속성값 (value)
none : 기본값(default), 꾸밈없는 기본텍스트 상태
underline : 텍스트 아래에 라인을 지정(밑줄 효과)
overline : 텍스트 위에 라인을 지정(윗줄 효과)
line-through : 텍스트 중앙에 라인을 지정
blink : 텍스트에 깜빡임 효과를 지정(blink 속성은 IE, Chrome, Safari 브라우저는 지원하지 않음)
inherit : 지정 요소의 텍스트 꾸밈 속성을 부모(상위) 요소로부터 상속받음
/* 구문 */ { text-decoration:value; } /* example */ h1 { text-decoration:overline; } h2 { text-decoration:line-through; } h3 { text-decoration:underline; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
[CSS] Text Property (속성 ) : text-shadow (0) | 2018.05.01 |
---|---|
[CSS] Text Property (속성 ) : text-indent (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-align (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : line-height (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : letter-spacing (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : text-align
[CSS] Text Property (속성 ) : text-align
☞ Text 관련 14개 속성(Property)
01. color - 텍스트의 색상 설정
02. direction - 텍스트 방향을 설정
03. letter-spacing - 글자 사이의 여백 설정
04. line-height - 줄 높이를 정하는 속성
05. text-align - 텍스트의 정렬
06. text-decoration - 선으로 텍스트를 꾸밀 수 있게 해주는 속성
07. text-indent - 들여쓰기 또는 내어쓰기 속성
08. text-shadow - 글자에 그림자 효과를 주는 속성
09. text-transform - 대문자 또는 소문자로 바꾸는 속성
10. text-overflow - 글자 자르기
11. unicode-bidi ※ 참조
12. vertical-align - 세로 정렬 방식 설정
13. white-space - 요소 안의 공백 처리 방법을 지정
14. word-spacing - 단어 사이의 간격을 정하는 속성
※ unicode-bidi : direction 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
05. text-align - 텍스트의 수평방향 정렬을 지정
text-align 속성은 요소 안의 텍스트 수평 정렬 값을 지정한다.
- 버전 : CSS 1
- 모든 주요 브라우저에서 지원
- 속성값 (value)
left : 왼쪽으로 텍스트를 정렬
right : 오른쪽으로 텍스트를 정렬
center : 중앙으로 텍스트를 정렬
justify : 각 줄의 정렬을 동일한 너비로 일정하게 양쪽 정렬
inherit : 지정 요소의 텍스트 정렬 속성을 부모(상위) 요소로부터 상속받음
/* 구문 */ { text-align:value; } /* example */ div { text-align:left; } p { text-align:right; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
[CSS] Text Property (속성 ) : text-indent (0) | 2018.05.01 |
---|---|
[CSS] Text Property (속성 ) : text-decoration (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : line-height (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : letter-spacing (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : direction (0) | 2018.05.01 |
홈페이지 접속시 자동으로 모바일 홈페이지로 이동 스크립트
모바일 디바이스 기기로 웹사이트 접속시 자동으로 모바일 사이트로 접속하게 만들기
example 01) PC용 홈페이지 index페이지 <head></head> 사이에 삽입
<script type="text/javascript"> var UserAgent = navigator.userAgent; if (UserAgent.match(/iPhone|ipad|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null) { location.href = "/m/"; /* 모바일 홈페이지 경로 */ } </script>
<?php $connect = '0'; extract(array_merge($HTTP_GET_VARS, $HTTP_POST_VARS)); ?> <script-x language='JavaScript-x'> //모바일 페이지로 이동. var uAgent = navigator.userAgent.toLowerCase(); var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce', 'nokia','webos','opera mini','sonyericsson','opera mobi','iemobile'); for(var i=0;i<mobilePhones.length;i++){ if(uAgent.indexOf(mobilePhones[i]) != -1){ if(<?=$connect;?> == '0'){ document.location='모바일용 홈페이지 경로'; <? $connect = '0'; ?> } } } </script-x>
'JavaScript' 카테고리의 다른 글
자바스크립트(JavaScript)란? (0) | 2018.05.04 |
---|
[CSS] Text Property (속성 ) : line-height
[CSS] Text Property (속성 ) : line-height
☞ Text 관련 14개 속성(Property)
01. color - 텍스트의 색상 설정
02. direction - 텍스트 방향을 설정
03. letter-spacing - 글자 사이의 여백 설정
04. line-height - 줄 높이를 정하는 속성
05. text-align - 텍스트의 정렬
06. text-decoration - 선으로 텍스트를 꾸밀 수 있게 해주는 속성
07. text-indent - 들여쓰기 또는 내어쓰기 속성
08. text-shadow - 글자에 그림자 효과를 주는 속성
09. text-transform - 대문자 또는 소문자로 바꾸는 속성
10. text-overflow - 글자 자르기
11. unicode-bidi ※ 참조
12. vertical-align - 세로 정렬 방식 설정
13. white-space - 요소 안의 공백 처리 방법을 지정
14. word-spacing - 단어 사이의 간격을 정하는 속성
※ unicode-bidi : direction 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
04. line-height - 텍스트 줄 간격을 지정
line-height 속성은 텍스트 줄간의 간격을 지정한다(자간에서는 음수값이 허용되지면 여기 행간은 음수값이 허용되지 않는다).
- 버전 : CSS 1
- 모든 주요 브라우저에서 지원
- 속성값 (value)
normal : 기본값(default), 줄 간격이 기본값으로 지정
number : 지정된 수 만큼 글자 폰트크기와 곱하여서 줄 간격을 지정
length : 직접 간격을 지정
% : 해당 폰트 크기의 %만큼을 계산하여 줄 간격에 지정
inherit : 지정 요소의 줄 간격 속성을 부모(상위) 요소로부터 상속받음
/* 구문 */ { line-height:value; } /* example */ div { line-height:90% } p { line-height:3; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
[CSS] Text Property (속성 ) : text-decoration (0) | 2018.05.01 |
---|---|
[CSS] Text Property (속성 ) : text-align (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : letter-spacing (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : direction (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : color (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : letter-spacing
[CSS] Text Property (속성 ) : letter-spacing
☞ Text 관련 14개 속성(Property)
01. color - 텍스트의 색상 설정
02. direction - 텍스트 방향을 설정
03. letter-spacing - 글자 사이의 여백 설정
04. line-height - 줄 높이를 정하는 속성
05. text-align - 텍스트의 정렬
06. text-decoration - 선으로 텍스트를 꾸밀 수 있게 해주는 속성
07. text-indent - 들여쓰기 또는 내어쓰기 속성
08. text-shadow - 글자에 그림자 효과를 주는 속성
09. text-transform - 대문자 또는 소문자로 바꾸는 속성
10. text-overflow - 글자 자르기
11. unicode-bidi ※ 참조
12. vertical-align - 세로 정렬 방식 설정
13. white-space - 요소 안의 공백 처리 방법을 지정
14. word-spacing - 단어 사이의 간격을 정하는 속성
※ unicode-bidi : direction 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
03. letter-spacing - 글자간 간격 너비를 지정
letter-spacing 속성은 텍스트 내에서 문자 간의 간격의 좁고 넓음의 여부를 지정한다.
- 버전 : CSS 1
- 모든 주요 브라우저에서 지원
- 속성값 (value)
normal : 기본값(default), 자간 간격이 기본값으로 지정
length : 직접 간격을 지정하며 음수값도 허용됨
inherit : 지정 요소의 자간 속성을 부모(상위) 요소로부터 상속받음
/* 구문 */ { letter-spacing:value; } /* example */ h1 { letter-spacing:2px; } h2 { letter-spacing:-3px; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
[CSS] Text Property (속성 ) : text-align (0) | 2018.05.01 |
---|---|
[CSS] Text Property (속성 ) : line-height (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : direction (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : color (0) | 2018.05.01 |
Google Prettify - 티스토리에 소스코드 표시 (0) | 2018.04.25 |
[CSS] Text Property (속성 ) : direction
[CSS] Text Property (속성 ) : direction
☞ Text 관련 14개 속성(Property)
01. color - 텍스트의 색상 설정
02. direction - 텍스트 방향을 설정
03. letter-spacing - 글자 사이의 여백 설정
04. line-height - 줄 높이를 정하는 속성
05. text-align - 텍스트의 정렬
06. text-decoration - 선으로 텍스트를 꾸밀 수 있게 해주는 속성
07. text-indent - 들여쓰기 또는 내어쓰기 속성
08. text-shadow - 글자에 그림자 효과를 주는 속성
09. text-transform - 대문자 또는 소문자로 바꾸는 속성
10. text-overflow - 글자 자르기
11. unicode-bidi ※ 참조
12. vertical-align - 세로 정렬 방식 설정
13. white-space - 요소 안의 공백 처리 방법을 지정
14. word-spacing - 단어 사이의 간격을 정하는 속성
※ unicode-bidi : direction 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
02. direction - 텍스트 방향을 설정
텍스트가 쓰여지는 방향을 지정
- 모든 주요 브라우저에서 지원
- 기본값 : ltr , 상속 : yes , 버전 : CSS2
ltr - left to right , rtl - right to left
- 속성값 (property)
ltr : 기본값(default), 쓰기방향이 왼쪽에서 오른쪽으로 지정
rtl : 쓰기방향이 오른쪽에서 왼쪽으로 지정
inherit : 지정 요소의 텍스트 방향 속성을 부모(상위) 요소로부터 상속받음
/* 구문 */ { direction:value; } /* example */ div { direction:rtl; } /* value */ ltr : 기본값(default), 쓰기방향이 왼쪽에서 오른쪽으로 지정 rtl : 쓰기방향이 오른쪽에서 왼쪽으로 지정 inherit : 지정 요소의 텍스트 방향 속성을 부모(상위) 요소로부터 상속받음
'Web Design > CSS & CSS3' 카테고리의 다른 글
[CSS] Text Property (속성 ) : line-height (0) | 2018.05.01 |
---|---|
[CSS] Text Property (속성 ) : letter-spacing (0) | 2018.05.01 |
[CSS] Text Property (속성 ) : color (0) | 2018.05.01 |
Google Prettify - 티스토리에 소스코드 표시 (0) | 2018.04.25 |
SyntaxHighLighter 3.0.83 사용 - 티스토리에 소스코드 표시 (0) | 2018.04.24 |
[CSS] Text Property (속성 ) : color
[CSS] TEXT Property (14개의 속성 ) : color
☞ Text 관련 속성(Property)
Property |
Description |
example |
01.color |
텍스트의 색상 설정 |
p { color: blue; } |
02.direction |
텍스트 방향을 설정 ( ltr, rtl ) |
p { direction: rtl; } |
03.letter-spacing |
글자 사이의 여백 설정 |
p { lettet-spacing : 3px } |
04.line-height |
줄 높이를 정하는 속성 |
p { lettet-spacing : 3px } |
05.text-align |
텍스트의 정렬 (left, right, center) |
p { text-align : center; } |
06.text-decoration |
선으로 텍스트를 꾸밀 수 있게 해주는 속성 |
|
07.text-indent |
들여쓰기 또는 내어쓰기 속성 |
|
08.text-shadow |
글자에 그림자 효과를 주는 속성 |
|
09.ext-transform |
대문자 또는 소문자로 바꾸는 속성 |
|
10.ext-overflow |
글자 자르기 |
|
11.unicode-bidi |
※ 참조 |
|
12.vertical-align |
세로 정렬 방식 설정 |
|
13.white-space |
요소 안의 공백 처리 방법을 지정 |
|
14.word-spacing |
단어 사이의 간격을 정하는 속성 |
|
※ unicode-bidi : direction 속성과 함께 사용되어 같은 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정
01. color : 글자의 색상 설정
- 색상 표현방법
CSS 에서 사용할 수 있는 색상코드는 Hexadecimal color(가장 많이 사용하는 방법), RGB color, RGBA color, HSL color, HSLA color, Predefined/Cross-browser color names 처럼 다양한 종류가 있다.
A. 색상이름 표기법 : 색상이름으로 표기 ex) red, blue, black, white
B. 16진수 표기법 :
- 0~f까지의 범위로 6자리 숫자 표기 #000000, #ffffff ( 0은 검정색, f는 흰색 )
- 기본은 6자리 수 로 표기하나 같은 수가 2개씩이면 세자리로도 표현가능
- ex) #000000=#000 , #ffffff=#fff
C. rgb, rgba 표기법 :
- red, green, blue 약자 rgb -0~255 까지의 색레벨
- rgb (색상값, 색상값, 색상값) ex) rgb(0,0,255) - 파란색, rgb(255,0,0) - 빨간색
- rgba (색상값, 색상값, 색상값, 투명도) ex) rgb(0, 255, 0, 0.5) - 투명도 0.5의 초록색
example)
<!--Hexadecimal color--> { color:#00ff00; } <!--RGB color--> { color:rgb(255,0,0); } <!--RGBA color--> { color:rgba(255,0,0,0.5); } <!--HSL color--> { color:hsl(120,65%,75%); } <!--HSLA color--> { color:hsla(120,65%,75%,0.3); } <!--Predefined/Cross-browser color names--> HTML과 CSS에서 사용 가능한 색상 이름은 147가지이다. 아래 예제처럼 red, blue, yellow 등으로 사용할 수 있다. { color:purple; }
'Web Design > CSS & CSS3' 카테고리의 다른 글
[CSS] Text Property (속성 ) : letter-spacing (0) | 2018.05.01 |
---|---|
[CSS] Text Property (속성 ) : direction (0) | 2018.05.01 |
Google Prettify - 티스토리에 소스코드 표시 (0) | 2018.04.25 |
SyntaxHighLighter 3.0.83 사용 - 티스토리에 소스코드 표시 (0) | 2018.04.24 |
CSS Property (속성 ) : Font (0) | 2018.04.16 |
PHP 란?
PHP 홈페이지를 만들자!
- PHP [Hypertext Preprocessor]란?
하이퍼텍스트 생성 언어(HTML)에 포함되어 동작하는 스크립팅 언어. 별도의 실행 파일을 만들 필요 없이 HTML 문서 안에 직접 포함시켜 사용하며, C, 자바, 펄 언어 등에서 많은 문장 형식을 준용하고 있어 동적인 웹 문서를 빠르고 쉽게 작성할 수 있다. ASP(Active Server Pages)와 같이 스크립트에 따라 내용이 다양해서 동적 HTML 처리 속도가 빠르며, PHP 스크립트가 포함된 HTML 페이지에는 .php, .php3, .phtml이 붙는 파일 이름이 부여된다. 처음에는 ‘Personal Home Page Tools’이라 불렸으며, 공개된 무료 소스이다.
- PHP의 시작
PHP 코드를 HTML 문서안에 삽입(Embedding)하기
▶ 표준: <?php echo "Wlecome to My Homepage!"; ?> - XAMPP에서는 반드시 지켜야 내용이 나타납니다.
▶ 피해야 할 코드 : <? PHP code Here; ?> , <?= PHP code Here; ?> 웹호스팅에서는 php.ini 파일 설정으로 실행되지만 피해야할 코딩.