All about {Web}

[CSS] Text Property (속성 ) : line-height

Web Design/CSS & CSS32018. 5. 1. 16:00

[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

Web Design/CSS & CSS32018. 5. 1. 15:00

[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

Web Design/CSS & CSS32018. 5. 1. 14:00

[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

Web Design/CSS & CSS32018. 5. 1. 13:00

[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

Google Prettify - 티스토리에 소스코드 표시

Web Design/CSS & CSS32018. 4. 25. 02:22


티스토리에 소스코드(Code snippets) 표현을 예쁘게!
Google Prettify - 티스토리에 소스코드 표시

01. Google prettify 사용에  필요한 파일을 다운로드 후 압축을 해제합니다.
[다운로드]  :  googlePrettify.zip
설정 > 스킨편집 > html 편집 > 파일업로드 > + 추가를 클릭해 압축해제한 2개의 파일 tomorrow-night-eighties.css ,  run_prettify.js를 업로드합니다.

02. HTLM의 <head>~</head>안에 아래 코드를 삽입합니다.
<!-- prettify 설정 시작-->
<link rel="stylesheet" type="text/css" href="./images/tomorrow-night-eighties.css">
<script type="text/javascript" src="./images/run_prettify.js"></script>
<!-- prettify 설정 끝--> 

03. <pre class="prettyprint linenums">
          소스코드 들어갈 자리
     </pre>

example)

<div class="camera_wrap">
<div data-src="images/image_1.jpg"></div>
<div data-src="images/image_1.jpg"></div>
<div data-src="images/image_2.jpg"></div>
</div>
           
<div class="camera_wrap">

<div class="row"> 

<div class="col-sm-3">

<a href="#">Type 05</a>

</div>

<div class="col-sm-3">

<a href="#">Type 06</a>

</div> 

<div class="col-sm-3">

<a href="#">Type 07</a>

</div>

<div class="col-sm-3">

<a href="#">Type 08</a>

</div> 

</div>


저작자표시

'Web Design > CSS & CSS3' 카테고리의 다른 글

[CSS] Text Property (속성 ) : direction  (0) 2018.05.01
[CSS] Text Property (속성 ) : color  (0) 2018.05.01
SyntaxHighLighter 3.0.83 사용 - 티스토리에 소스코드 표시  (0) 2018.04.24
CSS Property (속성 ) : Font  (0) 2018.04.16
CSS Vendor Prefixes (브라우저 접두사)로 부터 자유를...  (0) 2018.04.16

SyntaxHighLighter 3.0.83 사용 - 티스토리에 소스코드 표시

Web Design/CSS & CSS32018. 4. 24. 21:16

SyntaxHighLighter 3.0.83 사용 - 소스코드 표시 [티스토리]

☞ SyntaxHighlighter v3.0.83  

syntaxhighlighter_3.0.83.zip

※ 신텍스하이라이터란?
블로그, 웨사이트 등에 프로그램 소스를 예쁘게 표시해 주는 자바스크립트 라이브러리 입니다. PHP, HTML, CSS, JavaScript, ColdFusion, Ruby, Python 등 다양한 언어의 코드의 개발문서를 웹에 게시할 때 유용하게 사용할 수 있습니다.  

[1] 필요파일 업로드
01. 다운로드한 파일의 압축을 풉니다.

02. 압축을 해제한 폴더 중에 [scripts]와 [styles] 두개의 폴더 안의 파일을 다음과 같이 업로드 합니다.


티스토리 블로그 "설정" > (1) 스킨편집 > (2) html 편집 > (3) 파일업로드 > (5) + 추가
[scripts]와 [styles] 두개의 폴더 안의 파일을 업로드 합니다.

[2} 필요 소스 삽입
다운로드  :   themeSkin.txt

HTML (6)으로 이동해
<head>안의 <title>All about {Web} : : 'Web Design/CSS & CSS3' 카테고리의 글 목록 (2 Page)</title>밑에 themeSkin.txt의 내용을 삽입한 후 저장합니다.

[3] 사용방법
글작성시 HTML에 체크 후 
<pre class="brush: html;">소스 넣을 자리</pre>

SAMPLE : Theme - Midnight


Name                  File
---------------------------------------------------
Default shThemeDefault.css
Django shThemeDjango.css
Eclipse shThemeEclipse.css
Emacs shThemeEmacs.css
Fade To Grey shThemeFadeToGrey.css
Midnight shThemeMidnight.css
RDark shThemeRDark.css 

Google Prettify example :

<div class="camera_wrap">
<div data-src="images/image_1.jpg"></div>
<div data-src="images/image_1.jpg"></div>
<div data-src="images/image_2.jpg"></div>
</div>
           
<div class="camera_wrap">

<div class="row"> 

<div class="col-sm-3">

<a href="#">Type 05</a>

</div>

<div class="col-sm-3">

<a href="#">Type 06</a>

</div> 

<div class="col-sm-3">

<a href="#">Type 07</a>

</div>

<div class="col-sm-3">

<a href="#">Type 08</a>

</div> 

</div>

저작자표시

'Web Design > CSS & CSS3' 카테고리의 다른 글

[CSS] Text Property (속성 ) : color  (0) 2018.05.01
Google Prettify - 티스토리에 소스코드 표시  (0) 2018.04.25
CSS Property (속성 ) : Font  (0) 2018.04.16
CSS Vendor Prefixes (브라우저 접두사)로 부터 자유를...  (0) 2018.04.16
CSS - Embedding Styles (HTML에 CSS 적용 방법)  (0) 2018.04.16

CSS Property (속성 ) : Font

Web Design/CSS & CSS32018. 4. 16. 15:56

CSS Property (속성 ) : Font

☞ 4가지 선택자
*{ 스타일 속성: 속성값; }   ex) * { color: blue; }  ※ * = all
태그명{ 스타일 속성: 속성값; }   ex) body { color: black; }
.클래스명{ 스타일 속성: 속성값;}   ex) .wooin21 { color: pink; }
#아이디{ 스타일 속성: 속성값;}   ex) #wooin21 { color: orange; }

