[CSS 기초강좌] 아이디 선택자(ID Selector)

아이디 선택자

아이디 선택자(ID Selector)는 특정 값을 id 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다.
속성값 앞에 #을 붙여 아이디임을 나타냅니다.

예를 들어

#abc {
  color: red;
}

는 id 속성값으로 abc를 갖는 요소를 빨간색으로 만듭니다.

아래 <예제>를 보시면

<예제>

id 값으로 abc를 갖는 요소를 빨간색으로 만드는 예제입니다.

 

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      #abc {
        color: red;
      }
    </style>
  </head>
  <body>
    <p id="abc">이르되 주예수를 믿으라 그리하면 너와 네집이 구원을 받으리라 하고" (행 16:31)</p>
    <p>이르되 주예수를 믿으라 그리하면 너와 네집이 구원을 받으리라 하고" (행 16:31)</p>
  </body>
</html>

 

 

 

 


 

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

CSS DIV 메뉴만들기  (0) 2018.03.16
css기초 마진(Margin)과 패딩(padding)  (0) 2018.03.10
[CSS 기초] 클래스 선택자  (0) 2018.03.06
[CSS 강좌] 아이디 선택자  (0) 2018.03.06
[CSS 강좌] CSS Margin 속성  (0) 2018.03.05
블로그 이미지

itworldkorea

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

,


[CSS 강좌] 아이디 선택자

아이디 선택자(ID Selector)는 특정 값을 id 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다.
속성값 앞에 #을 붙여 아이디임을 나타냅니다.

예를 들어
#abc {
  color: red;
}

는 id 속성값으로 abc를 갖는 요소를 빨간색으로 만듭니다.

예제

id 값으로 abc를 갖는 요소를 빨간색으로 만드는 예제입니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      #abc {
        color: red;
      }
    </style>
  </head>
  <body>
    <p id="abc">하나님은 당신을 사랑하신다.</p>
    <p>하나님은 당신을 사랑하신다.</p>
  </body>
</html>

위 결과 실행 결과는 아래와 같습니다.

 

 

 

블로그 이미지

itworldkorea

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

,

[CSS 강좌] 테이블 꾸미기

표와 관련된 정렬 표와 관련된 정렬에는
•표 정렬
•셀 안의 내용 가로 정렬
•셀 안의 내용 세로 정렬이 있습니다.

기본 모양은
•표 : 왼쪽 정렬
•제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬
•내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬
•셀 안의 내용 세로 정렬 : 가운데 정렬입니다.


<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      table, th, td {
        border: 1px solid #bcbcbc;
      }
      table {
        width: 400px;
        height: 200px;
      }
    </style>
  </head>

<body>

<table>

<thead>

<tr>

<th>서울특별시</th>

<th>대전시</th>

<th>부산시</th>

</tr>

</thead>

<tbody>

<tr>

<td>서울특별시</td>

<td>대전시</td>

<td>부산시</td>

</tr>

<tr>

<td>서울특별시</td>

<td>대전시</td>

<td>부산시</td>

</tr>

</tbody>

</table>

</body>

</html>

위코드의 결과물

               

블로그 이미지

itworldkorea

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

,

 

CSS 강좌 /선택자 / 전체 선택자(Universal Selector)


