별의 공부 블로그 🧑🏻‍💻

🗒️ 웹 프로그래밍 (6)

728x90
  1. 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..

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

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

  3. 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..

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

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

  5. 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 ..

  6. 2021.04.19 [textarea] 영역 크기 조절 방지

    [textarea] 영역 크기 조절 방지 태그를 사용할 경우, 기본적으로 영역의 크기를 변경할 수 있다. 이러한 기능을 없애려면 다음과 같이 style 속성을 넣어주면 된다. ■ 테스트

728x90

티스토리툴바