개발/CSS9 이미지에 커서 올렸을 때 커지게 하기 이미지에 커서를 올렸을 때 이미지의 크기가 적당한 크기로 커졌으면 했다. 아주 쉬운 코드이지만 다음에 기억이 안 날 것 같아서 정리를 보았다. transition을 사용해서 이미지가 변경되면 0.3초에 걸쳐서 서서히 변화하도록 하였다. img:hover로 img에 마우스가 올라가면 transform: scale(1.1); 기존 크기보다 1.1배 커지도록 하였다. .img { transition: transform 0.3s ease; } .img:hover { transform: scale(1.1); } 적용된 코드 이미지에 마우스를 올려보세요! 개발/CSS 2024. 3. 29. 마진 넣으면 부모박스를 넘어버리는 현상 댓글페이지를 만들고있는데 대댓글부분에서 width:100%를 해버리면 부모에서 max-width: 500px를 해둔것을 넘어버리는 현상이 생겼다. 부모의 width는 가뿐히 무시해 버린다. 원인 %는 상대값이기 때문에 부모의 width를 가져온다. 부모의 width는 500px이기때문에 대댓글도 width를 500px를 가지고 margin값도 가지고 있기 때문에 박스를 넘어버린것이다. 해결 대댓글 width: calc(100% - 4.375rem)를 넣어버렸다. 100%는 부모의 width, 4.375rem은 내가 넣은 마진값이다. 그러면 박스에 딱 맞는 width가 완성된다. width: -webkit-fill-available; 이걸 넣어도 해결됐는데 chatGPT는 이건 크롬이나 사파리에서만 적용이.. 개발/CSS 2023. 10. 16. 요소 크기의 단위와 rem을 사용하는 이유 프로젝트를 진행하면서 px보다 rem을 사용하는 게 좋다는 말은 들었는데 그 이유를 제대로 알지 못하여서 블로그를 작성하게 되었다. 1. 요소 크기의 단위 현실에서 cm, mm, inch, yard가 있듯이, css에서 사용하는 대표적인 크기 단위는 px, em, % 이다. px는 절댓값이고 rem, em, %는 상대값이다. 대부분의 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%로 설정되어 있다. 1) px (픽셀) px은 픽셀(화소) 단위이다. 1px은 화소 1개의 크기를 의미한다. 모니터의 해상도가 1600 * 900이라면 가로 1600개의 픽셀과 세로 900개의 픽셀을 가진다는 의미이다. 하지만 같은 사진이라면 모니터의 해상도가 1600*900인 것과 1920*1080인 것에 따라서 .. 개발/CSS 2023. 9. 29. SASS 초기에 프로젝트를 진행하면서 sass라는 것은 들어봤는데 정확히 무엇인지 몰라서 아주 아주 간단하게 정리해보았다. 나는 JS랑 같이 사용할 수 있는 styled component를 선호하긴한다. SASS 사용법 vscode extension에서 Live Sass compiler를 설치한다. (5.0.0 버전이상) 그럼 하단에 Watching 또는 Watch Sass라는 글이 뜬다. .scss 파일을 만들면 알아서 .css파일로 만들어준다. (.sass파일로도 만들 수 있는데 안 좋다.) html에서 link연결은 .css파일로 연결하면 된다. SASS 기능들 1). 값을 저장해놓고 쓰는 '변수' 프로젝트를 진행하면서 공통적으로 사용해야하는 색, 크기와 같은 스타일들을 있는데 이를 변수로 저장해서 사용할 .. 개발/CSS 2023. 6. 25. animation 속성들 transition속성으로 Animation 구현 단순한 애니메이션을 구현할 때 Transition 속성을 이용해서 구현한다. 아래의 스탭에 따라 애니메이션을 구현한다. 1. 시작스타일 정하기 2. 최종스타일 정하기 3. 언제 최종스타일로 변할지 트리거 주기 (대부분 마우스 올렸을 때임) 4. transition 으로 서서히 동작하게 만들기 transition-delay: 1s; /* 시작 전 딜레이 */ transition-duration: 0.5s; /* transition 작동 속도 */ transition-property: opacity; /* 어떤 속성에 transition 입힐건지 */ transition-timing-function: ease-in; /* 동작 속도 그래프조정 */ 예시 .b.. 개발/CSS 2023. 6. 25. 미디어쿼리 미디어쿼리(Media Query)란? 조건에 따라서 스타일을 적용하고 싶을때 사용한다. @media로 시작하는 미디어 쿼리의 기본적인 문법 구조는 아래와 같다. /* css파일 */ @media (조건) { 스타일 } 조건에 맞으면 스타일이 적용된다. 미디어 쿼리 타입 여러가지 미디어 쿼리 타입이 있지만 대체로 이 4가지만 사용된다. all : 기본값. 모든 미디어 장치에 사용 됨 print : 프린터에 사용 screen : 컴퓨터 스크린, 테블릿, 스마트폰 등 speech : 페이지를 읽어주는 화면 낭독기 /* 일반 화면(screen)과 인쇄장치 별로 서로 다른 style을 지정하는 예 */ @media screen { * { color: red; } } @media print { * { color: .. 개발/CSS 2023. 6. 22. Pseudo-class 셀렉터 :pseudo-class Pseudo-class 셀렉터 상태에 따라서 스타일을 줄 수 있는 셀렉터를 말한다. .btn:hover { background : chocolate; /*마우스를 올려놓을 때*/ } .btn:focus { background : red; /*클릭 후 계속 포커스 상태일 때*/ } .btn:active { background : brown; /*클릭 중일 때*/ } /* hover, focus, active 스타일 넣을 때 순서는 꼭 이렇게 선언해야 잘 작동한다. */ :any-link /*방문 전, 방문 후 링크 한번에 선택할 때*/ :playing /*동영상, 음성이 재생중일 때*/ :paused /*동영상, 음성이 정지시*/ :autofill /*input의 자동채우기 스타일.. 개발/CSS 2023. 6. 22. Bootstrap 개념과 세팅 Bootstrap이란 웹페이지에 필요한 버튼, 메뉴, 탭, 모달, 카드 등 필수 요소들을 모아놓은 일종의 CSS파일이다. 이걸 사용하면 편하게 복붙해서 CSS개발이 가능하다. Bootstrap 강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기 getbootstrap.kr 사이트에 들어가서 npm install을 하거나 HTML 파일에 첨부하면 된다. 사용법 컴포넌트 사이트에 들어가서 버전을 확인 후에 문서 탭에 들어가서 복붙해서 사용하면 된다. 예를들어 버튼을 만들고자 할 때 버튼을 검색해서 맘에 드는 버튼이 있으면 아래 코드를 복붙하면 사용.. 개발/CSS 2023. 6. 19. CSS 선택자(Selectors) 문법 기본 선택자 결합 선택자 요소간의 계층 관계를 결합하여 특정 요소나 하위 요소를 선택한다. 일치 선택자 E와 F를 동시에 만족하는 요소 선택 #EF{ margin: 0 auto; width: 1080px; } 자식 선택자 E의 자식 요소 F를 선택 #E>F{ margin: 0 auto; width: 1080px; } 자손 선택자 E의 자손(자식,손자, 등등 안에 있는 모든 태그들) 요소 F를 선택. 자식은 자손에 포함되어있다. 그러므로 자식 선택자를 E F로 써도 가능 #E F{ margin: 0 auto; width: 1080px; } 동위 선택자 동위 관계란 HTML 요소의 계층 구조에서 같은 부모 요소를 가지고 있는 요소들을 의미한다. 이러한 동위 관계에 있는 요소들을 형제(sibling) 요소라고.. 개발/CSS 2023. 6. 10. 이전 1 다음
