css (Cascading Style Sheet)
웹문서의 디자인과 배치.
중첩가능하며, 나중에 적용된 속성이 이전 속성을 덮는다.
기본적으로 속성 1개는 세미클론 한개로 마침.
적용방법
1. head 태그 안에 style태그로 넣는 기본적인 방법
2. 태그안에 직접 style 속성을 넣는 인라인 태그
3. css파일 임포트. css파일을 별도로 만들어서 import하는 방법
link 태그를 사용한다.
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>CSS을 적용하는 3가지 방법</title>
<!-- 방법1 : head태그 안에 style태그로 넣는 방법 -->
<!-- : 기본적인 방법 -->
<!-- 방법2 : 인라인태그, 태그안에 style속성을 넣는 방법 -->
<!-- : 간단한 방법-선택자가 필요없음. -->
<!-- 방법3 : css파일 임포트, css파일을 별도로 만들어서 import -->
<!-- : css 속성이 많을 때 -->
<style>
/* h1 : 태그 선택자
{ } : CSS 속성 값을 넣을때 사용. 블럭-영역
color : CSS 속성 이름
: 은 구분자
red : CSS 속성 값
; : 기본적으로 속성 1개에는 세미콜론으로 마침.
*/
h1 { color: red; }
</style>
<!-- link태그 : 외부파일을 임포트할 때 -->
<!-- rel : 외부파일 형식 -->
<!-- href : 외부파일 이름 -->
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<h1>제목태그 H1입니다.</h1>
<h2 style="color: blue;">제목태그 H2입니다.</h2>
<h3>제목태그 H3입니다.</h3>
</body>
</html>
```
class : 문서안에서 여러개를 지정할때 사용. .으로 접근하낟.
id : 문서 안에서 유일한 태그로 지정할 때 사용. #으로 접근한다.
태그선택자. 클래스 선택자 : 태그 안의 클래스만 적용된다.
태그선택자 # id선택자 : 태그안의 id만 적용된다.
input [ tpye=속성] : text, password 같은 속성을 선택하는 속성 선택자.
후손선택자
태그안에 태그가 들어간 경우, 아래의 모든 태그에 적용된다.
상속(직계) 선택자
> 문자를 이용한다. 바로 아래의 한개의 태그에 적용된다.
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>속성 선택자</title>
<style>
input[type=text] { background-color: lightgray; }
input[type=password] { background-color: red; }
</style>
</head>
<body>
<form>
<label>아이디</label>
<input type="text"><br>
<label>암호</label>
<input type="password">
</form>
</body>
</html>
```
형제선택자
바로 뒤의 한개만 선택한다.
+ 사용법 : h1 + h2의 경우, h2만 적용됨
~ 사용법 : h1 ~ h2의 경우, h1뒤의 모든 h2태그에 적용됨. 연속되지 않아도 적용.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>형제선택자(동위레벨선택자)</title>
<style>
/* h1 바로 뒤의 h2 하나만 선택한다. + 연산자 */
h1 + h2 {
color: red;
}
/* h1 뒤에 위치하는 모든 h2를 선택한다. ~ 연산자 */
h1 ~ h2 {
color: blue;
}
</style>
</head>
<body>
<h2>제목태그 H2</h2>
<h1>제목태그 H1</h1>
<h2>제목태그 H2-1</h2>
<h2>제목태그 H2-2</h2>
<h2>제목태그 H2-3</h2>
<h2>제목태그 H2-4</h2>
<h2>제목태그 H2-5</h2>
<h3>제목태그 H3</h3>
<h2>제목태그 H2-1</h2>
</body>
</html>
" : " 로 구분하는 속성들
a에 적용되는 속성
a:link : 클릭전, 방문전 태그. 하이퍼링크 사용전 태그
a:visited : 클릭후, 방문후 태그. 색깔 등 변경 가능
반응선택자
hover : 마우스 커서가 올라갔을때 적용됨.
active : 마우스가 클릭 했을때 적용됨.
상태선택자
input : 뒤에 작성.
focus: 입력 대기상태.
enable : 활성화. 기본상태. 작동되는 상태.
disable : 비활성화. 입력(동작) 불가. 텍스트 창 이라면 텍스트 입력 불가.
checked : 체크됨. 체크박스
selected : 선택됨.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>상태선택자</title>
<!-- 상태: 포커스, 활성화, 비활성화, 체크됨, 선택됨 -->
<!-- 포커스 : 입력대기상태 -->
<!-- 활성화 : Enabled, 기본값, 정상동작되는 상태 -->
<!-- 비활성화 : Disabled, 입력(동작) 불가 -->
<!-- 체크됨 : checked 체크박스 -->
<!-- 선택됨 : selected 선택박스 -->
<style>
input:enabled {
background-color: red;
}
input:disabled {
background-color: darkcyan;
}
input[type=checkbox]:checked {
/* outline : 바깥쪽 테두리선 */
outline: 2px solid red;
}
/* 포커스 상태 선택자 */
input:focus {
background-color: orange;
}
</style>
</head>
<body>
<h1>활성화 상태</h1>
<input type="text">
<h1>비활성화 상태</h1>
<input type="text" disabled>
<h1>체크박스</h1>
<input type="checkbox" checked><label>체크박스</label>
</body>
</html>
n번째 선택자.
태그 : nth-child(숫자) : 같은 태그가 여러개 있을때, 특정 번째 태그를 선택
태그 : first-child : 특정 태그의 첫번째 태그를 선택
태그 : last-child : 특정 태그의 마지막 태그를 선택
태그 : nth-chiild(n) : 모든 태그 선택
태그 : nth-child(2n) : 짝수 태그만 선택
태그 : nth-child(2n+1) : 홀수 태그만 선택
형제중 다른 요소가 존재할때 선택하기
원하는 타입 : nth-of type(숫자) : 상속관계에서 원하는 타입의 n번째를 선택.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>n번째 선택자 : nth-child선택자</title>
<style>
/* 첫번째 li만 선택 */
li:nth-child(1) { color: red; }
/* 두번째 li */
li:nth-child(2) { color: blue; }
/* 첫번째 요소를 선택 */
li:first-child {
background-color: aqua;
}
/* 마지막 요소를 선택 */
li:last-child {
background-color: brown;
}
</style>
</head>
<body>
<ul>
<!-- VSCode 단축키 -->
<!-- 다중열 편집 단축키 : CTRL+ALT+아래화살표 -->
<!-- 행을 위로 이동 : ALT + 위화살표 -->
<!-- 행을 아래로 이동 : ALT + 아래화살표 -->
<!-- 문자열 검색 : CTRL + F -->
<!-- 여러파일에서 문자열 검색 : CTRL+SHIFT+F -->
<li>아이템선택1</li>
<li>아이템선택2</li>
<li>아이템선택3</li>
<li>아이템선택4</li>
<li>아이템선택5</li>
</ul>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<title>n번째 선택자 - n변수 사용하기</title>
<style>
/* n은 0~7까지 변경되는 변수 */
li:nth-child(n){
color: red;
}
/* 짝수번째만 선택 */
/* 2*0=0 2*1=2 2*2=4 */
li:nth-child( 2n ) {
color: blue;
}
/* 홀수번째만 선택 */
/* 2*0+1=1 2*1+1=3 */
li:nth-child( 2n+1 ){
color: green;
}
</style>
</head>
<body>
<ul>
<li>아이템1</li>
<li>아이템2</li>
<li>아이템3</li>
<li>아이템4</li>
<li>아이템5</li>
<li>아이템6</li>
<li>아이템7</li>
</ul>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<title>상속관계에서 n번째 선택자 - nth-of-type선택자</title>
<style>
/* 형제요소 중에 다른 종류의 요소가 있으면 안됨. */
p:nth-child(1){
color: red;
}
/* 상속관계에서 n번째 선택 */
div p:nth-of-type(1){
color: blue;
}
div p:first-of-type {
background-color: aqua;
}
div p:last-of-type {
background-color: blueviolet;
}
</style>
</head>
<body>
<div>
<div>DIV 아이템1</div>
<p>P 아이템1</p>
<p>P 아이템2</p>
<p>P 아이템3</p>
</div>
</body>
</html>
css/html은 어떤 로직이나 규칙같은게 없다. 근본적으로 언어로 만들어진것이 아니라 학자들이 논문을 교류하기 위해 만든것이여서 그런것인가 싶다. 규칙과 미리 행동이 정해진 명령어만 산더미에, 생각할 거리도 없이 주구장창 외우는게 전부이니 당최 공부할 맛도 안난다. 프론트 엔드는 나의 적성이 아니지 싶다.
'공부 > html --- css' 카테고리의 다른 글
| 24일차 복습 (0) | 2022.12.15 |
|---|---|
| 23일차 복습 (0) | 2022.12.14 |
| 22일차 - html 끝 (0) | 2022.12.13 |
| 21일차 (0) | 2022.12.12 |
| 20일차 (0) | 2022.12.11 |
