CSS14 [CSS] 미디어 쿼리(media query) 미디어 쿼리(media query) @media 규칙을 통해 서로 다른 매체 유형(media type)을 위한 맞춤식 스타일 시트(style sheet)를 지원합니다. @media 규칙을 더욱 발전시켜 매체 유형(media type)과 하나 이상의 표현식(expression)으로 구성된 미디어 쿼리(media query)를 사용할 수 있습니다. 미디어 쿼리(media query)는 width, height, color 속성과 같은 미디어 관련 속성을 이용한 표현식을 통해 스타일이 적용되는 범위를 조절할 수 있습니다. 미디어 쿼리를 사용하면 콘텐츠(content)를 별도로 변경하지 않아도 웹 페이지에 접속하고 있는 기기에 알맞은 형태로 스타일이 조정됩니다. 미디어 쿼리 문법 다음은 같은 파일 내의 참고자료.. 2022. 5. 3. [CSS] 디스플레이(display) 디스플레이(display) display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나입니다. 이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정합니다. 대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나의 값을 가집니다. 1. 블록(block) : , , , , , 요소는 대표적인 블록(block) 요소입니다. 2. 인라인(inline) : , , 요소는 대표적인 인라인(inline) 요소입니다. display 유형을 설정하는 값 - 요소의 자식 요소 레이아웃 설정 table : 태그 처럼 자식요소를 배치합니다. flex : flexbox 모델에 따라 자식 요소를 배치합니다. grid : 그리드 레이아웃을 사용.. 2022. 5. 2. [CSS] 포지션(position) 포지션(position) top, left, bottom, right 속성과 함께 사용됩니다. CSS에서 요소의 위치를 결정하는 방식에는 다음과 같이 4가지 방식이 있습니다. 1. 정적 위치(static position) 지정 방식 2. 상대 위치(relative position) 지정 방식 3. 고정 위치(fixed position) 지정 방식 4. 절대 위치(absolute position) 지정 방식 5. sticky position 지정 방식 정적 위치(static position) 지정 방식 HTML 요소의 위치를 결정하는 가장 기본적인 방식은 정적 위치(static position) 지정 방식입니다. position 속성값이 static으로 설정된 요소는 top, right, bottom, l.. 2022. 5. 1. [CSS] 오버플로우(overflow) 오버플로우(overflow) overflow CSS 단축 속성은 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정합니다. overflow-x (en-US), overflow-y (en-US)의 값을 설정합니다. visible 콘텐츠를 자르지 않으며 안쪽 여백 상자 밖에도 그릴 수 있습니다. hidden 콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냅니다. 스크롤바를 제공하지 않고, 스크롤할 방법(드래그, 마우스 휠 등)도 지원하지 않습니다. 코드를 사용해 스크롤할 수는 있으므로 (offsetLeft (en-US) 속성 설정 등), 이 상태의 요소도 스크롤 컨테이너입니다. scroll 콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냅니다. 브라우저는 콘텐츠를 실제로 잘라냈는지.. 2022. 4. 30. 이전 1 2 3 4 다음
