본문 바로가기

CSS25

CSS 애니메이션 만들기 : 카드 뒤집기 CSS 애니메이션 : 카드 뒤집기 애니메이션 오늘은 마우스를 오버했을 때 카드가 뒤집히는 듯한 애니메이션이 나타나도록 작업해 보겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen hoveranimation by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 Mouse Hover Effect 마우스를 올리면 Up Mouse Hover Effect 마우스를 내리면 Down Mouse Hover Effect 마우스를 올리면 to Right Mouse Hover Effect 마우스를 내리면 to Left HTML 소스는 전체에 해당하는 hover__wrap 안에 hover__updown, hover__leftright 두 개의 div 박스를 만들어 줍니다. 그 안.. 2022. 9. 20.

CSS 애니메이션 만들기 : GIF 이미지 애니메이션 구현하기 CSS 애니메이션 : GIF 이미지 애니메이션 구현하기 오늘은 조금 다른 방식으로, GIF 이미지를 애니메이션으로 구현하는 방법을 알아보겠습니다. 1. 애니메이션을 만들 이미지 찾기 먼저, 어떠한 GIF 이미지를 애니메이션으로 만들 것인지 결정합니다. 2. 애니메이션의 프레임 나열하기 Photoshop에서 GIF 이미지를 가져와 Timeline 창을 띄우면, GIF를 이루고 있는 각각의 레이어들이 나타납니다. 여우 이미지의 크기는 1600px * 1200px이며, 레이어는 총 18개가 있었습니다. GIF의 이미지의 너비(1600px) X 레이어 수(18)의 값(28,800px)을 구해줍니다. 이후, width값이 28,800px, height값이 1200px인 새로운 창을 만들고, 여우의 움직임에 해당하.. 2022. 9. 8.

CSS 애니메이션 만들기 : 애니메이션 기초 CSS 애니메이션 만들기 : 기초 애니메이션 오늘은 CSS의 다양한 애니메이션과 관련된 속성을 알아보고, 기초적인 애니메이션을 만들어 보도록 하겠습니다. ANIMATION 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션 끝나고 난 뒤 어떤 값을 적용할지.. 2022. 9. 8.

