어제 오늘 내일

CSS로 와 사이 간격 조정하기  div와 div 사이의 간격을 조정하는 방법은 여러 가지가 있습니다.주로 CSS의 margin, gap(flexbox, grid) 속성을 사용합니다.  1. margin 사용하기가장 일반적인 방법으로, margin을 사용하여 두 div 사이의 간격을 조정할 수 있습니다. 첫 번째 박스두 번째 박스.box { background-color: lightblue; padding: 20px; margin-bottom: 20px; /* 아래쪽에 20px 간격 */}   margin-bottom: 20px;  아래쪽 간격을 조정합니다.margin-top, margin-left, margin-right 등을 사용해 각각의 방향에 간격을 줄 수 있습니다. 2. fl..

HTML에 외부 CSS 파일 불러와서 적용하기 HTML에서 외부 CSS 파일을 불러오려면 태그를 사용합니다.이 태그는 보통 외부 CSS 불러오기 예제   href 속성에 외부 CSS 파일의 경로를 작성합니다.여기서는 style.css가 HTML 파일과 같은 디렉토리에 있다고 가정합니다.rel="stylesheet"이 속성은 링크된 파일이 스타일시트임을 나타냅니다. 3. 결과 브라우저에서 index.html을 열면,가운데 정렬되고, 글자색이 빨간색인 글자가 표시됩니다.

div에 대각선 그리기 (linear-gradient) 먼저, linear-gradient에 대한 자세한 설명은 지난 포스팅을 참고하세요.2025.02.24 - [IT/CSS] - [CSS] linear-gradient 속성 예제, 배경색 그라데이션 효과 [CSS] linear-gradient 속성 예제, 배경색 그라데이션 효과linear-gradientlinear-gradient는 CSS에서 배경에 색깔이 점점 변하는 효과를 줄 때 사용하는 방법입니다.예를 들어, 빨간색에서 파란색으로 부드럽게 바뀌는 배경을 만들고 싶다면 linear-gradient를 사용합hianna.tistory.com  대각선 그리기 예제.diagonal-line { width: 300px; height: 300px; bor..

linear-gradientlinear-gradient는 CSS에서 배경에 색깔이 점점 변하는 효과를 줄 때 사용하는 방법입니다.예를 들어, 빨간색에서 파란색으로 부드럽게 바뀌는 배경을 만들고 싶다면 linear-gradient를 사용합니다.색깔이 선처럼 쭉 이어지면서 자연스럽게 섞여 보이는 효과를 줄 수 있습니다. 0. 기본 문법background: linear-gradient(방향, 색상1, 색상2, ...); 방향: 색상이 이동하는 방향(각도 또는 위치)색상1, 색상2, ...: 그라디언트에 사용할 색상 (최소 2개 이상)  1. 방향 설정1) 각도 사용.my-class { width: 200px; height: 200px; background: linear-gradient(45deg, red..

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; } 버튼을..