차마시는 개발자

😸 CSS TIL 😽 Done it 😼 다단 : 한페이지를 여러 조각으로 나누는 것 column-count: auto: 조각낼 갯수(= 1) column-width: auto: 지정된 값을 기준으로 최적의 너비를 자동으로 판단한다. column-rule:: 단과 단 사이에 선을 넣어주는것(border와 유사) column-gap: normal: 단과 단사이의 gap 😼 Filter blur(0): 흐림 처리 grayscale(100%): 무채색 invert(100%): 색상 반전 drop-shadow(x축거리 y축거리 그림자흐림정도 그림자색상): 그림자(배경색상이 없는 경우 설정된다.) brightness(1): 명도 contrast(100%)..

table의 tbody부분에 다음 코드와 같은 것을 넣었을 때 다음과 같은 오류가 발생하였습니다. 이를 보니 ${idx} 부분이 #text로 들어가는 문제였습니다. 조금 찾아보니 CSS 로 인해 하나씩 밀리는 것이였습니다. 그래서 CSS를 고치므로 해결하는 방법을 생각해봤으나html 내부에서 바꾸는 것이 더 쉽게 바꿀 수 있을 것이라고 판단이 되어서 html을 고치게 되었습니다. 그래서 다음과 같이 해결을 하였습니다. 확실한 방법일지는 모르지만 더 좋은 방법을 아시면 댓글로 알려주세요 ㅎㅎ

@media https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries 여러 미디어 유형, 장치에 따라 스타일 규칙 적용 미디어타입에서 미디어 특성일 때 css 적용 @media 미디어타입 and (미디어 특성) { //css } ex) @media screen and (max-width: 1200px) { body { color: yellow; } }

우선 순위 어떤 CSS 속성을 우선으로 할지 결정하는 방법 1. 명시도 - 명시도 점수가 높은 선언이 우선 - 전체 (0점) 1. -> 2. -> 3. 2. 선언 순서 - 명시도 점수가 같은 경우 파악 - 가장 마지막에 작성한..

복합 선택자 (Combinator) 일치 선택자(Basic Combinator) 두 태그를 동시에 만족하는 요소 선택 ( 붙여쓰기, and 연산 ) //li: 태그이면서 .tomato: 클래스 tomato인 요소 li.tomato { } 과일 물건 토마토 자식 선택자(Child Combinator) 특정 태그의 자식 태그 요소를 선택 ( > ) (자식 : 바로 밑의 태그(요소)) (형제 : 부모 태그를 공유하는 태그(요소) ) // ul: 태그 요소의 자식(li) 중에서 .tamato: class가 tomato인 요소 ul>.tomato { } 과일 물건 토마토 후위(하위) 선택자(Descendant Combinator) 특정 태그의 후손(하위) 요소의 태그를 선택 ( 띄어쓰기 ) (후손(하위) : 특정..

선택자 전체 선택자(Universal Selector) (요소 내부의) 모든 요소를 선택 * { } 태그 선택자(Type Selector) 특정 태그( )전체의 요소를 선택 li { } 과일 물건 클래스 선택자(Class Selector) HTML class 속성의 값이 특정 태그인 요소 선택 ( .class ) (class 속성은 동일한 값으로 여러 군데 다 사용 가능) .fruit { } 과일 물건 아이디 선택자(ID Selector) HTML id 속성의 값이 특정 태그인 요소 선택 ( #id ) (id 속성은 고유한 속성입니다.) #fruit { } 과일 물건

초기화 이유 - 각각의 브라우저에서 동일하게 만들기 위해 초기화 사용해야 합니다. body { margin: 0; padding: 0; } 순서 1. reset.css cdn 검색 2. https://www.jsdelivr.com/package/npm/reset-css 에서 빨간 동그라미 부분눌러서 html로 다운 3. 초기화 부분이 붙여넣기 한 부분입니다.