본문 바로가기

CSS43

[CSS] 마우스를 따라가는 눈알 효과 만들기👀 마우스를 따라가는 눈알 효과 만들기👀 이번 포스팅에서는 마우스 커서 위치를 따라가는 눈알 효과를 만들어보도록 하겠습니다. HTML 코드 wrapper 클래스값을 가진 div 안에 card 클래스값 div를 만든 후, 그 card div 안에는 me와 text 클래스값을 가진 div를 생성합니다. text div 안에는 넣고 싶은 짧은 문구를 넣습니다. me 안에는 eye 클래스값 div를 넣습니다. HELLO CSS 코드 HTML에서 만들어두었던 div의 클래스값들을 이곳에 정의하여 디자인합니다. .me::before, .me::after에서 background url 방식으로 얼굴을 출력시키고, .eye, .eye::before에서는 움직여줄 눈알을 출력시켜주도록 합니다. 코드 펼쳐보기 * { marg.. 2022. 9. 26.

[CSS] 로딩 애니메이션 만들기 로딩 애니메이션 만들기 이번 포스팅에서는 로딩 애니메이션을 만들어보도록 하겠습니다. HTML 코드 loader 클래스값을 가진 div 안에 ball 클래스값 div를 10개를 만들어주도록 한다. CSS 코드 ball 클래스를 지닌 div의 형태를 만들어 준 다음 nth-child를 이용하여 애니메이션 딜레이를 주고 마지막으로 키프레임을 통해 본격적으로 움직임을 주도록 한다. body { background-color: #b38dff; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; animation: spin .6s linear infinite r.. 2022. 9. 25.

[CSS] 움직이는 육면체 애니메이션🎲 움직이는 육면체 애니메이션🎲 이번 포스팅에서는 움직이는 육면체 애니메이션을 만들어보도록 하겠습니다! HTML 코드 cube클래스를 가진 div 태그 안에 div 박스를 6개 만들고 첫번째 div 박스에 글자를 넣습니다. 코딩공책 CSS 코드 body { background-color: #999; 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) tr.. 2022. 9. 22.

[CSS] 통통 튀는 글자 효과🐰 통통 튀는 글자 효과🐰 이번 포스팅에서는 통통 튀는 글자 효과를 만들어보도록 하겠습니다! HTML 코드 h1 태그 안에 쓰고 싶은 글자 수만큼의 span 태그를 만든 다음 글자를 채워 넣는다. 코 딩 공 책 ★ 티 스 토 리 CSS 코드 @import url('https://webfontworld.github.io/crown/CrownMychew.css'); html, body { width: 100%; height: 100%; background: linear-gradient(140deg, skyblue 0%, plum 100%); display: flex; justify-content: center; align-items: center; } h1 { height: 100px; } h1 span { f.. 2022. 9. 22.

[CSS] 마우스 오버 효과(Mouse Hover Effect) 마우스 오버 효과 만들기🐭 이번 포스팅에서는 마우스 오버 효과를 만들어보도록 하겠다. HTML 코드 hover__wrap 안에 hover__updown, hover__leftright 두 개의 div 박스가 들어가고 각각의 div 박스 안에 figure class="front"와 "back" 안에 이미지가 들어간 형태로 Hover시에는 back, 평상시에는 front가 되도록 나중에 CSS 코딩을 해준다. 코드 펼쳐보기 Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 to Right Mouse Hover Effect 마우스 내리면 to Left CSS 코드 /* 웹폰트 */ @font-face .. 2022. 9. 20.

[CSS] SCSS로 웨이브 애니메이션 만들기🌊 웨이브 애니메이션 만들기🌊 이번 포스팅에서는 웨이브 애니메이션을 만들어보도록 하겠다. HTML Pug 코드 HTML 코드에서는 반복 작업해야 할 것을 Pug 코드에서는 JS처럼 for문이 사용 가능하여 소스를 간략화 할 수 있습니다. circle-wrap 클래스 div 박스 하나 안에 row 클래스 div(안에 circle클래스 div 12개) 12개를 만드는 방법이다. div.circle-wrap - for (var x =1; x 2022. 9. 19.

[사이트 만들기] 실전 유형 01 사이트 만들기 : 실전 유형 01 그동안 배웠던 헤더(반응형 전용 메뉴바 포함), 카드, 이미지, 이미지/텍스트, 텍스트, 슬라이드, 푸터 유형을 한 곳에 모아 본격적으로 웹 페이지를 만들어보도록 하겠습니다. Figma HTML 소스 헤더, 슬라이드, 이미지, 이미지/텍스트, 카드, 배너, 텍스트, 푸터 순으로 영역이 이루어져 있다. (※ 스압주의!) 코드 펼쳐보기 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 web site 별빛제빵교실 Baking Class MAIN NOTICE CERTIFICATION CLASS YOUTUBE GOAL SIGN IN 슬라이드 영역 BAKIN.. 2022. 9. 13.

[CSS] 걷는 호박 애니메이션 만들기🎃 CSS 애니메이션 : 걷는 호박 이번 포스팅에서는 호박이 걸어가는 애니메이션을 CSS를 통해 만들어보겠습니다. HTML 소스 Start Stop CSS 소스 ani1.jpg 파일은 포토샵에서 호박이 걷는 장면 32장을 가로로 이어붙여 만든 이미지 파일이며 width 값은 25600px입니다. 이렇게 가로로 이어붙인 이미지 파일을 먼저 준비합니다. 이러한 이미지 파일을 애니메이션 적용하는 방법은 다음과 같습니다. .step { height: 700px; background: #3b0643; position: relative; } .step .stepbox { width: 800px; height: 600px; background: url(https://kde66034.github.io/coding/anim.. 2022. 9. 8.

[CSS] 텍스트가 서서히 그려지는 SVG 애니메이션 SVG 텍스트 애니메이션 이번 포스팅에서는 텍스트가 서서히 그려지는 효과의 SVG 애니메이션을 만들어보도록 하겠습니다. 태그가 사용된 방법입니다. HTML 소스 코딩공책 CSS 소스 @font-face { font-family: 'Jalnan'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/goodchoice/Jalnan.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/goodchoice/Jalnan.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh.. 2022. 9. 8.

[CSS] SVG란? - 도형·애니메이션 만들기 SVG Animation 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. 01. 인터넷 익스플로러9 버전 이상부터 지원됩니다. 02. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 03. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. 04. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형.. 2022. 9. 7.

[CSS] 애니메이션 종류와 사용 방법 총정리 CSS Animation CSS 애니메이션 종류와 예시 정리. animation animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을.. 2022. 9. 7.

[사이트 만들기] 푸터 유형 01 사이트 만들기 : 푸터 유형 STUDY 01 이번 포스팅에서는 Figma에서 만든 푸터 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. ul>li 형식으로 만들도록 한다. 푸터 영역 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형 01 메뉴 유형 02 슬라이드 영역 슬라이드 유형 01 슬라이드 유형 02 이미지 영역 이미지 유형 01 이미지 유형 02 이미지/텍스트 유형 01 이미지/텍스트 유형 02 텍스트 유형 01 컨텐츠 영역 카드 유형 01 카드.. 2022. 9. 5.

[사이트 만들기] 배너 유형 01 사이트 만들기 : 배너 유형 STUDY 01 이번 포스팅에서는 Figma에서 만든 배너 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 그와 동시에 이미지 스프라이트용 아이콘 SVG를 출력할 페이지도 따로 만들도록 한다. 만드는 방법은 지난 이미지 스프라이트 포스팅을 참조할 것. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. img 태그의 alt와 같은 효과를 주기 위해 아이콘이 들어갈 span 태그의 클래스 값을 "ir"로 설정하자. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것. 배너 영역 김제빵 유튜브 더 다양한 강의는 .. 2022. 9. 5.

[사이트 만들기] 슬라이드 유형 01 사이트 만들기 : 슬라이드 유형 STUDY 01 이번 포스팅에서는 Figma에서 만든 슬라이드 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 그와 동시에 이미지 스프라이트용 아이콘 SVG를 출력할 페이지도 따로 만들도록 한다. 만드는 방법은 지난 이미지 스프라이트 포스팅을 참조할 것. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. img 태그의 alt와 같은 효과를 주기 위해 아이콘이 들어갈 span 태그의 클래스 값을 "ir"로 설정하자. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것. 슬라이드 영역 BAKING CLASS.. 2022. 9. 5.

[CSS] 공이 정신없이 튀는 애니메이션 만들기 공이 튀는 애니메이션 만들기⚽ 이번 포스팅에서는 공이 정신없이🤪🤪🤪 무한으로 튀는 애니메이션을 만들어보도록 하겠습니다. HTML 코드 CSS 코드 linear-gradient로 그라디언트 효과 배경을 사용할 수 있으며 position 속성과 animation, @keyframes 등을 잘 활용하여 애니메이션을 완성시킬 수 있다. * { 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; .. 2022. 9. 2.

[사이트 만들기] 이미지/텍스트 유형 01 사이트 만들기 : 이미지/텍스트 유형 STUDY 01 이번 포스팅에서는 Figma에서 만든 이미지/텍스트 유형을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. 유용한 사이트 살펴보기 이미지 텍스트 유형 01 유용한 사이트 살펴보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다. 튜토리얼 사이트 레퍼런스 사이트 웹폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 CSS 소스 reset에서 margin값과 padding값을 0으로 초기.. 2022. 9. 1.

[사이트 만들기] 헤더 유형 01 사이트 만들기 : 헤더 유형 STUDY 01 이번 포스팅에서는 Figma에서 만든 헤더 유형을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. web site 헤더 영역 슬라이드 영역 이미지 영역 컨텐츠 영역 푸터 영역 로그인 CSS 소스 reset에서 margin값과 padding값을 0으로 초기화 시키는 작업부터 시작한다. 최종 결과 원본 사이트 보기 원본 소스 보기 2022. 9. 1.

[사이트 만들기] 텍스트 유형 03 사이트 만들기 : 텍스트 유형 STUDY 03 이번 포스팅에서는 Figma에서 만든 텍스트 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. 아이콘 출력은 아이콘이 들어갈 원을 먼저 코딩으로 만들어 낸 후, 아이콘을 이미지 스프라이트 기법으로 원 안에 넣는 식으로 코딩을 진행하였습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 그와 동시에 이미지 스프라이트용 아이콘 SVG를 출력할 페이지도 따로 만들도록 한다. 만드는 방법은 지난 이미지 스프라이트 포스팅을 참조할 것. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. img 태그의 alt와 같은 효과를 주기 위해 아이콘이 들어갈 sp.. 2022. 9. 1.

[사이트 만들기] 텍스트 유형 02 사이트 만들기 : 텍스트 유형 STUDY 02 이번 포스팅에서는 Figma에서 만든 텍스트 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. 아이콘 출력은 아이콘이 들어갈 원을 먼저 코딩으로 만들어 낸 후, 아이콘을 이미지 스프라이트 기법으로 원 안에 넣는 식으로 코딩을 진행하였습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 그와 동시에 이미지 스프라이트용 아이콘 SVG를 출력할 페이지도 따로 만들도록 한다. 만드는 방법은 지난 이미지 스프라이트 포스팅을 참조할 것. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. img 태그의 alt와 같은 효과를 주기 위해 아이콘이 들어갈 sp.. 2022. 9. 1.

[사이트 만들기] 텍스트 유형 01 사이트 만들기 : 텍스트 유형 STUDY 01 이번 포스팅에서는 Figma에서 만든 텍스트 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. 아이콘 출력은 아이콘이 들어갈 원을 먼저 코딩으로 만들어 낸 후, 아이콘을 이미지 스프라이트 기법으로 원 안에 넣는 식으로 코딩을 진행하였습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 그와 동시에 이미지 스프라이트용 아이콘 SVG를 출력할 페이지도 따로 만들도록 한다. 만드는 방법은 지난 이미지 스프라이트 포스팅을 참조할 것. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. img 태그의 alt와 같은 효과를 주기 위해 아이콘이 들어갈 sp.. 2022. 8. 30.

[CSS] 정사각형이 회전하는 애니메이션 만들기 정사각형이 회전하는 애니메이션 만들기⬜ 이번 포스팅에서는 정사각형이 시계방향으로 계속 돌아가는 간단한 애니메이션을 만들어보도록 하겠다. HTML 코드 HTML 코드는 매우 간단하다. box 클래스값을 가진 div만 넣는다. CSS 코드 linear-gradient로 그라디언트 효과 배경을 사용할 수 있으며 position 속성과 animation, @keyframes 등을 잘 활용하여 애니메이션을 완성시킬 수 있다. body { height: 100vh; background-image: linear-gradient(to top, goldenrod, darkkhaki) } .box { width: 50px; height: 50px; position: absolute; top: 0; left: 0; righ.. 2022. 8. 29.

[CSS] 원 2개가 시계방향으로 회전하는 애니메이션 만들기 원 2개가 돌아가는 애니메이션 만들기⚪ 이번 포스팅에서는 동그라미 2개가 시계방향으로 계속 돌아가는 간단한 애니메이션을 만들어보도록 하겠다. HTML 코드 loading 클래스값을 가진 div 안에 circle1, circle2 클래스값을 가진 span 태그 2개를 종속시킨다. CSS 코드 linear-gradient로 그라디언트 효과 배경을 사용할 수 있으며 position 속성과 animation, @keyframes 등을 잘 활용하여 애니메이션을 완성시킬 수 있다. body { height: 100vh; background-image: linear-gradient(-60deg, darkorchid 0%, lightpink 100%); } .loading { position: absolute; lef.. 2022. 8. 29.

[CSS] 요소 숨기는 방법 알아보기 CSS 요소 숨기는 방법 CSS에서 특정 요소를 숨기는 방법에 대해 설명하는 포스팅입니다. display로 요소 숨기기 차지하던 영역을 제거해 존재 자체가 사라진다고 이해하면 된다. 애니메이션 적용 불가능. display: none; opacity로 요소 숨기기 투명도를 0으로 설정하는 것이기 때문에 영역은 남아있다. 애니메이션 적용 가능. opacity: 0; visibility로 요소 숨기기 차지하던 공간은 그대로 유지하지만 콘텐츠가 숨겨지는 방식이다. 애니메이션 적용 불가능. visibility: hidden; transform으로 요소 숨기기 scale 값을 0으로 설정하여 요소를 안 보이게 하는 방식이다. 애니메이션 적용 가능. transform: scale(0); width, height 값 .. 2022. 8. 25.

[CSS] 색상 표현하는 방법 알아보기 CSS 색상 표현 방법 CSS의 색상 표현 방법에 대해 설명하는 포스팅입니다. 1. 색상명으로 표현 색상 이름으로 표현 가능하다. 약 140가지의 색상명들이 브라우저에 미리 정의되어 있다. color: yellow; // yellow, red, green, blue... 등등 색상명 넣기 2. RGB 값으로 표현 RGB(Red Green Blue)와 같은 형식으로 색을 표현할 수 있다. RGB 각각의 변수에 0에서 255 사이의 정수를 입력하거나 백분율 값을 지정해 색상을 결정한다. background-color:rgb(255, 0, 0); 3. RGBA 값으로 표현 2번의 RGB 방식에서 불투명도까지 조절 가능한 방법이다. rgb 변수 다음에 오는 자리에서 0.0(투명)부터 1.0(불투명) 사이의 값을.. 2022. 8. 23.

[CSS] CSS 단위 종류 및 고찰 CSS 단위 종류 및 단위의 고찰 CSS의 단위의 종류를 설명하는 포스팅입니다. font-size, 단위의 고찰 문자의 글자 크기를 지정하는 속성이며 크기를 명시하지 않을 시 기본 크기는 16px입니다. 1. px 해상도에 따라 상대적으로 달라지는 기본 단위입니다. font-size: 12px; 2. % 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위로, 다음과 같이 표현합니다. 특별한 설정이 없다면 16px이 100%가 되므로, 150%는 24px이 됩니다. 부모 요소가 10px이라면 150%는 15px이 되죠. font-size: 150%; 3. em 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위로, 다음과 같이 표현합니다. 특별한 설정이 없다면 16px이 1em가 되므로, 1.. 2022. 8. 23.

[CSS] 이미지 스프라이트 + 백그라운드 & IR 효과 이미지 스프라이트 이번 포스팅에서는 지난번에 올렸던 이미지 유형 03 포스팅에서 활용된 이미지 스프라이트 효과와 백그라운드, IR 효과에 대해 심도 있게 다뤄보도록 하겠습니다. 이미지 스프라이트(Image Sprite)란? 여러 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다. 웹을 제작하다보면 사용되는 이미지 수는 기하급수적으로 증가하게 될 것이며 그만큼 웹 브라우저가 서버에 요청해야 할 이미지의 수가 늘어나게 되므로 로딩 시간이 오래 걸리게 된다. 하지만 이미지 스프라이트를 사용한다면 요청해야 할 이미지의 수를 줄여 로딩 시간을 절약하는 것이 가능하다. Figma 예제 다음 예제는 SNS 공유 기능을 위한 아이콘(36x36px 사이즈)을 14px 간격으로 떨어뜨려 아이콘 하나당 50px씩 .. 2022. 8. 20.

[사이트 만들기] 이미지 유형 03 - 이미지 스프라이트 & IR효과 활용하기 사이트 만들기 : 이미지 유형 03 이번 포스팅에서는 Figma에서 만든 이미지 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 이번에 만들 웹 사이트의 유형은 큰 메인 이미지 한 장과 그 옆에 작은 사이즈의 이미지 4장이 배치된 구조이며, 마우스를 올려 놓으면(hover) 제목과 설명이 들어있는 검은색 블러 처리된 박스가 자연스럽게 올라오는 효과까지 반영시켜보도록 하겠다. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것. 귀여운 헬로키티를 보고 가세요😻 산리오의 상징 캐릭터 헬로키.. 2022. 8. 20.

[CSS] SCSS & Pug 활용 - 강아지 애니메이션 만들기🐶 SCSS와 Pug를 이용해 강아지 애니메이션 만들기🐶🐾 이번 포스팅에서는 지난 포스팅에서 다뤘던 SCSS와 Pug를 이용하여 강아지 애니메이션을 만들어보도록 하겠다. HTML(Pug) 코드 먼저 HTML 코드는 Pug 방식으로 틀을 짜주도록 하자. .dog .dog-body .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-torso .dog-head .dog-ears .dog-ear .dog-ear .dog-eyes .dog-eye .dog-eye .dog-muzzle .dog-tongue 위의 Pug 코드를 HTML로 컴파일하기 위의 HTML(Pug) 코드를 보통의 HTML 코드로 컴파일 시킨 코드이.. 2022. 8. 18.

[CSS] Sass(SCSS) 알아보기 Sass(SCSS)란? Sass(=SCSS)에 대해 이해하기 전에 우선 CSS부터 이해하고 넘어가야 한다. CSS란 표현하지 못하는 게 없을 정도로 충분히 훌륭한 언어이긴 하나 치명적 단점 또한 존재한다. CSS는 규모가 커질수록 코드가 복잡해지고 유지보수에 매우 불리하다. Sass는 이러한 CSS의 치명적 단점을 보완하기 위해 나온 CSS 확장 언어이며, CSS에 존재하지 않는 다양한 기능들도 가지고 있다. Sass(SCSS)를 사용해야 하는 이유 Sass(SCSS)는 다음과 같은 장점들을 가지고 있다. · 가독성 : CSS보다 간단명료한 문법으로 CSS를 구조화하여 표현 가능 · 호환성 : 모든 버전의 CSS와 완벽 호환 · 기능성 : 다양한 기능을 제공하며, CSS보다 모든 면에서 뛰어남 · 인지도.. 2022. 8. 18.

[사이트 만들기] 이미지 유형 02 - Transition & Hover 활용하기 사이트 만들기 : 이미지 유형 02 이번 포스팅에서는 Figma에서 만든 이미지 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 이번에 만들 웹 사이트의 유형은 이미지 위에 제목과 자세히 보기 버튼을 올려놓고 그걸 hover 효과로 위로 나타나게 하는 애니메이션을 주도록 하겠다. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것. 별빛 제빵교실 강사 소개🍞 사람 아닌 동물이지만 훌륭한 실력을 가진 별빛 제빵교실의 강사분들을 소개합니다! 댕댕이 자세히 보기 냥냥이 자세히 보기 북극곰 자.. 2022. 8. 17.

이전 1 2 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바