HTML/CSS문법79 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. CSS table style CSS table padding 경계와 표의 내용 사이의 공간을 제어하려면 요소와 래빗 요소의 패딩 속성을 사용합니다: The padding Property 이 속성은 테두리와 표의 내용 사이에 공백을 추가합니다. 이름 성 금액 길동 홍 100원 영희 이 150원 철수 조 300원 명수 최 250원 table, th, td 요소에 border속성에 1px solid #ddd 를 설정하여 회색을 설정하였고, table 요소에 border-collapse속성에 collapse 값을 설정하여 실선을 표시하도록 하였으며, width속성에는 100%를 설정하여 브라우저 너비 크기만큼 설정하였으며 td요소에 padding속성에 15px값을 설정하여 테이블 테두리로부터 15px 공백을 추가한 결과 화면은 아래 그림과.. 2023. 8. 17. 이전 1 ··· 4 5 6 7 8 9 10 ··· 20 다음
