분류 전체보기41 [CSS]Container-query :객체 사이즈에 따라 css 적용하기 회사에서 새 프로젝트를 들어가는데, 웹 viewport 사이즈는 동일하나 객체의 크기에 따라서 글씨 크기를 조절할 일이 생겼다. 기존에는 자바스크립트를 사용하여 글씨 크기를 조절할 수 있었지만, 더욱 손쉬운 방법을 찾아보다가 container-query라는 것을 알게 되었다. 기존 media 쿼리는 윈도우 창의 사이즈에 따라서 css가 개별로 적용되는 방법이었다면, 이번의 container 쿼리는 객체 사이즈에 따라서 개별로 css를 적용할 수 있는 방법이다. 사용방법은 아래와 같다. I'm child html에 컨테이너 쿼리 범위가 적용될 부모 객체를 설정한 후 자식 객체에 개별 css를 적용하면 된다. .container_parent{ container-type:inline-size; containe.. 2023. 3. 16. [html5] details, summary 태그 - 웹 컨텐츠를 펼쳤다/접었다하기 사실 제목과 달리 웹 페이지 컨텐츠를 펼쳤다, 접었다 하는 일은 많이 없지만 아코디언으로 응용이 가능하기 때문에 나중에 포트폴리오 작성시 응용해보고자 기록한다. 별도의 CSS나 JS는 필요없이 클릭으로 컨텐츠를 숨겼다가 나타나게 할 수 있다. 사용방법: HTML 삽입 미리보기할 수 없는 소스 html에 위 내용처럼 작성하면 간단하게 사용이 가능하다. See the Pen Details & Summary by SIONS2 (@SIONS2) on CodePen. 2023. 3. 15. CSS:is - 중복된 선택을 줄일 수 있는 선택자 코드가 길게 늘어지다보면 지저분한것도 더불어 가독성도 매우 떨어져서 보고 싶지 않다. 하지만 is를 사용하면 매우 간단하게 코드 표현이 가능하다. See the Pen CSS:is by SIONS2 (@SIONS2) on CodePen. 찾다보니 is와 더불어 where이라는 가상 선택자도 있는 것 같다. 2023. 1. 30. 서버 배포시 이미지 액박 오류 해결 - 22.03.23일 예전에 포트폴리오 준비중 컴퓨터에 저장된 인덱스 파일을 열어서 확인하면 오류가 나지 않는데, 닷홈에 업로드해서 확인하면 사진 액박 오류가 생겼다. 위 오류 X , 아래 이미지 액박 오류 처음에는 닷홈 문제인줄 알고 이것 저것 알아보고, 이미지 경로 문제인가 싶어서 경로도 바꿔서 해봤지만 고쳐지지 않았다. 그러던 도중 이유를 발견했는데, 왜 이렇게 저장했을까 진짜...? 바로 이미지가 확장명이 대소문자가 구분되어 오류가 났던 것. jpg로 저장돼 있으면 문제가 생기지 않았지만, JPG로 저장돼있으면 업로드한 페이지에서 문제가 생겼다... 소문자나 대문자의 차이가 있어도 index파일을 크롬으로 그냥 열면 사진이 보였지만 서버 배포에서는 오류가 났었나보다. html에 ./img/pic... 2023. 1. 30. [CSS]특정 클래스 혹은 특정 요소가 있는 요소 선택 코드를 작성할 때 특정 클래스나 특정 요소가 있는 요소만 선택할 때는 스크립트를 사용하거나 해당 부모에 클래스를 따로 주어 커스텀css를 적용했다. 하지만 css코드가 많아지면 나중에 가독성이 굉장히 떨어지거나 코드 관리가 어려워져서 스크립트를 이용해서 css를 준적도 있지만 이 방법도 코드가 복잡해지고 가독성이 떨어져 지저분하다고 느껴졌다. 하지만 최근에 크롬 정식버전이 업데이트 되면서 적용이 가능해졌다. 하단의 방법으로 코드를 작성하면 된다. class를 주고 싶을 땐 부모요소:has(.class) 방법으로 사용하며 이 방식을 응용하여 태그나 ID를 적용해도 된다. See the Pen Untitled by SIONS2 (@SIONS2) on CodePen. 2023. 1. 30. 이전 1 ··· 4 5 6 7 다음
