HTML/CSS문법79 CSS clear, clearfix 속성 CSS clear 속성 float 속성을 사용하고 아래의 다음 요소(오른쪽 또는 왼쪽이 아닌)를 원할 때는 clear 속성을 사용해야 한다. clear 속성은 플로팅 요소 옆에 있는 요소에서 발생할 작업을 지정한다. clear 속성은 다음 값 중 하나를 가질 수 있다: none - 요소가 왼쪽 또는 오른쪽 플로팅 요소 아래로 밀리지 않는다. 기본값이다 left - 요소가 왼쪽 플로팅 요소 아래로 푸시된다 right - 요소가 오른쪽 플로팅 요소 아래로 푸시된다 both - 요소가 왼쪽 및 오른쪽 플로팅 요소 아래로 밀려난다 inherit - 요소는 부모로부터 명확한 값을 상속한다 float를 지울 때는 clear를 float에 일치시켜야 한다. 요소가 왼쪽으로 float된 경우 왼쪽으로 clear해야 합.. 2023. 8. 24. CSS float와 clear CSS float 속성은 요소를 float하는 방법을 지정한다. CSS clear 속성은 지워진 요소 옆과 어느 쪽에 뜰 수 있는 요소를 지정한다. CSS float 속성 float 속성은 컨테이너에서 텍스트에 왼쪽으로 이미지를 띄우는 것과 같이 콘텐츠를 배치하고 포맷하는 데 사용된다. float 속성은 다음 값 중 하나를 가질 수 있습니다: left - 요소가 컨테이너 왼쪽으로 이동한다 right - 요소가 컨테이너 오른쪽으로 이동한다 none - 요소가 플로팅되지 않는다(텍스트에서 발생한 위치에만 표시됨). 기본값이다 inherit - 요소는 부모의 부동 값을 상속합니다 가장 간단하게 사용할 수 있는 것은 플로팅 속성을 사용하여 텍스트를 이미지 주위에 둘러쌀 수 있습니다. CSS float:right.. 2023. 8. 23. CSS overflow 속성 CSS overflow 속성은 너무 커서 영역에 맞지 않는 콘텐츠에 발생하는 작업을 제어한다. CSS overflow 속성 overflow 속성은 요소의 내용이 너무 커서 지정된 영역에 맞지 않을 때 내용을 클리핑할지 스크롤 막대를 추가할지 여부를 지정한다. overflow속성의 값은 다음과 같다: 속성값 설명 visible 기본값. 오버플로가 잘리지 않습니다. 내용이 요소의 상자 밖으로 렌더링됩니다 hidden 오버플로가 잘리고 나머지 내용은 보이지 않습니다 scroll 오버플로가 잘리고 스크롤 막대가 추가되어 내용의 나머지 부분이 표시됩니다 auto scroll 과 비슷하지만 필요한 경우에만 스크롤 막대를 추가합니다 CSS overflow: visible 기본적으로 overflow가 visible하게.. 2023. 8. 22. CSS z-index 속성 z-index 속성은 요소의 스택 순서를 지정한다. CSS z-index 속성 요소가 배치되면 다른 요소와 겹칠 수 있다. z-index 속성은 요소(다른 요소 앞 또는 뒤에 배치할 요소)의 스택 순서를 지정한다. 요소는 양 또는 음의 스택 순서를 가질 수 있다: 이것은 제목입니다. 이미지의 z 인덱스가 -1이므로 텍스트 뒤에 배치됩니다. img 요소에 position속성에는 absolute값을 left속성에는 0px, top속성에는 0px 그리고 z-index속성에는 -1값을 설정하였고, 그 결과 화면은 아래 그림과 같다. z-index가 음수이면 img 요소는 맨 뒤에 위치하게 되고 글자가 그림 위에 놓이는 효과를 볼 수 있다. z-index속성에 1 양수 값을 설정한 결과 화면은 아래 그림과 같다... 2023. 8. 21. 이전 1 ··· 3 4 5 6 7 8 9 ··· 20 다음
