1. 전체 선택자 - 모든 요소에 스타일 적용


모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용합니다.


* {속성:속성 값; 속성:속성 값; . . .}



2. 태그 선택자 - 특정 태그를 하용한 요소에 스타일 적용


 h2 {
      color:blue;
      }
 p {
      font-size:12px;
      margin-left:20px;
      }




3.  클래스 선택자 - 특정 부분에 스타일 적용


클래스 이름 앞에는 반드시 마침표(.)를 붙여야 합니다.


.bluetext {
           color:blue; 
          }



4. id 선택자 - 특정 부분에 스타일 적용


id 선택자도 클래스 선택자와 마찬가지로 웹 문서 안의 특정 부분에 스타일 지정할 때 사용합니다. 마침표(.) 대신 (#)기호를 사용하고 클래스 선택자와 달리 문서 안에서 한 번만 적용할 수 있습니다.


#container {
            background: #ff6a00; 
            width:400px; 
            height:200px; 
            margin:0 auto; 
           }



5. 그룹 선택자 -  둘 이상의 요소에 같은 스타일 적용


h1, h2 {
        text-align:center; 
       }




<출처> Do it! HTML5+CSS3 웹 표준의 정석

저작자표시 비영리 변경금지

'IT > CSS' 카테고리의 다른 글

[CSS 입문] 텍스트 스타일  (0) 2017.04.04
[CSS 입문] 글꼴 관련 스타일  (2) 2017.04.03
[CSS 입문] 캐스캐이딩 스타일 시트(CSS)  (0) 2017.03.31
[CSS 입문] 스타일과 스타일 시트  (0) 2017.03.29
[CSS 입문] 글꼴을 지정하는 font-family 속성  (0) 2017.03.02

'스타일(Style)'이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용들을 말합니다. 그리고 이러한 스타일들을 모아 놓은 것을 '스타일 시트(style Sheet)' 라고 말합니다.



1. 스타일 형식


선택자 {스타일 속성: 속성 값; }


'선택자(selector)'는 앞으로 만들 스타일 규칙을 어디에 적용할 것인지를 나타내고 선택자 다음에 중괄호({, })가 오고 그 사이에 속성을 입력합니다. 속성 값은 콜론(:)으로 구분하고 속성과 속성 값 쌍 다음에는 세미콜론(;)으로 구분합니다.


body {
    background-color:#fff; 
   }
   ul li{
    list-style:none; 
    margin: 15px 0; 
    font-size:14px; 
   }



2. 스타일 주석


<style>
      /* h2 제목과
        텍스트 단락의 
        스타일을 조절해 보자
      */
      h2{
        font-size:20px;  /* 글자 크기 20픽셀 */
        color:orange;  /* 글자색 오렌지 */
      }
      p {
        color:blue;   /* 글자색 파랑 */
      }
    </style>


주석을 표시할 때는 /*와 */ 사이에 내용을 입력하는데 주석을 한 줄만 입력하거나 여러 줄을 입력할 수도 있습니다.



3. 내부 스타일 시트


웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것을 '내부 스타일 시트'라고 합니다. 모든 스타일 정보는 <head> 태그와 </head> 태그 안에서 정의해야 하고 <style> 태그와 </style> 태그 사이에 작성합니다.



4. 외부 스타일 시트


여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용하는 것이 일반적입니다. 이렇게 따로 저장해 놓은 스타일 정보를 '외부 스타일 시트'라고 합니다.


<link href="외부 스타일 파일 경로" rel="stylesheet" type="text/css">


<style> 태그 없이 <link> 태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일을 연결합니다.



5. 인라인 스타일


<p style="color:blue;"> 블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.</p>


간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 작성합니다. 해당 태그에 style 속성을 사용해 style="속성: 속성 값;" 형태로 스타일을 바꿀 수 있습니다.



<출처> Do it! HTML5+CSS3 웹 표준의 정석

저작자표시 비영리 변경금지

'IT > CSS' 카테고리의 다른 글

