front-end/CSS

[수업-CSS] 05. 애니메이션

2차원 변형 함수 종류 설명 translate(x, y) 일정 좌표로 이동하기 지정한 크기만큼 x축, y축으로 이동 translateX(x) 지정한 크기만큼 x축으로 이동 translateY(y) 지정한 크기만큼 y축으로 이동 scale(x, y) 일정 페이지만큼 확대/축소 지정한 크기만큼 x,y 축으로 확대/축소 scaleX(x) 지정한 크기만큼 x축 방향으로 확대/축소 scaleY(y) 지정한 크기만큼 y축 방향으로 확대/축소 retate(각도) 지정 각도만큼 회전 지정한 각도만큼 비틀기 지정한 각도만큼 회전 skew(x, y) 지정한 각도만큼 x,y축으로 요소 변형 skewX(x) 지정한 각도만큼 x 축으로 요소 변형 skewY(y) 지정한 각도만큼 y축으로 요소 변형 3차원 변형 함수 종류 설명 ..

[수업-CSS] 04. 레이아웃 스타일

기본 스타일 종류 설명 기타 height 길이 상대 크기 설정 시 창 크기에 따라 크기가 변화하지만 고정 크기 설정 시에는 창 크기에 관계없이 크기가 고정적이다. width 높이 block 한 줄 전체를 차지하는 요소로 박스 모델이라고도 한다. div, p, hn, ul, ol, blockquote, form, hr, table, fieldset, address 등 inline 작성한 내용만큼만의 영역을 차지하는 요소 img, object, br, sub, sup, span, input, textarea, label, button 등 display 화면 배치 방법 변경 속성 none : 화면에 표현되지 않고 공간 차지 x block : block 요소로 변경 inline : inline 요소로 변경 in..

[수업-CSS] 03. 색상 스타일

CSS의 색상 표현 방법 ① 영문명 ex. red, black, skyblue ② 16진수 rgb값을 기준으로 16 진수 작성 ex. #ff0000 (빨간색) ③ rgb/rgba rgb값을 0~255로 입력, rgba의 경우엔 투명도까지 설정 가능 (투명도는 1=불투명/0=투명) ④ hsl/hsla 색상, 채도, 밝기로 색을 입력하기 ex.hsla(색상 값, 채도 값(%), 명도 값(%), 투명도) 배경 관련 스타일 종류 설명 예시 background-color 배경색을 지정하는 속성 선택자{background-color: 색상표현;} background-clip border-box 박스 모델의 가장 외곽인 테두리까지 적용 선택자{background-clip: 속성 값;} padding-box 테두리 제..

[수업-CSS] 02.텍스트 스타일

1. 글꼴 속성 종류 설명 예시 font-family 폰트의 글꼴 설정 * 시스템 내 저장된 글꼴 이름 입력 선택자{font-family: 글꼴;} font-size 글자의 크기 조절 선택자{font-size: 10px;} font-weight normal 기본 선택자{font-wight: bold;} bold 굵게 bolder 기본보다 더 굵게 lighter 기본보다 더 가늘게 100~900 400이 normal / 700이 bold font-variant 영어 모두 작은 대문자로 선택자{font-variant: normal} / 선택자{font-variant:small-caps;} font-size italic 처음부터 기울어진 글자 선택자{font-style: ltalic;} oblique 기본 글..

[수업-CSS] 01. 선택자

1. CSS 적용 스타일 내부에 스타일 정보 저장 태그를 이용하여 css파일을 읽어와서 적용 인라인 스타일 시트 : 태그 내부에 스타일 정보 지정 2. css선택자 (1) 모든 선택자 : HTML문서 안의 모든 태그를 선택할 때 전체 선택자 사용 (2) 태그 선택자 : HTML문서 내 같은 태그를 모두 선택할 때 사용 #태그명{설정 값;} (3) 아이디 선택자 : HTML 문서 내 해당하는 아이디 속성 값을 가진 태그만 선택할 때 사용 #id명{설정 값;} (4) 클래스 선택자 : HTML문서 내 여러 개의 태그를 동일한 클래스 명으로 지정하여 선택할 때 사용 .클래스명{설정 값;} (5) 속성 선택자 : 기본 선택자 뒤에 []를 사용하여 속성과 속성 값 사용 선택자[속성=속성값]{설정 값;} (6) 자..