본문 바로가기
반응형

Frontend/HTML&CSS
8

[CSS] 부모 height를 자식요소가 상속받지 못할때 해결방법(flex 이용) 상황과 원인이렇게 첫번째 자식(.chat-screen)이 상속을 제대로 받지 못하고있음.첫번째 자식은.chat-screen { height: calc(100% - 120px);}이렇게 지정하고있고, 두번째 자식인 form은 height가 120px임부모 height를.chat-container { height: calc(100% - 20px); min-height: 200px; max-height: 690px;}이렇게 지정하고있어 height가 정확한 값이 아님 (원인)부모의 부모(Body)에 height값 주라는데.. body에 height 100%해도 안됐다.(body말고 컨테이너를 하나 더 만들면 될지도? 이방법은 실험안해봄)해결방법부모 요소에 flex를 준다..chat-con.. 2025. 3. 6.
[TailwindCSS] className style에 !important추가하기 SwiperJS에 navigation 버튼이 기본스타일이 있어서color를 바꾸려고 className에 text-seagull-500(테마커스텀컬러)를 추가했다.우선순위에 밀려서 스와이퍼 기본이 잡히고있음!important를 하려면 간단하다.쓰려는 className앞에 !를 붙이면된다.!text-seagull-500으로 쓰면된다. Next Next  잘 변경되었다! 2025. 1. 7.
[HTML] button을 a로 감싸는게 일반적인가, 아니면 a를 button으로 감싸는게 일반적인가 과 의 사용 목적과 HTML 표준에 따라 둘 중 어느 쪽을 감싸야 하는지가 달라진다. 각 요소의 올바른 사용 사례와 일반적인 관례를 비교해보겠다.1. 로 을 감싸는 경우 Click Me목적: 네비게이션을 트리거하면서 버튼 스타일을 적용하려는 경우.의 기본 역할은 다른 페이지나 URL로 이동하는 것.문제점: HTML 표준 위반. 요소 내부에는 인터랙티브 요소(예: )를 포함하면 안된다.브라우저 동작이 비정상적일 수 있고, 접근성(A11y) 도구에서도 문제를 일으킬 수 있다.2. 으로 를 감싸는 경우 Click Me목적: 버튼으로 보이는 요소가 클릭되었을 때 링크로 이동하려는 경우.문제점: HTML 표준 위반입니다. 내부에는 href 속성이 동작하지 않으므로 의 고유 기능이 사라질 수 있다.CSS나 .. 2024. 12. 11.
[CSS] CSS 선택자: a로 시작해서 b로 끝나는 클래스 선택하기 일반적인 클래스나 아이디 선택자, 요소선택자 등등은 익히 알고있을것이라 생략하고 HTML 요소의 어떤 속성을 이용한 선택자에 대해서 정리해보았다. Attribute Selector (속성 선택자) 속성 선택자는 특정 HTML 요소에 특정 속성이 존재하거나 특정 속성 값과 일치하는 요소를 선택하는 데 사용된다. HTML 요소의 속성 종류 id 속성 선택자: [id] 설명: id 속성이 있는 모든 요소를 선택합니다. class 속성 선택자: [class] 설명: class 속성이 있는 모든 요소를 선택합니다. type 속성 (input 요소) 선택자: [type] 설명: type 속성이 있는 모든 요소를 선택합니다. href 속성 (링크 요소) 선택자: [href] 설명: href 속성이 있는 모든 링크 요.. 2024. 1. 5.
[font] pretendard variable 설치시 프로젝트에 폰트굵기 적용안됨문제 문제발견 얼마전에 업무용 컴퓨터 윈도우에 에러가 나서 초기화를 시켰는데 그때문에 폰트를 새로 설치해야했다. 작업하던 디자인파일에 필요한 Pretendard Variable 폰트를 설치를 하니까 프로젝트 전체가 폰트굵기가 thin이 되었다....! 폰트테스트 폰트테스트 폰트테스트 폰트테스트 폰트테스트 이렇게 작성했다면 이렇게 나오는 현상...... 해결 원인 폰트를 적용하는 css파일을 살펴보면 나같은 경우에 로컬 파일을 우선사용하고있었다. @font-face { font-family: "Pretendard Variable"; font-weight: 45 920; font-style: normal; font-display: swap; src: local("Pretendard Variable"), url(".. 2023. 9. 13.
@font-face 작성하기(feat. woff, woff2 faild to decode downloaded font 에러) Pretendard폰트를 예로, 작성하는 font-face Pretendard 다운로드 Pretendard 페이지 바로가기 Pretendard 다운로드 하기 pretendard-regular cdn @font-face { font-family: 'Pretendard-Regular'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal; } Variable 폰트 작성법 Pretendard Variable 폰트는 가변폰트란 의미로 woff2-variations 포맷으로 작성한다 @font-fa.. 2023. 4. 13.
pre tag안에서 줄바꿈 wrap처리 word-break: normal; word-break: break-all; text-overflow: clip; white-space:normal; overflow-wrap: break-word; 등등.. 다해봐도 안됐는데 pre태그는 white-space:pre-wrap을 써야한다. pre { white-space: pre-wrap; /* Since CSS 2.1 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } .. 2021. 9. 8.
XEICON 네모로 깨지는 이유 style.css에서 import해서 잘 쓰다가 어제 보니 이렇게 뜨던것. 이 방식이 막혔나 싶어서 head태그 안에 link도 걸어봤음 근데 안됨... 근데 새 프로젝트에서 link걸어서 똑같이 넣었는데 이건 또 되더라. 이유는, *에 font-family를 걸어서기때문. i 에 font-family: xeicon!important; 를 해보자 ... 안된다. i::before에 content가 걸려서 아이콘이 출력되기때문에 i::before{ font-family: xeicon !important; } i::before에 font-family를 걸어줘야한다. 2021. 9. 1.
반응형

최근댓글

최근글

© Copyright 2024 ttutta

티스토리툴바