오늘은 저번 시간에 잠깐 나왔던 가운데 정렬에 대해서 제가 주로 쓰는 방법을 소개합니다!! 순서는 1) 글씨 가운데 정렬, 2) flex 가운데 정렬, 3) tranform 가운데 정렬 이렇게 보도록 할게요~! 각각 써야할 순간이 정해져있는? 느낌이라 유용하게 사용할 수 있을거에요! 1. 글씨 가운데 정렬 제목!!! 기본적으로 위와 같이 쓴다면 좌측부터 글이 작성될텐데 글씨를 가운데 정렬하기 위해선 css를 아래처럼 해주면 돼요! .header { text-align: center } 이렇게 정렬되는 모습을 볼 수 있어요!! 하지만, 글씨가 아닌 영역이라면 위와 같은 방법으로는 가운데 정렬이 안돼요 영억1 영역2 // module.css .header { text-align: center; } .box ..

저번 시간에 마무리로 밑줄이 채워지는 bar 인터랙션을 알아보려해요~! 영상은 아래 링크에서 참고해주시면 감사하겠습니다..!(블로그 이전하면서 옮기고 있어요..!) https://blog.naver.com/glory4god/222663114305 순서는 버튼에 커서를 올렸을 때(나중엔 메뉴1, 또는 메뉴2를 선택한다면 charging 되도록!!) 좌측에서 우측으로 bar가 채워지도록 만드는 과정이죠!! 일단 배운 after, before 둘 중 하나의 가상선택자를 사용하여, width를 0으로 놓은 후에, hover시에 width가 100%가 되도록 한다면 완성이 될 듯 하죠??! 위의 버튼 구조에서 아래처럼 css 설정해보도록 할게요 .wrap { position: relative; } .wrap::a..

이번 시간에는 box-shadow를 통해 정말 간단하지만 버튼 active 상태를 유저에게 확실하게 제공할 수 있는 효과에 대해서 알아보도록 할게요! 요새 CSS 관련 글을 작성할 때 마다 내가 고민하며 구현했던 것들을 나눌 수 있다는게 즐거워요ㅠㅠㅠ CSS 너무 재밌는 것,,,,,,,, 이제 본론으로 가보도록 하겠습니다! 오늘도 결과를 먼저 보여드리자면 메뉴 1 버튼을 보시면 왼쪽부터 기본 / hover / active 상태입니다! 확실히 hover일 때는 올려놓은 듯하게, active 상태일 때는 마우스로 누르고 있는 것 처럼 느껴지죠?? 이런게 UI/UX이지 않을까 싶습니닿ㅎㅎㅎㅎ 먼저 box-shadow를 통해 얻을 수 있는 효과를 살짝 설명하자면, 태그의 영역에 그림자효과를 주어 박스 형태가 있..

드디어! 마무리 할 시간이 왔습니다! 오늘은 마지막으로 selected 상태를 다루는 과정을 알아보려해요! selected상태일 땐, 아래 사진과 같이 글씨 상단에 노란 점을 찍어보려하는데요! 지난 시간에 after before를 사용해봤는데 이거.. 안해봤겠죠?? ​ 그래서! 오늘은 '어떤식으로 만들기 위해 접근할까'라는 생각을 갖고, 접근 방식을 보려해요! ​ 글씨위에 점이 생기네?? (새로운 tag를 만들고, selected일 때만 tag를 보이게 해야하나..?) 이렇게 생각할 수 있지만 오늘은 가상 요소 선택자의 before 사용하여 다뤄보려해요! ​ 1. before를 만들어, absolute로 top:0에 left : 50% 를 주면 가운데에 생기겠지??? 먼저 위와 같이 만약 selected..

이전 시간에 다뤘던 hover, active에 이어 버튼의 se lected 상태 적용할 인터랙션을 알아볼게요! 그전에 간단하게 오늘 다룰 내용을 좀 알아보도록 할텐데 딱 두가지가 중요합니다! 첫번째는 선택한 상태를 나타내도록 useState ReactHook을 알아야하구요! 물론 useState를 안쓰고도 충분히 가능하긴해요~! 두번째는 CSS 지식인, after before를 활용한 가상 요소 선택자를 알아야합니다! 일단 CSS를 알아가는 과정이니 가상 요소 선택자인 after와 before 위주로 알아볼게요! before selector라고 검색을 해보면 이렇게 정의를 하고 있습니다! The ::before selector inserts something before the content of ea..

오늘은 버튼하나도 좀 더 다양한 모션을 줄 수 있는 방법을 나눠보려해요! 이미지로 아래의 Navbar 버튼 4가지 케이스를 가져와봤는데요! (그냥 만든것이니,,, 디자인 측면의 색상 조절 같은 부분은... 알아서 해주세요ㅠㅠ!) CSS 기술만 참고!!! 기본상태 hover상태 - 마우스 올려놓은 상태 active상태 - 마우스를 클릭하고 있는 상태 selected상태 - 눌러서 선택된 상태 일단 오늘은 hover와 active를 다룬 후, 다음 시간엔 selected 상태의 위의 점 찍은 형태를 만드는 방법에 대해 알아보도록 하겠습니당. 마지막의 selected에 주는 액션은 좀 어려운 기술도 들어가기에 다음 글에 이어서 쓰도록 하지요! ㅎㅎ 영상으로 살짝 공유하자면 이런식으로 작동해요! 먼저 위의 Li..

최근 회사 업무 중 하나인 회사 소개 홈페이지의 리뉴얼!!! 소개 페이지이다보니 데이터를 다루며 표출하는 기술보다는 CSS와 자바스크립트를 이용한 인터랙션 디자인이 주된 업무가 됐어요..! (물론, 이것뿐 아니라 커머스 백오피스 개발도 있기에 극과 극의 업무를 ,,,,, 해요,,, 갈리는 소리가 들리시나요......) 적당한 CSS는 할 줄 알았지만 이정도로 CSS를 통해 다양한 애니메이션, 시각적 효과를 줄 수 있다는게 너무 신기해서 여러가지 CSS 기술을 포스팅하려 해요!!ㅎㅎㅎㅎ 첫번째로 다룰 내용은, 디자인 시안을 받은 후 우리가 해야할 작업에 가까워요! 모든 디자인엔 메인 컬러들이 있습니다. 메인컬러는 정말 많이 쓰이는 컬러니깐 자주 쓰이겠죠?? 여기서 잠깐, 만약에 메인컬러를 20군데에 사용했..