1. 문제마크업을 짤 때 개발자에게 넘겨주기 위해 임시로 인라인에 display:none; 처리한 경우가 있었다.block3이 백그라운드가 적용될 줄 알았는데 되지 않았다.block1block2block3.block1 + .block3 {background-color:red;} 2. 이유인접 형제 선택자는 "HTML 구조상 바로 다음 형제" 만 선택하기 때문.즉, 요소가 화면에 보이느냐 (display:none 이냐) 는 전혀 상관없고, HTML 구조상 바로 다음에 오는 형제만 인식 한다.display:none은 보이지 않게만 할 뿐, DOM 구조에서 사라지는 것이 아니기 때문이다.

counter 사용법 counter은 CSS에서 자동으로 번호를 매기는 역할을 한다. counter-reset 카운터이름과 시작값을 설정{ counter-reset: initial | 카운터이름/숫자 | none } initial :: 초기화 카운터로 사용할 이름 숫자를 지정하지 않으면 기본값이 0 숫자는 음수값도 가능하며 여러개의 카운터를 설정하고자 할 때 공란으로 분리. none :: 설정값이 없음(이미 설정된 것을 취소하고자 할 때 사용) counter-increment counter-reset으로 설정한 값을 증가시키는 역할{ counter-increment: initial | 카운터이름/숫자 | none } initial :: 초기화 숫자를 지정하지 않으면 기본값으로 1씩 증가 숫자는 음수값 가..

1. flex-basis : 아이템의 기본크기 기본값 auto #container { display: flex; max-width: 800px; margin: auto; border: 3px solid #000; background-color: #fff; } .item { font-size: 40px; flex-basis: auto; } #container { /* 위와 동일 */ } .item { font-size: 40px; flex-basis: 120px; } 2. flex-grow : 아이템의 너비 비율 기본값 0 flex-grow 값이 1이면 1:1 비율로 맞춰지는게 아니라 여백을 기준으로 비율이 맞춰지는 것이다. .item { flex-grow: 1; } 너비를 똑같이 나타내고 싶을 때는, ...

flex-basis가 항상 width에 적용되는 것은 아니다. flex-direction: row인 경우, flex-basis 는 너비를 제어한다. 그러나 flex-direction: column인 경우, flex-basis는 높이를 제어한다. 주요차이점 flex-basis는 flex item만 적용된다. flex container 는 flex-basis 를 무시하지만 width나 height는 사용할 수 있다. flex-basis는 주축에서 작동한다. 예를 들어 flex-direction: column은 플렉스 항목의 크기를 가로로 조정하려면 width 속성이 필요하다. 절대위치에 있는 flex 항목에는 영향을 주지 않는다. #container { display: flex; flex-direction:..

https://velog.io/@vnthf/%EC%9B%B9%ED%8F%B0%ED%8A%B8-%EC%B5%9C%EC%A0%81%ED%99%94-%ED%95%98%EA%B8%B0 웹폰트 최적화 하기 웹폰트란? 폰트 web safe font - 일반적으로 시스템에 설치된 폰트. 다운로드 없이 사용자에게 의도대로 표현이 할 수 있음. (Arial, Helvetica 등) web font - 설치되어 있지 않아서 브라우저에서 다운로드 velog.io https://d2.naver.com/helloworld/4969726

가장 기초적인 부분인데 그냥 넘어가는 경우가 많다. 선택자 우선순위 우선순위란, 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법. 점수가 높은 선언이 우선 점수가 같으면 가장 마지막에 선언한 태그가 우선 Hello world! 점수로 우선순위를 나타내보자. Hello world! !important > inline > ID > Class > 태그 > 전체 > body body라는 태그에 속성을 적용하면 상속되기 때문에 점수를 계산하지 않는다. [예제] .list li.item {} .list li:hover {} .box::before {} #submit span {} header .menu li:nth-child(2) {} h1 {} :not(.box)..

조건 flex로 1줄 6칸 만들기 768px 일 때 2줄 3칸 만들기 box box box box box box * { margin: 0; padding: 0; box-sizing: border-box; } .container { display: flex; max-width: 1200px; height: 200px; background: #eaeaea; margin: auto; } .box { width: 20%; border: 1px solid plum; } @media all and (max-width: 768px) { .container { /*flex-wrap: nowrap(default) */ flex-wrap: wrap; background: #777; } .box { width: 33.33%..

[CSS] vw / vh를 알아보자 정리한 이유 vw, vh가 부모의 넓이에 영향을 받는 줄 알았지만, 화면의 너비에 영향을 받는다는 점에서 정리를 통해 다시 알아보고자 한다. 먼저 말하자면 vw, vh 는 부모의 넓이에 영향을 받지 않는다!!! 단위와 의미 vw / Viewport Width viewport 너비에 근거. 1vw는 viewport의 넓이 1%와 같다. vh / Viewport Height viewport 높이에 근거. 1vh는 viewport의 높이 1%와 같다. vmin / Viewport Minimum viewport의 (높이와 너비 중) 작은 쪽의 치수로 기준. viewport 높이가 더 작은 경우, 1vim = viewport 높이 1% viewport 너비가 더 작은 경우, 1..