CSS
CSS = Cascadion Style Sheets
HTML 태그에 디자인을 입혀주는 기법
HTML문서에 CSS를 적용하는 방법
<!-- <style>태그 사용하기 -->
<head>
<style type="text/css">
~ CSS 코드 ~
</style>
</head>
<!-- CSS파일 참조 방법 -->
<head>
<link rel="stylesheet" type="text/css" href="외부CSS파일의 경로" />
</head>CSS의 기본형식
파이썬의 딕셔너리 입력형식과 비슷
<!-- 속성에는 폰트, 문단, 크기, 위치, 색상 등 -->
selector {
속성1:값, 속성2:값, ~~, 속성n:값
}기본 selector의 종류
| 종류 | 입력방법 | 의미 |
| 태그이름 | 태그이름 { ~ CSS 본문 ~ } | 특정 태그를 지칭. HTML내에 동일 태그가 있을시 해당태그 일괄처리 |
| 클래스 | .클래스이름 { ~ CSS 본문 ~ } | 클래스이름 앞에 점( . )을 붙여 표시하고 HTML태그의 class속성에 점을 제외한 이름을 명시하여 지정. |
| id | .id이름 { ~ CSS 본문 ~ } | id이름 앞에 #을 붙여 표시하고 HTML태그의 id속성에 #을 제외한 이름을 명시하여 지정. 단, id이름은 중복될 수 없다. |
조합형 셀렉터
<!-- 셀렉터가 지정하는 대상을 자세하게 명시할 수 있다. -->
tag이름.class이름 { 속성1:값, 속성2:값, ~~, 속성n:값 }
tag이름#id이름 { 속성1:값, 속성2:값, ~~, 속성n:값 }특정상황에 따라 반응하는 가상클래스
<style type="text/css">
/**
* link : 링크의 기본상태
* active : 어떤 요소에 대하여 마우스가 눌러진 상태
* visited : 방문한 경험이 있는 링크
* hover : 어떤 요소에 대하여 마우스가 올라간 상태
* focus : 요소에 포커스가 지정된 상태
* checked : 체크박스나 라디오버튼등이 체크된 상태
* selected : 드롭다운에서 선택된 요소
*/
a:link,
a:visited {
color: black;
}
a:hover {
color: blue;
}
a:active {
color: green;
}
</style>가상클래스 -> nth-child
태그요소를 좀 더 구조적으로 명시할 수 있도록 하기 위해,
여러개의 요소 중 n번째 요소라는 의미로 nth-child(n)형식이 추가 되었다.
| 명시방법 | 의미 |
| nth-child(n) | n번째 요소 지정 |
| nth-last-child(n) | 뒤에서 n번째 요소 지정 |
| nth-child(2n) | 2의 배수 요소 지정 |
| nth-child(odd) | 홀수번째 요소 지정 |
<!-- 스타일 지정 -->
<style type="text/css">
li:nth-child(odd) {
color: red;
background-color: green;
}
li:nth-child(2) {
color: green;
background-color: red;
}
li:nth-child(3n) {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>CSS 구체성 단위
자식셀렉터
한 태그안에 1depth안에 존재해야 한다.
표현방법 : >
<!!- B를 표현할 때에는 "A > B" 이런식으로 표현 -->
<A>
<B>
</B>
</A>자손셀렉터
자식셀렉터는 1depth안에 존재해야 하지만
자손셀렉터는 depth를 제한하지 않는다.
<!-- 여기서는 C 와 D 가 자손셀렉터에 해당되며
표현 방법은 "A C', "A D" 태그 사이에 띄어쓰기로 한다. -->
<A>
<B>
<C>
<D>
</D>
</C>
</B>
</A>속성셀렉터
- 태그의 속성에 따른 표현
- 스타일시트의 셀렉터가 적용되는 대상에게 특정 속성이 있는지 여부와 특정 속성의 값이 적용되어 있는지 여부에 따라
태그요소를 좀 더 구체적으로 가리킬 수 있다.
- 스타일시트의 셀렉터가 적용되는 대상에게 특정 속성이 있는지 여부와 특정 속성의 값이 적용되어 있는지 여부에 따라
<!-- 스타일 시트 -->
<style type="text/css">
<!-- input태그의 디자인 지정 -->
input { border: 1px soltd orange; }
<!-- input태그안에 type이 'radio','checkbox'요소에 대해서만 적용시키기 -->
input [type='rario'], input[type='checkbox'] {
border: 0px;
}
</style>'HTML' 카테고리의 다른 글
| HTML(CSS박스) (0) | 2020.07.06 |
|---|---|
| HTML(표, 멀티미디어, 입력양식) (0) | 2020.07.01 |
| HTML (화면 구현) (0) | 2020.06.30 |
댓글