CSS7 [Javascript / Html / CSS] Typing Text (타이핑 텍스트 효과) 1. Html + CSS 꾸미기 타이핑 효과를 주기 전에 먼저 원하는 폰트와 원하는 text를 화면에 배치합니다. I'm Coding *{ box-sizing: border-box; margin: 0; padding: 0; font-family: 'Roboto', sans-serif; } .container{ height: 100%; height: 100vh; background: #32a89b; color: #fff; display: flex; justify-content: center; align-items: center; } .container h1{ font-size: 80px; } 이렇게 나오면 성공! 2. Typed JS를 설치 https://github.com/mattboldt/typed.j.. 2022. 10. 26. CSS 공부할 수 있는 게임 2개 추천! css를 공부하고 난 뒤 어느정도 알고 있는지 확인할 수 있는 게임들을 추천해드리겠습니다~! 1. Flexbox Froggy 개구리가 연잎에 올라갈 수 있도록 코드를 짜주면 됩니다! 첨엔 간단하지만 레벨이 올라갈 수록 난이도가 올라갑니다 https://flexboxfroggy.com/ Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 2. CSS Dinner 움직이고 있는 아이템의 선택자를 알맞게 적어주면 됩니다. https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 두가지 게임을 수월하게 .. 2022. 9. 30. [CSS] Centering trick / 아이템, 글자를 가운데 정렬하는 방법 아이템을 가운데 정렬하는 방법 margin : auto 기본값으로 항상 오른쪽에 마진이 들어가 있어서 auto로 바꾸게 되면 양 옆으로 자연스럽게 margin값이 들어간다! text-align : center 블럭요소 안에서 그안의 컨텐츠들(텍스트 뿐만 아니라 버튼과 같은 인라인요소)들을 정렬할때 쓸 수 있다 transform : translate(50%, 50%) 자기 자신의 %만큼 움직인다 글자를 가운데 정렬하는 방법 text-align : center; line-height : 박스 높이 // 한줄의 높이를 지정함 2022. 9. 30. [CSS] Flexbox Flexbox란? 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형 된다. display : flex; flex-direction flex 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정 기본축이 X축 방향 //왼쪽 → 오른쪽 flex-direction : row; //오른쪽 → 왼쪽 flex-direction : row-reverse; 기본축이 Y축 방향 //왼쪽 → 오른쪽 flex-direction : row; //오른쪽 → 왼쪽 flex-direction : row-reverse; flex-wrap ‘flex-item’ 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역.. 2022. 9. 30. [CSS] Selectors Universal (전부) * type Tag ID #id Class .class State : Attribute [] State : (의사 클래스) 선택자에서 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있다. button:hover { color: red; background : yellow } Attrivute[] 주어진 특성을 가진 모든 요소를 선택 (^, $) a[href = "naver"] // naver가 들어간 것을 찾음 a[href^ = "naver"] // naver로 시작하는 것을 찾음 a[href$ = ".com"] // .com으로 끝나는 것을 찾음 자세한 내용은 아래 링크로! https://developer.mozilla.org/ko/docs/Web/CSS/CSS.. 2022. 9. 30. [CSS] display, position 확실하게 알고가기 display display : block; display : inline; display : inline-block; display : flex; block inline inline-block div span div(+span) 꽉차게 들어가는 상자 물건 상자 한 줄에 하나씩 한 줄에 전부 상자지만 한 줄에 여러 상자를 놓을 수 있음 width, height을 지정 가능 content 자체만 꾸며줌 (width, height를 무시함) width, height을 지정 가능 position 기준 static 기본값 top, left 등을 사용해도 아무런 영향을 미치지 않는다 relative 아이템의 위치 값 그 자리에서 상대적으로 지정한 만큼 이동된다 absolute 아이템이 담겨있는 box static.. 2022. 9. 27. [CSS] Gradient, Box shadow 사이트 추천 css를 하면서 그라디언트나, box shadow를 사용해서 더 풍푸한 디자인적 요소를 주기도 합니다. 제가 소개해드릴 사이트는 전에 https://cheese-donut.tistory.com/13?category=931174 어플을 만들 때 필요한 것 - 1. Gradient Site (그라데이션 사이트 추천) 어플을 만들 때 고급스러운 느낌을 주기위해 그라데이션을 사용하는 경우가 많습니다. 그래서 제가 자주 애용하는 사이트를 추천하고자 합니다. 1. uiGradients - show all gradients를 통해 자신이 원하 cheese-donut.tistory.com 전 포스팅에도 다양한 그라디언트 사이트가 많이 있습니다! 그럼 바로 gradient 사이트를 알려드리도록 하겠습니다 1. CSS G.. 2022. 5. 31. 이전 1 다음
