Web

[CSS] 애니메이션 & 다단

animation(애니메이션) : 요소에 애니메이션을 설정/제어 애니메이션을 직접 만들어주는 속성이 아니라 @keyframes 규칙에 설정된 애니메이션의 정의를 설정/제어. 단축속성. *단축속성 작성 시 duration delay 순으로 입력해야함 값 의미 기본값 animation-name @keyframes 규칙의 이름을 지정 none animation-duration 애니메이션의 지속시간 설정 0s animation-timing-function 타이밍 함수 지정 ease animation-delay 애니메이션의 대기 시간 설정 *음수사용가능 0s animation-iteration-count 애니메이션의 반복 획수 설정 1 animation-direction 애니메이션의 반복 방향 설정 normal ..

[CSS] 전환&변환

transition(전환) : CSS 속성의 전환 효과를 지정 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션. 단축속성. 바뀌기 전 상태에 지정 값 의미 기본값 transition-property 전환 효과를 사용할 속성 이름 all transition-duration 전환 효과의 지속시간 설정 0s transition-timing-function 타이밍 함수 지정 ease transition-delay 전환 효과가 몇 초 뒤에 시작할 지 대기시간 설정 0s *타이밍 함수: 전환효과의 여러가지 애니메이션? *1s=1000ms *단축속성 작성 시 duration delay 순으로 입력해야함 일반적으로 property와 duration 개별속성을 합친 transition 단축속성을 많이 사용한다 t..

로렘입숨(lorem ipsum)

웹 페이지 공부나 테스트를 하기 위해 긴 텍스트 더미가 필요할 때가 있다. 그때마다 쓸만한 문단을 검색 해 긁어오거나, 직접 입력하는 것 보다 훨씬 효율적인 방법으로 로렘입숨이라는 가상 텍스트 더미를 제공하는 사이트가 있다. 텍스트는 가상으로 조합된 터라 제대로 해석되지 않는 문장들로 이루어져있다. 영문 로렘입숨 사이트 https://www.lipsum.com/ Lorem Ipsum - All the facts - Lipsum generator What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy ..

[CSS] 배경(background)

background : 요소의 배경을 설정. 단축속성 값 의미 기본값 background-color 배경 색상 transparent background-image 하나 이상의 배경 이미지 none background-repeat 배경 이미지의 반복 repeat background-position 배경 이미지의 위치 0 0 background-attachment 배경 이미지의 스크롤 여부(특성) scroll 사용법 background: 색상 이미지경로 반복 위치 스크롤특성; 특정 값을 누락해도 된다. background-color : 요소의 배경 색상 지정. 개별속성 속성 값 의미 기본값 색상 요소의 배경 색상 transparent 투명 transparent background-image : 요소의 배경에..

[CSS] 띄움(정렬), 위치

float : 요소를 좌우방향으로 띄움(수평 정렬) 레이아웃은 기본적으로 수직적으로 쌓이는데, 수평 레이아웃으로 변경할 때 사용. 최근엔 이거보단 flex box를 많이씀 속성 값 의미 기본값 none 요소 띄움 없음 none left 왼쪽으로 띄움 right 오른쪽으로 띄움 원하는 컨텐츠를 글과 함께 수평정렬하기위해 쓰이기도 하고,(해당 컨텐츠에 속성추가하면 됨) 원하는 각 요소마다 float을 적용하면 1. left : 맨 왼쪽부터 쌓인다 (1 2 3 ) 2. right : 맨 오른쪽부터 쌓인다 ( 3 2 1) *float 해제 : float을 적용한요소 외의 주변요소에는 float이 겹치므로, 주변요소에 float을 해제해줘야함 1. 다음 형제요소에 clear: (left,right,both) 추가..

[CSS] 속성 - 글꼴, 문자

font : 글자 관련 속성들을 지정. 단축 속성 값 의미 기본값 font-sytle 글자 기울기 지정 normal font-weight 글자 두께 지정 normal font-size 글자 크기 지정 medium(16px) line-height 줄 높이(줄 간격) 지정 normal(Reset.css 적용시 약 1) font-family 글꼴 지정 운영체제(브라우저)에 따라 달라짐 사용법 * 단축 속성을 사용하려면 font-size와 font-family를 필수로 입력해야 함 font: 기울기 두께 크기 / 줄높이 글꼴; /* 크기와 줄높이는 슬래쉬로 구분! */ .box{ font: italic bold 20px / 1.5 "Arial", sans-serif; } font-sytle 의 개별속성 값 의미..

[CSS] 속성 - 박스 모델

width : 요소의 가로 너비 지정 height : 요소의 세로 너비 지정 속성 값 의미 기본값 auto 브라우저가 너비 계산 auto 단위 px, em, cm max-width : 요소의 최대 가로 너비 지정 max-height : 요소의 최대 세로 너비 지정 min-width : 요소의 최소 가로 너비 지정 min-height : 요소의 최소 세로 너비 지정 속성 값 의미 기본값 auto 브라우저가 너비 계산 auto 단위 px, em, cm none(max) / 0(min) margin : 요소의 외부(바깥) 여백 지정. 단축속성 margin-top 위쪽, margin-bottom 아래쪽, margin-left 왼쪽, margin-right 오른쪽 등의 개별속성이 있다. 위, 아래, 좌, 우의 모..