728x90

웹 디자인 기초 3

CSS 오버플로우 속성: scroll, auto, hidden, visible의 완벽 이해

CSS에서 오버플로우 속성은 콘텐츠가 요소 크기를 초과할 때 어떻게 처리할지를 결정하는 중요한 역할을 합니다.오버플로우(Overflow)란 무엇인가요?웹 디자인에서 콘텐츠가 부모 요소의 크기를 초과하는 경우, 이를 어떻게 처리할지를 지정하는 속성이 바로 CSS overflow입니다. 적절히 사용하면 스크롤바를 추가하거나, 초과된 부분을 숨기고, 콘텐츠의 표시 방식을 조정할 수 있습니다.오버플로우와 관련된 4가지 CSS 속성1. overflow: visible기본값으로, 콘텐츠가 요소의 크기를 초과해도 그대로 표시됩니다.특징:초과된 콘텐츠가 잘리지 않고 부모 요소 밖으로 드러남.레이아웃을 정확히 제어하기 어려울 수 있음.예제 코드:.box { width: 200px; height: 100px; ove..

코딩/CSS 2021.04.24

HTML 목록 태그: ul, ol, li 태그의 차이와 활용법

HTML에서 목록을 만드는 데 필수적인 ul, ol, li 태그의 차이와 사용법을 예제로 쉽게 알아봅시다.목록 태그란?웹 페이지에서 정보를 보기 쉽게 나열하려면 목록 태그를 사용합니다. HTML의 목록 태그는 콘텐츠를 구조화하고 가독성을 높이는 데 유용합니다. 대표적인 목록 태그로는 ul, ol, li가 있습니다.HTML 목록 태그의 종류1. ul: 순서가 없는 목록ul은 순서가 없는 목록(Unordered List)을 생성합니다.특징:항목 앞에 점(Bullet)이 기본적으로 표시됩니다.항목 간 순서는 중요하지 않을 때 사용합니다.예제: HTML CSS JavaScript 결과:HTMLCSSJavaScript2. ol: 순서가 있는 목록ol은 순서가 있는 목록(Ordered List)을 생성합니다...

코딩/HTML 2021.04.06

HTML 주요 태그: div, span, header, footer의 사용법과 예제

HTML에서 중요한 레이아웃 구성 태그인 div, span, header, footer의 사용법을 예제와 함께 배워봅니다.HTML 레이아웃 구성에 필수적인 태그들HTML을 이용해 웹 페이지를 구성할 때, 구조와 내용을 명확히 나누는 태그는 매우 중요합니다. 이번 글에서는 div, span, header, footer 태그의 역할과 사용법을 쉽게 설명하겠습니다.1. div 태그: 블록 레벨 컨테이너div란?div는 블록 레벨 요소로, 콘텐츠를 그룹화할 때 사용합니다. 웹 페이지의 섹션을 나누고 레이아웃을 구성하는 데 핵심적인 태그입니다.특징:항상 새로운 줄에서 시작.다른 요소를 포함할 수 있음.스타일(CSS)과 스크립트(JavaScript)를 적용하기 쉬움.예제: HTML 강의 이 강의는 HTML 기초..

코딩/HTML 2021.04.06
728x90