전체 선택자(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>대한민국</h1>
    <p>서울특별시</p>
    <ul>
      <li>강남구</li>
      <li>용산구</li>
    </ul>
  </body>
</html>

 

위코드 값의 결과는 다음과 같습ㄴ다.

 


               

블로그 이미지

itworldkorea

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

,

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>평화의 왕이시여!</h1>
    <p>죄와 두려움이 창궐한 세상에서 저희를 평화의 길로 인도하시는 목자시여!

불변하는 본성 불변하는 사랑의 하나님이여!
    </p>
    <h1>
    Proin 주의 무한하신 가슴으로 이 작은 인생들을 품어주시고 금년 한 해의 인생을 은혜로 인도하심을

믿고 즐거워하며 영광 돌리게 하옵소서.

오늘 예배에 성령의 기름 부음이 있어 마리아가 주님께 부은 향기름과 같이 향기로운 예배

되게 하시어 저희들의 예배를 흠향하시며 기도를 열납하여 주시옵소서.
    </h1>
    <p>
미약함에도 불구하고 저희는 예수그리스도 안에서 은통을 받은 사람들이라

이 은총을 감사한다면 진정 겸손한 감사와 신앙을 품고 저희에게 주어진 삶의 시간들을 경외와

순종으로 감당하게 하소서.
    </p>
    <blockquote>
   
    존귀하신 하나님!

말씀의 사자이신 담임목사님과 올 한 해도 함께 하셔서 성령으로 충만하게 하옵시며

말씀의 권위에 세우시며 영적인 은혜를 더하셔주소서.

육신의 건강, 가정의 행복, 사역의 승리를 주시옵소서.

이 시간도 그의 사역에 큰 열매 주시옵소서.
    </blockquote>
  </body>
</html>

 

위 코드 실행한 결과는

 

 

블로그 이미지

itworldkorea

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

,


CSS 강좌 | Property > font-family

 

  .

 

 

개요

font-family는 글꼴을 설정하는 속성입니다.
•기본값 : 웹브라우저의 기본 글꼴
•상속 : Yes
•애니메이션 : No
•버전 : CSS Level 1

문법
font-family: font | initial | inherit
•font : family-name 또는 generic-family
•initial : 기본값으로 설정
•inherit : 부모 요소의 속성값을 상속받음

font

family-name은 글꼴 이름입니다. 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 또는 큰 따옴표로 감쌉니다.

generic-family는 글꼴 유형입니다.
•serif : 삐침 있는 명조계열의 글꼴
•sans-serif : 삐침 없고 굵기가 일정한 고딕계열의 글꼴
•monospace : 글자 폭과 간격이 일정한 글꼴
•cursive : 손으로 쓴 것 같은 필기계열의 글꼴
•fantasy : 화려한 글꼴

여러 개의 글꼴 설정

글꼴을 여러 개 설정할 때는 쉼표로 구분합니다. 예를 들어
font-family: Georgia, "Times New Roman", serif;

로 설정했을 때, 제일 먼저 Georgia 글꼴을 찾습니다. 해당 글꼴이 있다면 사용하고, 없다면 Times New Roman 글꼴을 사용합니다. 그 글꼴도 없다면 웹브라우저에서 설정한 명조 계열의 글꼴을 사용합니다.

글꼴은 접속한 기기에 설치되어 있는 글꼴을 사용합니다. 따라서 CSS로 설정한 글꼴이 없을 수도 있으므로, 마직막은 generic-family로 정해두는 것이 좋습니다.

영어와 한글 글꼴을 다르게 하기

글꼴을 여러 개 설정했을 때, 첫번째 글꼴로 표현할 수 없는 것만 다음 글꼴을 사용합니다.

따라서 한글이 없는 글꼴을 앞에 두고, 한글 글꼴을 뒤에 두면 한글과 영어가 다른 글꼴로 표현됩니다.

예를 들어 다음과 같이 하면
font-family: Georgia, "맑은 고딕", serif;

한글은 맑은 고딕, 나머지는 Georgia로 표현됩니다.

 

 

예제
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .a { font-family: Georgia, serif; }
      .b { font-family: serif; }
      .c { font-family: sans-serif; }
      .d { font-family: monospace; }
      .e { font-family: cursive; }
      .f { font-family: fantasy; }
      .g { font-family: Georgia, "맑은 고딕", serif; }
    </style>
  </head>
  <body>
    <p class="a">font-family: Geogia;</p>
    <p class="b">font-family: serif;</p>
    <p class="c">font-family: sans-serif;</p>
    <p class="d">font-family: monospace;</p>
    <p class="e">font-family: cursive;</p>
    <p class="f">font-family: fantasy;</p>
    <p class="g">한글은 맑은 고딕, 나머지는 Georgia</p>
  </body>
</html>

 

 

 

 

 

 

블로그 이미지

itworldkorea

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

,

 

CSS 강좌 /컨텐트 만들기 / content
 

 .

 

 

content 속성은 선택한 요소의 내용 앞이나 뒤에 컨텐트를 붙입니다.

예를 들어 p 요소 내용 앞에 컨텐트를 넣으려면
p:before {
  content: ***;
}

와 같이 하고, 뒤에 붙이려면
p:after {
  content: ***;
}

와 같이 합니다.

content 속성을 이용하여 XXX라는 문자열을 넣으려면 다음과 같이 합니다.
p:before {
  content: "***";
}

이미지를 넣고 싶다면 다음과 같이 합니다.
p:before {
  content: url( "path/abc.png" );
}

선택한 요소의 속성값을 출력할 수도 있습니다. 예를 들어 p 요소의 class 값을 나타내려면 다음과 같이 합니다.
p:before {
  content: attr( class );
}

다음은 위 세가지를 한 페이지에 담은 예제입니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS | content</title>
    <style>
      h1.st:before {
        content: "String ";
        color: red;
      }
      h1.ur:before {
        content: url( "jb_dot.png" );
        margin-right: 10px;
      }
      h1.at:before {
        content: attr( class );
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <h1 class="st">Seoul</h1>
    <h1 class="ur">Pusan</h1>
    <h1 class="at">Daeku</h1>
  </body>
</html>

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

 

 

 

                   

 

 

 

 

 

 

블로그 이미지

itworldkorea

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

,

[CSS 강좌] Table 표 만들 때 사용하는 태그

 

 

표 만들 때 사용하는 태그

 

표는 table 태그로 만듭니다.

 

행은 tr 태그로 만듭니다.

 

열의 제목이 들어가는 셀은 th로 만듭니다.

 

내용이 들어가는 셀은 td 태그로 만듭니다.

 

각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분지을 수도 있습니다.

 

가로로 이웃한 셀을 합칠 때에는 colspan 속성을 사용합니다.

 

세로로 이웃한 셀을 합칠 때에는 rowspan 속성을 사용합니다.

 

표 제목은 caption 태그로 만듭니다.

 

예제

 

위의 태그를 전부 사용한 간단한 예제입니다. 정렬이나 셀 합침의 결과를 명확히 나타내기 위해 CSS로 표의 폭을 정하고 테두리를 만들었습니다.

<!doctype html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>HTML</title>

<style>

table {

width: 100%;

}

table, th, td {

border: 1px solid #bcbcbc;

}

</style>

</head>

<body>

<table>

<caption>Lorem</caption>

<thead>

<tr>

<th></th>

<th>Seoul</th>

<th>Seoul</th>

<th>Seoul</th>

</tr>

</thead>

<tbody>

<tr>

<th>Seoul</th>

<td>Pusan</td>

<td>Pusan</td>

<td rowspan="2">Pusan</td>

</tr>

<tr>

<th>Seoul</th>

<td>Pusan</td>

<td>Pusan</td>

</tr>

<tr>

<th>Seoul</th>

<td>Pusan</td>

<td>Pusan</td>

<td>Pusan</td>

</tr>

</tbody>

<tfoot>

<tr>

<td colspan="2">Table Foot</td>

</tr>

</tfoot>

</table>

</body>

</html>

 

결과값은 아래와 같음

 

 

 

 

 

                   

블로그 이미지

itworldkorea

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

,

 [CSS 강좌] 링크 꾸미기

 

 

 

링크는 <a> 태그로 만듭니다. 따라서 <a> 태그를 선택하여 꾸미면 됩니다.
 예를 들어 a { color: red; }

라고 하면, 링크의 색을 빨간색으로 만듭니다.

가상 클래스를 이용하면 좀 더 다양하게 꾸밀 수 있습니다.
•a:link - 방문하지 않은 링크
•a:visited - 방문했던 링크
•a:hover - 마우스가 올려진 링크
•a:active - 클릭하는 순간 링크

주의할 점은 a:hover는 a:link와 a:visited 뒤에 와야 하고,
a:active는 a:hover 뒤에 와야 한다는 것입니다.
따라서, 위 순서를 그대로 따르는 것이 좋습니다.

 

예제
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      a:link { color: blue; text-decoration: none; }
      a:visited { color: purple; text-decoration: none; }
      a:hover { color: red; text-decoration: underline; }
      a:active { color: white; background-color: green; }
    </style>
  </head>
  <body>
    <h3>Navigation</h3>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
    </ul>
  </body>
</html>

 

 

                   

 

 

 

 

 

 

블로그 이미지

itworldkorea

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

,

CSS 강좌 /  목록 꾸미기 ( list-style-type ) 

 

 

목록은 <ul> 또는 <ol> 태그로 만듭니다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데,

어떤 형식 또는 모양의 마커를 사용할지는 list-style-type으로 정합니다.

속성값은 다음과 같습니다.
•<ul> : disc, circle, square
•<ol> : decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha
•공통 : none

의미상으로는 <ul>과 <ol>에 사용하는 속성값을 구분하는게 맞지만,

<ul>에 decimal을 사용하거나 <ol>에 disc를 사용하는 등 바꾸어 사용해도 됩니다.

 

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS | list-style-type</title>
  </head>
  <body>
    <h3>disc</h3>
    <ul style="list-style-type: disc;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>circle</h3>
    <ul style="list-style-type: circle;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>square</h3>
    <ul style="list-style-type: square;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>decimal</h3>
    <ul style="list-style-type: decimal;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>decimal-leading-zero</h3>
    <ul style="list-style-type: decimal-leading-zero;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>lower-roman</h3>
    <ul style="list-style-type: lower-roman;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>upper-roman</h3>
    <ul style="list-style-type: upper-roman;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>lower-greek</h3>
    <ul style="list-style-type: lower-greek;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>lower-latin</h3>
    <ul style="list-style-type: lower-latin;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>upper-latin</h3>
    <ul style="list-style-type: upper-latin;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>armenian</h3>
    <ul style="list-style-type: armenian;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>georgian</h3>
    <ul style="list-style-type: georgian;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>lower-alpha</h3>
    <ul style="list-style-type: lower-alpha;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>   
    <h3>upper-alpha</h3>
    <ul style="list-style-type: upper-alpha;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
    <h3>none</h3>
    <ul style="list-style-type: none;">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Aenean nec mollis nulla.</li>
    </ul>
  </body>
</html>

 

 

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

 

 

                   

 

 

 

블로그 이미지

itworldkorea

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

,