HTML&CSS29 display: flex;의 개념과 속성 display: flex는 CSS에서 요소의 배치와 정렬을 제어하는 데 사용되는 매우 유용한 레이아웃 방식입니다. 플렉스 박스(Flexbox)는 특히 여러 요소의 크기를 동적으로 조절하고 정렬하기 위한 강력한 도구로, 다양한 화면 크기와 디바이스에 맞는 반응형 레이아웃을 손쉽게 구현할 수 있습니다. 기본 개념:Flex Container: display: flex가 적용된 요소를 "플렉스 컨테이너"라고 합니다. 이 컨테이너 안의 자식 요소들이 플렉스 항목으로 배치됩니다.Flex Items: 플렉스 컨테이너 안의 직접적인 자식 요소들을 "플렉스 아이템"이라고 합니다. 이 아이템들은 유연하게 배치되고 정렬됩니다.주요 속성들:1. Flex Container 속성flex-direction: 플렉스 아이템들이 배치.. 2024. 10. 3. CSS를 활용한 a태그 버튼 예제 1 CSS 애니메이션을 활용하여 태그로 만든 버튼에 다양한 애니메이션 효과를 추가할 수 있습니다. 아래는 버튼에 마우스를 올렸을 때 색상이 변하고, 크기가 살짝 커지는 애니메이션 효과를 적용한 예제입니다. Hover Me!" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 Hover Me!.container { text-align: center;}/* 애니메이션 버튼 스타일 */.animated-button { background-color: #4CAF50; /* 기본 배경색 */ color: white; padding: 15px 30px; text-align: center; text-decoration: none; font-size.. 2024. 10. 3. CSS로 스크롤바 스타일 만들기 CSS로 스크롤바를 스타일링할 수 있습니다. 스크롤바 스타일링은 웹킷 기반 브라우저(Chrome, Safari 등)와 Firefox에서 조금 다르게 처리됩니다. 여기서는 각각의 브라우저에서 스크롤바를 스타일링하는 방법을 설명하겠습니다. 여러 줄의 스크롤 가능한 텍스트가 여기 들어갑니다. 이 텍스트는 예시로 길게 작성되었습니다... 여러 줄의 스크롤 가능한 텍스트가 여기 들어갑니다. 이 텍스트는 예시로 길게 작성되었습니다... 여러 줄의 스크롤 가능한 텍스트가 여기 들어갑니다. 이 텍스트는 예시로 길게 작성되었습니다... 여러 줄의 스크롤 가능한 텍스트가 여기 들어갑니다. 이 텍스트는 예시로 길게 작성되었습니다... " data-ke-type="html">.. 2024. 10. 2. CSS로 체크박스 스타일 만들기 CSS로 기본적인 체크박스를 스타일링하는 방법을 설명드리겠습니다. HTML에서 요소는 브라우저마다 기본 스타일이 다르기 때문에, 이를 커스터마이징하기 위해 appearance 속성을 사용하여 기본 스타일을 제거하고 CSS로 원하는 스타일을 적용할 수 있습니다.체크박스 선택" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 체크박스 선택/* 체크박스 컨테이너 */.custom-checkbox { display: inline-flex; align-items: center; font-size: 18px; cursor: pointer;}/* 체크박스 숨기기 */.custom-checkbox input[type="checkbox"] { di.. 2024. 10. 2. CSS로 아코디언 만들기 HTML과 CSS로 간단한 아코디언을 만드는 방법을 설명드리겠습니다. 자바스크립트 없이도 CSS만으로 아코디언을 만들 수 있지만, 자바스크립트와 함께 사용하면 더 다양한 기능을 구현할 수 있습니다. 여기서는 순수 HTML과 CSS만으로 구현하는 기본적인 아코디언을 설명하겠습니다. 국회의원의 수는 법률로 정하되, 200인 이상으로 한다. 국민의 모든 자유와 권리는 국가안전보장·질서유지 또는 공공복리를 위하여 필요한 경우에 한하여 법률로써 제한할 수 있으며, 제한하는 경우에도 자유와 권리의 본질적인 내용을 침해할 수 없다.모든 국민은 근로의 권리를 가진다. 국가는 사회적·경제적 방법으로 근로자의 고용의 증진과 적정임금의 보장에 노력하여야 하며, 법률이 정하는 바에 의하여 최저임금제를 시행하여야 한다." d.. 2024. 9. 30. css로 동그라미 만들기 동그라미를 만들기 위해 CSS를 사용하는 방법은 여러 가지가 있습니다. 여기에 간단한 방법을 소개해 드리겠습니다. border-radius 속성 사용 border-radius 속성을 사용하여 원형으로 만들 수 있습니다. .circle { width: 100px; height: 100px; background-color: #3498db; border-radius: 50%; } 가상 요소(::before 또는 ::after)를 활용 가상 요소를 활용하여 동그라미를 만들 수도 있습니다. .circle { width: 100px; height: 100px; background-color: #3498db; border-radius: 50%; position: relative; } .circle::before { .. 2024. 1. 13. CSS로 팝업만들기 팝업만들기(예시)HTML 오늘의 작업 닫기 css로 팝업만들기 CSS.bg{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.75); transition: opacity 300ms; z-index: 1; opacity: 0; visibility: hidden;}.bg:target{ opacity: 1; visibility: visible; }.popup{ display: block; position: fixed; top: 50%; lef.. 2023. 9. 29. css로 햄버거 메뉴 만들기 (<label>활용) 햄버거 메뉴란 일반적으로 홈페이지의 스마트폰에서 자주 사용되는 기능입니다. 좁은 화면 특성상 유저가 사용하기 편하도록 설계된 UI디자인입니다. (3선 아이콘은 햄버거 모양을 연상시킨다고 해서 햄버거 메뉴라고 불립니다.) 햄버거 메뉴 만들기(예시) HTML 햄버거 메뉴를 만들때 중요한 포인트라고 할 수 있는 요소는 항목명과 안에서 구성하는 요소를 연관 및 반응시키기 위해 사용됩니다. 따라서 클릭했을때, 동일한 동작이 가능해지도록 하는 역할을 합니다. 즉, 태그의 for 속성값과 input의 id의 속성값을 동일하게 연관짓게 합니다. 뉴스 경제 정치 문화 스포츠 구독 게임 영화 애니메이션 여행 육아 CSS 처음 보이는 화면에는 3선 아이콘만이 나오는데, 이는 .menu 가 display: none;으로 되어.. 2023. 9. 19. display: block, inline-block, inline 차이점 display 속성에서 html 요소가 형성하는 박스를 조정할 수 있으며, 주로 display에는 block, table, flex, gird등으로 css로 레이아웃을 구성하는 용도로도 많이 쓰이고 있습니다. display: block; display: block은 부모요소의 너비만큼 같은 너비로 채워집니다. 예를 들어 부모요소의 너비가 300px라고 가정했을 때, 자식요소의 너비도 300px만큼 채워집니다. HTML 오늘의 작업 1 오늘의 작업 2 오늘의 작업 3 CSS .block div{ display: block; background: #ffd67a; } .block div:nth-child(2){ background: #ffe29f; } .block div:last-child{ backgroun.. 2023. 9. 15. 이전 1 2 3 4 다음
