어제 오늘 내일

1. inline-block .parent { border: 1px solid black; margin: 1px; padding: 10px; text-align: center; } .child { display: inline-block; width: 100px; height: 100px; background-color: skyblue; border: 1px solid black; } 는 기본적으로 'block' 요소입니다. block 요소는 항상 새로운 줄에 표시되고, 가로폭 전체를 차지합니다. 따라서, 요소는 항상 수직으로 배치되어 쌓이게 됩니다. display: inline-block; 를 가로로 배치하기 위해서 inline-block 속성을 지정하였습니다. inline-block은 inline과 b..

CSS로 스크롤바를 항상 보이게 표시하려면 'overflow' 속성을 사용합니다. overflow, overflow-x, overflow-y 다음은 영역에 강제로 스크롤바를 생성한 예제입니다. 전체 scroll 가로 scroll 세로 scroll .mydiv1 { overflow: scroll; } .mydiv2 { overflow-x: scroll; } .mydiv3 { overflow-y: scroll; } div { width: 200px; height: 100px; background-color: skyblue; margin: 10px; border: 1px solid black; text-align: center; } overflow: scroll; 요소의 크기에 상관없이, 가로 세로 방향 스크..

버튼을 클릭했을 때, Javascript를 이용하여 div 영역을 보여주거나 숨기는 예제입니다. 1. display 클릭하세요 #my-div { width: 100px; height: 100px; background-color: blue; } function btnClick() { const mydiv = document.getElementById('my-div'); if(mydiv.style.display === 'none') { mydiv.style.display = 'block'; }else { mydiv.style.display = 'none'; } } HTML 버튼 클릭 시, 호출할 함수를 연결합니다. JAVASCRIPT document.getElementById('my-div'); 보이기, 숨..

jQuery를 이용하여 클래스를 추가, 삭제하고 토글 하는 방법입니다. 클래스 추가 - addClass 안녕하세요 .bg-yellow { background-color: yellow; } $("#myDiv").addClass("bg-yellow") $("myDiv").addClass("bg-yellow"); id가 myDiv인 요소에 bg-yellow 클래스를 추하여, div의 배경색이 노란색으로 변경되었습니다. 클래스 삭제 - removeClass 안녕하세요 .bg-yellow { background-color: yellow; } $("#myDiv").removeClass("bg-yellow") $("#myDiv").removeClass("bg-yellow") 이번 예제의 html을 보면 bg-yell..

hasClass() jQuery의 hasClass() 메소드를 이용하여 특정 클래스가 존재하는지 확인할 수 있습니다. 예제 .my1 { background-color: yellow; } const hasMy1 = $('#myDiv').hasClass('my1'); // true const hasMy2 = $('#myDiv').hasClass('my2'); // true const hasMy3 = $('#myDiv').hasClass('my3'); // false const hasMy12 = $('#myDiv').hasClass('my1 my2'); // true const hasMy21 = $('#myDiv').hasClass('my2 my1'); // false const hasMy23 = $('#my..

이번에는 버튼을 왼쪽, 오른쪽, 가운데 정렬하는 방법을 정리해 보았습니다. 1. text-align 왼쪽 정렬 가운데 정렬 오른쪽 정렬 .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } 버튼을 감싸고 있는 div 영역에 text-align 속성을 적용하여 그 안의 버튼을 정렬하였습니다. 2. flex 왼쪽 정렬 가운데 정렬 오른쪽 정렬 .container { display: flex; } .left { justify-content: flex-start; } .center { justify-content: center; } .right { justify-content: flex-end; } 버튼을..

:nth-child() nth-child() 는 파라미터로 입력 된 패턴의 순서에 따라 요소를 선택하는 선택자입니다. 이 선택자를 이용하여, 테이블의 짝수 또는 홀수 행에만 스타일을 적용할 수 있습니다. 파라미터로는 함수 또는 지정된 키워드를 입력할 수 있습니다. 함수 예제 2n+1 : 홀수 번째 요소를 선택합니다. 2n : 짝수 번째 요소를 선택합니다. 5 : 5번째 요소를 선택합니다. 5n : 5의 배수 번째가 되는 요소를 선택합니다. 이런 식으로 원하는 함수를 입력할 수 있습니다. 키워드 odd : 홀수 번째 요소를 선택합니다. even : 짝수 번째 요소를 선택합니다. 테이블의 홀수 행에만 스타일 적용하기 이름 나이 Anna 20 Tina 30 David 33 table, td, th { bord..

CSS의 요소 중 홀수 번째, 또는 짝수 번째 요소를 선택하는 방법입니다. :nth-child() 형제 요소들 중 파라미터로 입력된 패턴에 따라, 요소를 선택합니다. 파라미터에는 다음과 같은 값들을 넣을 수 있습니다. 키워드 odd : 홀수 번째 요소를 선택합니다. even : 짝수 번째 요소를 선택합니다. 함수 예제 2n+1 : odd와 같습니다. 홀수 번째 요소를 선택하게 됩니다. 2n : even과 같습니다. 짝수 번째 요소를 선택하게 됩니다. 5n : 5의 배수 번째 요소를 선택합니다. 7 : 7번째 요소를 선택합니다. n : 모든 요소를 선택합니다. 이 외에도 자유롭게 필요한 함수를 입력하여 원하는 요소를 선택할 수 있습니다. 홀수, 짝수 선택자(odd, even) 홀수 짝수 홀수 짝수 홀수 짝..

테이블의 행(row)에 마우스를 올릴 경우, 해당 행의 배경색을 변경하는 방법입니다. :hover css의 pseudo-class(의사 클래스)인 :hover는 보통 마우스 포인터가 요소 위에 올라가면 선택됩니다. 이 :hover를 사용하여, 마우스가 테이블의 특정 row에 올라갔을 때, 행 전체의 배경색을 변경할 수 있습니다. 마우스오버 시, 행(row) 배경색 변경 이름 나이 Anna 20 Tina 30 David 33 table, td, th { border: 1px solid black; border-collapse: collapse; } table tr:hover { background-color: GreenYellow; } table tr:hover { background-color: Gree..

테이블의 제목을 붙이기 위해 태그를 사용할 수 있습니다. 여기서는 이 캡션의 위치를 지정하는 방법을 알아보도록 하겠습니다. 캡션의 위치 지정 (caption-side) 캡션의 위치를 지정하기 위해 caption-side 속성을 사용할 수 있습니다. top : 캡션을 테이블의 위쪽에 배치합니다. bottom : 캡션을 테이블의 아래쪽에 배치합니다. 캡션 위쪽에 놓기 학생 이름 나이 Anna 20 Tina 22 table, td, th { border: 1px solid black; border-collapse : collapse; } caption { caption-side: top; } caption-side: top; caption-side 속성 값을 top으로 지정하여, caption을 테이블의 위쪽..