kimyws

보호되어 있는 글입니다.

보호되어 있는 글입니다.

1메뉴 1 2메뉴 1 2메뉴 2 2메뉴 3 1메뉴 2 2메뉴 1 2메뉴 2 2메뉴 3 1메뉴 3 2메뉴 1 2메뉴 2 2메뉴 3 a{ text-decoration: none; color: inherit; } li{ width: 100px; background-color: beige; } .menu{ text-align: center; } ul{ list-style: none; padding: 0; margin: 0; } .menu> ul>li{ position: relative; display: block; } .menu > ul > li > ul{ position: absolute; display: none; } .menu> ul>li:hover > ul{ display: inline-block; /*..

■ position ○ position문서상의 요소를 배치하는 방법을 정의position이 요소의 배치방법을 결정하면top, bottom, right, left가 최종 위치를 결정-> 위치 지정은 필요에 따라 선택적으로 사용 ○ position 속성값속성값의미static(정적)기본값, 요소를 일반적인 문서 흐름에 따라 배치relative(상대적)일반적 문서 흐름에 따라 배치, 상하좌우 위치 값에 따라 오프셋 적용absolute(절대적)일반적 문서 흐름에서 제거가장 가까운 position 지정 요소에 대해 상대적으로 오프셋 적용fixed(결정된)일반적 문서 흐림에서 제거, 지정한 위치에 고정된다.sticky일반적인 문서 흐름에서 제거, 스크롤 동작이 존재하는 가장 가까운 요소에 오프셋 적용 ○ relati..

■ display 속성 none block inline inline-block 보이지 않음 블럭 인라인 인라인 블럭 ○ 인라인 요소 - 위치 같은 줄에 나란히 배치, 이전요소 바로 뒤에서 시작 - 크기는 콘텐츠의 너비만 차지 즉 너비와 높이를 직접 설정할수 없음 - 여백 상하 여백 미적용 또는 예상과 다르게 작동, 좌우여백은 적용 ○ 블록 요소 - 새 줄에서 시작 사용 가능한 전체 너비를 차지, 다음요소는 블록 아래에 새줄로 배치 - 크기는 부모 요소의 전체 너비를 차지 너비와 높이 직접 설정 가능 - 여백은 상하 좌우 모든 방향의 여백 적용 ○ 인라인 - 블록 요소 - 인라인 요소처럼 같은 줄에 나란히 배치, 블록 요소처럼 너비와 높이를 지정가능 - 크기는 콘텐츠의 너비만 차지 명시적으로 너비 높이 설..

■ 박스모델(Box-Model) ○ 박스모델이란? 브라우저가 요소를 렌더링 할 때 각각의 요소는 사각형 형태로 영역을 차지 이영역을 박스라 표현하며 CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리)을 결정할 수 있다. - 박스의 영역 * 콘텐츠 영역 : 실제 콘텐츠를 포함 너비와 높이가 기본크기를 지정 * 안쪽 여백 : padding Area로 콘텐츠를 둘러싸는 공간, 콘텐츠와 테두리 사이 내부 여백 지정 * 배경색이나 배경이미지에 영향을 받음 경계선(테두리) : borde Area 패딩을 감싸는 테두리로 요소의 외곽선을 형성 * 바깥쪽 여백 : Margin Area로 테두리 바깥쪽 공간으로 다른 요소와의 외부 여백을 제공요소의 배경색이나 배경 이미지에 영향을 받지 않는다. ○ 박스 기본 콘텐츠 ..

자동 이미지 사이트 : lorem picsumhttps://picsum.photos/id/237/200/300id를 변경하면 다른 이미지가 나옴뒤에는 너비와 높이 변경https://picsum.photos/200/300랜덤한 이미지 나옴  ■ img 태그○ img 태그- 자체 닫는 태그로 끝에 별도의 닫는 태그가 필요하지 않는다.- 기본 display = inline-block 임 ○ 주요 속성- src(source) : 이미지의 url을 지정* 절대 url : https://www.abc.com/image.jpg * 상대 url : img/image.jpg (현재 페이지에서 img폴더내 jpg파일 참조) - alt(alternative text)* 이미지가 표시되지 않을때 사용자에게 보여질 텍스트* 검..

■ 레이아웃(Layout) ○ 레이아웃이란? - 구성요소를 공간에 효과적으로 배열하는 기술 - CSS 레이아웃은 웹 요소를 올바른 장소에 배치하는 기술 - CSS 레이아웃 기술은 형제 요소들을 가지런히 정렬할 수 있게 해주며 요소가 컨테이너 내부에서 어떤 위치에 놓이게 될지 결정할 수 있다. ■ 대표적인 레이아웃 기술 ○ 일반적인 문서 흐름 ○ box모델 ○ display 속성 ○ position 속성 ○ flex box ○ grid layout

■ flex box란? ○ flex box란?- 행 또는 열을 주축으로 설정하여 웹 요소를 배치 정렬 하는 1차원 레이아웃 방식- flex 방식에서, 요소의 배치와 정렬은 flex container와 flex item 간의 상호작용- flex 방식을 사용하기 위해서는 display: flex 사용 ○ flex container- flex box 방식으로 레이아웃을 결정할 요소 ○ flex item- flex container 내부에서 flex box 방식으로 배치되는 요소- flex item은 기본적으로 container의 높이에 맞춰 나온다. ○ flex 축방식- 주축이 가로방향의 행으로 좌우라면 교차축은 세로방향의 열로 위아래  ■ flex-direction ○ 주축의 방향성을 결정하는 속성 ○ 행은..

■ grid layout ○ grid layout이란 - 이름 그대로 격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식 - 그리드 아이템의 배치와 정렬은 컨테이너 내부 행과 열의 상호작용을 통해 결정 - flex는 주축과 교차축을 가지고 정리한다고 한다면 gird는 상호작용을 통해 결정 - grid container : 레이아웃을 그리드 방식으로 결정할 요소 - grid item : 컨테이너 내부에서 그리드 방식으로 배치 ○ 사용법 grid container에서 display속성의 값에 grid 사용 div{ diplay: grid; } ■ grid-template-columns,rows ○ grid-template-columns - grid container 트랙 중 열 내 아이템들의 크기를 지정할 ..