스타일 기본 문법
- 문법 : 선택자 {속성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>
<!-- 조상 요소와 후손 요소 사이를 한 칸 띄움 -->
부모 > 자식 { }<br>
<!-- 부모 자식 요소 사이에 > 가 붙음 -->
형 ~ 제 { }<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> <!-- 자식이 없거나 내용이 비어있는 요소 선택 -->'Web > CSS3' 카테고리의 다른 글
| CSS 속성(Properties) (0) | 2023.07.10 |
|---|
