🗒️ HTML (7)

1. 2022.07.12 [HTML] 요소에 마우스 커서를 올릴 때 설명문 나타나도록 하기 (Hover Text 추가하기)

   요소에 마우스 커서를 올릴 때 설명문 나타나도록 하기 (Hover Text 추가하기) 들어가며 요소에 속성을 추가하여 요소에 마우스 커서를 올리면 설명문이 나타나도록 설정할 수 있다. 방법 요소에 title 속성을 지정해주면 된다. 사용 예 참고 https://stackoverflow.com/questions/11022843/add-hover-text-without-javascript-like-we-hover-on-a-users-reputation Add hover text without javascript like we hover on a user's reputation In stackoverflow, when we hover on a user's reputation we see a text. I ha..
2. 2022.05.12 [JavaScript] 특정 요소를 새로운 새로운 창으로 띄우기

   특정 요소를 새로운 창으로 띄우기 개요 자바스크립트를 이용하여 특정 요소를 새 창으로 띄울 수 있도록 할 수 있다. 코드 See the Pen PopUpElem (with JavaScript) by Sangsoon Kim (@starrykss) on CodePen.
3. 2022.04.10 [CSS] 링크 밑줄(Underline) 없애기

   링크 밑줄(Underline) 없애기 개요 태그를 사용할 때 href 옵션을 사용할 경우, 글자 밑에 밑줄(Underline)이 생기게 된다. 간단한게 CSS를 사용하여 이러한 밑줄을 없애줄 수 있다. 방법 적용시키고자 하는 요소의 text-decoration 속성을 none으로 지정해주면 된다. item { text-decoration: none; } 적용 예 HTML 블로그 홈 CSS a { text-decoration: none; } 참고 HTML 선언과 동시에 한 번에 적용시키기 style 옵션을 사용하여 적용 시켜 준다. 블로그 홈 강제로 적용시키기 important! 를 세미콜론(;) 앞에 추가해준다. a { text-decoration: none !important; } 링크 위에 마우스 커..
4. 2022.03.30 [CSS] placeholder 속성에 스타일 적용하기

   placeholder 속성에 스타일 적용하기 개요 placeholder 속성은 input 요소나 textarea 요소에 안내문을 넣을 수 있도록 해주는 속성이다. HTML5에서 추가된 속성이다. 스타일 적용 방법 HTML CSS placeholder 속성 앞에 :: 지시자를 넣어주면 된다. input::placeholder { font-style: italic; font-size: 20px; } 스타일 적용 결과 See the Pen Untitled by Sangsoon Kim (@starrykss) on CodePen.
5. 2022.02.25 [HTML/CSS/JS] Scroll Indicator 만들기

   Scroll Indicator 만들기 화면의 스크롤에 따라 이동된 양을 표시하는 Scroll Indicator 를 다음과 같이 쉽게 만들 수 있다. Scroll Indicator Scroll Down to See The Effect We have created a "progress bar" to show how far a page has been scrolled. It also works when you scroll back up. It is even responsive! Resize the browser window to see the effect. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,..
6. 2021.04.19 [textarea] 영역 크기 조절 방지

   [textarea] 영역 크기 조절 방지 태그를 사용할 경우, 기본적으로 영역의 크기를 변경할 수 있다. 이러한 기능을 없애려면 다음과 같이 style 속성을 넣어주면 된다. ■ 테스트
7. 2020.11.05 Checkbox, Radio, Select에서 선택된 항목 출력하기

   Checkbox, Radio 또는 Select 에서 선택한 항목을 가져와 자바스크립트로 출력하는 코드각각 사용법이 다르다는 것을 명심하자. 1. Checkbox - 코드 1234567891011121314151617181920212223242526272829303132333435363738394041 Document function output(form) { var a = "당신의 취미는 \n"; if (form.check1.checked) { // checked 속성 확인 a += form.check1.value + "\n"; } if (form.check2.checked) { // checked 속성 확인 a += form.check2.value + "\n"; } if (form.check3.chec..