선택자의 종류가 많음.
* : 모든 element에 적용됨
태그 이름으로 선택자를 사용할 수 있음.
클래스명은 앞에 . 을찍어줘야 함.
table에서 바로 td를 찾아감
<header> <section><footer> div의 변형
중복된 border 1px solid를 style태그안에 묶어서 넣어줌
h1, p (selector : 선택자) : 스타일이 적용될 태그
h1, p { border:1px solid;}
id, class, name 속성을 구분 할줄 알아야 함
id 속성: 태그를 식별하기 위한 것이기 때문에 중복 하면 안 됨.
ex)
#div2 id속성 값이 div2인 태그값에 #컬러를 적용하라
name : 사용자가 입력한 값을 서버로 전송할 때 필요한 이름
클래스 속성 값이 dotted1인 태그를 선택해서 해당 스태일을 적용하라
주로 class속성은 style을 위해 사용 함.
html태그
Cascade style sheet
3. 외부 outer스타일 방법
위에서부터 순차적으로 style이 적용될 때 가장 아래쪽에 있는 것으로 덮어 씌워짐
Inline style 아래쪽 이 가장 우선순위
실습사이트
/* mouse over link */
a:hover {
color: hotpink;
}
마우스 올리면 색이 바뀜
display: 영역조차 안보임. none인 경우 화면에 아무것도 안 보임
visiblilty : hidden; 영역은 유지 하면서 화면에서 보지이 않게 하고 싶을
display: block
block은 한 줄
inline은 블럭으로 처리됨
p:first-child
first-child로 시작되는 p요소를 찾아라
blank : 새 창
top : 현재 창
internal CSS는 재사용성이 떨어짐
외부 CSS를 사용하고 싶은경우 link rel 태그를 지정해서 사용
<link rel="stylesheet" href="mystyle.css">
id와 class 중 id선택자가 더 우선시 됨.
RGBA Value
CSS Padding
Text Spacing
- line-height
- white-space
width와 line-height의 크기를 같게 하면 수직 중앙 정렬됨.
순서 지켜줘야 함
table height %로 줄 경우, 부모 높이가 먼저 결정되어 있어야 함
블록요소들은 vertical-align을 써도 수직 중앙 정렬 불가.
line-height 로 가능
position: relative; (상대 위치)
left , right, bottom, top 사용할 수있음.
block 요소 자체를 중앙에 정렬되게 하고 싶은 경우, 좌우 margin을 auto로 주면됨
Z-index 큰 값은 가장 앞에, 작은 값을 주면 뒤에.
P태그와 class1에서 속성(background, color)이 겹치는 경우 밑에있는 class1이 우선 적용됨.
'개발 공부 > WEB' 카테고리의 다른 글
| Servlet (0) | 2023.07.10 |
|---|---|
| Jackson library 설치 (0) | 2023.07.07 |
| ajax / jquery (0) | 2023.07.05 |
| JavaScript (0) | 2023.07.03 |
| Web HTML (1) | 2023.06.27 |