Beny's Study

01. CSS 기본 문법 본문

CSS_VSC

01. CSS 기본 문법

76beny 2022. 6. 14. 13:39
 

CSS 란?

■ HTML문서의 스타일을 정의하는 언어, TAG의 스타일(폰트,크기,위치 등)을 지정하는 문법제공
■ 영역을 지정하고 화면/프레임 분할을 위해 사용되기도 한다

 

CSS 사용법 _ 인라인 스타일

■ 각 태그 속성안에 'Style'속성값을 선언하여 인라인으로 스타일을 지정하는 방법

 <div style="color:red; background-color: aliceblue;"> 인라인 지정 영역 </div>
 

CSS 사용법 _ 내부스타일시트

■  HTML문서 안에 &lt;style&gt;태그로 선언하는 방법
* &lt;style&gt; : 꺽쇠 (<>)
    <style>
        #id1 {
            background-color: coral;
            color: aquamarine;
        }
    </style>
    <div id="id1">id1을 통해 css내부 스타일 지정되는 영역</div>
    <div id="id2">id1을 통해 css내부 스타일 지정이 안되는 영역</div>
 
id1을 통해 css내부 스타일 지정되는 영역
id1을 통해 css내부 스타일 지정이 안되는 영역

 

CSS 사용법 _ 외부스타일시트

■ 표준적인 방법(네이버/다음 등 모두 사용)

■별도의 css확장자 파일을 import하여 사용하는 방법

■head에 link태그를 사용하여 반드시 참조여부를 선언해야 가능

<link rel="stylesheet" type="text/css" href="00_css00.css">헤더에 넣음
[외부 css확장자 _ 파일이름 : 00_css00.css]
/* id 선택자 : #사용 */

#id3 {
    color: aqua;
    background-color: brown;
}


/* class 선택자 : . 사용 */

.class2,
.class3 {
    color: deeppink;
    background-color: forestgreen;
    font-size: xx-large;
    text-align: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="00_css00.css">
    <title>Document</title>
</head>
	<body>
    <div id="id3"> 외부 스타일 지정 영역</div>
</body>

</html>

CSS 적용 우선순위 (적용범위가 가까울수록 높음)

1. 인라인스타일
2. 내부스타일시트==외부스타일 시트와 같음, 단 마지막에 선언한 값이 적용된다
3. 브라우저 기본값

 

CSS적용 문법

예시

    #id1 {
        background-color: coral;
        color: aquamarine;
    }

Selector {Property : value; ...N}
Selector(선택자) : 스타일을 지정할 태그, ID,Class등을 지정하는 선택자 ex)p,#id1,.class1
Property(속성) : 스타일에 적용할 속성, ex) color, font-size, background-color..
Value(값) : 스타일에 적용할 실제 값, ex) 10px, red, blue, 100%..

 

"본 인터넷 사이트 내의 모든 이미지, 문구, 콘텐츠, 내용 등에 대한 저작권은 76beny에게 있습니다.

이를 무단으로 도용, 복사, 전재, 재배포, 2차 변형 등을 할 경우

민, 형사상 법적 조치 등 저작권법에 의거하여 처벌 받을 수 있습니다."

 

 

'CSS_VSC' 카테고리의 다른 글

07. 문단스타일  (0) 2022.06.16
06. 글꼴 관련 스타일  (0) 2022.06.16
05. 선택자 우선순위  (0) 2022.06.14
04.CSS선택자 (형제관계 태그 중 선택,문자선택자,부정선택자,일반구조선택자,형태구조선택자)  (0) 2022.06.14
02. CSS선택자(모든선택자,태그선택자,아이디선택자,클래스선택자)  (0) 2022.06.14
'CSS_VSC' Related Articles more