All about {Web}

[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;
}



[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; }



[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; }



[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; }


모바일 디바이스 기기로 웹사이트 접속시 자동으로 모바일 사이트로 접속하게 만들기  

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>


example 02)   // PC 웹페이지에 삽입되는 코드
<?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

☞ 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; }


[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; }


[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	: 지정 요소의 텍스트 방향 속성을 부모(상위) 요소로부터 상속받음



[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; }


PHP 란?

Web Design/PHP2018. 5. 1. 10:00

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 파일 설정으로 실행되지만 피해야할 코딩.