CSS 기본문법 :  p { 속성: 속성 값 }  ex)  p { font-family :  'Nanum Gothic', tahoma, verdana; }   /*  주석  */



Font 관련 Property (속성 ) :
font-family, font-style, font-variant, font-size, font-weight, font-stretch

[ example ]
01. font-family
p {
    font-family: "Times New Roman", Times, serif;
}

02. font-style
p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

03. font-size

p {
    font-size: 14px;
}
p {
    font-size: 0.875em; /* 14px/16=0.875em */
}

04. font-weight
p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

05. font-variant
p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}

05. font-variant
p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}


※ Responsive Font Size
vw = "viewport width"

ex) <h1 style="font-size:10vw">Hello World</h1>
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

☞ CSS 관련 유용한 사이트 :  https://www.w3schools.com/

저작자표시

'Web Design > CSS & CSS3' 카테고리의 다른 글

Google Prettify - 티스토리에 소스코드 표시  (0) 2018.04.25
SyntaxHighLighter 3.0.83 사용 - 티스토리에 소스코드 표시  (0) 2018.04.24
CSS Vendor Prefixes (브라우저 접두사)로 부터 자유를...  (0) 2018.04.16
CSS - Embedding Styles (HTML에 CSS 적용 방법)  (0) 2018.04.16
CSS Vendor Prefixes = CSS browser prefixes (브라우저 접두사)  (0) 2018.04.14

CSS Vendor Prefixes (브라우저 접두사)로 부터 자유를...

Web Design/CSS & CSS32018. 4. 16. 15:13

CSS Vendor Prefixes (브라우저 접두사)로 부터 자유를......

http://leaverou.github.io/prefixfree/ 
사이트에 접속 후 (1)'Only 2KB gzipped'를 오른쪽 마우스를 클릭해서 'prefixfree.min.js' 파일을 저장한다.

<head>
    <script src="/js 파일 경로/prefixfree.min.js">
</head>
삽입한다. 

저작자표시

'Web Design > CSS & CSS3' 카테고리의 다른 글

SyntaxHighLighter 3.0.83 사용 - 티스토리에 소스코드 표시  (0) 2018.04.24
CSS Property (속성 ) : Font  (0) 2018.04.16
CSS - Embedding Styles (HTML에 CSS 적용 방법)  (0) 2018.04.16
CSS Vendor Prefixes = CSS browser prefixes (브라우저 접두사)  (0) 2018.04.14
CSS 3 의 역사와 브라우저별 지원현황  (0) 2018.04.14

CSS - Embedding Styles (HTML에 CSS 적용 방법)

