함께 성장하는 프로독학러

안녕하세요, 프로독학러입니다. 이번 포스팅에서는 CSS 를 이용하여 어플리케이션 뷰의 header 와 footer 를 스크롤 바와 상관없이 고정시키는 방법에 대해서 알아보도록 하겠습니다. 실습을 위해 codepen.io 에 접속하여 새로운 pen을 만들어 봅시다. 1. HTML 먼저 HTML 영역에 다음과 같이 HTML 태그를 입력해 줍니다. 12345678910111213 This is Header This is Section This is Footer cs 시멘틱 태그를 이용하여 header, section, footer 를 지정했습니다. 현재는 위 그림과 같습니다. 2. CSS style 그럼 header 태그를 CSS 스타일을 이용하여 고정시켜 보겠습니다. 이때 사용하는 스타일은 position ..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 CSS 애니메이션과 @keyframes 에 대해서 알아보도록 하겠습니다. 1. @keyframes @keyframes 는 CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법입니다. @keyframes 를 사용하기 위해선 세 가지가 필요합니다. animation-name : 사용자가 직접 지정한 이름, @keyframes 가 적용될 애니메이션의 이름 스테이지 : from - to 로 0~100% 의 구간 CSS 스타일 : 각 스테이지(구간)에 적용시킬 스타일 코드를 통해 살펴보도록 하겠습니다. 12345678@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; }}cs 위..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 CSS 의 레이아웃을 위한 도구 중 하나인 flex 에 대해서 알아보도록 하겠습니다. * 본 포스팅의 내용은 생활코딩의 flex 강의를 복습한 내용입니다. 생활코딩에서 직접 강의를 수강하고 싶으신 분들은 아래의 링크를 참조해 주세요https://opentutorials.org/course/2418/13526 이전에는, flex 가 생기기 이전에는 레이아웃을 만들기 위해 table 을 사용하거나, position, float 등을 이용했습니다. 물론 위의 방법들을 통해서도 원하는 레이아웃을 만들 수 있지만, 이는 원래의 목적에 반하는 코딩을 하는 것이었습니다. table 은 표를 위한 도구이며, 이는 정보를 의미합니다. 정보를 위해 만들어진 도구를 디자인에..