본문 바로가기

코딩/Web21

CSS z-index, float, clear z-index HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있음 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용 순서는 숫자의 크기가 클수록 위에 위치하고 작을수록 아래 위치하게 됨 z-index 1번째 div 2번째 div 3번째 div float HTML 요소가 주면(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만듦 float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐 float를 적용받은 요소의 다음에 나오는 요소방향을 결정(left, right) 컨텐츠 크기 만큼만 영역을 설정(블록) float를 적용받은 요소는 다른 요소(배경)보다 위에 위치 float1 Lorem ipsum dolor sit amet consectetur .. 2024. 4. 11.
CSS Position CSS Position 요소의 위치를 결정하는 방식을 설정 1. 정적 위치 지정방식 static position (기본값) HTML 요소의 위치를 결정하는 기본적인 방식 단순히 웹페이지의 흐름에 따라 요소들이 위치를 결정하는 방식 2. 상대 위치 지정방식 relative position HTML 요소의 기본 위치(정적 위치 지정방식)를 기준으로 위치를 재설정하는 방식 top, left, right, bottom 속성값을 사용하여 재설정함 상대 위치 지정방식 상대 위치 지정방식1 상대 위치 지정방식2 상대 위치 지정방식3 3. 고정 위치 지정방식 fixed position 웹 페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치 뷰포트를 기준으로 위치를 설정하는 방식 top, left, r.. 2024. 4. 9.
CSS 박스 모델 박스 모델(Box Model) 모든 HTML 요소는 박스 모양으로 구성 박스 모델은 HTML 요소를 내용, 안쪽여백, 테두리, 바깥여백으로 구분함 내용(content) 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 안쪽여백(padding) 내용과 테두리 사이의 간격 또는 여백 padding-top, padding-right, padding-bottom, padding-left padding: 위 오른쪽 아래 왼쪽 순으로 설정 HTML 안녕하세요 CSS div#padding { padding: 20px 50px 30px 10px;} /* 위 20px, 오른쪽 50px, 아래 30px, 왼쪽 10px */ div#padding { padding: 20px 50px 30px;} /* 위 20px, 오른.. 2024. 4. 9.
CSS 배경 CSS 배경 background-color: HTML 요소의 배경색을 설정 css 배경 1 배경 적용하기 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos soluta nam autem, perspiciatis provident rerum quibusdam quisquam, quo nulla sed iure, voluptatem dolorum expedita. Expedita deserunt laborum sunt illum ex! background-image HTML 요소의 배경으로 나타날 배경 이미지를 설정 배경 이미지는 기본 설정으로 반복되어 나타남 background-image: url(파일경로) css 배경2 background-re.. 2024. 4. 9.

티스토리툴바