20241119
★CSS-(cascading Style Sheets)
- 마크업 언어가 실제로 화면에 표시 방법 기술언어
★W3C(웹표준지정기관)에서 CSS를 표준으로 지정★- 웹 페이지의 스타일과 레이아웃을 정의에 사용되는 스타일 시트 언어
- HTML로 구조화된 콘텐츠에 대해 색상, 글꼴, 간격, 정렬 및 기타 시각적 요소를 설정
- CSS는 웹 페이지의 디자인을 별도 관리, 유지보수 및 변경이 용이.
CSS의 주요 기능
- 스타일링 : 텍스트, 배경, 테두리 등의 시각적 스타일 설정
- 레이아웃 : 요소의 배치와 크기를 조정 원하는 레이아웃 설정
- 반응형 디자인: 다양한 화면 크기와 장치에 맞춰 웹 페이지를 최적화
- 애니메이션: 요소에 애니메이션 효과를 추가 사용자 경험을 향상
표기법
- Java : 낙타등 표기법(helloWorld)
- DB : 대문자, 띄어쓰기 _로 표시(MEMBER_NO)
- HTML : 하이픈(-) 표기법(li-1, class-1) / 언더바(_) 표기법
A. CSS Selector(선택자)
1).selector
- 현재 HTML 문서에서 특정 요소를 선택하는 방법
- 스타일을 부여하고자 하는 요소들을 선택할 때 사용
- html5 형식의 head 부분에 작성하는 방법
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>01_CSS개요 및 선택자1</title> <style> /*style : css코드만 작성할수 있는 영역을 제공하는 태그 */ /* 태그 선택자 */ div{ border: 3px solid red; } span{ background-color: pink; } </head>
2). 아이디 선택자(#)
<head> /* 아이디 선택자(#) */ #li-1{background-color: red;} #li-2{background-color: blue;} #li-3{background-color: gold;} #li-4{background-color: purple;} #li-5{background-color: burlywood;} - /* ,를 통해 여러 선택자 동시 작성 가능 */ #li-1, #li-2, #li-3, #li-4, #li-5{ color: white; } </head> <body> <ol> <li id="li-1">id 선택자 테스트1</li> <li id="li-2">id 선택자 테스트2</li> <li id="li-3">id 선택자 테스트3</li> <li id="li-4">id 선택자 테스트4</li> <li id="li-5">id 선택자 테스트5</li> </ol> </body>
3). 클래스선택자(.)
<head> <style> /* 클랙스 선택자(.) */ .test-1{ color: red; } .test-2{ background-color: black; color: white; } .bold{ font-weight: bold; } * { font-size: 20px; } </style> </head> <body> <ul> <li class="test-1">클래스 선택자 테스트 1</li> <li class="test-2 bold">클래스 선택자 테스트 2</li> <li class="test-1">클래스 선택자 테스트 3</li> <li class="test-2">클래스 선택자 테스트 4</li> <li class="test-1 test-2 bold" >클래스 선택자 테스트 5</li> </ul> </body>
B. 기타선택자들
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>기타선택자</title> - <!--rel = "" 반드시 필요한 옵션 생성한 css파일과 연결하는 --> <link rel="stylesheet" href="css/selector1.css"> </head>
1. 속성 선택자
스타일을 부여하고자 하는 요소 내에 작성되어있는 속성을 이용하여 선택하는 방법
선택자 뒤에 [ ]를 이용하여 속성과 속성값을 제시하여 요소를 선택1). 선택자[속성=속성값]
2). 선택자[속성~=속성값] 공백기준 단어별
3). 선택자[속성|=속성값]
4). 선택자[속성^=속성값]
5). 선택자[속성$=속성값]
6). 선택자[속성*=속성값] 모든 속성값<!-- div.div-class[name=name$]{div$}*4 --> <div class="div-class" name="name1">div1</div> <div class="div-class" name="name2">div2</div> <div class="div-class" name="name3 name1">div3</div> <div class="class-div" name="name3">div4</div>.CSS 파일
/* div 태그들 중 name 속성값이 name1 과 일치 하는 요소 선택*/ div[name=name1]{ background-color: orangered; } - /* div 태그들 중 name속성값에 name1이 포함되어 있는 요소를 선택*/ div[name~=name1]{ background-color: yellow; } - /* div 태그들중 class속성값이 div로 시작 되는 요소 단, -기준 앞에 */ div[class|=div]{ background-color: cyan; } - /* div태그들 중 name 속성값이 na로 시작되는 요소 */ div[name^=na]{ background-color: blue; } - /* div태그들중 class속성값이 ss로 끝나는 요소 */ div[class$=ss]{ color: white; } - /* div 태그들중 class속성값이 i가 포함 되어 있는 요소 */ div[class*=i]{ background-color: yellow; color: red;} - /*class속성값이 div-class인 요소중 name 속성값에 name3가 포함 되어 있는 요소*/ /* (.) << class와 같다 */ .div-class[name~=name3]{ background-color: brown; }
2. 자손선택자와 후손선택자
- 자손 : 바로 하위 요소들
- 후손 : 하위 요소 전체를 의미
■ 자손 선택자(>) a>b{ 스타일속성 } ■ 후손 선택자(공백) a b{ 스타일 속성 } <div id="test1"> <h4>div의 자손이면서 후손</h4> <ul>div의 자손이면서 후손 <li>ul의 자손이면서 div의 후손</li> <li>ul의 자손이면서 div의 후손</li> </ul> </div>.css 파일
/* 자손 선택자 */ /* a > b : a의 자손중 b요소만 선택 */ #test1 > h4{ background-color: orangered; } - /* 아이디가 test1인 요소의 자식들중 li태그만 선택하여 배경색 yellow 부여 */ #test1 > ul > li{ background-color: aqua; } - /* a b : a 요소의 후손들중 b요소만 선택 */ #test1 li{ color: red; background-color: darkorange; }
3. 동위(같은 형제) 선택자
- 동위 관계에 있는 특정 요소를 선택할 때 사용
-a. a요소 뒤에 있는 b요소 하나만 선택
a+b{ 스타일 }
b. a요소 뒤에 있는 모든 b요소 선택
a~b{ 스타일 }<div id="test2">div1</div> <div>div2</div> <div>div3</div> <div>div4</div> <ul>ul요소</ul> <div>마지막 dic</div>.css 폴더
/* 동위 선택자 */ /* a+b : a요소 바로뒤 b요소 한개 선택*/ #test2+div{ background-color: yellow; } /* a~b : a요소 뒤의 모든 b요소를 선택 */ #test2~div{ background-color: green; }
4. 반응선택자
<p> 사용자의 움직임에 따라 반응하는 선택자 </p> <pre> * 요소의 "클릭"이 되었을 경우 반응하는 선택자 선택자:active{ 스타일 } * 요소에 마우스가 올라가는 순간 반응하는 선택자 선택자:hover{ 스타일 } </pre> <div id="active-test" class="area">active테스트</div> <br><br> <div id="hover-test" class="area">hover테스트</div>.css
/* 반응선택자 */ .area{ background-color: yellowgreen; width: 100px; height: 100px; cursor: pointer; } #active-test:active{ background-color: yellow; color: red; } #hover-test:hover{ background-color: maroon; color: white; }
5. 상태 선택자
- 요소의 상태에 따라 선택되는 선택자들
1) checked : 체크된 상태의 요소들
2) focus : 초점이 맞춰진 input요소들
3) enbled/disabled : 활성화/비활성화 된 요소들<input type="checkbox" id="apple"> <label for="apple">사과</label> - <input type="checkbox" id="banana"> <label for="banana">바나나</label> - <input type="checkbox" id="Passionfruit"> <label for="Passionfruit">패션후르츠</label> - 아이디 : <input type="text" name="userId"><br> 비밀번호 : <input type="password" name="userPwd"><br> - <button>클릭가능버튼</button> <button disabled>클릭불가능버튼</button>.css 파일
/*상태선택자*/ /*선택된 요소에 스타일 반영하기*/ input[type=checkbox]:checked{ width: 20px; height: 20px; } /*체크박스가 체크 될때, 체크 박스 바로 뒤에 존재하는 lebel의 폰트 크기도 20px도 키우기 */ input[type=checkbox]:checked+label{ font-size: 20px; } - /* focus 상태 선택자 */ input[name^=user]:focus{ background-color: pink; } - /* enbled/disabled 상태 선택자 */ button:disabled{ background-color: indigo; } button:enabled{ background-color: blanchedalmond; }
6. 일반 구조 선택자
- 형제관계에 있는 요소들 중 특정 요소를 선택하는 선택자
- 위치를 기준으로 구분을 한다.
:first-child
:last-child
:nth-child(수열)
:nth-last-child(수열)<div id="test1"> <p>테스트1</p> <p>테스트2</p> <p>테스트3</p> <p>테스트4</p> <p>테스트5</p> <pre>테스트6</pre> </div>.css 파일
일반 구조 선택자 :first-child : 형재관계의 요소들중 "첫번째 요소를 선택" ,"첫번째" 요소 이면서, p태그인 경우 - #test1 > p:first-child{ background-color: red; color: white; } - /* :last-child : 형재관계 요소들중 "마지막" 요소를 선택 */ #test1 > pre:last-child{ background-color: orange; } - /* :nth-child(수열) 형제관계 요소 중 지정된 수열 n번째 요소를 모두 선택 순서는 1부터 시작 #test1 > p:nth-child(2){background-color: yellow;} #test1 > p:nth-child(4){background-color: yellow;} - /* 홀수번째 형제 요소 선택 (2n-1),(odd)홀수*/ #test1 > p:nth-child(2n-1){ font-weight: bold; font-size: 20px; } - /* :nth-last-child(수열) 형제 관계 요소중 뒤부터 지정된 수열 요소를 선택*/ #test1 > p:nth-last-child(2n){ background-color: hotpink; }
7. 형태 구조 선택자
- 선택된 형제 관계 요소들 중 "특정 요소"를 선택하는 선택자
- 선택된 요소들을 기준으로 위치를 구분
:first-of-type :같이 선택된 요소중 , 첫번째
:last-of-type :같이 선택된 요소중 , 마지막
:nth-of-type : 같이 선택된 요소중, 수열번째
:nth-last-of-type : 같이 선택된 요소중, 뒤에서 수열번째<div id="test2"> <pre>테스트0</pre> <p>테스트1</p> <p>테스트2</p> <p>테스트3</p> <p>테스트4</p> <p>테스트5</p> <pre>테스트6</pre> </div>.css 파일
/* 형태 구조 선택자 */ /* :first-of-typet : "같이 선택된" 형제요소중 첫번째 요소 */ #test2 > p:first-of-type{ background-color: orange;} #test2 > pre:first-of-type{ background-color: rgb(255, 81, 0);} - /* :last-of-type : "같이 선택된" 형제 요소중 "마지막" */ #test2 > p:last-of-type{ background-color: skyblue;} - /* :nth-of-type(), :nth-last-of-type() : "같이선택된" 형제요소중 "수열"번째의 모든요소*/ - #test2 > p:nth-last-of-type(2n){ background-color: red;} - /* test3의 자식 요소중 3의 배수만 선택 */ #test3 > li:nth-of-type(3n){ background-color: pink; }
8. 부정 선택자( 선택자1:not(선택자2) )
- () 내 선택자를 제외한 나머지 요소
<ul id="test3"> <li >1</li> <li >2</li> <li >3</li> <li >4</li> <li >5</li> <li >6</li> <li >7</li> <li >8</li> <li >9</li> <li >10</li> </ul>.css
/* 3의배수를 제외한 나머지만 선택 */ #test3 > li:not(:nth-of-type(3n)){ background-color: hotpink;}
9. 기타선택자
: only-child
특정 요소의 자식이 "하나"일때 선택하는 선택자 <div id="test1"> <p>자식1</p> <pre>자식2</pre> </div>.css파일작성 :only-child
#test3 > p:only-child{ background-color: steelblue; }:only-of-type
특정 요소의 자식들 중 "지정된 형태와 같은" 자식 요소가 1개 일때 선택
<div id="test2"> <p>자식1</p> <pre>자식2</pre> </div>.css파일작성 :only-of-type
#test2 > p:only-of-type{ background-color: crimson; }:empty
- 자식 요소가 없는 요소를 선택(자식요소개념: 태그, 글자(문자열), 띄어쓰기(문자열))
<div id="test3"> <p><!--222--></p> <p></p> <p>123</p> <p> </p> </div>css.파일작성 :empty
#test3 > p:empty{ height: 30px; background-color: lime; }특정 요소 내부 클래스만 선택 예시
<ul id="test5-1"> <li class="c5">1</li> <li class="c5">2</li> <li class="c5">3</li> <li >4</li> <li >5</li> </ul> <ul id="test5-2"> <li class="c5">6</li> <li class="c5">7</li> <li class="c5">8</li> <li> <span class="c5">9</span> </li> <li> <span class="c5">10</span> </li> <li class="c5">11</li> <li class="c5">12</li> </ul>.css 파일
/* test5-1 내부에 있는 클래스명이 c5인 요소들만 선택하기 */ #test5-1 > .c5{ background-color: red; } - /* test5-2 내부에 있는 요소들 중 클래스명이 c5이면서 li인 요소만 선택*/ #test5-2 > li.c5{ background-color: gold; }
.css파일 적용 우선 순위
/*5순위 : 태그 선택자*/ div{ width: 200px; height: 200px; background-color: red; } - /* 4순위 : 클래스 선택자 */ .cls1{ background-color: green; } - /* 3순위 : 아이디 선택자 */ #test1{ height: 100px; background-color: black; color: white; } - /* 2순위 html <인라인 안에 작성 style..등등>*/ - /* 1순위 !important; */ div{ width: 200px; height: 200px; background-color: red !important; }
