어제 오늘 내일

와 의 차이  div와 span은 HTML에서 내용을 묶거나 스타일을 적용하기 위해 사용하는 태그입니다.하지만 두 태그의 역할과 사용 방법이 다릅니다. 1. 기본 차이점  역할블록 요소 (Block-level Element)인라인 요소 (Inline Element)사용 용도주로 레이아웃 구성 및 큰 덩어리 묶음텍스트 내부 또는 작은 부분 스타일 적용디스플레이 특성한 줄 전체를 차지하며 줄 바꿈 발생줄 바꿈 없이 콘텐츠 주변에만 적용CSS 적용width, height, margin, padding 등 적용 가능width, height 적용 불가, margin, padding 일부 제한 2. div 태그블록(Block-level) 요소로 한 줄 전체를 차지합니다.자동으로 줄 바꿈이 되어 다음 요소는 아래쪽에..

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을 열면,가운데 정렬되고, 글자색이 빨간색인 글자가 표시됩니다.

HTML에서 외부 JS 파일의 함수 호출하기 1. JavaScript 파일 생성먼저, 외부 JavaScript 파일을 생성합니다.예를 들어, script.js 파일을 다음과 같이 만듭니다.// script.jsfunction sayHello() { alert("Hello, World!");}  2. HTML 파일에 외부 JS 파일 연결HTML 파일에서 외부 JS 호출 예제 Say Hello    src="script.js"  외부 JavaScript 파일의 경로를 지정합니다.이 예제에서는, script.js가 HTML 파일과 같은 디렉토리에 있다고 가정합니다.경로 설정같은 폴더에 있을 경우: 다른 폴더에 있을 경우 :   defer  HTML 문서가 완전히 파싱된 후에 JavaScript가..

값 가져오기, 넣기, 지우기 다음은 textarea의 값을 읽고, 쓰고, 지우는 예제입니다. 안녕하세요 값 가져오기 값 설정하기 값 삭제하기 // textarea의 값을 가져와서 출력 function getTextareaValue() { // textarea 값 읽어오기 const textareaValue = document.getElementById('myTextarea').value; // 읽어온 내용 출력 document.getElementById('result').innerText = textareaValue; } // textarea에 새로운 값을 설정 function setTextareaValue() { const newValue = '새로운 텍스트 내용'; document.getElement..

동적 HTML 요소 추가하기 다음은 버튼이 클릭되면 container div에 동적으로 div text 요소가 추가되는 예제입니다. 텍스트 추가 function addText() { // 추가할 요소 생성 const newElement = document.createElement('div'); // 요소 안에 html 요소 추가 newElement.innerHTML = '텍스트가 추가되었습니다.'; // 생성된 요소를 추가할 부모요소(container div) 선택 const container = document.getElementById('container'); // 생성된 요소를 기존의 container div에 자식 요소로 추가 container.appendChild(newElement); } 위 ..

지난번에는 jQuery를 이용하여 div의 높이와 너비를 읽어오는 방법을 알아보았습니다. [jQuery] div 높이 너비 구하기 (height(), width()) div의 높이, 너비 변경하기 div의 높이와 너비를 구할 때와 마찬가지로 다음 두 함수를 사용할 수 있습니다. height() width() 위 두 함수를 사용하면 픽셀 단위로 요소의 높이, 너비를 지정할 수 있습니다. Hello #myDiv { background-color: yellow; } $('#myDiv').height(200); $('#myDiv').width(200); $('#myDiv').height(200); $('#myDiv').width(200); height()와 width() 함수의 파라미터로 div의 높이와 너비를..

jQuery를 이용해서 특정 class를 가지는 요소 갯수를 구하는 방법입니다. 클래스 선택자 / length const my2cnt = $('.my2').length; // 2 document.write(my2cnt); $('.my2').length $('.my2') 클래스 선택자를 이용하여 my2 클래스를 가지는 요소들을 선택합니다. length length 속성을 사용하여 위에서 선택된 요소가 몇개인지 얻어냅니다. 위 예제에서 my2 클래스를 가지는 요소는 2개입니다.

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..