web 3

[CSS] 스크롤바(scrollbar) 숨기기(없애기)

스크롤바가 있는 페이지와 없는 페이지 간 레이아웃 차이가 발생해 스크롤바를 숨기고 싶었다. 단, 스크롤 기능은 그대로 유지해야 하는 상황 🐣 스크롤 기능은 유지하면서, 스크롤바를 숨기는 코드 html::-webkit-scrollbar { display: none; } cf) 위의 방법은 크롬, 사파리 등 WebKit 기반 브라우저에서만 동작한다. 🐣 스크롤바 O 🐣 스크롤바 X

Web 2024.04.08

[CSS] Flex 속성 (Flexbox)

👾 Flex 속성이란? CSS의 속성 중 하나로, 유연한 레이아웃을 만들기 위해 사용된다. flex를 사용해 요소들을 가로 또는 세로로 배열하고, 크기를 유연하게 조절할 수 있다. 사용법과 실행 결과를 알아봅시다! 👾 flex-direction flex 컨테이너 내의 아이템들이 배치되는 방향을 지정하는 데 사용한다. ▶ row 아이템들이 왼쪽에서 오른쪽으로 가로로 배치된다. (default) display: flex; /* 속성을 지정하지 않으면, 기본값인 가로로 배치된다. */ display: flex; flex-direction: row; ▶ column 아이템들이 위에서 아래로 세로로 배치된다. display: flex; flex-direction: column; cf) row-reverse: 아..

Web 2024.04.07

[HTML5] 시맨틱 태그(Semantic Tag) <section> <article> 등

🏷️ HTML - 태그의 형태와 사용법 HTML5 이전의 HTML 버전에서는, , 과 같은 일반적인 컨테이너 태그를 사용하여 레이아웃을 구성하였다. 기본적으로 컨테이너 태그를 쓰면서, 다음과 같이 id나 class 속성을 통해 구분하는 방식이었다. 제목 🏷️ 한계 컨테이너 태그들은 단순히 콘텐츠를 구분하는 역할만 하고 그 자체로 어떤 의미를 가지지 않기 때문에, 웹페이지의 의미와 구조를 설명하는 데에는 적합하지 않다. 🏷️ HTML5 - 태그의 형태와 사용법 시맨틱 태그(semantic tag)가 등장했다. 시맨틱 태그는 그 자체로 의미를 가지며, 웹페이지의 구조와 콘텐츠를 더 명확하게 표현할 수 있도록 돕는다. 다음과 같이 태그로 직접 사용할 수 있다. ➡ ... cf) 컨테이너 태그와 비교했을 때 화..

Web 2024.04.05