⏰ 2024.11.11 (D+23)
1. CSS 코드란?
🔖 중요 ]
- CSS코드는 Style 태그 안에서 작성
- 전체 선택자 : *로 모든 태그(body이하부터)선택
- 글꼴이나 혹은 여백을 처음에 전체에 적용핱때 사용
*{
margin: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}2. CSS의 다양한 선택자
- 태그 선택자 : 태그명으로 선택
- 클래스 선택자 : .클래스명으로 선택 - 한페이지안에 클래스명 중복 가능
- 하위 선택자 : 스페이스로 구분하여 선택
- 자식 선택자 : >로 구분해서 선택
- 다중 선택자 : ,(콤마)로 구분해서 여러 선택자 사용
- 아이디 선택자 : #아이디명 으로 선택-아이디는 한 페이지 안에서 중복 불가
3. CSS의 속성 선택자 및 정규 표현식 사용
1) 속성 선택자
🔖 정의 ]
- 속성 선택자 : 선택자[속성]
- 속성값은 "이나 '으로 감싸거나 특수 문자가 포함되지 않은 경우는 감싸지 않아도 된다.
💡 input태그중 type속성이 checkbox 인 요소중 체크된 요소 선택
input[type=checkbox]{checked:
width:30px;
height:30px
} 2) 속성 선택자의 정규 표현식 사용
※ 선택자에 정규표현식 적용
- 선택자[속성명*='문자열'] :문자열이 포함된 모든 선택자 가져오기
- 선택자[속성명$='문자열']: 문자열로 끝나는 모든 선택자 가져오기
- 선택자[속성명^='문자열']: 문자열로 시작하는 모든 선택자 가져오기
- 선택자[속성명 ='문자열']: 문자열과 일치하는 모든 선택자 가져오기a[href*='na']{/* *는 포함됨의 의미 */ color:#35afb8; font-size:1.4em } a[href$=net]{/* $는 끝나는 의미 */ color:#7f8106; } a[href^=http]{/* ^는 시작의 의미 */ color:#860223; } h3~div{/* h3 동생들인 div*/ background-color: blueviolet; border:1px red solid } h3+div{/*바로 밑에 동생*/ background-color: rgb(82, 99, 9); }
4. 선택자에 대한 CSS 설정방법
🔖 중요 ]
- 선택자 : ->(콜론 하나)의 의미는 "선택자 중에" 라는 의미
- 선택자 :: -> (콜론 두개)의 의미는 "선택자의 컨텐츠 중에"의 의미
</* nth-child(숫자) : 숫자는 1부터 시작하고 특정 자식을 선택할때*/
div#content li:nth-child(2){
color:red
}
/*nth-child(2n+1) : 홀수번째 만 선택(n은 0부터 시작 1씩 증가)*/
div#content li:nth-child(2n+1){
color:rgb(13, 145, 46)
}
/*nth-child(2n) : 짝수번째 만 선택(n은 0부터 시작 1씩 증가)*/
div#content li:nth-child(2n){
color:rgb(13, 10, 221)
}5. CSS3 반응 선택자 & 상태 선택자
🔖 중요 ]
-
반응 선택자 : 사용자의 반응에 따라 요소(태그)를 선택
① 선택자 : hover - 마우스 오버된 태그
② 선택자 : active - 마우스 클릭된 태그 -
상태 선택자 : 요소의 상태에 따라 선택
① 선택자 : focus - 포커스가 주어진 태그
② 선택자 : enabled - 활성화된 태그
③ 선택자 : disabled - 비활성화된 태그
-
구조 선택자 : 태그의 구조적인 파악으로 태그를 선택할 경우
① 선택자 : nth-child(2n+1) - 홀수 번째 태그 선택
② 선택자 : nth-child(2n) - 짝수 번째 태그 선택
③ 선택자 : first-child - 첫 번째 태그 선택.nth-child(1)과 같다.
④ 선택자 : last-child - 마지막 번째 태그 선택
-
문자 선택자 : 특정 문자 또는 문자열을 선택할 수 있는 선택자
① 선택자 : first-letter - 선택자의 첫번째 문자
② 선택자 : first-line - 선택자의 첫번째 라인
③ 선택자 : selection - 마우스로 드래그한 경우 드래그된 선택자
/*반응 선택자 - 사용자의 반응에 따라 요소(태그)를 선택*/
li:hover{/*마우스가 올라간 li태그*/
color:red
}
li:active{/* 마우스로 해당 태그 영역을 클릭한 요소를 선택*/
color:yellow;
background-color: black;
}
/* 상태 선택자:요소의 상태에 따라 선택*/
input:focus{/* input태그중 focus상태에 있는 input태그*/
background-color: yellow;
border: 5px dotted red;
}
input:enabled{/* input태그중 활성화 상태인 input태그*/
color: red;
font-weight: bold;
}
input:disabled{/* input태그중 비 활성화 상태인 input태그*/
color: rgb(25, 25, 31);
background-color: aqua;
border: 5px dashed pink;
}6. CSS3 Link & after & 부정 선택자
🔖 중요 ]
링크 선택자 : 링크가 걸린 컨텐츠의 사용자 반응에 따라 요소 선택
① a:hover - 마우스 오버시
② a:active - 마우스 클릭시
③ a:visited - 이미 방문했던 경우after 선택자 : 선택 된 태그가 감싸고 있는 컨텐츠의 뒤에 다른 내용을 추가하고자 할때
① 선택자::after - 컨텐츠에 또다른 컨텐츠를 삽입하기 위해 content속성 사용
② attr(속성명)함수는 속성값을 얻는 함수
③ 삽입시에는 ' 나 "으로 감싼다부정 선택자 : not(제외할 선택자) 함수 사용:선택된 요소중 특정 요소 제외시
/* 링크 선택자:링크가 걸린 컨텐츠의 사용자 반응에 따라 요소 선택*/
a:hover{/*마우스 오버시*/
text-decoration: underline;
color:red
}
a:active{/*마우스 클릭시*/
color:gray
}
a:visited{/* 방문했던 주소*/
color:gray
}
/* after선택자:선택 된 태그가 감싸고 있는 컨텐츠의 뒤에 다른 내용을 추가하고자 할때*/
ul.link a::after{
content: '-' attr(href);
}
/* 부정 선택자: not(제외할 선택자) 함수 사용:선택된 요소중 특정 요소 제외시*/
ul.not > li:not(.odd){
background-color: yellow;
}7. CSS3 선택자 사이의 우선순위
🔖 중요 ]
- !important > inline style > id 선택자 > class 선택자 > 태그 선택자> *
- 우선 순위가 같다면 태그랑 가까운 CSS가 적용된다(인터프리터 방식 이니까)
- 최종 선택자(input)의 우선 순위가 같은 경우 왼쪽으로 이동하면서 CSS의 우선순위가 적용된다.
💡 html문서에 CSS를 적용하는 방법
1) Inline Style
<h2 style="속성명1:속성값1;속성명2:속성값2;..">제목1</h2>
2) Embeding Style
<head>태그사이에 <style>태그를 이용해서 적용
3) External Style
CSS파일을 외부파일(확장자는 .css)로 별도로 작성하고 link태그를 이용해서 HTML문서에 적용
<link rel="stylesheet" type="text/css" href="파일명.css"/>
※ CSS의 적용 우선 순위
* [ 0 ] < tag [ 1 ] < class [ 10 ] < id [100 ] < inline style < !important
h1{color: blue;}
h1{color: red;}
#sea{color: red;}
.sea{color: rgb(212, 97, 151);}
.mountain{ color: green;}
li{olor: yellow !important;}
dd{color:blue}8. CSS3 폰트 관련 CSS속성
🔖 중요 ]
- 상대적인 비율을 나타내는 크기
- em : 부모 요소의 텍스트 크기에 대한 비율
- rem : 최상위 요소(html태그)의 텍스트 크기에 대한 비율
- 수직으로 가운데 정렬 시 height속성과 line-height속성의 값을 동일하게 지정
⭐ 폰트 관련 속성
글자(텍스트)와 관련된 CSS속성① font-family : 글꼴 설정 ⇒ 굴림체, 돋움체
② font-size : 글꼴의 크기 ⇒ 12pt(기본크기),1em,1.2em, 1pt(point)는 1/72inch
③ font-style : 글꼴의 스타일 지정 ⇒ italic,normal
④ font-weight : 글꼴 두께 ⇒ normal,bold,100~900. 100에 가까울수록 얇다
⑤ font-variant : 소문자를 대문자로 ⇒normal,small-caps
⑥ letter-spacing : 글 자 사 이 의 간 격 ⇒10pt
⑦ line-height : 줄 간격 ⇒ 180% (주로 블락 엘리먼트 에서 세로로 가운데 배치 시 사용
⑧ height와 line-height를 동일하게 주면 세로로 가운데 배치됨)
⑨ color : 글자색 ⇒ red,#ff38f4,#f00※ css 속성에 속성값을 줄때 숫자형의 값을 줄때는 값이 0이면 단위(pt,px,em등)를 표시 안해도 되나
값이 0이 아니면 반드시 단위를 표시해라.
💡 블락 엘리먼트 & 인라인 엘리먼트의 차이점
블락 엘리먼트
: 컨텐츠 영역의 세로폭이 컨텐츠 크기였다가 5em만큼 세로폭이 늘어나서 마치 줄간격이 생긴 효과가 난다.인라인 엘리먼트
: 컨텐츠 영역의 크기가 변하지 않고 5em만큼 줄간격이 생긴다.<h4 style="line-height: 5em;">블락엘리먼트에 줄간격 적용</h4> <h4>블락엘리먼트에 줄간격 적용</h4> <h4>블락엘리먼트에 줄간격 적용</h4> <div class="inline"> <h4>인라인 엘리먼트에 적용하기</h4> <!--인라인 엘리먼트는 컨텐츠 영역의 크기가 변하지 않고 5em만큼 줄간격이 생긴다--> <span >인라인 엘리먼트</span> <span >인라인 엘리먼트</span> <span style="line-height: 5em;">인라인 엘리먼트</span> </div>
9. CSS3 문단 관련 CSS속성
문단 관련 속성
① text-align : 태그 영역 안에 있는 문단 정렬(수평 방향)
: (left,center,right,justify) inline엘리먼트에는 의미없다
② text-decoration : 밑줄 긋기(none,underline,overline,line-through)
③ none:밑줄 없애기(주로 a태그에 적용)
④ underline:밑줄
⑤ overline:윗줄
⑥ line-through:가운데 선 긋기
⑦ text-indent : 들여 쓰기(10pt). inline 엘리먼트에는 의미 없다.IE에서만 한번 들여쓰기 됨
⑧ vertical-align : 수직 방향의 정렬(top,middle,bottom).
: 주로 img태그에 적용시 block/inline 엘리먼트에 적용시 의미 없다.
⑨ 수직 방향은 여백(margin/padding으로 조정)
<h2>문단 관련 CSS속성들</h2>
<div>
<h3>컨텐츠 수평방향 정렬</h3>
<div style="background-color: yellow; text-align: center;">블락 엘리먼트</div>
<span style="background-color: #00ff00; text-align: center;">인라인 엘리먼트</span>
<div>
<h3>텍스트 꾸미기</h3>
<span style="text-decoration: overline;">윗줄긋기</span><br />
<span style="text-decoration: underline;">밑줄 긋기</span><br />
<span style="text-decoration: line-through;">가운데선 긋기</span><br />
<a href="http://www.nate.com" style="text-decoration: none;">네이트</a>
<h3>들여쓰기</h3>
<div style="text-indent: 5em;">블락 엘리먼트</div>
<!--들여쓸 가로 공간이 없음.적용 안됨-->
<span style="text-indent: 5em;">인라인 엘리먼트</span>
<h3>수직방향 정렬</h3>
<!-- 세로로 움직일 공간이 없음으로 둘다 적용 안됨-->
<div style="background-color: green; vertical-align: middle; height: 200px;">블락 엘리먼트</div>
<span style="background-color: red; vertical-align: middle; height: 200px;">인라인 엘리먼트</span><br />
<img src="../Images/button.png" width="200" height="200" alt="제품" style="vertical-align: middle;"/>제품 이미지
<h3>블락엘리먼트의 컨텐츠 정 가운데 정렬방법</h3>
<div style="width: 200px; height: 200px; background-color: red; line-height: 200px; text-align: center;">블락 엘리먼트</div>
</div>