[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)을 변화시킨다.

,

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)을 변화시킨다.

,

CSS강좌 / 태그에 클래스 속성을 지정하여 선택자 사용

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

CSS강좌 / 태그에 클래스 속성을 지정하여 선택자 사용

 

위의 소스와 똑같은데 hello korea만 빨강으로 표현되게 해봅시다.

즉, 같은 태그라도 그 중에 특정 태그만 스타일을 적용시키는 방식인데요 그렇게 할려면 그 특정태그에 별도의 이름을 부여 해야 합니다.

class="이름" 이라고 적용할 태그 안에 작성합니다. 앞으로 이것은 굉장히 많이 사용 합니다. 그리고 어렵지도 않습니다.
<p class="red">hello korea</p>


위처럼 시작하는 p태그 안에 클래스를 지정하고 이름을 지정 해주면 끝입니다. 위처럼 클래스명을 red로 지정 하였습니다.

그럼 클래스 선언을 했을경우 스타일 시트에는 다음과 같이 선언 하면 됩니다.
.클래스명{css값}

.red{color:red}


즉 점을 찍고 클래스명 그후 {스타일 시트 요소}

아래의 소스를 작성하여 테스트 해보도록 합시다. 클래스의 특징은 하나의 이름을 여러번 사용가능 하다는 점입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>클래스를 선택자로 사용</title>
<style>
    .red{color:red}
</style>
</head>
<body>
<p>hello world</p>
<p>hello usa</p>
<p class="red">hello korea</p>
<p>hello japan</p>
<p>hello germany</p>
<p>hello france</p>
<h1>hello france</h1>
</body>
</html>

 

결과는 아래와 같이 hello korea만 색상값이 빨강으로 표현되었습니다.

text red2

클래스를 여러번 사용할 수 있다는 것은 다른 p태그에도 class="red"를 적용해도 무관하다는 것을 의미합니다.
이번엔 hello japan도 빨간색으로 만들어 보도록 하겠습니다. 클래스명 앞에 .붙이는게 약속입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>클래스를 선택자로 사용</title>
<style>
    .red{color:red}
</style>
</head>
<body>
<p>hello world</p>
<p>hello usa</p>
<p class="red">hello korea</p>
<p class="red">hello japan</p>
<p>hello germany</p>
<p>hello france</p>
<h1>hello france</h1>
</body>
</html>
 

html 태그는 한정되어 있지만 그 태그를 써야 하는 일은 문서량에 따라 엄청나게 달라집니다.

하지만 같은 태그에 똑같은 스타일을 적용한다면 자유도가 많이 떨어지므로

같은 태그라도 클래스명을 따로 선언해 주어 각자 위치와 기능에 맞게 해주어야 합니다.

즉 css에서 클래스를 사용하는 경우는 굉장히 많습니다.

저작자표시

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

CSS에 텍스트(글씨)를 꾸미는 방법에  (0) 2017.11.15
[CSS강좌] 태그만 선언되게 하는 방법 /아이디를 선택자 사용  (0) 2017.11.14
[CCS강좌] CSS 셀렉터(선택자) 사용하는 법  (0) 2017.11.14
CSS3 / div 태그 속성값과 그 활용예제  (0) 2017.09.25
[CSS3] 기초 메뉴만들기 floaat를 기반으로  (0) 2017.09.07
블로그 이미지

itworldkorea

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

,

공지사항



카테고리

글 보관함

달력

«   2024/05   »
일 월 화 수 목 금 토
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 29 30 31

티스토리툴바