[CSS 입문] 텍스트 스타일  (0) 2017.04.04
[CSS 입문] 글꼴 관련 스타일  (2) 2017.04.03
[CSS 입문] 캐스캐이딩 스타일 시트(CSS)  (0) 2017.03.31
[CSS 입문] 선택자의 종류  (0) 2017.03.30
[CSS 입문] 글꼴을 지정하는 font-family 속성  (0) 2017.03.02

1. <button> 태그 - 버튼 넣기


<input> 태그말고도 <buttone> 태그를 이용해도 폼을 전송하거나 리셋하기 위한 버튼을 삽입할 수 있습니다.


<button [type="submit | reset | button"] 내용 </buttone>


<button> 태그를 사용하면 화면 낭독기에서 이 부분에는 버튼이 있다는 것을 정확히 전달할 수 있고, CSS를 이용해 원하는 형태로 꾸밀 수도 있습니다.



2. <output> 태그 - 계산 결과


<output [속성="속성 값"]> 내용 </output>


<form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">

        <input type="number" name="num1" value="0">
        +<input type="number" name="num2" value="0">
        =<output name="result" for="num"></output>
    </form>




3. <progress> 태그 - 진행 상태


<progress value="값" [max="값"]></progress>


<progress> 태그에서 사용할 수 있는 속성은 다음과 같습니다.


 속성

설명 

value 

작업 진행 상태를 나타내며 부동 소수점으로 표현한다. 이 값은 0보다 크거나 같고 max 값보다 작거나 같아햐 한다. 만약 max 값이 지정되지 않았다면 이 값은 1.0보다 작아야 한다. 

max

작업이 완료되려면 얼마나 많은 작업을 해야 하는지 부동 소수점으로 표현한다. 이 값은 0보다 커야 한다.



4. <meter> 태그 - 값이 차지하는 크기 표시


<meter value="값" [속성="속성 값"]></meter>


<meter> 태그에서 사용할 수 있는 속성은 다음과 같습니다.


속성

설명 

min, max

범위의 최솟값과 최댓값을 나타낸다. 값을 정하지 않으면 0과 1로 간주한다. 

value

범위 내에서 차지하는 값을 나타낸다. 

low

낮은 정도의 값을 지정한다. 

 high

높은 정도의 값을 지정한다. 

optimum

적당한 정도의 값을 지정한다. optimum 값이 high 값보다 크다면 value 값이 클수록 좋고 optimum 값이 low 값보다 작다면 value 값이 작을수록 좋다.



<ul>
      <li>
        <label>점유율 0.8 </label>
      <!-- 전체 크기 1을 기준으로 0.8만큼 차지합니다 -->
    <meter value="0.8"></meter>
      </li>
      <li>
        <label>사용량 64%</label>
    <!-- 전체 100 중에서 64만큼 차지합니다  -->
    <meter min="0" max="100" value="64"></meter>
      </li>
      <li>
        <label>트래픽 초과</label>
    <!-- 전체 크기는 1024~10240까지인데 높다고 설정한 8192보다 현재 값 9216이 더 큽니다 -->
        <meter min="1024" max="10240" low="2048" high="8192" value="9216"></meter>        
      </li>
      <li>
        <label>적절한 트래픽</label>
    <!-- 전체 1 중에서 현재 0.5를 차지하고 있으며 적정도를 0.8로 설정했습니다 -->
        <meter value="0.5" optimum="0.8"></meter>
      </li>
    </ul>





<출처> Do it! HTML5+CSS3 웹 표준의 정석

저작자표시 비영리 변경금지

'IT > HTML' 카테고리의 다른 글

HTML5와 멀티미디어  (0) 2017.04.21
HTML5 시맨틱 태그  (0) 2017.04.20
[HTML 입문] 여러 데이터를 나열하는 태그  (0) 2017.03.27
[HTML 입문] <input> 태그  (0) 2017.03.24
[HTML 입문] 폼을 만드는 기본적인 태그  (0) 2017.03.23

+ Recent posts

티스토리툴바