| 일 | 월 | 화 | 수 | 목 | 금 | 토 | 
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 | 
| 12 | 13 | 14 | 15 | 16 | 17 | 18 | 
| 19 | 20 | 21 | 22 | 23 | 24 | 25 | 
| 26 | 27 | 28 | 29 | 30 | 31 | 
- js 이름뽑기
- js 아스키코드
- JavaScript
- js 대소문자 구별
- classList.remove
- JS
- 알고리즘 이름만 출력
- CSS
- include경로
- 알고리즘 별찍기
- js isNaN
- js 알고리즘
- js inner
- js then
- Promise 객체
- js 별찍기
- classList.add
- js catch
- js filter
- js 두번째 대문자 뽑기
- HTML
- setAttribut
- js class 추가
- js 대문자 검사
- classList.toggle
- js fromcharcode
- TypeScript
- 타입스크립트적용
- js charcodeat
- config.js
- Today
- Total
목록CSS (4)
크루시의 개발공부
 [CSS] Animation 속성 + @keyframes 알아보기! (name, duration, timing-function, delay, iteration-count, direction)
			
			
				[CSS] Animation 속성 + @keyframes 알아보기! (name, duration, timing-function, delay, iteration-count, direction)
				Animation - 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 보다 부드럽게 전환시켜 줍니다. ... .animation { animation-name: changeColor; animation-duration: 3s; animation-timing-function: linear; animation-delay: 0.5s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes changeColor { from { background-color: green; } to { background-color: yellow; } } 애니메이션의 장점? - 앞서 포스팅 되었던 transition 보다 훨씬 규모가 크고 ..
 [CSS] Transition 속성 + :hover 알아보기! (property, duration, timing-function, delay)
			
			
				[CSS] Transition 속성 + :hover 알아보기! (property, duration, timing-function, delay)
				Transition - CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. ... .transition { transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; } 1. transition-property - 효과를 적용하고자 하는 css 속성 ... transition-property: width; /* width 변경을 하고 싶다! */ width, height 식으로 여러개 적을 수도 있다. 2. transition-duration - 효과가 나타나는데 걸리는 시간 ... transition-duration: 2s; /* 2초에 걸쳐 효..
 [CSS] Transform 속성 알아보기! (rotate, scale, skew, translate)
			
			
				[CSS] Transform 속성 알아보기! (rotate, scale, skew, translate)
				Transform 선택자 { transform: 속성값(); } 기본 CSS 형태와 다를바 없다. 예시와 함께 기억해두자! 1. rotate() - deg (각) 단위를 쓰며 입력한 각도만큼 기울인다. ('- '단위도 가능하다. ex. -20deg) 2. scale() - 크기를 변경할 수 있다. 첫번째 받은 인수는 width값, 두번째는 height 로 곱하여 적용된다. 3. skew() - deg, rad, grad 단위를 쓴다. - 첫번째 인수로는 X축에 +값은 우측으로 -값은 좌측으로 기운다. 두번째 인수로는 Y축에 +값은 아래쪽으로 -값은 윗쪽으로 기운다. 4. translate() - x축 y축으로 원하는대로 이동시킬 수 있다. >> 적용 예시 보기! See the Pen Untitled by..
 [CSS] CSS란? (feat. Cascading)
			
			
				[CSS] CSS란? (feat. Cascading)
				- CSS란? - CSS의 정식명칭은 Cascading Style Sheets 의 약자로 HTML으로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트언어입니다. 즉, HTML을 꾸며주는 역할을 하고 있습니다. 1. CSS 구성 요소 선택자 { 속성: 속성값; } 선택자: 디자인을 적용할 HTML 영역 속성: 어떤 디자인을 적용할지 정의 속성값: 구체적으로 명령하며 세미콜론(;)은 필수로 입력 2. CSS 연동 방법 세가지 1) Inline Style Sheet - 태그 안에 직접 CSS를 적는 방법 Hello World! 2) Internal Style Sheet - 태그안에 CSS를 적는 방법 ... 3) External Style Sheet - 태그를 통해 외부 시트를 불러오는 방법이다. ++ ..