본문 바로가기

Code🦜/HTML,CSS,JS12

폰트 렌더링이 되고 있지 않은 상태 -해결 현상: 원하는 폰트 css 스타일 적용시키고 JS fetch 했는데도 적용 안된 것 처럼 보임확인: 글 선택후- 웹 개발모드에 -Rendered Fonts 검색 - 아래에 뜨는 게 현재 선택한 것 폰트 문제: fetch 되자 html에 임시로 써놓은 style이 다 덮어씌워져서아무리 !important를 붙여도 소요이 없음html 내 js code에 fetch후 -> 폰트 적용하는 코드를 추가해서 , 실행하도록 수정if (includePath) { fetch(includePath) .then(response => { if (response.ok) { return response.tex.. 2025. 4. 15.
CSS-Flexbox 정리 예제2)속성설명주요 값코드 예시displayFlexbox를 적용하려면 반드시 선언해야 함flexdisplay: flex;flex-direction주축의 방향 설정row, columnflex-direction: row;justify-content주축 방향 정렬 (가로 정렬)flex-start, center, space-between 등justify-content: center;align-items교차축 방향 정렬 (세로 정렬)stretch, center, flex-start 등align-items: center;flex-wrap화면 공간 부족 시 줄바꿈 여부nowrap, wrapflex-wrap: wrap;flex-basis기본 크기 설정예: 150pxflex-basis: 150px;flex-grow여유 .. 2025. 3. 30.
인접 형제 선택자 첫번째자식말고붙어있는 두번째자식부터붙어있는 선택자들에게 적용하는 것. + 로 표기 (또는 ~) 2025. 3. 17.
줄간격 초기화 폰트가 다양해서 줄간격이 일정하지 않아 원하는 수치 px만큼 띄기 어려우면 * { }  즉, 전체에 규정된 스타일에 line-hight를 추가하면 된다. 2025. 3. 17.
부모가 flex라면 자식이 인라인요소여도 width 가능 원래라면 인라인 요소인  strong,span,p등등에 적용된 클래스엔width:49px;같이 가로크기 적용안될텐데 부모가 flex라면 자식이 모두 블럭요소로 변해서 width 적용 가능하다.아래 그에서는 여기에 플렉스 적용되어있는 걸 볼 수 있다. 2025. 3. 17.
퇴근후 공부) HTML테이블 만들기 아침일찍 출근이라 퇴근하고 나면 몸마음이 절인 오이지마냥 생기를 잃어있다하지만 공부를 꾸준히하는 습관을 들여서 집오면 - 휴식 으로 굳어버릴 지도 모르는 습관을 발전적인 방향으로 길들이고 싶다. 기본적으로 궁금한거가 생기면 지피티와 함께 물어보고 퀴즈도 풀고 구글링하고 유투브정보도 찾아보고 있다.오늘은 테이블을 만들었다 HTML언어 만드신 분이 깜찍하게도 직관적이게 만들어주셔서쉽게 알수 있다. 말 그대로 테이블 헤드    말 그대로 테이블 몸통 (  헤드가 몸통을 감싸고 )첫가로열 , tbody, tbody, tbody, tbody 이런식의 구조이다. 각 tbody는 무수히 tr>td*갯수 들로 이루어져있다.        table >              thead>                tr>.. 2025. 3. 13.