분류 전체보기589 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. CSS position 속성 position 속성은 요소에 사용되는 위치 지정 방법의 유형(정적, 상대적, 고정, 절대 또는 고정)을 지정한다. CSS position 속성 position 속성은 요소에 사용되는 위치 지정 방법의 유형을 지정한다. 다섯 가지 위치 값이 있다: static relative fixed absolute sticky 그런 다음 요소는 위쪽, 아래쪽, 왼쪽 및 오른쪽 특성을 사용하여 배치된다. 그러나 position 속성을 먼저 설정하지 않으면 이러한 속성이 작동하지 않는다. 또한 위치 값에 따라 다르게 작동한다. 간략히 표로 개념을 정리하면 아래 표와 같다. 값 설명 static 요소를 문서 흐름에 따라 배치한다. 기본값 relative 요소를 문서흐름에 따라 배치한다. 자신을 기준으로 자식요소의 위치를 .. 2023. 8. 20. CSS width, max-width 속성 width, max-width, margin:auto; 이전 장에서 언급했듯이, 블록 레벨 요소는 항상 사용 가능한 전체 너비를 차지한다(가능한 한 왼쪽과 오른쪽으로 뻗어 있다). 블록 수준 요소의 너비를 설정하면 요소가 컨테이너 가장자리로 확장되지 않는다. 그런 다음 여백을 자동으로 설정하여 요소를 컨테이너 내에서 수평으로 중앙에 배치할 수 있다. 요소가 지정된 너비를 차지하고 나머지 공간은 두 여백 사이에 균등하게 분할된다: 참고: 위의 문제는 브라우저 창이 요소의 너비보다 작을 때 발생한다. 그런 다음 브라우저는 페이지에 수평 스크롤 막대를 추가한다. 대신 최대 너비를 사용하면 브라우저의 작은 창 처리가 향상된다. 이는 소규모 장치에서 사이트를 사용할 수 있도록 할 때 중요하다: 팁: 브라우저 창의.. 2023. 8. 19. CSS display 속성 display 속성은 레이아웃을 제어하는 데 가장 중요한 CSS 속성이다. CSS display 속성 display 속성은 요소 표시 여부/방법을 지정한다. 모든 HTML 요소는 요소 유형에 따라 기본 표시 값을 가진다. 대부분의 요소에 대한 기본 표시 값은 block 또는 inline 이다. block-level 요소 block-level 요소는 항상 새 라인에서 시작되며 사용 가능한 전체 너비를 차지한다(가능한 한 왼쪽과 오른쪽으로 늘어남). The element is a block-level element. 블록 레벨 요소의 예: - 링크 목록을 수평 메뉴로 표시: HTML CSS JavaScript li요소에 display: inline 으로 재정의를 함으로써 html, css, javascrip.. 2023. 8. 18. 이전 1 ··· 53 54 55 56 57 58 59 ··· 148 다음
