CSS29 CSS 애니메이션 : 움직이는 눈알 (+ javascript) 애니메이션 만들기 javascript 애니메이션을 만들어 봅니다! 애니메이션 : 움직이는 눈알 눈이 마우스 커서를 따라 움직이는 효과입니다. html 코드 보기 ABCDE css 코드 보기 * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; } .wrapper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 369px; height: 547px; transform-style: preserve-3d; perspective: 600px; } .me { position: absolute;.. 2022. 9. 26. CSS 애니메이션 : 원이 돌아가는 로딩화면 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 원이 돌아가는 로딩화면 원들이 빙글빙글 돌아가는 로딩화면입니다. html 코드 보기 css 코드 보기 body { background-color: darkcyan; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50% -50%); width: 100px; height: 100px; animation: spin 0.6s linear infinite reverse; } .ball { position: absolute; top: 50%; left: 50%; transform: translate(-50% -50%); height: 100%; animation.. 2022. 9. 26. CSS 애니메이션 : 넘어가는 사진 3D 효과 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 쭉쭉 늘어나는 큐브 큐브에 글씨가 있으며, 빙글빙글 돌아가며 쭉쭉 늘어나는 애니메이션입니다. html 코드 보기 코 딩 척 척 학 사 css 코드 보기 body { background: #0fa599; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube { position: relative; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotatex(-20deg) rotatey(-140deg) translatez(0); an.. 2022. 9. 22. CSS 애니메이션 : 통통 튀는 글씨 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 통통 튀는 글씨 글씨가 통통 튀는 애니메이션 입니다. html 코드 보기 코 딩 척 척 학 사 css 코드 보기 html, body { width: 100%; height: 100%; background: linear-gradient(140deg, skyblue 0%, pink 100%); display: flex; justify-content: center; align-items: center; } h1 { height: 100px; } h1 span { font-family: '궁서체'; font-size: 80px; color: #fff; position: relative; top: 20px; display: inline-block.. 2022. 9. 22. CSS 애니메이션 : 넘어가는 사진 3D 효과 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 넘어가는 사진 3D 효과 마우스를 올리면 사진이 넘어가는 효과입니다. html 코드 보기 Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 to Right Mouse Hover Effect 마우스 내리면 to Left css 코드 보기 @font-face { font-family: 'LocusSangsang'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.eot'); src: .. 2022. 9. 20. CSS 애니메이션 : 꾸물거리는 점 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 꾸물거리는 점 꾸물꾸물 거리는 것처럼 보이는 점을 만듭니다. pug 코드 보기 div.circle_wrap -for (var x =1; x 2022. 9. 19. 방구석 정보통 : VScode에서 Scss 사용하기 VScode에서 scss 사용하는 법 scss는 css를 좀 더 간단히 작성할 수 있는 언어입니다. vscode에서 scss를 작성하기 위해서는 몇가지 확장프로그램을 설치하고 셋팅해주어야 합니다. 1. Sass 설치하기 Extensions 탭에서 Sass를 검색하여 install 합니다. 2. Live Sass Compiler 설치하기 Extensions 탭에서 Live Sass Compiler를 검색하여 install 합니다. 3. scss파일 만들기 파일의 확장자를 .scss로 하여 코드를 작성합니다. 4. Live Sass Compiler 실행하기 vscode 화면 오른쪽 하단에 생긴 Watch Sass를 눌러 컴파일러를 실행시킵니다. 그러면 scss파일이 자동으로 css로 컴파일되어 파일이 생성됩.. 2022. 9. 19. CSS 애니메이션 : SVG 만들기와 SVG 애니메이션 애니메이션 만들기 svg를 만들고, svg를 이용한 애니메이션을 만들어봅니다! 간단한 형태의 svg 이미지는 코딩으로도 만들 수 있으니, 잘 알아두었다가 활용해봅시다! SVG란? 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. > SVG의 특징 알아보기 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현.. 2022. 9. 7. CSS 애니메이션 : 속성 알아보기 + 예제 애니메이션 만들기 CSS를 이용한 애니메이션 만들기 방법을 알아봅니다. 애니메이션에 관련된 속성은 정말 많고 값에 따라 다른 애니메이션을 만들 수 있으니, 유형을 잘 알아두었다가 활용해 봅시다! > animation 속성 animation으로 시작하는 속성들은, 움직임을 줄 수 있는 애니메이션 관련 속성입니다. 종류 설명 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. an.. 2022. 9. 7. CSS 애니메이션 : 움직이는 공 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 움직이는 공 잔상이 뒤따르는 움직이는 공 애니메이션을 만들어 봅니다. * { box-sizing: border-box; } body { background: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; } .wrapper { position: absolute; animation: x 1s ease-in-out alternate infinite 0s both; } .wrapper:nth-of-t.. 2022. 9. 2. CSS 애니메이션 : 로딩 동그라미 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 로딩 동그라미 빙글빙글 돌아가는 로딩화면 동그라미 애니메이션을 만들어 봅니다. body { height: 100vh; background-image: linear-gradient(-60deg, orange 0%, pink 100%); } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 1s ease infinite; } .loading .circle1 { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; } .load.. 2022. 9. 2. CSS 애니메이션 : 구르는 박스 애니메이션 만들기 css 애니메이션을 만들어 봅니다! 애니메이션 : 구르는 박스 데굴데굴 구르는 박스 애니메이션을 만들어 봅니다. body { height: 100vh; background-image: linear-gradient(to top, skyblue, pink); } .box { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .box::before { content: ''; width: 50px; height: 5px; background: #000; position: absolute; top: 58px; left: 0; border-radius: 50%; opa.. 2022. 9. 2. CSS 작성법 : 요소를 숨기는 5가지 방법 5 CSS로 요소를 안보이게 하는 방법 css에서 요소를 안보이게 하는 방법은 여러가지가 있습니다. 잘 알아두었다가, 상황에 맞는 속성을 사용하도록 합니다. 작성법 애니메이션 가능 여부 영역 조작(존재) 여부 기타 display: none; X X 요소를 보이지 않게 함. opacity: 0; O O 영역이 잡힌 상태로 안보이기 때문에, 영역이 필요할 때 이 방법을 사용하도록 하자 visibility: hidden; X X 보이지 않게 숨겨진 상태 transform: scale(0); O X 크기가 0인 상태. 보이지 않지만 애니메이션 효과를 줄 수 있다. width: 0; height: 0; X X blind 효과를 줄 때 사용하는 방법 2022. 8. 25. CSS 색상 표현법 알아보기 CSS 색상 표현 css에서 색상을 표현하는 방법에는 여러가지가 있습니다. 각 방법을 알아두었다가, 유용하게 사용하도록 합시다. 표현법 설명 작성법 예시 주요 색상 이름 주요 색상 이름을 작성한다. red, white, blue, black, … color: white; 16진수 표기 (HEX 코드) rgb의 농도를 00~ff로 표현하는 HEX 코드로 작성한다. 00에 가까울수록 밝고, ff에 가까울수록 어둡다. #000000 ~ #ffffff color: #fff; RGB 표기 red, green, blue의 수치를 0~255까지 표기하여 작성한다. rgb(0, 0, 0) ~ rgb(255 ,255, 255) color: rgb(0, 0, 0); RGBA 표기 RGB와 같으나, 투명도 수치가 포함되어 .. 2022. 8. 23. CSS 단위 알아보기 : 절대 단위와 상대 단위 CSS 단위 css에서 너비나 폭, 여백 등을 지정할 때 사용하는 단위는 다양합니다. 각 단위의 특징을 알고 적절하게 사용하도록 합시다! CSS 절대 단위와 상대 단위 CSS에서 사용하는 단위는 일정한 크기로 유지되는 절대 단위와, 기준이 되는 크기나 뷰포트 환경에 따라 상대적으로 크기가 달라지는 상대단위가 있습니다. 반응형 코딩이 필요한 부분엔 상대 단위를 사용하도록 합니다. 유형 단위 설명 주의사항 절대 단위 px 1px(픽셀)은 화면 상의 점(픽셀) 하나의 크기와 같음. 해상도에 따라 잘라짐 (해상도↑ = 크기↑) pt 1pt(포인트)는 1/72 in이며, 12pt는 16px과 같음. 텍스트의 크기를 지정할 때 사용. mm 밀리미터 cm 센티미터 in 1 in(인치)는 2.54cm pc 1pc(파이.. 2022. 8. 23. background 속성 알아보기 background 표현 CSS의 background 속성의 종류와 표현법을 알아봅니다. > background 속성의 종류 속성 설명 작성법 background-color 배경의 색상을 설정합니다. background-color: "색상"; background-color: red; background-color: #000; background-color: rgba(0, 0, 0, 0.5); background-image 배경에 이미지를 설정합니다. background-image: url("이미지 경로"); background-image: url(img/img.svg); background-repeat 배경의 반복을 설정합니다. background-repeat: "반복 방법"; background-rep.. 2022. 8. 21. IR 효과(기법) 알아보기 IR 효과 주기 웹 접근성을 향상시킬 수 있는 IR효과에 대해 알아봅시다. IR효과란 무엇인지, css로 IR효과를 작성하는 방법을 알아봅니다. IR 효과(기법)란? img태그가 아닌 방법으로 이미지를 표현할 경우, 이미지가 로딩되지 않을때 나타낼 수 있는 대체 텍스트를 표시할 수 없습니다. 때문에 웹 접근성 향상을 위해 숨김 텍스트를 만들어가상으로 alt태그와 같은 효과를 주는 css 작성 기법입니다. IR 효과를 사용하게 되면, 웹 접근성을 떨어트리지 않으면서도 검색 엔진 최적화로부터 좋은 효과를 볼 수 있습니다. *css에서 ir 효과 주는 법* .ir { display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -99.. 2022. 8. 21. 이미지 스프라이트 알아보기 이미지 스프라이트 (image sprite) 이미지 스프라이트란 웹사이트의 로딩 시간을 줄이기 위해, 하나의 이미지 파일에 여러개의 이미지가 포함되어 있는 것을 말합니다. > 이미지 스프라이트 만드는 법 1. 사용하고자 하는 이미지를 일정한 간격, 또는 특정한 간격으로 이미지끼리 겹치지 않도록 배치합니다. 2. 배치한 이미지를 하나의 이미지 파일로 저장합니다. > 이미지 스프라이프 사용법 1. 이미지를 삽입할 때, css의 background 속성을 이용합니다. 2. background-position 속성을 이용해, 원하는 이미지가 위치할 수 있도록 조정합니다. .image__sns a { width: 36px; height: 36px; background: #fff; border-radius: 50%.. 2022. 8. 20. SCSS : 기본 문법 알아보기 SCSS의 기본 문법 SCSS는 CSS를 좀 더 편하게 작성하기 위한 언어입니다. CSS와 문법이 비슷하지만 분명한 차이점이 존재합니다. SCSS의 문법을 알아두었다가 활용해봅시다. 1. 변수 SCSS는 변수를 지정할 때, $를 사용합니다. 변수는 선언한 블록{} 안에서만 유효합니다. $boolean: true; $string: hello; $color: red; $number: 720; $list: red, orange, yellow, green, blue; $map: ( l: light, d: dark, ); 2. 중첩 SCSS는 속성을 적용하는 부모 요소가 같을 때, 자식요소는 블록{} 바깥에 따로 작성하지 않고 블록{} 안에 중첩하여 작성할 수 있습니다. /* SCSS */ .section { w.. 2022. 8. 18. 애니메이션 : 강아지 애니메이션 강아지 애니메이션 강아지가 꼬리를 흔들며 고개를 갸웃거리는 애니메이션을 CSS로 작성해 보았습니다. 원본의 애니메이션 소스를 보고 연습한 후, 약간 수정해 보았습니다. See the Pen dog by hjkang306 (@hjkang306) on CodePen. CSS 다음은 해당 애니메이션의 CSS 코드입니다. CSS코드 보기 body { display: flex; flex-direction: column; justify-content: center; align-items: center; } html, body { background: #FFE16E; width: 100%; height: 100%; margin: 0; padding: 0; } *, *:before, *:after { box-sizin.. 2022. 8. 18. 미디어쿼리 알아보기 미디어쿼리(media query) 미디어쿼리는 뷰포트의 해상도에 따라 CSS를 분기시키는 기법이며, 반응형 프로젝트에서 반드시 필요한 기법입니다. ▶ 최소 가로폭이 1000px, 즉 1000px 보다 넓은 해상도일 때에 style_pc.css를 연결한다는 뜻입니다. > 팁! 태블릿이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 기기마다의 해상도도 확인할 수 있고 기기 모델도 추가할 수 있습니다. 모바일 기기 가로 세로 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 36.. 2022. 8. 14. CSS 기본 문법 : 스타일 작성의 4가지 방법 CSS 기본 문법 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트로 작성하기도 합니다. 인라인 스타일시트는 거의 사용하지 않지만, 우선순위가 가장 높아서 꼭 필요한 경우엔 편리하게 사용할 수 있습니다. 추가로, CSS에서의 주석 처리법은 /* */ 입니다. ▶ 내부 스타일시트 내부 스타일시트는 CSS를 HTML 문서 안에 태그로 작성하여, HTML 문서 안에 CSS가 함께 저장되도록 하는 방법입니다. [ 예제 ] ▶ 외부 스타일시트 외부 스타일시트는 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 CSS파일을 연결하는 방법입니다. 이때 스타일은 *.css 확장자를.. 2022. 8. 14. 이미지 표현 방식 : 벡터와 비트맵의 차이 이미지 표현 방식 이미지를 표현하는 방식에는 벡터 방식과 비트맵 방식이 있습니다. 두 방법에는 각 장점과 단점이 있으며, 차이점을 잘 알아두어 적절한 표현방식을 사용하도록 합니다. 벡터 방식이란? 벡터는 점과 점을 연결해 수학적인 함수관계로 이미지를 표현해 선과 면을 만들어내는 것을 말합니다. 점과 점을 연결해 선을 만들 수 있고 선이 3개 이상 모이면 면을 만들 수가 있습니다. 이렇게 만들어진 선은 두께, 색상, 곡률 값을 갖게 되고 면은 색상 값을 가질 수가 있게 됩니다. 이러한 점, 선, 면이 모여 벡터 그래픽을 만들게 됩니다. 비트맵 방식이란? 비트맵은 비트의 지도(map of bits)란 뜻으로 각 픽셀에 저장된 일련의 비트 정보 집합을 말합니다. 디스플레이는 픽셀의 배열로 구성되어 있으며, 픽.. 2022. 8. 9. 레이아웃 만들기 5 레이아웃05 이번 레이아웃은 전체 영역이 들어간 구조이며, 가운데의 콘텐츠 영역이 단순하게 나뉘어진 구조입니다. 실제 사이트에서 이런 구조를 많이 사용합니다. 1. float를 이용한 레이아웃 만들기 float를 이용하는 방법은 예전에 많이 쓰이던 방법입니다. 인터넷 익스플로러에 호환이 되기 때문에, 인터넷 익스플로러 사용자를 위한 레이아웃을 만들어야 한다면, 이 방법을 사용하도록 합니다. See the Pen 레이아웃 float5 by hjkang306 (@hjkang306) on CodePen. 2. flex를 이용한 레이아웃 만들기 flex를 이용하면 float에 비해 훨씬 간단하게 레이아웃을 만들 수 있습니다. 이 방법은 인터넷 익스플로러 환경에서는 호환되지 않으므로 주의합니다. See the P.. 2022. 7. 29. 레이아웃 만들기 4 레이아웃04 이 레이아웃은 전체 영역이 들어가고, 메인 콘텐츠 영역의 구역이 단순하게 나뉘어진 레이아웃 입니다. 복잡한 구조가 아니기에 float방법으로만 레이아웃을 작성하였습니다. 1. float를 이용한 레이아웃 만들기 float를 이용하는 방법은 예전에 많이 쓰이던 방법입니다. 인터넷 익스플로러에 호환이 되기 때문에, 인터넷 익스플로러 사용자를 위한 레이아웃을 만들어야 한다면, 이 방법을 사용하도록 합니다. See the Pen 레이아웃 float4 by hjkang306 (@hjkang306) on CodePen. 2022. 7. 29. 레이아웃 만들기 3 레이아웃03 이 레이아웃은 가운데의 컨텐츠가 aside, section1, 2, 3으로 네개의 구역으로 나뉘어진 레이아웃입니다. 이런 복잡한 레이아웃은 grid방식을 사용하면 효율적으로 만들 수 있습니다. 1. float를 이용한 레이아웃 만들기 float를 이용하는 방법은 예전에 많이 쓰이던 방법입니다. 인터넷 익스플로러에 호환이 되기 때문에, 인터넷 익스플로러 사용자를 위한 레이아웃을 만들어야 한다면, 이 방법을 사용하도록 합니다. float를 이용한 레이아웃 : clearfix float를 이용하여 레이아웃을 만들면 footer의 height가 0이 되는 버그가 있습니다. 이를 해결하기 위한 방법 중 하나는 float를 적용하는 요소의 부모요소에 clearfix라는 가상요소를 만들어 clear: b.. 2022. 7. 29. 레이아웃 만들기 2 레이아웃02 이 레이아웃은 가운데에 있는 콘텐츠 영역이 aside와 section, article의 세개의 구역으로 나뉘어진 구조입니다. 1. float를 이용한 레이아웃 만들기 float를 이용하는 방법은 예전에 많이 쓰이던 방법입니다. 인터넷 익스플로러에 호환이 되기 때문에, 인터넷 익스플로러 사용자를 위한 레이아웃을 만들어야 한다면, 이 방법을 사용하도록 합니다. float를 이용한 레이아웃 : overflow: hidden; float를 이용하여 레이아웃을 만들면 footer의 height가 0이 되는 버그가 있습니다. 이를 해결하기 위한 방법 중 하나는 float를 적용하는 요소의 부모 요소에 overflow: hidden;을 작성하는 것입니다. See the Pen 레이아웃 float2 by .. 2022. 7. 29. 레이아웃 만들기 1 레이아웃01 이 레이아웃은 가운데에 메인 구역이 들어간 구조입니다. 콘텐츠 부분이 aside와 section 두개뿐인 단순한 구조입니다. 1. float를 이용한 레이아웃 만들기 float를 이용하는 방법은 예전에 많이 쓰이던 방법입니다. 인터넷 익스플로러에 호환이 되기 때문에, 인터넷 익스플로러 사용자를 위한 레이아웃을 만들어야 한다면, 이 방법을 사용하도록 합니다. float를 이용한 레이아웃 : clear: both; float를 이용하여 레이아웃을 만들면 footer의 height가 0이 되는 버그가 있습니다. 이를 해결하기 위한 방법 중 하나는 footer에 clear: both;를 작성하는 것입니다. See the Pen 레이아웃 1 by hjkang306 (@hjkang306) on Code.. 2022. 7. 29. 레이아웃을 만들기 레이아웃 만들기 레이아웃을 만드는 방법에는 float를 이용한 방법, flex를 이용한 방법, grid를 이용한 방법이 있다. 1. float를 이용한 레이아웃 만들기 float를 이용하는 방법은 예전에 많이 쓰이던 방법이다. 인터넷 익스플로러에 호환이 되기 때문에, 인터넷 익스플로러 사용자를 위한 레이아웃을 만들어야 한다면, 이 방법을 사용하도록 한다. float를 이용한 레이아웃 코딩(1) : clear: both; float를 이용하여 레이아웃을 만들면 footer의 height가 0이 되는 버그가 있다. 이를 해결하기 위한 방법 중 하나는 footer에 clear: both;를 작성하는 것이다. See the Pen 레이아웃 1 by hjkang306 (@hjkang306) on CodePen. .. 2022. 7. 25. 이전 1 다음 728x90
