2023/07(13)
-
Web/HTML, CSS
2023.07.11
[CSS] position 속성 - HTML 요소 위치 제어하기
CSS의 position 속성은 요소의 위치를 배치하는데 사용되는 속성입니다. position 속성을 이용하면 텍스트나 이미지와 같은 특정 html 요소를 나란히 배치할 수도 있고 가로나 세로로 원하는 위치에 배치할 수도 있으며 경우에 따라서는 스크롤을 따라다니거나 화면 한 곳에 고정도 시킬 수 있습니다. CSS position 속성 사용법 CSS position 속성값 static : 기본적으로 설정되는 값으로, 요소를 문서의 흐름에 맞추어 배치합니다. 다른 위치 속성들과 달리 추가 속성을 사용하지 않습니다. relative : 이전 요소에 자연스럽게 연결하여 배치하되 상대적인 위치를 지정할 수 있습니다. top, right, bottom, left 속성을 사용하여 요소를 이동시킬 수 있습니다. abs..
-
Web/HTML, CSS
2023.07.10
[CSS] display : table 속성을 활용한 테이블 레이아웃
일반적으로 웹에서 테이블을 만드려면 태그를 사용하지만 display : table 속성을 사용해서 HTML 요소를 테이블 형태로 표시할 수도 있습니다. 이번 포스팅에서는 display: table을 사용하여 테이블 형태의 레이아웃을 만드는 방법에 대해 알아보겠습니다. display : table 사용법 See the Pen css display:table by wjdxo513 (@wjdxo513) on CodePen. display: table = 해당 요소를 테이블 컨테이너로 만듭니다. display: table-row = 해당 요소를 테이블 행으로 만듭니다. display: table-cell = 해당 요소를 테이블 열로 만듭니다. 위와 같이 display:table을 사용하여 요소를 테이블 컨테이너..
-
Web/HTML, CSS
2023.07.09
[CSS] display : none에 대하여 (visibility : hidden)과의 차이
※ "display: none"은 요소를 화면에서 숨기고 레이아웃에 공간을 차지하지 않게 만드는 데 사용됩니다. 화면에서 특정 요소를 감추고 싶다면 어떻게 해야 할까요? 이럴 때는 주로 CSS의 display속성을 none로 바꿔주면서 요소를 화면에서 감추게 됩니다. "display:none"을 적용한 요소는 브라우저에서 렌더링 되지 않으며, 화면에도 표시되지도 공간을 차지하지도 않습니다. 접근성, 동적 상태 관리, 성능 개선, 애니메이션 등 다양한 목적으로 사용될 수 있으나, 남용에 주의해야 하며, 접근성과 검색 엔진 최적화를 고려해야 합니다. display : none를 사용하는 이유 웹 접근성: 일부 웹 요소는 시각적으로는 표시되지 않지만 스크린 리더와 같은 보조 기술을 사용하는 사용자에게는 필요할..
-
Web/HTML, CSS 2023.07.11[CSS] position 속성 - HTML 요소 위치 제어하기 CSS의 position 속성은 요소의 위치를 배치하는데 사용되는 속성입니다. position 속성을 이용하면 텍스트나 이미지와 같은 특정 html 요소를 나란히 배치할 수도 있고 가로나 세로로 원하는 위치에 배치할 수도 있으며 경우에 따라서는 스크롤을 따라다니거나 화면 한 곳에 고정도 시킬 수 있습니다. CSS position 속성 사용법 CSS position 속성값 static : 기본적으로 설정되는 값으로, 요소를 문서의 흐름에 맞추어 배치합니다. 다른 위치 속성들과 달리 추가 속성을 사용하지 않습니다. relative : 이전 요소에 자연스럽게 연결하여 배치하되 상대적인 위치를 지정할 수 있습니다. top, right, bottom, left 속성을 사용하여 요소를 이동시킬 수 있습니다. abs..
-
Web/HTML, CSS 2023.07.10[CSS] display : table 속성을 활용한 테이블 레이아웃 일반적으로 웹에서 테이블을 만드려면 태그를 사용하지만 display : table 속성을 사용해서 HTML 요소를 테이블 형태로 표시할 수도 있습니다. 이번 포스팅에서는 display: table을 사용하여 테이블 형태의 레이아웃을 만드는 방법에 대해 알아보겠습니다. display : table 사용법 See the Pen css display:table by wjdxo513 (@wjdxo513) on CodePen. display: table = 해당 요소를 테이블 컨테이너로 만듭니다. display: table-row = 해당 요소를 테이블 행으로 만듭니다. display: table-cell = 해당 요소를 테이블 열로 만듭니다. 위와 같이 display:table을 사용하여 요소를 테이블 컨테이너..
-
Web/HTML, CSS 2023.07.09[CSS] display : none에 대하여 (visibility : hidden)과의 차이 ※ "display: none"은 요소를 화면에서 숨기고 레이아웃에 공간을 차지하지 않게 만드는 데 사용됩니다. 화면에서 특정 요소를 감추고 싶다면 어떻게 해야 할까요? 이럴 때는 주로 CSS의 display속성을 none로 바꿔주면서 요소를 화면에서 감추게 됩니다. "display:none"을 적용한 요소는 브라우저에서 렌더링 되지 않으며, 화면에도 표시되지도 공간을 차지하지도 않습니다. 접근성, 동적 상태 관리, 성능 개선, 애니메이션 등 다양한 목적으로 사용될 수 있으나, 남용에 주의해야 하며, 접근성과 검색 엔진 최적화를 고려해야 합니다. display : none를 사용하는 이유 웹 접근성: 일부 웹 요소는 시각적으로는 표시되지 않지만 스크린 리더와 같은 보조 기술을 사용하는 사용자에게는 필요할..