CSS 스타일의 적용 방법, 인라인 스타일, <style>태그, css파일, 선택자, 전체 선택자, 태그 선택자, 클래스 선택자, 아이디 선택자, 그룹 선택자, link rel href, 박스모델, padding, margin, margin-left

2019. 5. 14. 18:46ㆍCSS

---------------------------------------------CSS----------------------------------------

CSS(Casacading Style Sheets)
            - HTML문서의 디자인 요소를 담당한다.
            - 텍스트 색상/크기, 이미지의 크기/위치, 컨텐츠의 배치 등을 다룬다

스타일의 적용방식
            stryle 적용방식

 - 인라인 스타일
                        - <태그명 style="속성:값; 속성:값; 속성:값"></태그명>
                        - 예) 
                                    <p style="color:red; margin:10px;">

style 태그

- 내부 스타일 시트
-  <style>
		선택자 {속성:값; 속성:값; 속성:값}
   </style>


- 예)
	<style>
		h1 {color:red;}
		<!-- .표시는 클래스-->
		.img-box {border:1px solid silver; margin: 10px 5px;}  
		<!-- #표시는 아이디-->
		#wrapper {margin:5px;}
	</style>

css파일

 선택자 {스타일속성:스타일값; 스타일속성:스타일값; }
                        선택자(Selector)
                                    스타일을 적용할 HTML요소(태그들)를 지정한다.
                                    태그 하나가 될수도 있고, 여러 개의 태그가 될 수도 있다.

           주요선택자
                        전체 선택자
                                    html의 문서의 모든 요소(태그)에 적용된다.
                                    형식
                                                * {속성: 속성값;}

                        태그 선택자
                                    특정 태그에만 스타일이 적용된다.
                                    형식
                                                태그명 {속성:속성값;}

                        클래스 선택자
                                    클래스속성 값이 일치하는 곳에만 스타일이 적용된다.
                                    * 동일한 태그라도 다른 스타일을 적용하고 싶을 때 사용된다.
                                    형식
                                                .클래스 {속성:속성값;}

                       아이디 선택자
                                   아이디속성 값이 일치하는 곳에만 스타일이 적용된다.
                                   * 태그/클래스 선택자는 여러 개의 요소가 선택될 수 있는데 비해
                                     아이디 선택자는 보통 단 하나의 요소에만 스타일을 적용할 때 사용된다.
                                      (하나의 HTML 문서내에 동일한 아이디를 갖는 태그는 오직 하나뿐이기 때문)
                                    형식
                                                #아이디 {속성:속성값;}

                        그룹 선택자
                                    두 종류 이상의 선택자를 사용해서 스타일을 적용한다.
                                    형식
                                                선택자, 선택자, 선택자 {속성:속값;}