CSS 애니메이션 만들기 : SVG CSS : SVG 애니메이션 만들기 SVG로 도형 만드는 방법을 알게 되었으니, 더 나아가 SVG에 애니메이션 효과를 주는 방법에 대하여 알아보도록 하겠습니다. 1. HTML로 도형 만들기 2. CSS로 애니메이션 효과 추가하기 stroke-dasharray 속성은 선을 대쉬 형태로 만들며, 값을 부여한 만큼 대쉬 길이가 늘어납니다. 만약 svg의 path 길이가 100이고, dasharray의 길이를 50으로 설정하면, SVG는 절반만 보이게 되는 것입니다. 한편, stroke-dashoffset 속성은 그림이 어떤 부분에서부터 시작할지 정하는 속성입니다. .ani1 { width: 100px; height: 100px; x: 30px; y: 30px; fill: none; stroke: #880E41.. 2022. 9. 8.

웹사이트 만들기 : 푸터 유형 레이아웃01 레이아웃 : 푸터 유형01 다음과 같은 푸터 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 푸터 영역은 먼저 footer__menu 클래스를 가진 div 박스 안에 메뉴의 개수만큼 6개의 div 박스를 만들어 주고, 그 안에 각각의 메뉴 제목, 목록을 작성해 주었습니다. 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형01 메뉴 유형02 슬라이드 영역 슬라이드 유형01 슬라이드 유형02 이미지 영역 이미지 유형01 이미지 유형02 이미지/텍스트 유형01 이미지/텍스트 유형02 텍스트 유형01 콘텐츠 영역 카드 유형01 카드 유형02 카드 유형03 푸터 영역 푸터 메뉴 유형01 푸터 컨택트 유형02 푸터 이메일 유형03 2022 mo0647. Portf.. 2022. 9. 5.

웹사이트 만들기 : 텍스트 유형 레이아웃03 레이아웃 : 텍스트 유형03 다음과 같은 텍스트 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 먼저, 컨테이너 박스 안에 제목을 적어 주고, 카드 부분은 contents 박스를 만들어, contents 박스 안에 세 개의 card를 만들어 주었습니다. 각각의 카드는 내용 부분과 info 부분, 링크 부분으로 나누어 주었습니다. info 박스는 icon과 정보 부분으로 나누어 주었습니다. 스터디 후기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자 멤버를 소개합니다. 불과 3달 전만 해도 여러 원인들로 인해 자존감이 밑바닥이었던 저에게 이 스터디는 너무 소중한 시간이었어요. 매일 마음 속으로 울고 싶다를 외쳤던 저였는데 이제는 조금이나마 이겨낼 수 있을 것 같네요. 다음에 선생님을 만났을 때는 많.. 2022. 9. 1.

웹사이트 만들기 : 텍스트 유형 레이아웃02 레이아웃 : 텍스트 유형02 다음과 같은 텍스트 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 먼저, 컨테이너 박스 안에 title과 contents 박스를 만들어준 뒤, section 클래스에 display: flex, space-between 속성을 추가해 레이아웃을 배치했습니다. title 안에는 sub title 상자, title, desc를 만들어 주었습니다. contents는 top과 bottom으로 나누어, 각각 두 개의 card가 배치되도록 작업해 주었습니다. TEXT TYPE02 귀여운 동물들 전문과정 세상의 귀여운 댕댕이... 귀여운 고양이... 귀여운 다람쥐... 귀여운 고라니... 귀여운 알파카... 귀여운 고릴라... 세상의 귀여운 댕댕이 귀, 귀, 귀 자로 끝나는 말.. 2022. 8. 31.

웹사이트 만들기 : 텍스트 유형 레이아웃01 레이아웃 : 텍스트 유형01 다음과 같은 텍스트 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 먼저, container 박스를 만들어 주고, 그 안에 text__card 클래스명을 가진 div 박스를 만들어 주었습니다. 총 6개의 카드를 만든 뒤, 각각의 카드 안에는 아이콘과 제목, 설명, 더보기 버튼을 추가해 주었습니다. 텍스트 유형01 세상의 귀여운 댕댕이 세상의 귀여운 댕댕이 세상의 귀여운 댕댕이... 댕댕이 이야기만 몇 번째인지... 댕댕이 글자를 보면 게슈탈트 붕 괴 현상이 일어날 것만 같다. 세 줄 효과를 위해서 조금 더 더보기 세상의 귀여운 야옹이 세상의 귀여운 댕댕이... 댕댕이 이야기만 몇 번째인지... 댕댕이 글자를 보면 게슈탈트 붕 괴 현상이 일어날 것만 같다. 세 줄 효.. 2022. 8. 30.

제이쿼리 : 속성 선택자 제이쿼리 : 속성 선택자 JQuery는 html 요소와 관련된 기능구현이 많아, 그만큼 CSS와 매우 밀접한 관계가 있습니다. 오늘은 JQuery의 속성 선택자에 대하여 알아보도록 하겠습니다. 1. 속성 선택자 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span[class='abc']") span 요소 중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc']") span 요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소[속성~='값'] $("span[class~='abc']") span 요소 중 class가 'abc'를 포함하는 .. 2022. 8. 30.

제이쿼리 : 기본 선택자 제이쿼리 : 기본 선택자 JQuery는 html 요소와 관련된 기능구현이 많아, 그만큼 CSS와 매우 밀접한 관계가 있습니다. 오늘은 JQuery의 기본 선택자에 대하여 알아보도록 하겠습니다. 1. 기본 선택자 선택자 종류 설명 태그 선택자 $("p") p 요소를 선택합니다. id 선택자 $("#gnb") #gnb 요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 ul 요소를 선택합니다. 인접 선택자 $("#visual + #content") #visual 다음에 오는 #content 요소를 선택합니다.. 2022. 8. 30.

