KH정보교육원 - CSS
1.01_기본선택자
CSS영역 > 스타일을 기술할 수 있는 영역 내부 스타일 방식 > 현재 이 문서에 스타일을 부여하고자 하는 스타일 정보들을 head태그 영역 안의 Style태그 내에 기입하는 방식. html문서안에 스타일 정보를 저장하는 방식임. 인라인 스타일 방
2.03_선택자 우선순위
선택자 우선순위 > 기본적으로 css는 위에서부터 아래로 적용됨. 이때, 동일한 요소를 다양한 선택자로 css가 부여된 경우, 우선순위에 따라 적용됨. 순서는 다음과 같이 !important > 인라인스타일방식 > id선택자 > 클래스선택자 >
3.04_글꼴 관련 스타일
font-family > 글꼴을 지정할 때 사용 [표현법] 선택자{ font-family : 글꼴이름; } 외부폰트 사용
4.05_텍스트 관련 스타일
color > 텍스트의 색상을 지정 [표현법] 선택자{color : 색상명 / 16진수 / rgb(x,x,x) rgba / hsl / hsla} text-decoration > 텍스트에 줄을 긋거나, 없앨 때 사용 [표현법] 선택자 { text-decoration : none / underline / overline / l...
5.06_목록 관련 스타일
list-style-type > 리스트에 사용하는 불릿기호를 변경시켜줄 때 사용 [표현법] 순서없는 목록(ul) 선택자 { list-style-type : disc / circle / square / none; } 순서있는 목록 선택자 {
6.07_영역 관련 스타일
여백 및 간격 관련 스타일 padding > 내용물영역(content)과 테두리영역(border)사이의 거리(여백)을 조정하는 스타일속성 (패딩을 따로 지정하지 않으면 0px이 잡힘.)
7.08_테두리 관련 태그
테두리 스타일 > border-style : none / dotted / dashed / solid / double / groove / ridge / inset / outset; 테두리 두께 > border[-위치]-width : 테두리 두께; 테두리
8.09_배경 관련 스타일
background-color > 배경색을 지정할 때 사용 background-clip > 배경을 적용시키고자 하는 범위를 지정할 때 사용 [표현법] 선택자 { background-clip : border-box / padding-box / content-box; } 배경 이미지 테스트 > [표현법] ...
9.10_레이아웃 관련 스타일1
요소 > 블럭요소 : 한줄단위로 영역이 잡힙 / 자동으로 줄바꿈이 발생함 ex) div, p, pre, h1~6, ... 인라인요소 : content영역만 잡힙 / 옆으로 배치됨 ex) span, label, input, img,... 고정크기, 가변크기 > content영역의 크기를 조정하는 ...
10.11_레이아웃 관련 스타일2
position > 절대위치와 상대위치, 고정을 수행함. z-index > 페이지 안의 요소들을 순서대로 위로 쌓음. visibility > 페이지에 특정 요소를 보이거나, 보이지 않게 하는 속성 <img src="https://velog.velcdn.com/imag
11.12_화면 통합
화면구조 > 공통 가로길이 -> 가로길이 배분 -> 공통 세로길이 -> 세로길이 배분 순으로 진행 세부-풋터 세부-로그인 폼 세부 - 검색창 <img src="https://velog.velcdn.com/images/kojam9041/post/a73100cf-