어제 오늘 내일

버튼을 클릭했을 때, 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'); 보이기, 숨..

이미지 투명도 지정하기 이미지의 투명도를 조절하기 위해서는 CSS의 opacity 속성을 사용합니다. opacity opacity는 불투명도라는 뜻입니다. 따라서 opcity는 대상 객체가 얼마나 불투명한지를 나타냅니다. 허용값 0.0 ~ 1.0 0% ~ 100% 숫자가 클수록 불투명하고, 숫자가 작을 수록 투명합니다. opacity 예제 my_image.html opacity 1.0 opacity 0.5 opacity 0.0 my_image.css div { width: 300px; float: left; border: 1px solid; } img { width: 300px; } .my_img1 { opacity: 1.0; } .my_img2 { opacity: 0.5; } .my_img3 { opa..

이번에는 CSS에서 색상을 지정하는 방법을 정리해 보도록 하겠습니다. 색상을 지정하는 방법은 여러가지가 있지만 여기서는 가장 많이 사용되는 4가지 방법을 정리하였습니다. 이름 16진수 RGB 또는 RGBA HSL 또는 HSLA 1. 이름 색상의 이름을 직접 써서 컬러를 지정할 수 있습니다. 브라우저가 인식할 수 있는 색상 이름은 대략 147개입니다. 이 방법은 쉽게 색상을 지정할 수 있는 장점이 있지만, 표현할 수 있는 색상의 한정적이고, 색상을 사용하려면 이름을 외우고 있어야 한다는 단점이 있습니다. div { height : 20px; width : 200px; } 색상의 이름을 직접 css의 속성값으로 지정해 주었습니다. 전체 색상 이름은 아래 링크의 페이지를 참조하세요. Color keywords..

Javascript를 이용하여 DOM 객체를 다루는 방법을 알아보고 있습니다. [Javascript] 선택자, DOM 특정 요소(element) 찾기 [Javascript] class 추가/변경/삭제/읽기 (className, classList) [Javascript] innerHTML, innerText, textContent 차이점 이번에는 DOM의 CSS Style을 변경하고, 읽어오는 방법을 정리해 보도록 하겠습니다. 1. style 속성값 변경 (1) style 속성 사용하기 - css 속성 하나씩 추가하기 (2) style.cssText 사용하기 - css 속성 한번에 여러개 추가하기 (3) style, style.cssText 사용시 주의할 점 2. style 속성값 읽어오기 (1) styl..

지난번에는 테이블의 행을 삭제하고 추가하는 방법을 알아보았습니다. [Javascript] 테이블에 행 추가, 삭제하기 (버튼 클릭) [Javascript] 테이블에 행 추가, 삭제하기 (버튼 클릭) 이번에는 버튼을 클릭하여 테이블에 행을 추가하고 삭제하는 방법을 알아보도록 하겠습니다. 1. 테이블에 행 추가하기 - insertRow(), insertCell() 2. 테이블에 행 삭제하기 - deleteRow() 1. 테이블에 행 추 hianna.tistory.com 이번에는 버튼을 클릭 했을 때, 테이블의 행을 숨기거나, 보여주는 방법을 정리해 보겠습니다. display 스타일 속성 사용하여 행 숨기기/보이기 사과apple 오렌지orange 바나나banana function hideRow() { cons..

HTML과 CSS를 이용하여 테이블 안의 글자를 정렬하는 방법을 정리하였습니다. 1. 글자 왼쪽, 오른쪽, 가운데 정렬하기 (가로 정렬) 2. 글자 위, 아래, 중간 정렬하기 (세로 정렬) 3. 정리 (가로 세로 모두 가운데 정렬하기) 1. 글자 왼쪽, 오른쪽, 가운데 정렬하기 (가로 정렬) 테이블 안의 글자의 가로 방향 정렬은 CSS의 'text-align' 속성을 사용하고, 속성값으로 'left', 'right', 'center'가 올수 있습니다. 기본 Product Price Apple 3000 Banana 2000 table, td, th { border : 1px solid black; border-collapse : collapse; } table { width : 300px; height :..