CSS 기초
- CSS는 HTML에 종속된 스타일 시트임. 브라우저에서 마크업 언어가 어떻게 표현됐으면 좋겠는지를 기술하는 언어.
- margin은 카드 사이의 경계를, padding은 카드 내의 경계를 구분함.
- 콘텐츠 100px에 padding 100px이면 파일 사이즈는 200px임.
- 선택자는 class, id, tag가 있음. 그 중 id는 맨 아래 것 하나만 인식함.
display
display 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께 flow, grid, flex처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정함.
- block : 남는 공간에 가로만큼 차지함. 높이는 콘텐츠 크기만큼.
- inline : 콘텐츠 크기만큼 차지함.
- inline-block : 요소는 inline이지만 내부는 block처럼 표시함. width, height 변경 가능.
- none : 공간을 차지하지 않음.
- grid : 페이지를 여러 주요 영역으로 나누는 데 탁월함.
- flex : 하나의 flex time이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성.
float
float은 한 요소가 normal flow로부터 빠져 텍스트 및 inline 요소가 그 주위를 감싸는 컨테이너의 좌우측을 따라 배치되어야 함을 지정.
요즘은 이미지와 텍스트 외에 표현할 요소가 많아 자주 사용하지 않음. 다만 정부기관 등 익스플로어를 쓰는 유저를 대상으로 개발해야하는 경우 float이 유용할 수 있음.
CSS 라이브러리
지브리 검색 프로젝트 CSS 작성
📑 결과 보기
목표
지브리 애니메이션을 검색할 수 있는 사이트를 기획함.
index.html
지브리 포뇨의 메인 화면.
- nav, figure, footer 태그를 이용하여 시멘틱하게 작성.
- CSS를 components와 variables로 나누어 CSS 템플릿화.
- width : 100% 시 부모를 기준으로 너비 100% 지정. 보통 부모의 너비를 모두 사용하고 싶을 때 사용. 자신이 직접 크기를 지정하는 주체인 경우 제외.
- 네비게이션 바를 검/흰으로 변경하는 것보다 검정바로 심플하게 가기로 결정.
🤔 사진 나열보다 3D 느낌을 줄 수 있으면 좋겠음. 예시
login.html & signup.html
로그인과 회원가입을 함.
- 팝업창으로 기획함. 검정색 배경을 누르면 팝업창이 꺼질 수 있도록 설계함.
- input 태그와 hover 기능을 이용해 사용자가 입력하는 곳을 시각적으로 나타냄.
- 사용자 지정 속성으로 색상 템플릿화.
- 흰 부분(부모) 안에 요소를 같은 간격으로 채워넣음. 자식의 width, height를 100%로 지정.
- 초기엔 로그인과 회원가입 각각 CSS를 작성하려 했으나 스타일이 비슷해 register.css로 통일함.
🤔 JS를 이용하여 팝업창으로 만들 계획. 블러느낌도 좋음
search.html
지브리 애니메이션을 검색할 수 있는 곳.
- position : absolute와 relative로 검색바와 아이콘, 해시태그 위치를 정의함.
- 클릭했을 때, 마우스를 올렸을 때 시각적으로 볼 수 있도록 표현함.
- display : flex를 사용하여 콘텐츠를 배치함.
🤔 지브리 api를 받아 검색이 되도록 만들어야 함.
contents.html
검색된 애니메이션의 상세 페이지를 볼 수 있는 곳. 기본정보와 코멘트 그리고 다른 작품 추천을 볼 수 있음.
- object-fit : cover를 통해 화면에 맞게 배너 크기를 조절함.
- 균일한 좌우 여백 간격과 텍스트 크기를 지정하기 위해 클래스 별도 지정(text-bold, text-medium, text-sm, mg-LR-180).
- 메인 배너, 썸네일 및 작품 설명마다 구역을 나누고 일정한 간격으로 padding과 margin을 사용하여 나눔.
- 하단에 작품 모아보기 이미지는 components로 CSS를 만들어 재사용할 수 있도록 함.
🤔 스크롤 시 메인 사진의 깊이가 있었으면 좋겠음.
🤔 작품 모아보기 시 x축 스크롤 아이콘을 띄우고 싶음 (overflow-x로 임시 설정함).
event.html
네모 상자를 클릭하여 같은 애니메이션 그림을 찾는 카드 뒤집기 게임.
- display : grid를 이용하여 카드를 배치함.
- grid와 card-container의 크기를 정하고 그 자식은 width, height 100%로 지정 → 추후 카드 크기를 바꾸고 싶을 때 자식마다 조절할 필요없음.
- transform : rotate, 3d를 이용하여 카드를 뒤집었을 때 지정한 그림이 나오도록 함.
- flip-card-contaner가 hover 시 flip-card가 Y축으로 회전. 흰색 박스 전체를 가르키기 위함.
- flip card에 사용된 CSS 개념 * perspective - 원근법. 숫자가 커질수록 멀리서 보는 느낌을 줌 (3d 공간의 깊이). * transform-style : preserve-3d - 자식 요소를 2D 또는 3D에 배치할지를 결정. * backface-visibility : hidden - 뒤집어진 뒷면이 보여질지, 안보여질지를 결정.
🤔 같은 사진을 맞혔을 때 점수판이 올라가야 함.
🤔 시간 제한도 두면 좋겠음.
director.html
지브리 애니메이션 대표 감독, 대표작, 제작 과정을 소개함.
- 인물 소개 요소 중 바깥 핑크 배경의 높이를 정하면 이미지 크기와 상관없이 높이가 지정됨.
- 개요 요소는 display : grid를 사용하여 비율을 균등하게 분배함.
- 대표작 요소는 timeline의 position을 relative로, 이미지와 택스트의 position을 absolute로 지정 후 transform : translate으로 위치를 지정함.
- 이때 nth-child 선택자로 홀수와 짝수를 구분하여 위치를 지정함.
🤔 대표작(타임라인)의 경우 스크롤 시 사진이 하나씩 fade in 됐으면 좋겠음.
profile.html
프로필을 수정할 수 있는 페이지.
🤔 로그인 기능 구현 및 프로필, 이름을 수정할 수 있어야 함.
마치며
CSS는 비교적 익숙했기 때문에 제작에 큰 어려움은 없었다. 그래서 이번엔 코드를 얼마나 깔끔하게 구조적으로 작성하는지, SEO 관점에서 작성하는 법, JS를 위한 section 구분, 반응형 디자인 등에 신경을 썼다. 하지만 이 부분은 처음 시도해보는거라 아직 미숙하다고 생각한다. 다음은 제작하면서 생긴 궁금증이다.
🤔 재사용을 위한 템플릿화를 어느정도까지 해야하는 지 모르겠음. 일부만 같은 경우에도 템플릿화를 시켜야하는가?
🤔 custom CSS 템플릿을 HTML 태그에 나열하는 게 좋은 방식인가?