어제 오늘 내일

이미지 투명도 지정하기 이미지의 투명도를 조절하기 위해서는 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..

Open in browser VSCode에서 Open in browser 라는 확장 프로그램을 이용하여 작성한 HTML 파일을 브라우저에서 열 수 있습니다. 1. 확장 프로그램 설치 (Open in browser) Extension -> Open in browser 검색/선택 -> install 2. HTML을 브라우저에서 실행하기 (단축키 : Alt + B) 선택한 HTML 파일은, 시스템의 default browser에서 실행됩니다. 실행할 파일 선택 -> Alt + B 실행할 파일 선택 -> 마우스 오른쪽 버튼 -> Open in Default Brower 선택

웹에서 알파벳의 대문자를 소문자로, 소문자를 대문자로 변환하는 방법은 2가지가 있습니다. Javascript를 이용하는 방법 [Javascript] 대소문자 변경 (대문자를 소문자로, 소문자를 대문자로) [Javascript] 문자열의 첫 글자만 대문자로 변환하기 CSS를 이용하는 방법 text-transform 여기서는 CSS를 이용하여 대소문자를 변환하거나, 첫글자만 대문자로 바꾸는 방법을 소개합니다. text-transform CSS의 text-transform 속성은 요소의 문자열을 대문자 또는 소문자로 표시하는 방법을 지정합니다. text-transform 속성 값 none uppercase : 텍스트를 대문자로 lowercase : 텍스트를 소문자로 capitalize : 각 단어의 첫글자를 ..

가상 요소란? (Pseudo-elements) CSS 가상 요소는, 선택자에 추가하는 키워드로, 선택한 요소(element)의 일부에만 스타일을 적용합니다. 즉, 선택한 요소 전체에 스타일을 적용하는 것이 아니라, 요소의 일부에만 스타일을 적용합니다. 다시 말해, HTML에 새로운 요소(element)를 추가한 것처럼 동작합니다. 가상 요소 사용법 가상 요소는, ::before, ::after, ::first-letter 와 같이 앞에 '::'를 붙여서 표기합니다. p::first-letter { color: blue; } 위 코드로 영역의 첫번째 글자를 파란색으로 지정할 수 있습니다. 가상 요소 종류 가상 요소의 종류는 다음과 같습니다. ::before ::after ::first-letter ::fi..

HTML 페이지가 길 경우, 페이지의 상단에 목차를 만들고, 목차를 클릭하면, 페이지의 원하는 부분으로 이동하고자 할 때 책갈피 기능을 사용할 수 있습니다. 페이지 링크 만들기 제목 1 제목 2 태그의 'href' 속성값을 '#'로 시작해야 합니다. 여기서 '#' 뒤의 'title1', 'title2'는 이동하고자 하는 위치의 태그 name 값입니다. 이 링크를 클릭하면, 페이지 내의 위치로 커서가 이동합니다. 이동하고자 하는 위치 지정 제목 1 ....content.... 제목 2 ....content.... 이동하고자 하는 위치에 태그를 추가하고, name 속성에 고유한 이름을 지정해 줍니다.

CSS를 사용하여 div에 배경 이미지를 넣는 방법입니다. 배경 이미지 넣기 (background-image) 배경 이미지 반복 횟수 지정하기 (background-repeat) background-repeat 속성 값 배경 이미지 반복 (repeat) 배경 이미지 한 번만 넣기 (no-repeat) 가로 방향으로 이미지 반복 (repeat-x) 세로 방향으로 이미지 반복 (repeat-y) 배경 이미지 잘리지 않도록 반복 (space) - 공백 배경 이미지 잘리지 않도록 반복 (round) - 빈 공간 없음 배경 이미지 위치 지정하기 (background-position) 배경 이미지 가운데 한 번만 넣기 (center) 배경 이미지 크기 설정하기 (background-size) 이미지가 잘리지 않는 ..

div 안의 배경색을 지정하기 위해서는 css의 background-color 속성을 지정합니다. background-color 예제 div { height : 20px; width : 200px; } CSS에서 색깔을 지정하는 방법은 다음과 같습니다. 이름 16진수 RGB(A) HSL(A) 위 예제는 각각 4가지 방법을 이용하여 div의 배경색을 지정한 예제입니다. CSS에서 색깔을 지정하는 위 4가지 방법에 대해서는 지난 포스팅을 참조하세요. [CSS] CSS에서 색깔을 지정하는 4가지 방법 (이름, 16진수, RGB(RGBA), HSL(HSLA)) 이번에는 CSS에서 색상을 지정하는 방법을 정리해 보도록 하겠습니다. 색상을 지정하는 방법은 여러가지가 있지만 여기서는 가장 많이 사용되는 4가지 방법을..

Javascript를 사용하여 특정 노드의 모든 자식 노드를 삭제하는 방법입니다. innerHTML, textContent replaceChildren() removeChild(), remove() 1. innerHTML, textContent innerHTML 자식노드1 자식노드2 function remove_children() { // 부모 노드 선택 const parent = document.getElementById('parent'); // 자식 노드 삭제 parent.innerHTML = ""; } parent.innerHTML = ''; innerHTML 속성을 이용하면 element 안에 포함된 HTML 또는 XML을 읽어오거나 설정할 수 있습니다. 여기서는, parent 노드 안의 HTML..

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

Javascript의 문자열에서 특정 문자를 제거하기 위해서는 replace() 함수를 사용할 수 있습니다. replace() 특정 문자 제거하기 특정 문자 모두 제거하기 특정 문자 대소문자 구분 없이 모두 제거하기 replace() let newStr = str.replace(substr, newSubstr); replace() 함수는 str문자열에서 파라미터로 입력 받은 substr과 일치하는 부분을 찾아서, (substr은 일반 문자열이 될 수도 있고, 정규식이 될 수도 있습니다.) newSubstr로 교체한 문자열을 리턴합니다. (newSubstr은 일반 문자열이 될 수도 있고, 함수가 될 수도 있습니다.) 파라미터 substr 변경할 대상 문자열 (또는 정규식) 이 값이 일반 문자열일 경우, 전..