Develope/HTML, CSS7 가로, 세로 헤더 고정 테이블 - position:sticky 회사에서는 원래 테이블 헤더만 고정된 테이블을 사용했었는데, 최근 좌측 헤더 테이블도 고정 시켜 달라는 요구가 있었다. 하지만 구글에 검색해봐도 그런 형식의 테이블을 잘 사용하지 않는지 정보가 많이 없었다. ㅠㅠ 건진것은 오직 position:sticky 뿐.. 평소 relative, absolute,static 가끔 fixed만 사용해봤던지라 처음 보는 css였다. 찾아보니 relative, absolute와 fixed 사이의 css효과라고 느껴졌다. 다양한 position 효과 relative 영역의 부모 absolute 영역의 자식, top과 left등으로 객체의 위치를 지정한다. 스크롤 시 위치가 변한다. fixed relative 영역의 영향을 받지 않고 브라우저의 영역에 영향을 받는다. top.. 2023. 12. 15. Scrollbar custom css 프로젝트를 하다보면 처음 일을 하지 않을 때는 생각하지 못했던 디테일도 챙겨야 하는 일이 많이 생긴다. 나에게는 스크롤바가 위와 같은 케이스였다. 글들을 찾다 보면 ::webkit-scrollbar ~ thumb, track은 많이 보여서 쉽게 적용할 수 있었는데, 내 서치 능력이 부족한거 였겠지만 아무리 track으로 스크롤바 배경색을 바꿔도 저기 빨간 동그라미 영역이 바뀌지 않아서 헤맨적이 있었다. 각 css를 간단하게 설명하고 넘어가자면 기본형인 ::-webkit-scrollbar는 스크롤바의 영역 사이즈를 지정할 때 자주 사용하고, ::-webkit-scrollbar-track은 스크롤 영역 배경색을 지정할 때, ::-webkit-scrollbar-thumb는 스크롤바의 특성을 지정할 때 사용한다.. 2023. 5. 14. [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. 이전 1 2 다음
