SW

CSS3 스타일 시트 본문

프로그래밍/HTML&CSS

CSS3 스타일 시트

LCD 2018. 10. 27. 18:26

CSS3 스타일시트 개요 


CSS3 는 HTML 문서의 색, 모양, 출력 위치 등 외관을 꾸미는 언어이다.

CSS로 작성된 코드를 스타일 시트라 부른다.


주로 이런 곳에 활용 된다.

☞ 색상 및 배경

☞  텍스트 

☞  폰트

☞  박스 모델

☞  비주얼 포맷 및 효과

☞  리스트

☞  테이블

☞  사용자 인터페이스




CSS3 스타일 시트 구성

프로퍼티                프로퍼티   
☞  h1 { color : blue; font-size : 20px; } 
    셀렉터                값                                값




세미콜론(;) 으로 경계를 나눠주어야 여러개를 한방에 입력이 가능하다.


CSS 는 대 소문자 구분이 없다.!









CSS3 스타일 시트 만들기


<!DOCTYPE HTML>
<html>
  <head>
    <title>텍스트 입력</title>
    <meta charset="utf-8">
    <style>
      body {  background-color: mistyrose;}
      h3 { color: purple;}
    </style>
    <style>
      hr{border : 5px solid yellowgreen;}
      span { color: blue; font-size: 20px;}
    </style>
  </head>
  <bady>
    <h3> 입력 </h3>
    <hr>

  </bady>
</html>


이런식으로 <head> 안에 <style> 만들어서 안에 작성하면 된다. 

스타일 태그는 여러 번 작성 가능하며 스타일 시트들이 합쳐 적용된다.

스타일 태그에 작성된 스타일 시트는 웹 페이지 전체에서 적용 된다.









외부에서 스타일 시트 파일 불러오기



<Link> 태그를 이용하여 가져온다.


<head>
<Link href="style.css" type="text/css" rel="stylesheet">
</head>




@import 이용


<style>

@import url(Style.css);

</style>













CSS3 규칙


CSS3 스타일은 부모 태그로부터 상속된다.

예를 들어 

<p stlye="color:yellow">ㅎㅇ
<em style= "font-size:25px"> ㅂ2</em>
</p>


em 태그는 폰트 크기 25px 사이즈를 가지고 있다. 하지만 P태그의 자식이다. 

결론 em 태그는 p 태그의 색상까지 가져와서 

25px 폰트 크기의 노란색 글씨가 된다.










스타일 합치기와 오버라이딩



스타일은 총4가지다.

브라우저의 디폴트 스타일

.css 스타일 시트 파일에 작성된 스타일

스타일 태그에 작성된 스타일

스타일 속성에 작성된 스타일



스타일 합치기(caseading) 

앞의 4가지 스타일 시트가 태그에 동시에 적용될 때 스타일이 합쳐져서 적용됨을 말한다.

But! 여러 스타일 시트들이 하나의 태그에 중첩되어 동일한 CSS3프로퍼티에 서로 다른 값을 설정하는 충돌이 발생하기도 하니 주의해야한다.


스타일 오버라이딩(overriding)

이건 덮어쓰기로 동일한 CSS3 프로퍼티에 서로 다른 값을 설정하는 충돌 시 우선순위가 높은 스타일을 적용하는 규칙이다. 

style 속성에 지정된 스타일은 최우선 된다.


우선순위가 높다.                                                                                                                                                        우선 순위가 낮다.

Style 속성                 >                    <style>태그                     >                   스타일 시트                >               브라우저 디폴트 스타일











Class & id 셀렉터 

요놈 좀 중요 자주쓰이는듯...


우선 class 셀렉터 부터 살펴 보자.

.abc { color: blue;}
body.main { background : red; }


<body class="main">
<div class="abc"> </div>
</body>


이런 식으로 클래스로 묶어서 스타일을 따로 지정해줄 수 있다.

※ class="main" 은 바디만 선언할 수 있다. 다른 태그엔 선언이 불가능하다.





id 셀렉터 


#list { background : green; }

<ul id="list">
<li>HTML5</li>
<li><strong>CSS</strong></li>
<li>JAVAscript</li>
</ul>


클래스는  ( . ) 을 이용해서 지정했는데 id는 ( # ) 을 이용하여 속성을 설정해줄 수 있다.


id 셀렉터 이름 앞에 태그 이름을 사용하여 특정 태그에만 적용되도록 제한 할 수 도 있다. 

div#etc { background : blue; } 

요론 식이다. 이러면 다른 태그가 etc id 속성값을 가져올 수 없다. 오직 div만 사용가능하도록 지정 해준 것이다.








셀렉터 조합


자식 셀렉터

자식 셀렉터는 부모 자식 관계인 두 셀렉터를 ( > ) 기호를 이용해서 조합한 형태.


ex ). div > strong { color: blue; }

이러면 div 직계 자식인 strong태그에 적용





자손 셀렉터

자손 셀렉터는  자손 관계인 2 개 이상의 태그를 나열한 형태.

ul strong { color : dodgerblue; }





전체 셀렉터

* 를 넣어주면 됨

ex) * { color : red; }






속성 셀렉터


특정 속성에 대한 값이 일치하는 태그에만 스타일을 적용하는 셀렉터

ex ) input[type=text] { color : red; }

이렇게 설정하면 <input type="text"> 인 모든 태그에 대해 글자색이 바뀐다.




가상 클래스 셀렉터



마우스

:hover          :     마우스가 올라가면 스타일 적용됨

:active          :     마우스로 누르고 있는 상황만 스타일 적용됨



폼 요소   

:focus        :     폼 요소가 키보드나 마우스 클릭으로 포커스를 받을 때 스타일 적용




링크

:link            :     방문하지 않은 링크에 스타일 적용

:visited       :     방문한 링크에 스타일 지정   (애는 색상 관련 프로퍼티만 쓸 수 있음)





블록


:first-letter        :     <p> <div> 등과 같은 블록형태그의 첫 글자에 스타일 적용 <span> 같은 인라인 태그는 적용 안됨

"first-line           :     <p> <div> 등과 같은 블록형태그의 첫 라인에 스타일 적용




구조

:nth-child(even)        :     짝수 번째 모든 자식 태그에 스타일 적용


:nth-child(1)               :     첫 번째 자식 태그에 스타일 지정















































저작자표시

'프로그래밍 > HTML&CSS' 카테고리의 다른 글

HTML 태그 정리 (지속추가)  (0) 2018.10.25
'프로그래밍/HTML&CSS' Related Articles more