Web Design/CSS & CSS32018. 4. 16. 12:46


▒ HTML에 CSS 적용 방법

01. 내부 스타일 시트 ( Internal CSS )
＇내부에 기입하는 방식

<html>
<head>
<style>
#welcome {
  color: purple;
}
.welcome {
  color: orange;
}
</style>
</head>
<body>
  <p id="welcome">블로그 방문을 환영합니다.</p>
  <p class="welcome">Welcome to My Blog.</p>
</body>
</html>

Result :
블로그 방문을 환영합니다.
Welcome to My Blog.


02. 외부 스타일 시트 (External CSS)
＇외부 CSS를 링크하는 방식

style.css 별도 작성

#welcome {
  color: purple;
}
.welcome {
  color: orange;
}

<html>
<head>
<link rel="stylesheet" href="/css 경로/style.css" type="text/css">
</head>
<body>
  <p id="welcome">블로그 방문을 환영합니다.</p>
  <p class="welcome">Welcome to My Blog.</p>
</body>
</html>

Result :
블로그 방문을 환영합니다.
Welcome to My Blog.


03. 인라인 스타일 시트 (Inline Style)
＇적용할 태그의 style 속성을 넣는 방식

  <p style="color: purple">블로그 방문을 환영합니다.</p>
  <p style="color: orange">Welcome to My Blog.</p>

Result :
블로그 방문을 환영합니다.
Welcome to My Blog.


04. 스타일 시트 임포트 방식
＇외부 CSS를 @import를 불러 드리는 방식

style.css 별도 작성

#welcome {
  color: purple;
}
.welcome {
  color: orange;
}


<html>
<head>
<style type='text/css'>
@import url("style.css");
</style>
</head>
<body>
  <p id="welcome">블로그 방문을 환영합니다.</p>
  <p class="welcome">Welcome to My Blog.</p>
</body>
</html>

Result :
블로그 방문을 환영합니다.
Welcome to My Blog.



저작자표시

'Web Design > CSS & CSS3' 카테고리의 다른 글

CSS Property (속성 ) : Font  (0) 2018.04.16
CSS Vendor Prefixes (브라우저 접두사)로 부터 자유를...  (0) 2018.04.16
CSS Vendor Prefixes = CSS browser prefixes (브라우저 접두사)  (0) 2018.04.14
CSS 3 의 역사와 브라우저별 지원현황  (0) 2018.04.14
CSS[cascading style sheets]: 외부스타일시트 웹페이지 삽입  (1) 2018.04.12

CSS Vendor Prefixes = CSS browser prefixes (브라우저 접두사)

Web Design/CSS & CSS32018. 4. 14. 18:05


CSS Vendor Prefixes = CSS browser prefixes (브라우저 접두사)

표준화 또는 규격화되지 않은 새로운 CSS 기술을 지원하기 위해 브라우저 제조사에서 제공하는 하나의 방법.

ex) transition
body {
-webkit-transition: outline 10s ease;  /* 크롬, 사파리 */
-moz-transition: outline 10s ease;     /* 파이어 폭스 */
-ms-transition: outline 10s ease;       /* 인터넷 익스플로러 */
-o-transition: outline 10s ease;         /* 오페라 */
transition: outline 10s ease;             /* 표준 */
}

Vendor Prefix를 사용할 때는 위와 같이 프리픽스 버전을 먼저 선언, 표준 속성(transition: outline 10s ease;)이 가장 마지막에 와야한다.
프리픽스는 결국에는 표준으로 확정될 것이고 그렇게 되면 브라우저는 프리픽스가 붙은 속성은 무시한 채 표준 속성만 지원하게 되기 때문이다.

Vendor Prefix를 자동생성해 주는 사이트를 소개한다.
http://css3generator.com/

- 관련 유용한 사이트 :  http://modernizr.com/

저작자표시

'Web Design > CSS & CSS3' 카테고리의 다른 글

CSS Property (속성 ) : Font  (0) 2018.04.16
CSS Vendor Prefixes (브라우저 접두사)로 부터 자유를...  (0) 2018.04.16
CSS - Embedding Styles (HTML에 CSS 적용 방법)  (0) 2018.04.16
CSS 3 의 역사와 브라우저별 지원현황  (0) 2018.04.14
CSS[cascading style sheets]: 외부스타일시트 웹페이지 삽입  (1) 2018.04.12

티스토리툴바