어제 오늘 내일

CSS의 text-indent 속성을 사용하면 텍스트 단락의 들여쓰기와 내어쓰기의 정도를 설정할 수 있습니다. text-indent 속성 CSS의 text-indent 속성을 사용하면, 블록에서 텍스트 앞에 놓이는 공간의 길이를 설정할 수 있습니다. 기본값 : 0 허용값 length : px, em 등 percentage : ex) 10% 등 값이 양수일 경우, 들여쓰기가 됩니다. 값이 음수일 경우, 내어쓰기가 됩니다. 단락 들여쓰기 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나..

마우스 오버 시, 이미지 어둡게 하기 - :hover 마우스 오버 시, 이미지 어둡게 하기 (천천히) - transition 1. 마우스 오버 시, 이미지 어둡게 하기 - :hover :hover 가상 클래스인 :hover는 보통 마우스 포인터가 요소 위에 올라가면 선택됩니다. filter: brightness() filter 속성에 적용되는 brightness() 함수는 대상 요소의 밝기를 조정합니다. brightness(1)은 원본 밝기이고, 숫자가 작아질수록 어둡고, 클수록 밝습니다. 자세한 설명은 지난 포스팅을 참조하세요. [HTML/CSS] 이미지 어둡게 하는 3가지 방법 (brightness, background-color, linear-gradient) 예제 my_mouseover.html ..

체크박스 선택을 초기화하는 방법입니다. 체크박스 초기화 하기 개 고양이 토끼 function initCheckbox() { // 초기화할 checkbox 선택 const checkboxes = document.getElementsByName('animal'); // 체크박스 목록을 순회하며 checked 값을 초기화 checkboxes.forEach((checkbox) => { checkbox.checked = false; }) } 위 예제는 체크박스를 몇 개 선택한 후, '초기화' 버튼을 클릭하면 선택된 체크박스가 초기화 됩니다. const checkboxes = document.getElementsByName('animal'); 초기화할 체크박스 목록을 선택합니다. getElementsByName()..

CSS를 적용하는 3가지 방법 HTML에 CSS를 적용하는 방법은 3가지가 있습니다. 인라인 (Inline CSS) 내부 (Embedded CSS) 외부 (External CSS) 인라인 (Inline CSS) 안녕하세요? 스타일을 적용하고자 하는 HTML 위치에 'style' 속성을 정의하여 HTML에 직접 스타일을 정의할 수 있습니다. 내부 (Embedded CSS) 안녕하세요? CSS 속성을 HTML의 태그 사이에 을 배치하는 방법입니다. 이 때는, HTML의 어느 항목에 CSS를 적용해야 하는지를 나타내기 위해 CSS 선택자를 사용해야 합니다. 위 예제에서는 태그 안의 'p'가 선택자(CSS Selector)입니다. 이것은 HTML의 'p' 태그를 선택하여 스타일을 적용하도록 합니다. 외부 (Ex..

이번에는 다음과 같이 div 안에 있는 text를 가로, 세로로 가운데 정렬하는 방법을 알아보겠습니다. 안녕하세요 .my-div { border : 1px solid blue; height : 200px; } 1. 가로로 가운데 정렬하기 여기에서 소개할 안의 글자를 가로로 가운데 정렬하는 방법은 다음 2가지 입니다. text-align justify-content text-align 안녕하세요 .my-div { border : 1px solid blue; height : 200px; text-align : center; } text-align : center; text-align 속성은 가로정렬을 설정할 수 있는 속성입니다. 여기서는, 가운데 정렬을 하기 위해 속성값을 'center'로 설정하였습니다. ..

지난번에는 테이블 안의 글자를 정렬하는 방법을 알아보았습니다. [HTML/CSS] 테이블 글자 왼쪽, 오른쪽, 가운데, 위, 아래, 중앙 정렬하기 (가로, 세로 정렬) [HTML/CSS] 테이블 글자 왼쪽, 오른쪽, 가운데, 위, 아래, 중앙 정렬하기 (가로, 세로 정렬) HTML과 CSS를 이용하여 테이블 안의 글자를 정렬하는 방법을 정리하였습니다. 1. 글자 왼쪽, 오른쪽, 가운데 정렬하기 (가로 정렬) 2. 글자 위, 아래, 중간 정렬하기 (세로 정렬) 3. 정리 (가로 세로 모 hianna.tistory.com 이번에는, CSS를 사용해서 HTML 테이블을 가운데 정렬하는 방법입니다. 테이블 가운데 정렬하기 Product Price Apple 3000 Banana 2000 table { margi..

지난번에는 구구단을 출력하는 방법을 알아보았습니다. [Javascript] for문 이용해서 구구단 출력 [Javascript] for문 이용해서 구구단 출력 지난번에는 for문의 기본적인 사용방법을 알아보고, 별찍기 예제도 만들어 보았습니다. [Javascript] 반복문(1) - for [Javascript] for문을 이용해서 별찍기 이번에는 for문을 응용하여 구구단을 찍는 예제 hianna.tistory.com 이번에는 구구단을 테이블 형태로 만들어보겠습니다. 구구단 테이블 document.write(''); // header document.write(''); document.write(''); for(let i = 2; i

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