Hexion Lab Design

버튼 hover 시 스타일 & 애니메이션 효과 주는법 ! ( + slide up 및 그라데이션 효과 )   마우스를 요소 위로 올리면 배경색상과 폰트색상이 변화되는 효과를 알아보자 단순한 배경색상 변화는 기본적이니 그라데이션 효과도 주자!! html 구조 자세히 보기 안내받기   1. 변화를 줄 요소에 전환 효과를 설정합니다.  .sct08-btn>button { transition: .4s all;}.4s  :전환시간 0.4초all  : 모든 속성에 대해 효과적용 해당 요소에 변화가 일어나면 0.4초동안 모든 속성에 대해 부드러운 전환 효과가 적용된다!  2. hover 효과를 설정합니다.  background: linear-gradient(to bottom, transparent 50%, #ee..

CSS 단위 % 부모요소의 영향을 받는다 em 부모 요소의 폰트 사이즈의 몇배 인지 (상위폰트사이즈 * 현재폰트사이즈) ex) 부모 요소의 폰트사이즈가 24px 현재 요소의 폰트 사이즈를 20em 지정 실질적으로 20em = 480 (24*20) px rem 최상위 폰트사이즈 기준 = html 속성의 값 ex) html font-size : 16px 현재 요소 fon-size : 20rem 실질적으로 20rem = 320(16 * 20) px padding에 8px을 준다 -> padding:0.5rem 언제 씀? 각각의 요소에 rem으로 값을 지정해주었으니까 html 요소의 값만 변경하면 모바일 변환할 때 편하다 vw , vh v = viewport의 약자 뷰포트가 기준 20% -> 부모요소(패딩값 포..

[CSS ]한눈에 정리! Position 속성 완벽 가이드 position 문서상에 요소를 배치하는 방법 지정1. static기본값left,top,right,bottom 값을 지정해도 영향을 받지않음 정적임2. relative자기자신 기준3. absolute부모 요소 기준4. fixed뷰포트 기준스크롤을 내려도 고정된다보통 헤더나 팝업 메뉴 등에 사용한다모든 박스에 position과 left:60px 지정부모요소에 padding 값을 20px 지정했음 (초록색이 positon박스를 담고 있는 부모요소의 padding 영역)이 padding깂은 position absolute의 기준이 아님absolute의 기준은 부모 요소의 시작점임

[CSS]  텍스트 가운데 정렬하는 법!  div의 display는 block입니다  (1)div의 크기를 width:550pxheight:50px으로 지정해줬어요여기서 heigth(높이)를 기억해주세요(2)가로정렬 text-align : center; text-align 속성은 텍스트의 정렬 방향을 의미합니다.  (3)가로정렬을 해줬으면 세로정렬을 해줘야겠죠 주의할점은 line-height의 값을 내가 지정한 height의 값과 동일하게 지정해줍니다.  세로정렬line-height:50px; line-height는 줄 간격을 조정합니다. (줄의 높이를 지정)   !!line-height는 줄간격을 조정하기 때문에텍스트의 줄이 늘어나면 지정한 행간만큼 다음줄에 입력되는 대참사가 발생한다... 일단 급하게..

[CSS] box-sizing 속성 완벽 정리! 개념부터 활용법까지   border-box : 테두리를 기준으로 크기를 정합니다.                 레이아웃을 짤 때, 수치나 퍼센트로 정확하게 코드로 구현하기 쉬워짐    html { background-color: black;}.item-list { position: relative; border: 2px solid #004fff; background-color: #ddd;}.item { width: 50%; margin: 20px; padding: 30px; border: 1px solid blue; text-align: center; background-color: #fff; tr..

[CSS] margin/ padding/ border 쉬운 이해 !   Padding 까지 content의 넓이 (border의 두께까지 content의 넓이를 포함) margin 컨텐츠 넓이 x 다른 컨텐츠와 사이 간격         .item { /* width: 80px; */ margin: 20px; padding: 30px; border: 1px solid blue; text-align: center;}html { margin: 100px;}   box간 간격의 위해 box2의 margin-top 조정.item { /* width: 80px; */ margin: 20px; padding: 30px; border: 1px solid blue; ..

커서 올리면 메뉴 스르륵 보이기 - css 반응형 사이드바, 드롭다운 메뉴 - https://shj0318.tistory.com/m/44 커서 올리면 메뉴 스르륵 보이기 - css 반응형 사이드바, 드롭다운 메뉴 마우스 커서 올리면 메뉴 스르륵 보이기 - 반응형 사이드 바, 드롭다운 메뉴 저번에 포스팅한게 형편없어서 다시 정리해서 올림 1. 메뉴(ul)와 서브메뉴(ul)의 li에 inline-block으로 가로정렬해주기 ul shj0318.tistory.com 더 알기쉽게 정리한 글입니다 클릭해서 저 글을 봐주세용 … 😃 //검은테두리 //빨간테두리 목표) SHOP에 마우스 커서를 갖다대면 SHOP 밑에서 하위메뉴 박스가 오른쪽 방향 -> 으로 스르륵 열리게 하기 시도) 1. 메인 메뉴바를 감싸고 있는 ..