# CSS3

89개의 포스트
post-thumbnail

CSS3 Animation Part.4(학습 38일차 TIL)

210730 오늘은 CSS만을 이용한 이모지 animation을 완성하고, 이를 응용하여 Ryan도 만들어 보았다.

1일 전
·
0개의 댓글
post-thumbnail

[WEB] Javascript30 Challenge 후기

Wes Bos 라는 Full Stack Developer가 운영하는 online Courses 중 무료로 제공하는 챌린지 중에 전반적으로 유명한 챌린지이다.최근 6월까지 엘리스 레이서 1기로써 활동이 종료되고 그동안 React를 주로 웹 프론트엔드 개발을 진행할수록 갈

2일 전
·
0개의 댓글
post-thumbnail

CSS3 Animation Part.3(학습 37일차 TIL)

210729 animation을 어제보다 더 깊이 있게 배웠다.정규시간 이외에는 과거에 만들었던 웹 사이트를 처음부터 새롭게 퍼블리싱 해보는 시간을 가졌다.position:absolute;시에 개체를 정 중앙에 위치시키는 3가지 방법left:calc(50% - 가로 1

4일 전
·
0개의 댓글

CSS3 Animation & keyframes (학습 35일차 TIL)

210727 오늘은 animation과 keyframes를 활용하여 시계와 물방울 효과를 구현해 보았다. 정규시간 이외에는 간단한 자바스크립트를 이용한 navigation 메뉴를 만들었다. 물방울이 커지면서 위로 올라간다. CSS3 tips animation: na

6일 전
·
0개의 댓글

HTML5 복습, 다양한 Hover effect(학습 33일차 TIL)

210723 오늘은 어제 배운 HTML5 태그들을 복습하고, transform을 활용한 다양한 hover effect에 대해 학습했다. CSS tips inline요소는 transform 적용이 안 된다. transform은 속성 순서에 따라 animation 효과가

2021년 7월 23일
·
0개의 댓글
post-thumbnail

HTML5 / CSS3로 신문기사 마크업하기, form 복습(학습 32일차 TIL)

210722 그 동안 배운 HTML5와 CSS3를 활용하여 신문기사 페이지를 마크업 했다. 정규 수업시간 이외에는 Form tag를 복습할 겸, 회원가입 form 페이지를 마크업 했다.위와 같은 "조건 주석문"을 활용하여 IE 9 lt(미만)에서는 해당 스크립트를 실행

2021년 7월 22일
·
0개의 댓글

CSS3 Pseudo-Class, background-size, text-overflow, word-break, column-count 등 (학습 31일차 TIL)

210721 그동안 배운 선택자를 복습하고 새로운 속성 선택자, 슈도 클래스 선택자, background-size에 대해 학습했다.속성 선택자를 활용하여 스타일을 적용할 수 있다.새로 알게 된 Pseudo-class 선택자resize 속성을 이용하면 요소의 크기를 사용

2021년 7월 21일
·
0개의 댓글
post-thumbnail

CSS3 transition 응용, accordion (학습 30일차 TIL)

210720 오늘은 transition을 활용해 navigation 메뉴와, accordion 메뉴를 마크업했다. 학습 후에는 display: gird를 실습해 보는 시간을 가졌다.display속성은 transition이 적용되지 않는다.Pseudo-class :tar

2021년 7월 20일
·
0개의 댓글

CSS3 transition (학습 29일차 TIL)

210719 오늘은 animation 효과를 줄 수 있는 transition에 대해서 학습했다.transition은 원본에 줄 것.property - 모든 속성 or 일부 속성에 animation적용(all, background, color, height, width,

2021년 7월 19일
·
0개의 댓글

CSS3 box-shadow: inset, 가상 요소 선택자, 웹폰트, transform(학습 28일차 TIL)

210716 어제에 이어 box-shadow의 inset 속성을 활용한 다양한 버튼을 꾸미는 방법, 가상 요소 선택자, 인접/형제 선택자, 웹폰트, transform에 대해 학습했다.정보를 전달할 때는 '고딕 계열'을 사용하자.box-shadow에 inset을 활용해

2021년 7월 16일
·
0개의 댓글
post-thumbnail

CSS3 text-shadow, box-shadow, rgba, gradient(학습 27일차 TIL)

210715 오늘은 CSS3부터 지원하는 text와 box에 여러가지 효과를 적용하는 방법에 대해 학습했다.text-shadow는 ,(쉼표)로 구분하여 여러 효과를 중첩시킬 수 있다.hsl(360, 100%, 75%); HSL(색상, 채도, 명도)로도 조절 가능다양한

2021년 7월 15일
·
0개의 댓글

JavaScript QuickMenu, CSS3 border-radius(학습 26일차 TIL)

210714 어제 실습했던 navigation 메뉴를 복습하고, 미리 작성되어 있는 js를 삽입하여 side에 둥둥 떠다니는 quick 메뉴, border-radius에 대해 학습했다.두 번째 시간에는 Figma 사용법에 대해 배웠다.border-image는 이미지를

2021년 7월 14일
·
0개의 댓글

CSS list-style, link(a), overflow, border 속성(학습 16일차 TIL)

210630 CSS학습 3일차로 list-style, link(a태그), overflow, border속성에 대해 학습했다.추가로 Adobe XD를 사용하는법을 배웠다.네이밍 규칙의 언더스코어(\_) 조합은 파일, 폴더, 이미지에 사용한다.네이밍 규칙의 하이픈(-) 조

2021년 6월 30일
·
0개의 댓글

inline-block box 사이 공백이 생기는 경우

display: inline-block 속성을 가진 박스 모델들 사이에 공백이 생기는 경우 해결방법에 대해 알아봅니다.

2021년 6월 13일
·
0개의 댓글

최적의 Padding과 Margin의 사용법

Padding과 Margin을 언제 사용해야하는지 알아봅니다.

2021년 6월 12일
·
0개의 댓글

CSS 변수

CSS에서 변수를 사용하는 방법에 대해 알아봅니다.

2021년 6월 12일
·
0개의 댓글

Font

CSS의 폰트에 대해 알아봅니다.

2021년 6월 12일
·
0개의 댓글

테이블 빈 셀 설정

빈 셀을 표시할지 말지 설정하는 방법에 대해 알아봅니다.

2021년 6월 12일
·
0개의 댓글