[CSS 기초] 타입 선택자(Type Selector)

홈페이지제작/CSS 2017. 11. 25. 10:34

[CSS 기초] 타입 선택자(Type Selector) 

 

타입 선택자(Type Selector)는 h1, p, div, span 등 HTML 요소(Element)를 선택하는 선택자입니다.

예를 들어
p {
  color: blue;
}

는 HTML 문서 안에 있는 모든 p 요소의 내용을 파란색으로 만듭니다.

예제

h1 요소의 글자색은 파랗게, blockquote 요소의 글자를 기울임꼴로 만드는 예제입니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      h1 {
        color: blue;
      }
      blockquote {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p>
    <h1>Proin gravida velit dictum dui consequat malesuada.</h1>
    <p>Aenean et nibh eu purus scelerisque aliquet nec non justo.</p>
    <blockquote>Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</blockquote>
  </body>
</html>

 

위 결과값은 아래와 같습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

저작자표시

'홈페이지제작 > CSS' 카테고리의 다른 글

[CSS 강좌] 아이디 선택자(ID Selector)  (0) 2017.12.04
[CSS 기초] 클래스 선택자(Class Selector)  (0) 2017.11.25
[CSS 기초] 전체 선택자(Universal Selector)  (0) 2017.11.25
기초 CSS 문법 강좌  (0) 2017.11.23
CSS에서의 색상 설정  (0) 2017.11.18
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[CSS 기초] 전체 선택자(Universal Selector)

홈페이지제작/CSS 2017. 11. 25. 10:27

전체 선택자

전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다.

예를 들어
* {
  color: blue;
}

는 모든 요소의 색을 파란색으로 만듭니다.

다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉,
*.abc { color: blue; }
.abc { color: blue; }

는 같은 결과를 만듭니다.

예제

모든 요소의 글자 모양을 기울임꼴로 만드는 예제입니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      * {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <h1>Lorem</h1>
    <p>Ipsum</p>
    <ul>
      <li>Dolor</li>
      <li>Amet</li>
    </ul>
  </body>
</html>

 

 

 

 

 

 

 

 

 

 

저작자표시

'홈페이지제작 > CSS' 카테고리의 다른 글

[CSS 기초] 클래스 선택자(Class Selector)  (0) 2017.11.25
[CSS 기초] 타입 선택자(Type Selector)  (0) 2017.11.25
기초 CSS 문법 강좌  (0) 2017.11.23
CSS에서의 색상 설정  (0) 2017.11.18
CSS 텍스트에 굵기를 지정  (0) 2017.11.15
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

기초 CSS 문법 강좌

홈페이지제작/CSS 2017. 11. 23. 12:13


CSS 문법은 다음과 같습니다.
selector {
  property: value
}

selector(선택자)로 어떤 요소를 꾸밀지 정하고, property(속성)로 어떤 모양을 꾸밀지 정합니다. value(값)에는 모양의 값을 넣습니다.


property와 value를 합쳐서, 즉
property: value

를 declaration(선언)이라고 합니다.

예를 들어 다음과 같은 코드가 있다고 할 때,
h1 {
  color: red
}

선택자(selector)는 h1으로 h1 요소를 꾸미겠다는 뜻입니다. 속성(property)은 color로 색을 바꾸겠다는 것이고, 값(value)이 red이므로 빨간색으로 만듭니다.

여러 개의 선언

선언(declaration)은 여러 개 넣을 수 있습니다. 선언과 선언 사이에는 세미콜론(;)을 넣어 구분합니다.

선언이 하나만 있거나, 여러 개의 선언이 있을 때 마지막 선언에는 세미콜론은 넣지 않아도 되나, 보통은 선언 뒤에 항상 세미콜론을 붙입니다.
selector {
  property: value;
  property: value;
  ...
  property: value;
}

값에 공백이 있는 경우

선택자(selector)나 속성(property)에는 공백이 없습니다. 하지만 값에는 공백이 있을 수 있습니다. 값(value)에 공백이 있다면 작은 따옴표 또는 큰 따옴표로 감쌉니다.

예를 들어 문단의 글꼴을 Times New Roman로 하고 싶다면
p {
  font-family: 'Times New Roman';
}

또는
p {
  font-family: "Times New Roman";
}

와 같이 합니다.

공백

CSS 코드에서 공백은 의미가 없습니다. 즉,
selector {
  property: value;
  property: value;
}

와
selector {property: value; property: value;}

는 같은 결과를 만듭니다.


결과는 같지만, 줄바꿈과 띄어쓰기가 많을수록 파일 크기가 늘어납니다. 따라서 코드를 만들 때는 가독성있게 작업하고, 완성된 후에는 공백을 없애기도 합니다.

주석

주석(Comment)은 /*과 */ 사이에 씁니다.
/* Comment */

/*과 */ 사이에 줄바꿈이 있어도 모두 주석으로 인식합니다.
/*
  Comment 1
  Comment 2
*/

 

 

 

 

 

저작자표시

'홈페이지제작 > CSS' 카테고리의 다른 글

[CSS 기초] 타입 선택자(Type Selector)  (0) 2017.11.25
[CSS 기초] 전체 선택자(Universal Selector)  (0) 2017.11.25
CSS에서의 색상 설정  (0) 2017.11.18
CSS 텍스트에 굵기를 지정  (0) 2017.11.15
CSS에 글씨체, 크기, 형태, 굵기, 칼라 적용하기  (0) 2017.11.15
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

CSS에서의 색상 설정

홈페이지제작/CSS 2017. 11. 18. 12:01

CSS에서의 색상 설정

 

CSS에서 색상은 다음과 같은 방식으로 지정될 수 있다.


RGB 색상

RGB 색상 값은 모든 주요 브라우저에서 지원된다. RGB 색상 값은 rgb(red 빨강, green 녹색, blue 파랑)으로 지정한다. 각 변수(빨강, 녹색, 파랑)는 색상의 강도를 정의하고 0부터 255 사이의 정수, 또는 퍼센트 값(0% ~ 100%)으로 지정할 수 있다.

예를 들어, rgb(0, 0, 255) 값은 파랑으로 표현된다. 파랑(blue)의 변수가 최대 값으로 설정되고, 나머지 값(red, green)은 0으로 설정되기 때문이다.


 {
 width:100px; 
 height:100px; 
 background-color:rgb(165, 42, 42); 
 border:1px solid rgb(0, 0, 0); 
 }

 

 {
 width:100px; 
 height:100px; 
 background-color:rgb(100%,67%,50%); 
 border:1px solid rgb(0%, 0%, 0%); 
 }

 

! 주의
rgb(255, 0, 51.2)  정수만을 입력해야 한다. 소수는 안됨.
rgb(100%, 0, 20%)  퍼센트 값과 정수 값을 섞어서 쓰면 안된다.


16진수 색상 코드. 일명 Hex 코드 (Hexadecimal Colors)

 16진수 색상 값은 모든 주요 브라우저에서 지원된다. 16진수 색상은 #RRGGBB, 즉 RR(Red - 빨강), GG(Green - 녹색), (Blue- 파랑) 16진수 색상으로 지정한다. 모든 값은 0 ~ FF 사이여야 한다.

예를 들어, #0000FF 값은 파랑색으로 렌더링 된다. 파란색 구성요소의 최대 값(FF)으로 설정 되고 나머지는 0으로 설정 되기 때문이다.

6자리, 또는 3자리의 Hex 코드를 지정할 수 있다.

 
 { 
 width:100px; 
 height:100px; 
 background-color:#2580a2; 
 border:1px solid #000000; 
 } 


 { 
 width:100px; 
 height:100px; 
 background-color:#f03; 
 border:1px solid #000; 
 } 

 

 

 

 

 

 

 

 

 

저작자표시

'홈페이지제작 > CSS' 카테고리의 다른 글

[CSS 기초] 전체 선택자(Universal Selector)  (0) 2017.11.25
기초 CSS 문법 강좌  (0) 2017.11.23
CSS 텍스트에 굵기를 지정  (0) 2017.11.15
CSS에 글씨체, 크기, 형태, 굵기, 칼라 적용하기  (0) 2017.11.15
CSS에 텍스트에 굵기를 지정  (0) 2017.11.15
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

워드프레스 유료 테마 NEWSMAG 소개

홈페이지제작/워드프레스 2017. 11. 15. 11:03

워드프레스 유료 테마 NEWSMAG  소개

 

 

 

오늘은 요즈음 많이 사용하는 워드프레스 유료 테마를 소개하고자 합니다.
매거진(잡지, 신문, 언론, 뉴스 등) 형태의 대표적인 테마인 <NewsMag 테마>인데요.

지난해인가 한 번 (NewsPaper 워드프레스 테마)를 소개해드린 적이 있는데,
바로 거기서 만든 거의 비슷한 레이아웃의 테마가 바로 뉴스매그 <NewsMag> 테마입니다.

워드프레스 추천 테마 NewsPaper v4.5 심플하지만 댄디한 테마

NEWSMAG 워드프레스 테마


블로그나 매거진 뉴스 형태로 활용되도록 제작된 테마이기 때문에 뉴스를 테마로한 블로그 웹사이트를 만드는데도 손색이 없어 보입니다.

인터넷 익스플로러 8~11, 파이어폭스, 사파리, 오페라, 크롬, 엣지 등에 최적화 제작되었으며 우커머스 지원, 비비프레스,
 비주얼 컴포저 등의 플러그인을 지원합니다.
 
하지만 개인적으로는 레이아웃이나 디자인이 깔끔하고! 군더더기가 별로 없다는 점이 가장 마음에 들어 구입하게 되었는데요.

결정적으로~! 보통의 유료 테마들이 59$ 가격을 고수하는 반면
이 NEWSMAG 테마는 불과 49$ 이라는 상대적으로 조금 저렴한 가격도 구입을 결정하는데 한몫을 했습니다.

샘플사이트로 보는 테마 구성, 디자인


 

사이트 바로가기

 

깔끔하게 정리된 홈페이지 샘플 사이트 (링크) 의 모습입니다.

위의 테마가 기본 테마인데요. 말씀드린 대로 매거진 형태이면서도 깔끔함을 유지하고 있어서 좋았습니다.

테마의 기본 테마라고 말씀드리는 것은 <테마속의 옵션 설정에 따라 다른 형태의 테마로 설정이 가능> 하기 때문에 그렇게 말씀드린 것입니다.


실제로 대부분의 유료 테마들은 1개의 유료 테마에서도 다양한 디자인의 버전을 제공하기 때문에
마치 전혀 다른 테마를 운영하는 것처럼 꾸밀 수도 있습니다.

물론, 기본 뼈대는 거의 같긴 합니다. 하지만 디자인이나 포인트 색상이 달라지는 효과는
마치 전혀 다른 웹사이트를 만든 것 같은 착각을 주기에 충분합니다. :)
 

NEWSMAG 테마에서는 위와 같이 자동차, 동물, 스캔들(연예), 여행, 패션, IT, 영상, 스포츠, 클래식 등
총 10가지의 버전을 제공하고 있습니다.

사용자의 입맛대로 조금 더 특색 있는 사이트를 꾸미는데 도움을 준다는 정도로 생각하시면 좋겠네요!

실제 개인 호스팅에 설치해보니


조금 더 빠른 웹사이트 구축과 구입한 테마의 환경 설정 및 결과물에 대한 조금 더 빠른 인식을 위해서 위와 같이 샘플 콘텐츠 들을 미리 설치해볼 수도 있습니다.

제가 설치할 때는 어떤 문제가 생기면서

오류가 나버리는 바람에.. 썸네일 이미지 몇 개가 깨져버렸는데요. 작동하는 데는 아무 이상이 없었습니다. ㅜ_ㅜ


테마 가격, 판매량 및 평가

지원하는 버전이나 기본 기능들에 대한 설명과 가격, 테마 평가 별점, 실구매 횟수입니다.

714건의 평가가 있었는데도 별 5개 수준이면 상당히 좋은 수준인 것 같습니다.
그리고 약 7천여 건의 구매가 이루어졌다는 점이나, 코멘트도 활발하고,
제작사 업체로 준수한 서비스를 제공하므로 구입하는데 큰 제한사항은 없는 무난한 유료 테마로 보입니다.

워드프레스 유료 테마는 달러($)로 구입해야 하기 때문에 환율 변동에도 조금 민감한 편입니다.

물론.. 그래 봐야 몇 천원 차이이긴 하지만 이게 한두 건이 넘어가면 사용자 입장에서는 원 달러 환율이 오르내림에 점점 민감? 해지더라고요. 뭐.. 애드센스 수입이 있으니 오르는 게 보통은 좋긴 하지만요. ^^;

테마포레스트에서 구입했고 <테마가격 49$ + 수수료 2$ = 51$ (한화 \ 6만원)>을 지불했습니다.

지불 방식은 해외 사용이 가능한 카드라면 신용, 체크 둘 다 되며, 보안이 잘 되어 있어 그런가
카드번호와 CVS 넘버, 유효기간 정도만 입력하면 바로 승인이 떨어집니다.

 

 

 

 

 

 

 

저작자표시

'홈페이지제작 > 워드프레스' 카테고리의 다른 글

[워드프레스 강좌] 워드프레스 설치하기  (0) 2018.01.13
[워드프레스 강좌] 워드프레스 테마 만들기 | 시작하기  (0) 2018.01.12
[워드프레스]워드프레스 와 RSS 및 피드버너 활용  (0) 2017.10.17
워드프레스 phpMyAdmin 접근방법  (0) 2017.05.31
My customs CSS을 이용하여 워드프레스 수정하기  (0) 2017.05.25
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

CSS 텍스트에 굵기를 지정

홈페이지제작/CSS 2017. 11. 15. 10:41

텍스트에 굵기를 지정
p{font-weight:값}
값에는 bold, normal 그리고  100 ~ 900 까지의 숫자가 들어갑니다.
자료에는 100~900 까지 단계별로 굵기가 나타난다고 설명되어 있으나 테스트 해본결과 100~500까지는 normal
600~ 900 까지는 bold 로 처리되네요..

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
 .bold{font-weight:bold}
 .normal{font-weight:normal}
 .hundred{font-weight:100}
 .fourhundred{font-weight:400}
 .ninehundred{font-weight:900}
</style>
</head>
<body>
<p class="bold">i am bold</p>
<p class="normal">i am normal</p>
<p class="hundred">i am 100</p>
<p class="fourhundred">i am 400</p>
<p class="ninehundred">i am 900</p>
</body>
</html>


결과를 보면

bold

텍스트 자간 지정하기

글씨의 양옆 간격을 줄이거나 늘리거나 할때 letter-spacing를 사용합니다.
p{letter-spacing:px}
값은 px,pt,em등등 저는 px만을 사용 합니다. 상대값이라서 모니터 해상도에 따라 맞춰주니까요.


예문으로 테스트를 해봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
 p{letter-spacing:10px}
</style>
</head>
<body>
 <p>hello world</p>
</body>
</html>


위의 소스에서 px값들을 바꿔 가면서 테스트 해보시길 바라며, 혹시 위의 소스들을 그대로 복사 붙여넣기 하시는 분은 안계시겠죠?

기본 html구조를 다 숙지 하셨다면 괜찮은데 그렇지 않다면 손으로 쳐보면서 익히셔야 효과가 좋습니다. 이거구나 하고 넘어가는것보다
 실제로 쳐보면 더 좋습니다.

기본 보다 더 붙이고 싶다면 -1px이런식으로 음수를 주셔도 됩니다.

줄간격 지정하기

줄간격을 컨트롤해봅시다.
p{line-height:값}
값은 %로 줄수도 있고 px로도 줄 수 있습니다.


테스트를 해봅시다. p태그의 폭을 300px로 맞춰서 해보도록 하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
 p{width:300px;line-height:20px}
</style>
</head>
<body>
 <p> 신용·체크카드 사용액 소득공제와 보험료, 의료비, 교육비 등 고소득 근로자의 세 부담 경감 효과가 큰 항목은 공제혜택을 없애거나 세액공제로 전환하고서 단계적으로 줄이겠다는 것이다.
</p>
</body>
</html>


위의 소스에서 px값을 달리하여 테스트도 해보고 %로 값을 주고 테스트 해보시기 바랍니다. 그럼 감 잡습니다.

 

 

 

 

 

 

저작자표시

'홈페이지제작 > CSS' 카테고리의 다른 글

기초 CSS 문법 강좌  (0) 2017.11.23
CSS에서의 색상 설정  (0) 2017.11.18
CSS에 글씨체, 크기, 형태, 굵기, 칼라 적용하기  (0) 2017.11.15
CSS에 텍스트에 굵기를 지정  (0) 2017.11.15
CSS에 텍스트(글씨)를 꾸미는 방법에  (0) 2017.11.15
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

CSS에 글씨체, 크기, 형태, 굵기, 칼라 적용하기

홈페이지제작/CSS 2017. 11. 15. 10:38

 

이 번 강좌에서는 배운 글씨체, 크기, 형태, 굵기, 칼라 등등 적용해봅니다

그렇게 하기 위해서 여러개의 요소를 넣는 법을 알아야 하는데요 방법은 간단합니다.
태그{font-family:값;line-height:20px;letter-spacing:30px;font-style:italic;text-decoration:underline}

위와 같이 {속성:값;속성:값;속성:값} 으로 진행 하시면 됩니다. 속성과 값을 입력하고 구분은 ;(세미콜론)을 사용하구요.^^


그럼 테스트 해봅시다.

텍스트에 스타일 적용

이번에는 텍스트에 스타일시트를 적용해 보도록 할게요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
</head>
<body>
 <p> hello world </p>
</body>
</html>


기본 소스는 위의 소스로 테스트를 할거구요.

글씨체 적용하기

글씨체를 적용할려면 font-family 속성을 이용 하면 됩니다.
셀럭터{font-family:글씨체1,글씨체2,글씨체3}


위의 css에서 셀럭터는 앞에서 설명한 .클래스명, 태그명 을 말합니다.

그리고 font-family는 글씨체를 적용하는 속성이구요, 값이 글씨체1,2,3가 있는 이유는 우선순위 입니다. 첫번재 글씨체가 없으면 그 다음 글씨체 적용 또 없다면 그 다음 글씨체 적용 이런 순입니다.

그럼 한번 적용해 보도록 합시다.
p{font-family:verdana}


위의 소스를 적용 하면 아래와 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
 p{font-family:verdana}
</style>
</head>
<body>
 <p> hello world </p>
</body>
</html>

 

위의 소스를 웹에디터나 본인의 에디터에 적용을 시켜보세요. 그리고 해당 CSS 를 없애서 차이를 비교해 보시면 됩니다.

글씨 크기 적용하기

이번에는 글씨 크기를 적용해 봅시다.
p{font-size:값}


위와 같이 적용을 합니다. 그리고 단위는 pt 와 px 가 있습니다. 더 있는데 일단 이것만 알아두도록 합시다.

pt는 절대값이고 px는 상대값 입니다. pt는 절대값이기 때문에 거의 쓰지 않고 px를 대부분 사용 합니다.

그 이유는 모니터 해상도에 따라서 글씨 크기가 적절히 변하고 모바일로 띄워도 맞게끔 크기를 변경해 줍니다.

그러므로 px(상대값)를 많이 사용 합니다.
p{font-size:12px}


적용해 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
 p{font-size:12px}
</style>
</head>
<body>
 <p> hello world </p>
</body>
</html>

 


위의 소스를 테스트 해보시고 px값을 변경해서 테스트 해 봅시다.


글씨 형태 지정하기
p{font-style:값}


값에는 italic 와 normal 이 있으며 normal은 italic효과를 주지 않는 것이구요 italic를 주면 이탤릭 효과가 적용 됩니다.

font-style은 이탤릭 효과를 줄 때 사용 합니다.

그럼 예제로 테스트를 해봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
 p{font-style:italic}
</style>
</head>
<body>
 <p>hello world</p>
</body>
</html>

 

위의 소스를 에디터로 테스트 해보면 이탤릭 효과를 볼 수 있습니다.

 

 

 

 

 

저작자표시

'홈페이지제작 > CSS' 카테고리의 다른 글

CSS에서의 색상 설정  (0) 2017.11.18
CSS 텍스트에 굵기를 지정  (0) 2017.11.15
CSS에 텍스트에 굵기를 지정  (0) 2017.11.15
CSS에 텍스트(글씨)를 꾸미는 방법에  (0) 2017.11.15
[CSS강좌] 태그만 선언되게 하는 방법 /아이디를 선택자 사용  (0) 2017.11.14
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

CSS에 텍스트에 굵기를 지정

홈페이지제작/CSS 2017. 11. 15. 10:36

텍스트에 굵기를 지정
p{font-weight:값}
값에는 bold, normal 그리고  100 ~ 900 까지의 숫자가 들어갑니다.
자료에는 100~900 까지 단계별로 굵기가 나타난다고 설명되어 있으나 테스트 해본결과 100~500까지는 normal
600~ 900 까지는 bold 로 처리되네요..

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
 .bold{font-weight:bold}
 .normal{font-weight:normal}
 .hundred{font-weight:100}
 .fourhundred{font-weight:400}
 .ninehundred{font-weight:900}
</style>
</head>
<body>
<p class="bold">i am bold</p>
<p class="normal">i am normal</p>
<p class="hundred">i am 100</p>
<p class="fourhundred">i am 400</p>
<p class="ninehundred">i am 900</p>
</body>
</html>


결과를 보면

bold

텍스트 자간 지정하기

글씨의 양옆 간격을 줄이거나 늘리거나 할때 letter-spacing를 사용합니다.
p{letter-spacing:px}
값은 px,pt,em등등 저는 px만을 사용 합니다. 상대값이라서 모니터 해상도에 따라 맞춰주니까요.


예문으로 테스트를 해봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
 p{letter-spacing:10px}
</style>
</head>
<body>
 <p>hello world</p>
</body>
</html>


위의 소스에서 px값들을 바꿔 가면서 테스트 해보시길 바라며, 혹시 위의 소스들을 그대로 복사 붙여넣기 하시는 분은 안계시겠죠?

기본 html구조를 다 숙지 하셨다면 괜찮은데 그렇지 않다면 손으로 쳐보면서 익히셔야 효과가 좋습니다. 이거구나 하고 넘어가는것보다
 실제로 쳐보면 더 좋습니다.

기본 보다 더 붙이고 싶다면 -1px이런식으로 음수를 주셔도 됩니다.

줄간격 지정하기

줄간격을 컨트롤해봅시다.
p{line-height:값}
값은 %로 줄수도 있고 px로도 줄 수 있습니다.


테스트를 해봅시다. p태그의 폭을 300px로 맞춰서 해보도록 하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
 p{width:300px;line-height:20px}
</style>
</head>
<body>
 <p> 신용·체크카드 사용액 소득공제와 보험료, 의료비, 교육비 등 고소득 근로자의 세 부담 경감 효과가 큰 항목은 공제혜택을 없애거나 세액공제로 전환하고서 단계적으로 줄이겠다는 것이다.
</p>
</body>
</html>

위의 소스에서 px값을 달리하여 테스트도 해보고 %로 값을 주고 테스트 해보시기 바랍니다. 그럼 감 잡습니다.

텍스트에 줄 긋기

텍스트에 줄긋는것은 html 2강 심플스타일 태그에서 했는데요.

그 강좌는 이러한 것들이 있다는것을 알려주는것일 뿐이었고, 이것을 스타일시트로 제어를 해야 합니다.

그러므로 그 강좌는 그저 그러한 태그들이 있었다 정도로 사용여부는 본인이 결정하시면 됩니다.

필자는 되도록이면 css로 할수 있는것은 최대한 css로 한다는 생각을 갖고 있어서요.^^;

텍스트에 줄긋기를 적용 시킬려면 text-decoration을 사용한답니다.
p{text-decoraton:값}
값에는 underline : 밑줄긋기
none : 효과없음
overline : 텍스트 위에 선 긋기
line-through : 텍스트 가운데 선 긋기


그러면 텍스트에 줄을 그어 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
 p{text-decoration:underline}
</style>
</head>
<body>
 <p>hello world</p>
</body>
</html>


위 소스에서 text-decoration의 값을 overline, line-through, none으로 변경해가면서 테스트 해보세요.

 

 

                   

 

 

 


 

저작자표시

'홈페이지제작 > CSS' 카테고리의 다른 글

CSS 텍스트에 굵기를 지정  (0) 2017.11.15
CSS에 글씨체, 크기, 형태, 굵기, 칼라 적용하기  (0) 2017.11.15
CSS에 텍스트(글씨)를 꾸미는 방법에  (0) 2017.11.15
[CSS강좌] 태그만 선언되게 하는 방법 /아이디를 선택자 사용  (0) 2017.11.14
CSS강좌 / 태그에 클래스 속성을 지정하여 선택자 사용  (0) 2017.11.14
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

CSS에 텍스트(글씨)를 꾸미는 방법에

홈페이지제작/CSS 2017. 11. 15. 10:33

이제 텍스트(글씨)를 꾸미는 방법에 대해서 학습하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
</head>
<body>
    <p> hello world </p>
</body>
</html>

기본 소스는 위의 소스로 테스트를 할거구요.

글씨체 적용하기

글씨체를 적용할려면 font-family 속성을 이용 하면 됩니다.
셀럭터{font-family:글씨체1,글씨체2,글씨체3}


위의 css에서 셀렉터는 앞에서 설명한 .클래스명, 태그명, 아이디를 의미합니다.

그리고 font-family는 글씨체를 적용하는 속성이구요, 값이 글씨체1,2,3가 있는 이유는 우선순위 입니다. 첫번째 글씨체가 없으면 그 다음 글씨체 적용 또 없다면 그 다음 글씨체 적용 이런 순입니다.

그럼 한번 적용해 보도록 합시다.
p{font-family:verdana}


위의 소스를 적용 하면 아래와 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
    p{font-family:verdana}
</style>
</head>
<body>
    <p> hello world </p>
</body>
</html>

위의 소스를 웹에디터나 본인의 에디터에 적용을 시켜보세요. 그리고 해당 CSS 를 없애서 차이를 비교해 보시면 됩니다.

글씨 크기 적용하기

이번에는 글씨 크기를 적용해 봅시다.
p{font-size:값}


위와 같이 적용을 합니다. 그리고 단위는 pt 와 px 가 있습니다. 더 있는데 일단 이것만 알아두도록 합시다.

pt는 절대값이고 px는 상대값 입니다. pt는 절대값이기 때문에 거의 쓰지 않고 px를 대부분 사용 합니다.

그 이유는 모니터 해상도에 따라서 글씨 크기가 적절히 변하고 모바일로 띄워도 맞게끔 크기를 변경해 줍니다.

그러므로 px(상대값)를 많이 사용 합니다.
p{font-size:12px}


적용해 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
 p{font-size:12px}
</style>
</head>
<body>
 <p> hello world </p>
</body>
</html>

 

위의 소스를 테스트 해보시고 px값을 변경해서 테스트 해 봅시다.


글씨 형태 지정하기
p{font-style:값}


값에는 italic 와 normal 이 있으며 normal은 italic효과를 주지 않는 것이구요 italic를 주면 이탤릭 효과가 적용 됩니다.

font-style은 이탤릭 효과를 줄 때 사용 합니다.

그럼 예제로 테스트를 해봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
 p{font-style:italic}
</style>
</head>
<body>
 <p>hello world</p>
</body>
</html>


위의 소스를 에디터로 테스트 해보면 이탤릭 효과를 볼 수 있습니다

 

 

                   

 

 

 

 

저작자표시

'홈페이지제작 > CSS' 카테고리의 다른 글

CSS에 글씨체, 크기, 형태, 굵기, 칼라 적용하기  (0) 2017.11.15
CSS에 텍스트에 굵기를 지정  (0) 2017.11.15
[CSS강좌] 태그만 선언되게 하는 방법 /아이디를 선택자 사용  (0) 2017.11.14
CSS강좌 / 태그에 클래스 속성을 지정하여 선택자 사용  (0) 2017.11.14
[CCS강좌] CSS 셀렉터(선택자) 사용하는 법  (0) 2017.11.14
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[CSS강좌] 태그만 선언되게 하는 방법 /아이디를 선택자 사용

홈페이지제작/CSS 2017. 11. 14. 11:30

[CSS강좌] 태그만 선언되게 하는 방법

 

오늘상속된 태그만 선언되게 하는 방법에 대해 알아보겠습니다.

리스트 태그 안에 h1태그를 선언하고 그리고 리스트 태그 밖에 h1태그를 선언해서 리스트 안의 태그만 선언되게 해보겠습니다.

그 방법으로는 띄어 쓰기로 자식 요소에 접근이 가능 합니다.

아래와 같은 소스 에서는 h1태그는 li태그에 상속되어 있습니다.

그리고 띄어 쓰기로 구분을 해주므로 li h1{css} 하면 됩니다.
<ul>
    <li>
        <h1>hello world</h1>
    </li>
</ul>
<h1>hello world</h1>


그럼 소스로 배워봅시다. 구동해 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자식 태그 선택자 사용</title>
<style>
    li h1{color:red}
</style>
</head>
<body>
    <ul>
    <li><h1>hello world in list </h1></li>
    </ul>
    <h1>hello world in h1</h1>
</body>
</html>


list_h1
위의 결과와 같이 리스트 안의 h1은 텍스트 칼라값 레드가 적용 되었고 리스트 태그 밖에 있는 h1태그는 그렇지 않습니다.

li h1{color:red} 이런 방식으로 스타일을 적용시켜 줄 수 있습니다.

태그에 아이디 속성을 지정하여 선택자 사용

이번엔 태그에 아이디속성을 하여 아이디 값을 CSS 선택자로 사용하는 방법에 대해서 알아보겠습니다.
우리가 어느 웹서비스에서 고유한 아이디를 가지는 것과 같이

아이디의 값은 오직 한번만 사용할 수 있습니다

즉 어떤 태그에 korea이라는 아이디 값을 적용했다면 다른 태그에는 적용해서는 안됩니다.

고유한 값이기 때문이죠
 클래스는 여러번 사용할 수 있다는 점과 다릅니다.
그리고 클래스는 앞에 .을 붙이는데요.

아이디는 #을 붙입니다. 다음과 같이요.
#아이디{CSS속성:값}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>아이디를 선택자 사용</title>
<style>
    #hello{color:skyblue}
</style>
</head>
<body>
    <p id="hello">hello world</p>
</body>
</html>

 

아이디는 같은 이름으로 여러번 사용할 수 없기 때문에 다음과 같이 사용하면 안됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>아이디를 선택자 사용</title>
<style>
    #hello{color:skyblue}
</style>
</head>
<body>
    <p id="hello">이렇게 사용하면 안됩니다.</p>
    <p id="hello">이렇게 사용하면 안됩니다.</p>
</body>
</html>

 

 

                   

 

 

 

 

 

저작자표시

'홈페이지제작 > CSS' 카테고리의 다른 글

CSS에 텍스트에 굵기를 지정  (0) 2017.11.15
CSS에 텍스트(글씨)를 꾸미는 방법에  (0) 2017.11.15
CSS강좌 / 태그에 클래스 속성을 지정하여 선택자 사용  (0) 2017.11.14
[CCS강좌] CSS 셀렉터(선택자) 사용하는 법  (0) 2017.11.14
CSS3 / div 태그 속성값과 그 활용예제  (0) 2017.09.25
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

공지사항



카테고리

글 보관함

달력

«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28

티스토리툴바