coding/html + css 100
css flexbox 게임으로 배워보자
지난번 포스팅에서 select 게임을 했던 것 기억하시죠? 이번에는 flexbox 게임을 가져와봤습니다. 1. flexbox froggy flexbox는 css에서 그리드를 조절해주는 스타일입니다. display 속성 값으로 사용하고 여러 가지 옵션을 넣어주면 편리하게 사용할 수 있어요. 저도 아직 배우는 중이라 정리가 된다면 이것만 따로 포스팅해보겠습니다. 오늘은 그 옵션을 익혀볼 게임인 flexbox froggy을 소개해드립니다. 보이시는 것 처럼 개구리를 연잎 위로 올려주면 됩니다. 첫 문제인만큼 아예 정답도 알려줍니다. justify-content은 아이템의 배치에 대해서 설정할 수 있는 속성이에요. flext-end는 끝에서 정렬 가로로 되어있으니 오른쪽 정렬이 되겠죠? 그런 속성 값입니다. 자..
css 선택자 게임
css를 처음 접하시는 분들은 Select. 즉, 선택자를 잡는 것이 어려울 거예요. 저도 처음에는 냅다 외우기만 해 가지고 이해하 하나도 안 됐었거든요. 그런데 이게 게임으로 쉽게 이해하는 방법이 있다고 합니다. 1. 접시 선택하기 https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 접시를 선택하면 되는 게임이에요. 보기에는 어려워 보이는 데 막상 하면 생각보다 쉽답니다. 오른쪽에 보시면 설명도 나와있어서 살펴보시면 좋아요. 영어 기는 하지만 그래도 대충 해석이 없어도 알 수 있어요. 이렇게 마우스를 올리면 자기가 어떤 태그 인지도 알려줘요 귀엽죠. 접..
css로 마우스 오버 시 테두리에 애니메이션 효과를 줘보자
자 html 구조도 다 짜뒀겠다 본격적으로 css를 시작해서 애니메이션 효과를 넣어봅시다! 1. 가상 클래스 애니메이션 이외의 필요한 다른 css 코드들은 설명하지 않고 넘어가겠습니다. 포스팅 아래에 코드팬을 남겨둘 테니 궁금하신 분들은 참고해주세요. .line::before { content: ""; position: absolute; background: rgba(230, 230, 230, 0.7); display: inline-block; transition: all 0.5s; left: 10%; top: 10%; width: 0%; height: 2px; } ① before - before이라는 가상 태그를 클래스 이름이 line인 태그에 넣어줍니다. - 말 그대로 가상으로 있는 태그로 html ..
마우스를 올리면 그려지는 테두리 애니메이션 구조를 살펴보자(html)
기능보다 디자인 측면에 비중을 두는 작업인 오늘의 포스팅입니다. 어떤 홈페이지에 들어갔을 때, 마우스를 올리면 안쪽에 테두리가 천천히 그려지는 모습을 혹시 본 적 있으신가요? 저는 그게 멋있어 보였거든요. 그래서 css로 구현을 해보려고 합니다!! 오늘은 html 구조부터 살펴볼게요. 1. 미리 보기 ① 효과 이해하기 - 마우스를 올렸을 때 표시된 저부분이 한 번에 나타나는 것이 아니라 - 왼쪽에서부터 천천히 오른쪽으로 그려져서 테두리를 그리는 효과를 만들 거예요. http://ssimplay.com/ SSIMPLAY ssimplay.com 실제 적용 모습은 포트폴리오 사이트에서 확인해주세요. 2. html 구조 생각하기 설명하기에 앞서 이 모든 내용은 제가 했던 방법을 알려드리는 것으로 정답이 아니라 ..
html에서 jQuery를 불러와보자
jQuery 카테고리로 할까 고민을 했었지만, html에서 해야 하는 문제라 html 카테고리에 넣었습니다. 1. cdn [coding/jQuery] - [jQuery] 제이쿼리 가져오기 [jQuery] 제이쿼리 가져오기 안녕하세요. 플입니다. 오늘은 제이쿼리 스크립트를 가져와볼게요. 1. jQuery CDN https://code.jquery.com/ jQuery CDN The integrity and crossorigin attributes are used for Subresource Integrity (SRI).. ssimplay.tistory.com ① CDN 가져오기 - 일단 제이쿼리를 사용하기 위해서는 제이쿼리cdn을 설치하거나 불러와야 합니다. - 이 방법은 예전에 포스팅한 적이 있으니까 그..
