-
<CSS - Cascading Style Sheets>
: HTML문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어<style></style> --> <head>안에 작성
h1(선택자){
color : red; -> 선언
}
font속성 : 글자의 폰트를 정의하는 속성
font-family : 글꼴(나눔고딕, 굴림, 돋움)
font-size : 글자크기
font-weight : 글자두께
font-style : 글자 스타일
<선택자 종류>
전체선택자 : *(아스타리카)로 표시되며 웹 문서 내 모든 요소 선택
타입(태그)선택자 : 요소 이름으로 사용하여 요소 선택
아이디 선택자 : #기호로 표시되며 특정한 요소 선택 (* HTML 구조의 공간분할을 적용할 때)
클래스 선택자 : 마침표(.) 기호로 표시되며 특정한 요소 선택 (* 공통되는 스타일을 적용할 경우)
계층선택자 : 특정위치의 요소를 계층적 구조로 요소 선택
1) 자식선택자 : >
ex) 신형만 > 신짱구 / ul > li
신용달 > 신형만 / div > ul
2) 자손선택자 : 띄어쓰기
ex) 신용달 신짱구 / div li
신조상 신짱구 / body li
신형만 신짱구 / ul li
3) 후행선택자 : ~
짱구 ~ 흰둥이 / li ~ li
짱구 ~ 짱아 / li ~ span
4) 근접후행선택자 : +
짱구 + 짱아 / li + span
짱아 + 흰둥이 / span + li* nth:child(2)
그룹선택자 : 다양한 요소들을 콤마(,)로 구분하여 요소 선택
ex)#abc, #abc2 {}
반응 선택자 : 사용자의 반응으로 생성되는 특정한 상태를 선택
:active - 마우스를 클릭할 때 선택
:hover - 마우스를 올린 태그를 선택
ex) p:active{}<스타일시트 명시도 계산>
가중치 스타일적용 예시 0 전체선택자 *{color:red;} 1 타입(태그)선택자 p{color:red;} 10 클래스선택자 .txt{color:red;} 100 아이디선택자 #main{color:red;} * 타입(태그)선택자 ex) p, span, div
계층선택자 가중치? 타입보다는 높고, 클래스보다는 낮다
그룹선택자 = 타입선택자
!important를 활용하면 가중치가 가장 높음<크기단위>
요소 or 텍스트의 크기를 지정하는 단위
px : 화소 하나의 크기에 대응되는 단위(고정값!)
em : 부모요소 크기에 따른 배수 단위
ex) 3em -> 부모요소의 크기가 10px이라면 30px
rem : html 태그의 폰트 크기에 따라 결정
ex) 3rem -> html 폰트의 크기가 16px이라면 48px
<공간분할태그>
경계를 분할하거나 영역을 나눌 때 사용하는 태그
<div>, <p>, <span>
-div : 주로 큰 영역 분할
-p요소 : 문단분할
-span요소 : 세부적인 스타일
<display>
요소가 화면에 보이는 방식 지정
block : block형식으로 지정 (무조건 한 줄 차지)
inline : inline형식으로 지정 (contents 크기만큼 차지, width와 height 변경 불가능, 개행x)
none : 화면에 보이지 않게 지정
<Box Model>
요소에 부피감을 결정하는 개념 (웹 페이지의 레이아웃 및 디자인 설계 시)
<박스모델 구조>
너비(width), 높이(height) : 내용(content)을 표현
안쪽여백(padding)
경계선(border)
바깥여백(margin)
<margin>
테두리를 기준으로 요소의 바깥여백 지정
ex)
margin:10px; : 모든 방향에 적용
margin:quto; : 웹페이지 가운데 위치
margin-top : 위쪽 바깥 여백
<padding>
테두리를 기준으로 요소의 안쪽여백 지정
ex) padding: 10px : 모든 방향에 적용
< Box-sizing >
Content-box => 컨텐츠
ex)
width : 500px
box-sizing : content-box;
padding : 20px
=> 540
width : 500px
box-sizing : border-box;
padding : 20px
=> 500
=> 460
<Position>
자유자재로 요소의 위치를 배치하는 속성
static : 태그가 위에서 아래로 순서대로 배치, position의 기본 값
relative : 초기 위치 상태에서 상하좌우로 위치 이동
absolute : 절대 위치 좌표를 설정
fixed : 화면을 기준으로 절대 위치 좌표 설정
내가 있는 곳에서 이동하는게 편한 도형인가? -> relative
브라우저 크기에 따라서 다르게 설정해야 하는가? -> absolute위치 기준 static X - relative O 내가 원래 있던 위치 absolute O static이 아닌 부모(없으면? body) fixed O body태그(부모, 스크롤 전부 무시)
<overflow>
부모요소의 범위를 벗어날 때 어떻게 처리할지 지정
visible : 영역이 벗어나도 그대로 보여지도록 처리(기본값)
hidden : 영역이 벗어나는 부분은 숨김처리
scroll : 영역이 벗어나는 부분을 스크롤 처리
auto : 영역을 벗어나지 않으면 스크롤이 나오지 않고, 영역이 벗어나면 스크롤로 처리
<float>
요소를 띄워서 배치하는 속성
left : 왼쪽에 요소를 띄움
right : 오른쪽에 요소를 띄움
none : 띄우지 않음(기본값)
<스타일 시트 선언 방식>
(1) 인라인 스타일 : 요소 내 style 속성으로 스타일 지정
ex) <p style="color;blue;> 인라인 스타일 </p>
(2) 내부 스타일 : head 요소 내 style요소 생성한 후 스타일 지정
ex)
<head>
<style>
p{color:blue;}
<style>
<head>
(3) 외부 스타일 : <link> 태그로 외부 파일에 접근해서 스타일 지정
ex)
<head>
<link rel="stylesheet" href = "파일명.css">
<head>
<스타일 시트 우선 순위>
!important
인라인>내부>외부
id>class>타입>전체
나중에 선언>먼저 선언'HTML CSS' 카테고리의 다른 글
CSS 실습(2) (0) 2022.04.28 CSS 실습(1) (0) 2022.04.28 HTML 실습(2) (0) 2022.04.28 HTML 실습(1) (0) 2022.04.28 HTML 이론 (0) 2022.04.26