스타일 기본 문법

문법 : 선택자 {속성1: 값1; 속성2: 값2;}
설명 :
선택자(Selector) : 서식을 지정하고 싶은 요소
속성(Properties) : 부여하고 싶은 스타일의 정해진 단어의 특성을 지정
값(Value) : 해당 속성으로 지정가능한 키워드

스타일 지정 방식

인라인 스타일 방식

해당 요소에 style 속성(attribute)로 직접 지정하므로 스타일 지정 즉시 해당 스타일이 그 요소에만 지정되므로, 재사용성이 떨어지고, 변경하기가 힘듦. 그러므로, 필요외로 가급적 사용하지 않도록 함

<span style="color:red;"> 첫 단어 </span> <span%gt; 둘 단어 </span> <span style="color:blue;"> 셋 단어 </span>

내부 스타일 방식

해당 문서에 head 태그 안쪽에 style 태그로 지정하여 현재 문서에만 적용할 경우 활용, 재 사용성은 현재 문서에만 적용되므로 중간 정도, 변경하기가 쉬움.

<⁢style> .comment {color: red;} <style>

외부 스타일 방식

별도의 css 파일을 작성하여 해당 html 문서에 연결하여 사용하는 방식으로 재 사용성이 뛰어나고, 필요한 곳에 link 태그를 활용하여 연결하고, 필요가 없는 경우 해당 link 태그를 삭제하면 되고, 반드시 charset을 UTF-8로 처리하여야 한글이나 특수 문자가 손상되지 않는다.

<link href="style.css" rel="stylesheet" />
-------------------------style1.css------------------------------
@charset "UTF-8"; 선택자 {속성: 값;}

크기 단위

스타일에서 콘텐츠나 요소의 크기를 지정할 때는 px, pt, %, em(rem)

px은 모니터 및 그래픽 카드의 해상도에 따라 달리 보일 수 있다.
% : 부모의 상대적인 단위
- 10% = 13pt
em(rem) : %와 동일하지만 글자의 크기 단위
vh : 높이를 기준으로, viewport width 즉, 현재 실행 중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻
vw : 폭을 기준으로, viewport width. 즉, 현재 실행 중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻

색상 단위

웹 컬러를 나타내는 방식으로 컬러명, 16진 코드 6자리, 16진 코드 3자리, hs1(색각도, 채도, 명도), hsla(색각도, 채도, 명도, 불투명도), rgb(빨갱색량, 초록색량, 파랑색량), rgba(빨강색량, 초록색량, 파랑색량, 불투명도) 등을 활용할 수 있음

각도 단위

해당 요소를 회전하려고 할 경우 활용하며, deg(각도), turn(바퀴) 등으로 명시하도록 함

시간 단위

애니메이션이나 지연 시간 등에 지정하며, 단위로서는 s(초), ms()

선택자

스타일을 부여할 대상을 지정하는 키워드

기본 선택자

태그, 클래스, 아이디, 전체 선택자

* {} <br> <!-- 모든 태그를 선택 -->
a {} <br> <!-- 해당 태그를 선택 -->
.클래스명 { }<br> 
<!-- 태그에 해당 클래스 속성이 있는 요소만 선택 -->
#아이디명 { }<br> 
<!-- 태그에 해당 아이디 속성이 있는 요소만 선택 -->

클래스 (class) : 스타일이나 스크립트를 공통을 적용 시키기 위해 해당 태그에 지정

아이디(id) : 하나의 html 문서에서 각각의 요소를 중복되지 않게 아이디를 부여하여 각 요소를 구분하여 스타일이나 스크립트를 각각 적용하기 위해 태그에 지정

계층 선택자

조상 후손, 부모 자식, 형제, 순서

조상 후손 { }<br>
<!-- 조상 요소와 후손 요소 사이를 한 칸 띄움 -->

부모 &gt; 자식 { }<br>
<!-- 부모 자식 요소 사이에 &gt; 가 붙음 -->

형 ~ 제 { }<br> 
<!-- 형과 아우 사이에 ~가 붙음 -->
       
형 + 바로 밑의 동생 { } <!-- 형과 바로 밑의 동생 요소 사이에 + 가 붙음 -->

요약

.ex1 li { }<br>                 <!-- ex1 클래스의 후손 중에서 li 요소를 선택 -->
.ex1 > nav > .lst1 > li { }     <!-- ex1 클래스 부터 그 안의 모든 노드를 모두 기재 -->
.ex1 .item1 ~ li { }            <!-- item1 클래스의 동생들을 선택 -->
.ex1 .item1 + li { }            <!-- item1 클래스의 바로 다음의 li 하나만 선택 -->
li:first-child a { }<br>        <!-- 첫번째 자식 선택 -->
li:first-of-type a { }<br>      <!--  첫번째 요소 선택 -->
li:last-child { }<br>           <!-- 마지막 자식 선택 -->
li:last-of-type { }<br>         <!-- 마지막 요소 선택 -->
li:nth-child(2){ }<br>          <!-- 두번째 자식 선택 -->
li:nth-of-type(2) { }<br>       <!-- 두번째 요소 선택 -->
li:nth-child(2n+1) { }<br>      <!-- 홀수 번째 자식 선택 -->
li:nth-child(2n) { }<br>        <!-- 짝수 번째 자식 선택 -->
li:only-child { }<br>           <!-- 해당 요소가 하나만 있는 자식 선택 -->
li:only-of-type { }<br>         <!-- 해당 요소가 하나만 있는 요소 선택 -->
li:empty::after { }<br>         <!-- 자식이 없거나 내용이 비어있는 요소 선택 -->