자바스크립트 : GSAP란? 자바스크립트 : GSAP란? GSAP는 GreenSock에서 만든 자바스크립트 애니메이션 라이브러리입니다. 일반적으로 애니메이션 효과는 CSS나 JQUERY로 구현하는 것이 일반적이지만, 그 이상의 복잡한 애니메이션을 보다 간단하게 구현하기 위해 탄생한 것이 바로 GSAP입니다. 오늘은 GSAP의 사용법을 간단하게 알아보도록 하겠습니다. 1. CDN에서 라이브러리 가져오기 CDN이란 Contents Delivery Network의 약자로, 데이터를 분산된 서버에서 받아오는 것을 말합니다. GSAP이나 jQuery의 라이브러리를 호스팅된 서버에 직접 설치해서 사용할 수도 있지만, CDN을 사용하면 클라이언트가 직접 자신의 위치로 라이브러리를 전송받게 됩니다. 위와 같이, 라이브러리를 사용하려면 js파일의 .. 2022. 8. 29.

CSS 애니메이션 만들기 : 굴러가는 네모 CSS 애니메이션 : 굴러가는 단무지 오늘은 CSS의 다양한 속성을 이용하여 애니메이션을 만들어 보도록 하겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen animation01 by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 단무지의 그림자는 가상요소로 작업해줄 것이기 때문에, HTML 소스는 box 클래스를 가진 div 박스 하나로 충분합니다. 2. 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; .. 2022. 8. 29.

