최근 회사 업무 중 하나인 회사 소개 홈페이지의 리뉴얼!!!
소개 페이지이다보니 데이터를 다루며 표출하는 기술보다는 CSS와 자바스크립트를 이용한 인터랙션 디자인이 주된 업무가 됐어요..!
(물론, 이것뿐 아니라 커머스 백오피스 개발도 있기에 극과 극의 업무를 ,,,,, 해요,,, 갈리는 소리가 들리시나요......)
적당한 CSS는 할 줄 알았지만 이정도로 CSS를 통해 다양한 애니메이션, 시각적 효과를 줄 수 있다는게 너무 신기해서 여러가지 CSS 기술을 포스팅하려 해요!!ㅎㅎㅎㅎ
첫번째로 다룰 내용은, 디자인 시안을 받은 후 우리가 해야할 작업에 가까워요!
모든 디자인엔 메인 컬러들이 있습니다. 메인컬러는 정말 많이 쓰이는 컬러니깐 자주 쓰이겠죠??
여기서 잠깐, 만약에 메인컬러를 20군데에 사용했는데 ...... 메인컬러를 바꾸자고하면 20군데를 다 돌아다니면서 바꾸실껀가요????!
이건 마치 Footer나 Navbar를 전체 app의 공통요소로 묶어놓지않고, 페이지마다 Navbar와 Footer를 만들어놓는거랑 같은 행동이니 개고생에 시작이... 돼요
그렇기때문에! CSS도 변수를 사용합니다!
이렇게 생긴 박스의 경력 색을 지정하기위해선 color : blue; 이렇게 CSS를 적용하지요!
하지만 이 부분을 다루기 위해 globalcss 를 적용하는 곳에 다음과 같은 방법으로 해봅시다!
:root {
--main-green-color: green;
--main-blue-color : blue;
--main-red-color : red;
}그리고 다시 컬러를 적용할 곳에 아래처럼 변수를 설정해볼까요?
.title {
color: var(--main-green-color);
}
그러면 내가 미리 설정해놓은 색으로 바로 변하게 됩니다!
이건 컬러뿐만 아니라 아래처럼 font-size도 설정해놓고 사용한다면 똑같은 크기를 사용하는 곳을 동시에 다룰 수 있게 됩니다!
:root {
--font-header : 56px;
--font-subHeader : 32px;
}
반응형 웹을 개발하기 시작하며 곰곰히 생각해보니, 이렇게 지정해놓고 해야지 반응형 디자인도 쉬워진다는 것을 알 수 있게 되었죠...
다음번에는 반응형에서 변수를 사용하면 이점에 대해서 알아보도록 하겠습니다!
다음 포스팅은 FE Developer - CSS, 퍼블리싱 적당히는 알자(2) : CSS 변수를 활용한 반응형 웹 개발