2022-12-27 TIL(2)

Jobmania·2022년 12월 27일

CSS

HTML, CSS, JavaScript

목록 보기

3/15

Cascading Style Sheets(CSS)

HTML 에 CSS 적용방법

인라인 스타일 방법 ( Inline Style Sheet ) => 권장하지 않음
HTML 태그의 style 속성에 CSS 코드를 넣는 방법입니다.

<div style="color:red; font-size:20px;">내용</div>

내부 스타일 시트 ( Internal Style Sheet )
HTML 문서 안의 <head>섹션에 <style>과 </style> 안에 CSS 코드를 넣는 방법입니다.
외부 스타일 시트 (Linking Style Sheet)
별도의 CSS 파일을 만들고 HTML 문서와 연결(링크) 하는 방법입니다.

내부 스타일 시트 예시

   <style>
        /* css */
        body {
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            color: skyblue;
        }
     /* 클래스 선언시 .을 붙여줌. */
     .male{
        color: rebeccapurple;
     }

     .female{
        background-color: darkgray;
        color: red;
     }
    /* id 선언시 #을 붙여줌. 유니크, 유일함.  */
     #ceo{
        font-family: 'Courier New', Courier, monospace;
        font-size: 200% ;
        color: chartreuse;
     }
    </style>

외부 스타일 시트 예시

ID, CLASS, NAME 용도

CSS연습하기

A B -> Select B inside of A
A.className -> Select A with class
A,B -> selects all A and B elements.

-> select everything.
A * -> select everything inside of A.
A+B -> select all B directly follow A.(only one)
A~B -> Select All B directly follow ALL A.
A>B -> Select All B that are children of A.