CSS 애니메이션 만들기 : 빙글빙글 돌아가는 원 CSS 애니메이션 : 빙글빙글 돌아가는 원 오늘은 CSS의 다양한 속성을 이용하여 애니메이션을 만들어 보도록 하겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen animation02 by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 돌아가는 원을 두 개 만들 것이기 때문에, circle 이름을 가진 span 태그를 두 개 작업해 주었습니다. 2. CSS 소스 body { height: 100vh; background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 1.. 2022. 8. 29.

CSS : 요소 숨기기 CSS : 요소 숨기기 우리가 코딩을 할 때, 때때로 웹 접근성 준수, 탭 효과 등을 이유로 어떠한 요소가 화면에서 보이지 않도록 설정해야 할 필요가 있습니다. 오늘은 CSS로 요소를 숨기는 5가지 방법에 대하여 알아보겠습니다. 1. display로 속성 주기 display: none; display는 요소가 화면에 보여지는 방식을 결정하는 속성입니다. display: none; 속성을 추가하면 요소를 숨길 수 있습니다. 이 방법은 애니메이션을 사용할 수 없고, 요소가 차지하는 영역이 사라집니다. 2. opacity 속성 주기 opacity: 0; opacity는 요소의 투명도를 의미합니다. 요소의 투명도를 0으로 처리하는 이 방식은, 요소가 불투명해지는 애니메이션을 사용할 수 있습니다. 요소가 차지하는.. 2022. 8. 25.

CSS : 색상 표현 방법 색상 표현 방법 CSS에서 색상을 표현하는 방법에는 여러 가지가 있습니다. 대표적인 방법 몇 가지를 알아보도록 하겠습니다. 1. 색상명으로 표현 색상의 이름을 나타내는 방법으로, 브라우저에는 약 140가지의 색상 이름들이 정의되어 있습니다. 적용 예시를 살펴보겠습니다. 멋진 빨간색 글자 멋진 주황색 글자 멋진 파란색 글자 멋진 빨간색 글자 멋진 초록색 글자 멋진 파란색 글자 2. HEX값으로 표현 #RRGGBB 형식의 16진수 색상 값을 이용하여 표현하는 방법입니다. RR, GG, BB는 각각 red, green, blue를 나타내는 값으로, 16진수 00에서 FF사이의 값으로 결정됩니다. 적용 예시를 살펴보겠습니다. 노잼 검정색 글자 촌스러운 분홍색 글자 민트색 같은 글자 아무렇게나 써본 글자 노잼 검.. 2022. 8. 23.

CSS : 단위 CSS : 단위 오늘은 CSS에서 유용하게 사용하는 단위에 대하여 알아보겠습니다. 참고로, 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. px 해상도에 따라 상대적으로 달라지는 기본 단위로서, 다음과 같이 표현합니다. font-size: 12px; % 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위로서, 다음과 같이 표현합니다. font-size: 150%; 특별한 설정이 없다면 16px이 100%가 되므로, 150%는 24px이 됩니다. 만약 부모 요소가 10px이었다면 150%는 15px이 될 것입니다. em 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단위로서, 다음과 같이 표현합니다. font-size: 1.5em; 특별한 설정이 없다면 16px이 1em이.. 2022. 8. 23.

CSS : SCSS 알아보기 CSS : SCSS 알아보기 CSS는 비교적 배우기 쉬운 편이지만, 불편한 점이 많습니다. 프로젝트의 규모가 커질수록, 불필요한 선택자의 과용, 연산 기능의 한계, 구문의 부재 등 불편을 느낄 것입니다. 그 불편을 해소하기 위해, 우리는 CSS Preprocessor라고 불리우는 Sass, Less, SCSS 등의 기능을 사용할 수 있습니다. 오늘은 그 중, SCSS에 대하여 알아보겠습니다. SCSS란? CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등 디자인 요소를 추가할 때 사용하는 전처리 과정입니다. 프로젝트 규모가 커지면 CSS는 불가피하게 가독성이 떨어지는 등 유지보수의 어려움을 주는 요소가 됩니다. 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 .. 2022. 8. 18.

CSS : 애니메이션 만들기 : 꼬리를 흔드는 강아지 꼬리를 흔드는 강아지 애니메이션 만들기 CSS 효과로 다음과 같이 꼬리를 흔드는 강아지 애니메이션을 만들어 보도록 하겠습니다. See the Pen CSS Dog by mj0614k (@mj0614k) on CodePen. 이번에는 VSCode 대신, Codepen을 활용하여 HTML을 Pug로, CSS를 SCSS로 작업해 주었습니다. Codepen 작업은 작업물을 실시간으로 볼 수 있고, 간편하게 작성할 수 있어 편리하지만, 정렬에 주의해야 하고, 오류를 찾기가 힘들다는 단점이 있습니다. 원본 HTML 소스와 CSS 소스는 아래에서 확인하실 수 있습니다. HTML 소스 먼저, HTML로 div 박스를 만들어 강아지의 몸을 작업해 줍니다. 강아지의 전체인 dog는 body와 torso, head로 나누어.. 2022. 8. 18.

웹사이트 만들기 : 이미지 유형 레이아웃02 레이아웃 : 이미지 유형02 다음과 같은 이미지 유형의 레이아웃을 작업해 보도록 하겠습니다. 이번에는 이미지가 총 세 개이며, 이미지 위에 마우스를 hover하면 '자세히 보기' 버튼이 나타나는 CSS 요소도 추가하였습니다. HTML 소스 먼저, 세 개의 article 태그를 만들어 각각 이미지를 첨부해 주었습니다. article 태그 안에서도 image 부분과 desc 부분을 나누어 작업해 주었습니다. 바다에 사는 생물들 바다에는 어떤 생물들이 살고 있을까요? TTUNG-E 자세히 보기 JingJing-E 자세히 보기 Jibgeo-Sajang 자세히 보기 CSS 소스 폰트는 지마켓 산스를 사용하였고, display: flex를 이용하여 세 개의 이미지를 가로로 배치하였습니다. overflow-hidde.. 2022. 8. 17.

웹사이트 만들기 : 이미지 유형 레이아웃01 레이아웃 : 이미지 유형01 다음과 같은 이미지 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 카드 유형과 유사하게, 두 개의 카드를 만들어 이미지를 백그라운드 방식으로 삽입했습니다. 웹 표준 준수를 위해, a 태그에는 title을 추가해 주었습니다. 세상의 귀여운 댕댕이 강아지 종류는 매우 다양합니다. 하지만 하나같이 정말 귀엽습니다. 세상의 귀여운 댕댕이 누가 뭐래도 댕댕이는 참 귀엽다. 왜 나는 댕댕이가 없을까? 자세히 보기 세상의 귀여운 댕댕이 누가 뭐래도 댕댕이는 참 귀엽다. 왜 나는 댕댕이가 없을까? 자세히 보기 CSS 소스 폰트는 넥슨 Lv1 고딕을 사용하였고, display: flex를 이용하여 두 개의 이미지를 가로로 배치하였습니다. /* fonts */ @import url.. 2022. 8. 17.

CSS : 미디어쿼리(media query) 미디어쿼리 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 최소 가로폭이 1000px, 즉 1000px보다 넓은 해상도일 때 style_pc.css를 연결한다는 뜻입니다. 태블릿이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 기기마다의 해상도도 확인할 수 있고 기기 모델도 추가할 수 있습니다. 또한 다음 트로이(http://troy.labs.daum.net/)에서는 기기별 해상도를 제공하고 실제 작동 화면을 확인할 수 있는 VIEW를 제공합니다. 모바일 기기 가로 세로 IPhone X 375 812 IPhone 6, 7, 8 375 667 IPhone 6, 7, 8 plus .. 2022. 8. 15.

CSS : 기본 문법 CSS 기본 문법 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 실제로는 외부 스타일시트를 주로 사용합니다. 인라인 스타일시트는 대체로 거의 사용하지 않으나, 우선순위가 가장 높기 때문에 필요한 경우에는 편리하게 사용할 수 있습니다. 참고로, CSS에서의 주석은 /* */로 표현합니다. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 멋진 빨간색 글자 결과 보기 멋진 빨간색 글자 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *.css 확장자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언합니다. .. 2022. 8. 12.

웹사이트 만들기 : 카드 유형 레이아웃03 레이아웃 : 카드 유형03 이번에는 다음과 같은 3개의 카드가 있는 레이아웃 유형을 작업해 보도록 하겠습니다. CSS 소스 폰트는 에스코어 드림을 사용했고, 컨테이너 안에 3개의 카드를 만들어 display:flex로 가로 정렬을 해 주었습니다. blind 효과는 ir 효과와 마찬가지로, 글자가 눈에 보이지 않게 작업하지만, 스크린 리더기에서는 읽히게끔 만들어 웹 접근성을 준수하게끔 합니다. /* fonts */ @import url('https://webfontworld.github.io/score/SCoreDream.css'); .score { font-family: 'SCoreDream'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } .. 2022. 8. 10.

CSS : 비트맵 방식과 벡터 방식 비트맵 방식과 벡터 방식 오늘은 비트맵 방식과 벡터 방식의 차이에 대하여 알아보겠습니다. 그 전에, 픽셀(Pixel)이라는 개념을 알아야 합니다. 픽셀이란? 픽셀이란 Picture(그림) + Element(원소)의 합성어로서, 화소라고도 하는 화면을 구성하는 가장 기본이 되는 단위입니다. BMP, GIF, JPEG, PNG가 픽셀을 사용하는 대표적인 포맷으로, 이를 '비트맵 이미지'라고 합니다. 비트맵 방식이란? 비트맵 방식은 각 픽셀에 저장된 비트 정보가 집합된 것입니다. 비트맵은 벡터와 달리 픽셀의 점 하나하나가 이미지를 이루는 요소이기 때문에 벡터에 비하여 정교한 이미지 표현이 가능합니다. 픽셀의 수가 많아질수록 화질은 뛰어나지만, 용량 또한 커지게 됩니다. 또한, 비트맵 이미지는 크기를 확대하거나.. 2022. 8. 9.

웹사이트 만들기 : 카드 유형 레이아웃01 레이아웃 : 카드 유형01 다음과 같은 카드 유형의 레이아웃을 작업해 보도록 하겠습니다. CSS 소스 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } /* common */ .container { width: 116.. 2022. 8. 8.

이전 1 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바