![]()
UpDown LeftRight Animation 마우스 오버에 따른 앞뒤로 돌고 옆으로 도는 애니메이션을 만들어 보았습니다. CSS /* font */ @font-face { font-family: "LocusSangsang"; font-weight: normal; font-style: normal; src: url("https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.eot"); src: url("https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/gh/webfo..
![]()
TEXT-Animation 텍스트 애니메이션을 만들어 보았습니다. See the Pen Text Animation by thdtjdgml415 (@thdtjdgml415) on CodePen. 애니메이션 스트로크의 간격을 조절하여 애니메이션을 만들어 보았습니다. svg
![]()
CSS 애니메이션 활용 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션 끝나고 난 뒤 어떤 값을 적용할지 설정합니다. animation-play-state 애니메이션 실행 상태를 설정합니다. 종류 예시 transition-property 트렌지션을 적용..
![]()
SVG 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형(rect) svg 원형(circle, elli..
![]()
CSS 요소를 숨기는 5가지 방법 요소를 숨기는 방법이 5가지가 있습니다. 각각 방법이 조금씩 다르고 특징이 있습니다. 1. display: none; (애니메이션 X, 영역X) *{ display: none; } /*전체 요소를 표시하지 않습니다.*/ 2. opacity: 0; (애니메이션 O 영역 O) *{ opaccity: 0; } /*전체 요소의 투명도를 0으로 설정합니다. 애니메이션으로 사용하여 나타낼 수도 있습니다. */ 3. visible: hidden; (애니메이션 X, 영역X) *{ visibility: hidden; } /*전체 요소를 표시하지 않습니다. 애니메이션으로 사용하여 나타낼 수도 있습니다. */ 4. transform: scale(0); (애니메이션 O, 영역X) *{ tra..
![]()
색상 표현 단위 색상을 지정하기 위해 키워드(red, blue…)를 사용할 수 있습니다. 그냥 색의 이름을 쓰면 되기때문에 사용이 간편하다는 장점이 있으나 표현할 수 있는 색상의 수는 제한된다. 단위 예시 HEX 코드 단위 (Hexadecimal Colors) viewport 너비의 1/100 RGB (Red, Green, Blue) viewport 높이의 1/100 RGBA (Red, Green, Blue, Alpha/투명도) rgba(255, 255, 0, 1) HSL (Hue/색상, Saturation/채도, Lightness/명도) hsl(0, 100%, 25%) HSLA (Hue, Saturation, Lightness, Alpha)) hsla(60, 100%, 50%, 1) #hex {back..
![]()
css 단위 크기 크기 단위 cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, %, rem이다. px은 절대값이고 em, %는 상대값이다. 대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%이다. px 1050개의 픽셀을 가진다는 의미이다. 200만 화소(픽셀)의 디지털 카메라로 찍은 사진은 1600 * 1200 = 1,920,000으로 통상 200만 화소라 한다. 픽셀은 디바이스 해상도(resolution)에 따라 상대적인 크기를 갖는다. px은 요소의 크기나 이미지의 크기 지정에 주로 사용된다. % %는 백분률 단위의 상대 단위이다. 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정한다. em em은 배수(..
![]()
이미지 IR 효과 / 이미지 스프라이트 / 백그라운드 표현 IR 효과 웹접근성 연구소 사이트의 한국형 웹콘텐츠 접근성 지침에 따라 웹콘텐츠 제작기법을 보면준수해줘야 할것들이 있다. 웹접근성은 몸이 불편한 사람이라도 정보를 이용하는데 불편함이 없도록 하는것이 목적에 있기 때문에 만약 시각 장애인이 사이트를 이용할 경우 텍스트는 리더기로 읽어줄 수 있지만 이미지는 읽을 수가 없다 그래서 이미지에 텍스트를 붙여준다. 또한 css가 동작하지 않는 환경에서도 어떤 내용인지 파악이 가능해야 하기 때문에 백그라운드로 넣어주는 이미지라고 할지라도 텍스트를 써주는 것이 좋다. 이런걸 ir효과한다. .ir { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1p..
![]()
SCSS CSS와 SCSS는 몇가지 차이가 있지만 그중에서 가장 큰 차이는 변수를 만들 수 있습니다. 밑에 예시에서 확인하시겠습니다. 변수를 만드는 방법 예) SCSS 변수예시보기 $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } CSS로 보기 body { font: 100% Helvetica, sans-serif; color: #333; } olor: $primary-color; } 중첩 중첩 HTML 을 작성할 때 분명히 중첩되는 계층적인 구조 가 있습니다. 반면 CSS 는 그렇지 않습니다. Sass를 사용하면 HTML 의 동일한 시각적 계층 구조를..
![]()
SCSS를 이용하여 강아지 애니메이션 만들기 SCSS와 PUG를 이용하여 강아지 애니메이션을 만들어 보았습니다. 기존에 사용하던 HTML과 CSS와는 차이가 있었고 들여쓰기의 중요성이 커졌습니다. CSS와 SCSS는 몇가지 차이가 있지만 그중에서 가장 큰 차이는 변수를 만들 수 있습니다. 밑에 예시에서 확인하시겠습니다. CSS SCSS로 작업했던 것들을 CSS로 컴파일하여 다시 나타냈습니다. 두가지의 차이점을 보면서 어떻게 변형되었는지 확인해보는것이 좋겠습니다. CSS보기 body { display: flex; flex-direction: column; justify-content: center; align-items: center; } html, body { background: #96FF7B; wid..
![]()
미디어 쿼리(media query) 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 최소 가로톡이 1000px, 즉 1000px 보다 넓은 해상도일 때에 style_pc.css를 연결하는는 뜻입니다. 태블렛이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbsr를 누르면 기기마다의 해상도도 확인할 수 있고 기기모델도 추가할 수 있습니다. 모바일 기기 가로 세로 iPhone X 375 812 iPhone 6,7,8 375 667 iPhone 6,7,8 plus 414 736 iPhone 5 320 568 Galaxy S5,S8 360 640 Galaxy Note 8 360 640 iPad Pro..
![]()
CSS기본문법 CSS기본 문법에 대해 설명드리겠습니다. 내부 스타일시트 CSS를 HTML문법 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 우리를 기쁘게 하는 것들 p { color : red ; }의 의미는 p태그 안의 글자 색상을 빨간색으로 설정하라는 뜻입니다. 결과보기 우리를 기쁘게하는 것들. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *.css 확장 자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언합니다. 내부 스타일시트는 그 스타일이 기술된 페이지에만 적용돠는 반면, 외부 스타일시트는 그 스타일을 선언한 모든 HTML페이지에 적용 됩니다. ▶css 파일의 상단에는 @cha..
![]()
비트맵(bitmap)이란? 비트맵 방식은 '비트의 지도'(Map of bits)라는 뜻이다. 각 픽셀에 저장된 비트정보가 집합된 것이다. 비트맵은 벡터와 다르게 픽셀의 점 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다 정교한 이미지 표현이 가능하다. 픽셀의 수가 많아질수록 뛰어나지만, 용량 또한 커지게 되고 비트맵 이미지는 크기를 확대하거나 축소하면 기본에 이루고 있던 픽셀의 수가 변해서 원본 이미지가 손상된다. 깨짐 현상과 이미지 품질 저하가 발생하게 된다. 다른표현으로 픽스맵(Pixmap)이나 레스터(Raster) 이미지로도 불린다. 대표적인 프로그램으로는 어도비 포토샵이 있다. 벡터란? 벡터 방식은 비트맵과 반대로 표현되는 그래픽의 형태들이 수학적 공식으로 이루어져 있다. 벡터 방식은 고정된 ..
![]()
Layout 배치하기 3요소 1.float 라는 단어는 원래 ‘뜨다’ 라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. inherit: 부모 요소에서 상속 left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다. none - 요소를 부유시키지 않음 left와 right를 통해 부유속성을 지정시 display는 무시됩니다. (none은 제외) 또한 이후 요소에 clear 속성이 있으면 ..
