Phobiing
CSS 정리 본문
css -> 모듈로 구성되어 있음 -> 필요한 부분만을 선별하여 탑재할 수 있도록 되어있음
기본적인 위치 : <head> 요소 안의 <style> 태그
<모듈>
- 선택자 = 스타일 변경하고 싶은 HTML 요소 / 선언 : 요소를 어떻게 그리는지 기술 - { } 안쪽 부분 / 속성 : 이름:값 형식
- 박스모델
- 배경 및 경계선
- 텍스트 효과
- 2차원 및 3차원 변환
- 애니메이션
- 다중 컬럼 레이아웃
- 사용자 인터페이스
선택자
- 아이디 선택자 : <p id="special"></p>라면 <style>태그에서 #special{ }으로 표기
- 클래스 선택자 : <p class="special"></class>라면 <style>태그에서 .special{ }으로 표기
-> 몇 개의 요소들을 하나의 클래스로 묶어 스타일을 지정할 때 사용 / 아이디 , 클래스 이름은 숫자로 시작하면 안됨
만약 p 요소에서 id special인 것을 선택하려면 => p.special { }이어야함
- 자손, 자식 선택자
s1 s2 : 후손관계
s1 > s2 : 자식관계
- 의사 클래스 : 우리가 어던 요소에 별도의 클래스를 정의하지 않아도, 클래스가 정의된 것처럼 간주
::before : 요소의 시작 부분에 콘텐츠 추가 - content 속성 사용해 내용추가
::after : 요소의 끝 부분에 콘텐츠 추가
::first-child : 현재 요소의 첫 번째 자식 요소 선택
::first-letter : 요소의 첫 글자에 스타일 정의
:link : 방문하지 않은 하이퍼링크
:visited : 방문된 하이퍼링크
:hover : 요소 위에 마우스가 있는 상태
:nth-child() : 요소의 n번째 자식 선
스타일시트
- 내부 스타일 시트 : HTML 안에 CSS 정의하는 것 / <head>태그 안의 <style>태그에 넣기
- 외부 스타일 시트 : CSS 파일을 외부에 저장하는 것 / <link> 태그 이용하여 연결 - 단순한 텍스트 파일 = 어떤 텍스트 편집기도 작성가능
<link type="text/css" rel=''stylesheet" href="mystyle.css"> : <head>태그 안에
<style>태그 안에서 @import url(mystyle.css) 로도 불러올 수 있음
- 다중 스타일 시트
웹 브라우저 디폴트 값 < 외부 스타일 시트 < 내부 스타일 시트 < 인라인 스타일 시트 (우선순위)
부모요소의 스타일은 자식 요소에 상속됨
속성
<색깔>
이름 / 16진수 (#FF0000) / 10진수 (rgb(255, 0, 0)) / 퍼센트 rgb(100%, 0%, 0%)
color : 글자색
background-color : 배경색
<폰트>
font : 한줄에서 모든 폰트 속성 설정 / 나열 순서 : font - style - variant - weight - size - family 안썼으면 디폴트값
font-weight : 폰트 볼드체 여부 / bold & normal
font-size : 폰트 크기 / px 단위 설정(절대 크기), % 단위 설정(상대크기 - 부모요소 기준), em 단위 설정(상대크기 - 부모요 소 기준) / 키워드 설정 (ex-small : 12px)
font-style : 폰트 스타일 / normal, italic(미리만들어진 폰트 존재경우), oblique(정상적인 폰트 그리는 과정 중 기울인 폰트)
font-family : 폰트 패밀리-특징 공유하는 폰트의 집합 / 마지막엔 가장 일반적인 폰트를 지정해야함
<텍스트 스타일>
text-align : 텍스트 수평 정렬 지정 / left, right, center, justified(양쪽 정렬) : 양쪽을 가지런하게 맞춰주는 정렬방식
text-decoration : 텍스트 장식 지정 / overline, underline, line-through / text-decoration-color = 선 색깔
text-indent : 텍스트 들여쓰기 지정
text-shadow : 그림자 효과 지정 / x방향이동거리 y방향 이동거리 흐림정도 그림자색상
text-transform : 대소문자 변환 지정 / uppercase, lowercase, capitalize
direction : 텍스트 작성방향 지정 (가로,세로)
letter-spacing : 글자 간 간격
line-height : 텍스트 줄의 높이 지정
word-wrap : 자동으로 단어를 잘라서 다음줄로 넘기는 기능 / break-word 속성 : 단어가 길때 자동으로 줄바꿈하기
+word-spacing : 단어 간 간격
<다중컬럼>
- colum-count : 분할해야 하는 컬럼 수 지정
- colum-gap : 컬럼 사이의 간격 지정
- colum-rule : 컬럼을 분리하는 선의 너비, 스타일 및 색상 설정
박스모델 : 요소들을 박스 (사각형 형태로 그리는 것)
- content : 박스의 내용물
- padding : 콘텐츠와 경계 사이의 영역 (배경색 투과 가능)
- border : 패딩과 내용물을 감싸는 경계
- margin : 경계선과 다른 요소 사이의 공간 (투명)
경계선
경계선 스타일 : border-style / groove, ridge, inset, outset 의 경우 약간의 3D 효과 발생
경계선의 폭 : border-width / border-style 설정되어 있어야 border-width 동작함
경계선의 색상 : border-color
둥근 경계선 : border-radius
경계 이미지 : border-image (9구역으로 나누어져서 사용됨)
border : 두께 / 스타일 / 색상 => 반드시 border-width, border-style, border-color 순서로 적어야함..
요소
auto : 브라우저가 크기를 계산 (디폴트 값)
length : 크기를 px, pt, cm 단위로 지정가능
% : 크기를 컨테이너 블록의 퍼센트로 지정
initial : 크기를 디폴트값으로 설정
inherit : 마진이 부모 요소로부터 상속
마진 - 배경색 영향 X
auto : 브라우저가 마진 계산
length : 마진을 px, pt ,cm 단위로 지정가능 (디폴트값 = 0)
% : 마진을 요소 폭의 퍼센트로 지정
inherit : 마진이 부모 요소로부터 상속
margin : top right bottom left
패딩 - 배경색 영향 O
length : px, pt, em 단위로 패딩 설정
% : 패딩을 내용물의 퍼센트로 지정
배경 설정
background : 한줄에서 모든 배경 속성 정의
-> ___ { background : 배경색 url ( ) 반복 위치 }
background-attachment : 배경 이미지 고정 & 스크롤 되는지
background-color : 배경색 정의
background-image : 배경 이미지 정의
-> background-image : url ( ' back.gif ' ) ;
background-position : 배경 이미지의 시작위치
background-repeat : 배경 이미지 반복 여부
- 링크 스타일
a : link = 방문하지 않은 링크의 스타일
a : visited = 방문된 링크의 스타일
a : hover = 마우스가 위에 있을 때의 스타일 - 반드시 link / visited 다음에 위치해야함
a : active = 마우스로 클릭되는 때의 스타일
- 리스트 스타일
list-style : 리스트에 대한 속성을 한 줄로 설정
list-style-image : 리스트 항목 마커를 이미지로 지정
list-style-position : 리스트 마커의 위치를 안쪽 / 바깥쪽인지 지정
list-style-type : 리스트 마커의 타입 지정
- 테이블 스타일
border : 테이블의 경계선
border-collapse : 이웃한 셀의 경계선을 합칠 것인지 여부
width : 테이블의 가로길이
height : 테이블의 세로길이
border-spacing : 테이블 셀 사이의 거리
empty-cells : 공백 셀을 그릴 것인지 여부
table-align : 테이블 셀의 정렬 설정
caption : 테이블 제목 추가
nth-child : n번째 행을 다르게 만드는 선택자 (tbody 안의 요소에만 적용됨)
입력양식 꾸미기
- 특정 속성을 가지는 입력요소 선택 : ex) input [ type = text ]
효과
- 투명도 : opacity (0.0 ~ 1.0까지 조절 가능)
- 가시성 : visibility ( hidden : 요소가 보이지 않게 - 자리는 차지하고 있음 / visible (기본값) : 요소가 보이게 )
+ display : none ; -> 자리도 차지하지 않음 (완전히 제외됨)
- 전환 (지속시간이 지정되지 않으면 발생하지 않음 ) : transition
CSS3 변환
transform : translate (10px, 10px) = 평행이동
transform : rotate (45deg) = 회전
transform : scale (2, 1.2) = 크기변환
transform : skew(20deg, 10deg) = 비틀기 변환
transform : matrix () = 일반적인 변
translate3d(x,y,z)
translateX(x)
translateY(y)
translateZ(z)
scale3d(x,y,z)
scaleX(x)
scaleY(y)
scaleZ(z)
rotate3d(x,y,z,angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)
perspective(n) : 원근변화
'PRogramming' 카테고리의 다른 글
| JAVASCRIPT 정리 (0) | 2023.04.08 |
|---|---|
| HTML 정리 (0) | 2023.04.08 |