별의 공부 블로그 🧑🏻‍💻

🗒️ web programming (7)

728x90
  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.06.11 [CSS] 텍스트 요소 가운데 정렬하기 (horizontally, vertically)

    텍스트 요소 가운데 정렬하기 (horizontally, vertically) 들어가며 CSS를 이용하여 간단하게 텍스트 요소를 수직적/수평적으로 가운데 정렬할 수 있다. 방법 ① 모든 텍스트를 수평적으로(Horizontally) 가운데 정렬할 경우 요소의 text-algin 속성을 center 로 설정해준다. body { text-align: center; } ② 텍스트를 수직적으로(Vertically) 가운데 정렬할 경우 padding 속성 이용하기 요소의 padding 속성을 num1_size 0 num1_size 로 설정해준다. div { padding: 50px 0 50px; } line-height 속성 이용하기 요소의 line-height 속성과 height 속성을 비슷하게 설정해준다. div..

  3. 2022.06.03 [CSS] 마우스 커서(Mouse Cursor)

    마우스 커서(Mouse Cursor) 들어가며 CSS에서 사용할 수 있는 마우스 커서의 종류에 대해 알아보자. CSS에서 마우스 커서는 다음과 같이 지정할 수 있다. #element:hover { cursor: mouse_cursor_value; } 마우스 커서의 종류

  4. 2022.05.31 [CSS] <span> 요소 줄 바꿈 하기

    요소 줄 바꿈 하기 들어가며 여러 개의 요소를 작성할 경우, 한 줄에 모두 표시되게 된다. Element 1 Element 2 Element 3 더보기 Element 1 Element 2 Element 3 간단하게 CSS 속성을 적용하여 이러한 요소가 한 줄마다 표시되도록 할수 있다. 방법 부모 요소와 자식 요소에 모두 display: block; 속성을 적용시켜준다. Element 1 Element 2 Element 3 #test { display: block; } #s1 { display: block; } #s2 { display: block; } #s3 { display: block; } 테스트 See the Pen Untitled by Sangsoon Kim (@starrykss) on CodeP..

  5. 2022.05.13 [CSS] <body> 요소 가운데 정렬하기

    요소 가운데 정렬하기 간단하게 태그에 margin 속성을 적용하여 태그를 가운데로 정렬 할 수 있다. 방법 간단하게 margin: 0 auto; 속성을 적용해주면, 요소가 가운데로 정렬된다. body { margin: 0 auto; width: 1200px; } 적용 예

  6. 2022.05.11 [CSS] 사파리(Safari) 기본 스타일 제거하기 (input, button, textarea)

    사파리(Safari) 기본 스타일 제거하기 (input, button, textarea) 개요 Mac OS, iOS에서 사파리(Safari) 브라우저를 통해 홈페이지에 접속할 경우, 사파리 기본 스타일이 적용되어 자신이 원한 스타일이 안나오는 경우가 있다. 이러한 특징은 , , 요소에서 두드러지게 나타난다. 이러한 사파리 기본 스타일은 아래와 같은 CSS 코드를 추가해줌으로써 없애줄 수 있다. 코드 input, textarea, button { appearance: none; border-radius: 0; -moz-appearance: none; -webkit-appearance: none; -webkit-border-radius: 0; -moz-border-radius: 0; } appearance ..

  7. 2022.04.27 [JavaScript] 공백이 검색되지 않도록 하기 (검색창 구현)

    공백이 검색되지 않도록 하기 (검색창 구현) 개요 검색창(Search Bar) 기능을 구현할 때, 자바스크립트(JavaScript)를 이용하여 공백의 내용이 검색되지 않도록 설정할 수 있다. 방법 검색창의 내용이 비어있는지 확인하는 알고리즘이 들어있는 함수를 생성한다. getElementById() 함수를 사용하여 검색창(searchbar)에 있는 값(value)을 가져온 후, trim() 함수를 이용하여 공백('')을 기준으로 잘라준다. trim() 함수를 사용한 후의 값의 공백일 경우, 내용이 비어있다는 메시지와 함께 함수를 종료시켜준다. 그렇지 않을 경우 검색 작업을 수행시키도록 한다. 전송(submit) 버튼의 onclick 속성에 함수를 넣어준다. 사용 예 HTML JavaScript funct..

728x90

티스토리툴바