제뉴어리의 모든것

https://velog.io/@codenmh0822/Float

코드 상품 목록 상품 1 상품 설명 가격 : 500원 상품 2 상품 설명 가격 : 500원 상품 3 상품 설명 가격 : 500원 결과 화면 - 마우스 오버 전 - 마우스 오버 후

CSS의 overflow 프로퍼티는 요소내의 컨텐츠가 너무 커서 요소내에 모두 보여주기 힘들때 그것을 어떻게 보여줄지를 지정합니다. 기본적으로 컨텐츠를 포함하고 있는 요소의 크기가 고정되어 있지 않다면 컨텐츠를 모두 포함할 수 있도록 요소의 크기가 커집니다. 크기가 고정 되어 있다면 overflow 프로퍼티에 지정된 값에 따라 보여지게 됩니다. overflow 에 사용할 수 있는 값은 네가지가 있습니다. - visible : 기본 값입니다. 넘칠 경우 컨텐츠가 상자 밖으로 보여집니다. - hidden : 넘치는 부분은 잘려서 보여지지 않습니다. - scroll : 스크롤바가 추가되어 스크롤할 수 있습니다.(가로, 세로 모두 추가 됩니다.) - auto : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결..

1. 태그.[클래스] (ex : div.aa...) 코드 a영역 aa영역1 aa영역2 bb영역 aa영역4 aa영역3 결과화면 결과 내용 div 태그중 aa 클래스 속성을 가지는 모든 요소에 스타일이 적용됨. 2. 태그 .[클래스] (ex : div.aa...) (위에 사용법과 달리 태그 후에 공백이 존재하고 .[클래스] 이다) 코드 a영역 aa영역1 aa영역2 bb영역 aa영역4 aa영역3 결과 화면 결과 내용 div 태그를 부모로 가진 모든 하위 요소들 중 aa 클래스를 속성으로 가진 요소에 스타일 적용 (위에 내용과 달리 aa영역3가 적용되지 않았다) 3. .클래스.클래스 (ex : .a.aa ...) 코드 a영역 aa영역1 aa영역2 bb영역 aa영역4 aa영역3 결과 화면 결과 내용 아무 요소에도..

목차 1. Position 속성 1-1. Relative 1-2. Absolute 1-2-1. 부모 relative & 자식 absolute 1-2-2. 조상 relative & 자식 absolute 1-2-3. 조상 position 없음 & 자식 absolute 1-3. Fixed CSS Position CSS Position 요약 position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다. 사용법은 간단하다. 기준을 잡는다. (예- position: relative;) 이동시킨다. (예- top: 50px;) 🎈알아두기 block inline block : 한 줄 모두 차지 (대표 element - ,..

이미지 위에 텍스트를 출력하는 방법과 텍스트 위에 이미지를 출력하는 방법이다. 코드 이미지 위에 텍스트 이미지 아래에 텍스트 결과 화면 참고로, 부모요소에 text-align: center; position: relative; 스타일을 추가하고 이미지 자식요소에 position: absolute; 스타일을 추가하면 부모요소의 center속성값 때문에 브라우저상 출력커서의 위치는 center에 있다. 그 상태에서 이미지 자식요소는 absolute 란 속성값 때문에 해당 위치에서부터 이미지를 그린다. (자식 요소에 position: absolute; 스타일이 없으면 자동으로 이미지는 가운데 정렬이 된다.) 그러므로 아래와 같은 형태로 가운데 정렬이 아닌 모습으로 이미지가 출력된다. 그런데 여기서 positi..