꺾이지 않는 마음

원티드 웹 사이트를 클론코딩하는 도중에 버튼 클릭 효과를 까먹어서 정리하게 되었다. 내가 구현하고 싶은 영역은 위의 버튼이 나열된 슬라이드이다. 수많은 버튼 중 클릭한 버튼만 파란색으로 저렇게 강조효과를 주고 싶다. 이렇게 클릭한 버튼과 클릭하지 않은 버튼의 스타일에 차이를 두고 싶을 때 가상선택자를 사용한다. 버튼에 주로 쓰는 가상 선택자는 :hover, :focus, :active 등이 있는데, :hover는 마우스를 대상에 올려놨을 때, :focus는 클릭하고 난 후, :active는 클릭하는 도중을 지정한다. 우선 해당 스타일을 적용하기 위해 버튼을 만들어 보았다. 슬라이드 내에 여러 버튼을 나열할 거기 때문에 'react-slick'이라는 라이브러리를 활용하고, 현재 활용 연습중인 'compon..

웹 페이지에 아이콘을 삽입하는 방법에는 여러 가지가 있다. 구글 material-icons를 활용하는 방법도 있고, jpg, png 등 여러 형식의 이미지 파일을 활용하는 방법도 있다. 본 포스팅에서는 그중 웹 디자인 영역에서 가장 각광 받는 SVG 파일을 활용해보고자 한다. 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. 개인적으로 학습하면서 이번에 SVG 파일을 아이콘으로 HTML 내에 삽입하게 되었는데, 예전에 사용했던 구글 material-icons 활용 방식 보다 훨씬 편리..

오늘 실무에서 자주 쓰이는 유용한 CSS 스킬을 하나 배웠다! 바로 요소를 영역 내에서 중앙에 고정하는 방법이다. position과 margin, calc() 함수를 사용하면 쉽게 할 수 있다. 순서는 다음과 같다. 1. 중앙 배치할 요소에 position: absolute; 를 주고, 부모 요소에게 position: relative를 준다. (부모 요소 안에서 독립적으로 포지셔닝을 하기 위함) 2. 중앙 배치할 요소에 left: 50%; 를 준다. (부모 영역 가로의 정 중앙 위치에서부터 콘텐츠가 배치된다.) 3. 중앙 배치할 요소에 margin-left: (요소의 가로 길이 / -2); 를 준다. (중앙 배치할 요소도 자체의 가로 길이를 가지기 때문에 2번 과정을 통해 정 중앙에서 요소가 시작되도록..

(블로그를 이전하면서 3~14일차 글이 날아갔음을 알립니다.. 고로 15일차부터 티스토리에 작성) 3주차에는 travel page 만들기를 시작하였다. 애니메이션이나 트랜지션 같은 비교적 복잡한 기능은 넣지 않았고, 기본적인 HTML&CSS 개념을 가지고 간단한 정적 페이지를 만드는 과정이다. 본 과정에서는 문서 HTML 기본 구조 및 스타일링 방법을 익히고, 더 나아가 시멘틱 짜는 연습 + 포지션 속성에 대한 이해가 중점이 되는 것 같다. #1. 시멘틱 태그로 전체 구조 짜기 웹 페이지를 제작할 때 가장 먼저 해야할 것은 시멘틱 요소로 전체 틀을 짜는 것이다. 실질적인 내용이 들어가는 태그 영역 안에서 구조화하며, , , 의 3단 구조가 가장 기초적인 틀이라고 할 수 있다. 이 태그들은 실질적인 의미..

[CSS] Flex 속성 알아보기 2 - Flex-grow [CSS] Flex 속성 알아보기 1 CSS에서 레이아웃 하면 빠질 수 없는 두 가지 개념이 있다. 바로 'Flex'와 'Grid'이다. float도 한 때 자주 쓰였으나 flex와 gird의 등장으로 float는 특정 상황이 아니면 거의 쓰지 i-do-dream.tistory.com flex-shrink는 flex-grow와 더불어 유연한 레이아웃을 가능케 하는 중요 속성이다. 지난 포스팅에 이어 이번에는 flex-shrink 속성에 대해 알아보자. #1. flex-shrink flex-grow가 컨테이너 내부 여백을 어떻게 처리할 지에 관한 속성이라면, flex-shrink는 item들이 컨테이너의 영역 크기를 초과했을 때 어떤 비율로 각 요..

#1 '웹개발'이란? 말 그대로 웹페이지를 만드는 것이다. #2 작동원리 우리는 보통 웹 사이트를 방문하기 위해서는 컴퓨터나 노트북으로 브라우저를 이용한다. 브라우저 주소창에 특정 주소를 입력하거나, 포털사이트 검색 결과로 나온 링크를 클릭하면 브라우저가 그 기업의 컴퓨터에 방문하겠다는 요청을 보낸다. 이 요청을 보낼 때 쓰는 표준화된 방식이 'HTTP' 혹은 'HTTPS'(Hypertext Transfer Protocol Secure)이며, 컴퓨터는 사용자에게 보여줄 웹페이지 화면을 나타내는 웹사이트 코드를 브라우저에게 보냄으로써 이에 응답한다. 즉, 웹 개발자란 어떤 코드로,' 어떤 프로그래밍 언어로 응답을 보낼 코드를 작성해야 할까'를 고민하는 것이라고 사람이라고 할 수 있다. 물론, 이건 매우 축..

[CSS] Flex 속성 알아보기 1 CSS에서 레이아웃 하면 빠질 수 없는 두 가지 개념이 있다. 바로 'Flex'와 'Grid'이다. float도 한 때 자주 쓰였으나 flex와 gird의 등장으로 float는 특정 상황이 아니면 거의 쓰지 않는다. flex와 grid가 훨 i-do-dream.tistory.com 지난 포스트에 이어서 이번에는 Flex items에게 주는 속성들을 정리해 보았다. justify-content, flex-flow, flex-wrap 등이 부모 요소인 Flex container에게 주는 속성이라면, 이번에 정리한 속성은 그 자식 요소인 item들 즉, 정렬되는 요소 자체에게 지정해서 사용하는 속성이다. 예시를 들기 위해 Flex container를 하나 만들어 보았다. ..

CSS에서 레이아웃 하면 빠질 수 없는 두 가지 개념이 있다. 바로 'Flex'와 'Grid'이다. float도 한 때 자주 쓰였으나 flex와 gird의 등장으로 float는 특정 상황이 아니면 거의 쓰지 않는다. flex와 grid가 훨씬 편하고 정교한 작업을 할 수 있기 때문이다. 이 둘의 차이점이라면 gird가 좀 더 정교한 작업을 할 수 있다는 거? flex는 1차원 레이아웃(수평과 수직 중 한 방향) 개념이고, grid는 2차원 레이아웃(수평과 수직 양 방향) 개념이다. 고로 좀 더 정교한 작업을 하려면 grid가 더 적합하다. 하지만 flex로도 충분히 괜찮은 레이아웃을 구현할 수 있기 때문에 현업에서는 상황에 맞게끔 둘 다 골고루 쓰이고 있다. 그래서 오늘은 flex 속성에 대해 정리해보았..