Ho Jung

@media란 무엇인가? @media는 CSS에서 미디어 쿼리(Media Query)를 정의하기 위한 규칙입니다.사용자의 화면 크기, 디바이스 종류, 해상도 등 다양한 조건에 따라 다른 스타일을 적용할 수 있도록 도와줍니다. 이를 통해 반응형 웹 디자인(Responsive Web Design)을 구현할 수 있습니다. [기본 문법]@media (조건) { /* 적용할 스타일 */} ex) 화면 너비가 600px 이하로 줄어들면 배경색이 파란색 → 분홍색으로 바뀝니다. /* 기본 스타일 */body { background-color: lightblue;}/* 화면 너비가 600px 이하일 때 */@media (max-width: 600px) { body { background-color: ligh..

1. z-index CSS에서 요소의 쌓임 순서를 제어하기 위해 사용되는 속성입니다. 화면에 여러 요소가 겹칠 때, 어떤 요소가 위로 올라오고 어떤 요소가 아래로 내려가는지를 결정합니다. - 기본값 : auto양수값이 클수록 위로 올라갑니다.음수값이 작을수록 아래로 내려갑니다.auto부모 요소의 쌓임 맥락(stack context)을 따릅니다. 2. z-index의 작동 방식 1) 쌓임 맥락(Stacking Context)- 요소는 브라우저 화면에서 서로 겹칠 수 있는 "쌓임 맥락" 안에 존재합니다. - 새로운 쌓임 맥락은 특정 CSS 속성(예: position과 z-index)에 의해 생성됩니다. - 쌓임 맥락 안의 요소들은 그 안에서만 서로의 z-index를 비교합니다 2) 기본 쌓임 순서쌓임 순서는..

item 전용 속성  1. order  : item의 순서를 지정하는 속성      - item이 중심축(main axis)에 배치되는 순서를 지정     - 모든 item의 order 기본 값은 0     - 작성할 수 있는 값은 정수 형태(+, 0, -)     - 값이 클 수록 중심축 끝 쪽에 배치됨     - 동일한 order 값을 갖는 경우 html 배치 순서를 따름 [HTML][CSS] #결과 2. flex-grow : item 팽창   item이 flex container 내부에서 중심축 방향 비어있는 공간을   팽창하여 메꾸는 정도를 지정하는 속성 - item의 flex-grow 기본 값 : 0 (팽창X)  - item 중 flex-grow 값이 1 이상인 요소가 1개인 경우       -..

display : flex (flex Box)  요소의 정렬되는 방향, 순서, 요소 간의 간격을  하나 하나 수치적으로 처리하지 않아도  브라우저가 알아서 유연하게 처리해 표시하는 방식  1. flex의 구성   - flex container      유연하게 처리할 대상(요소)를 감싸고 있는 요소    - item     유연하게 처리할 대상(요소)  (flex 관련 속성은 flex container 전용 속성, item 전용속성으로 나뉨)    2. flex의 축(axis)    2차원 평면에 요소를 유연하게 배치하기 위해 배치될 평면의     - 중심축 (main axis)     - 교차축 (cross axis) flex container 전용 속성     1. display : flex     ..

1. 요소의 영역(여백) 관련 스타일 HTML 요소는 총 4가지의 영역으로 구성되어 있다. 1. content(내용) 영역      - 요소의 내용이 작성 되어지는 영역      (시작태그와 종료태그 사이에 작성되는 내용을 생각하면 된다)  2. padding      - content와 border 사이의 공간 3. border(테두리) 영역      - 요소의 테두리가 지정되는 영역      - content 보다 바깥쪽에서 content를 감싸고 있음    4. margin(여백, 간격)      - 다른 요소와의 간격을 나타내는 영역 2. box-sizing 이란? - width/height 크기 조정 속성의 범위를 지정하는 css 속성1) content-box     - width/height ..

레이아웃이란?사전적 의미 : 배치, 정리기술적 의미 : 구성 요소를 제한된 공간에 효율적으로 배치하는 것 1. 화면 배치(표시, 형식) 지정 : display 속성 요소가 화면에 어떻기 표시될지(배치될지) 형식을 지정하는 속성   block:  화면을 수직 분할 (세로 화면을 가로로 잘라서 분할, 레고 쌓기)   -> 행이 나뉘어 짐           -> 한 행을 전부 차지하는 성질                   -> width/height 크기 지정 속성 사용 가능   inline : 화면을 수평 분할 (가로 화면을 세로로 잘라서 분할, 김밥 자르기)   -> 한 행의 열이 나뉘어 짐   -> 작성된 내용(content) 만큼의 크기를 차지   -> width/height 크기 지정 속성 사용 XX..

1. 문자열 속성 선택자 속성 값의 문자열을 확인하여 스타일 적용하는 방식의 선택자. 1) 선택자[속성명 ~= "특정값"] { CSS 코드; }     : 띄어쓰기로 구분되어있는 여러 속성 값이 작성된 속성 중 속성 값이 특정 값을 단어로 포함하는 요소를 선택2) 선택자[속성명 |= "특정값"] { CSS 코드; }     : 속성 값이 특정 값을 단어로 포함하는 요소를 선택 단, "-" 기호로 구분, "-" 앞의 내용이 동일해야 함 3) 선택자[속성명 ^= "특정값"] { CSS 코드; }   (^ : 캐럿)    : 속성 값이 특정 값으로 시작하는 요소를 선택4) 선택자[속성명 $= "특정값"] { CSS 코드; }    : 속성 값이 특정 값으로 끝나는 요소를 선택5) 선택자[속성명 *= "특정값"..

1. 일반 구조 선택자(위치 기준)형제 관계에 있는 요소 중에서 특정 요소만을 선택하는 선택자    * 중요 *   ->  위치를 기준으로 구분함     A:first-child    -> 형제들 중 첫 번째가 A가 맞다면 선택    A:last-child     -> 형제들 중 마지막이 A가 맞다면 선택    A:nth-child(숫자 또는 수열) -> 형제들 중 n번째가 A가 맞다면    A:nth-last-child(숫자 또는 수열) ->  형제들 중 뒤에서 부터 n번째가 A가 맞다면      (A : 선택된 요소)   [HTML] [CSS] # 결과테스트1테스트2테스트3테스트4테스트5  2. 형태 구조 선택자     선택된 형제 관계 요소 중 특정 요소를 선택하는 선택자.    (선택된 요소들을 ..