box-sizing 속성

box-sizing 속성

box-sizing 속성 1. box-sizing 속성 - 박스 모델에서 요소의 크기를 계산하는 방법을 제어하는 데 사용되는 속성입니다. 2. box-sizing의 주요 값 - content-box (기본값) - 요소의 크기를 요소의 콘텐츠 영역에 따라 계산합니다. - 요소의 width와 height는 콘텐츠의 크기만을 고려하며, padding 및 border은 요소 크기에 추가됩니다. - border-box - 요소의 크기를 요소의 테두리(border)를 포함한 영역에 따라 계산합니다. - 요소의 width와 height는 콘텐츠와 padding, 그리고 border까지 고려한 크기가 됩니다. - initial - 기본값으로 설정합니다. - inherit - 부모 요소의 속성값을 상속받습니다. 3. 예..

  • format_list_bulleted Front-End Study/HTML+CSS
  • · 2023. 11. 4.
  • textsms
role 속성

role 속성

role 속성 1. role 속성 - 웹 페이지의 접근성을 향상시키기 위해 사용되는 속성 - 해당 요소의 역할(role)을 정의하며, 스크린 리더 등의 보조 기술을 사용하는 사용자에게 콘텐츠를 전달하는 데 도움을 줌 2. 예시

  • format_list_bulleted Front-End Study/HTML+CSS
  • · 2023. 9. 25.
  • textsms
미디어 쿼리

미디어 쿼리

미디어 쿼리 1. 미디어 쿼리 - 웹 페이지가 표시되는 장치에 반응하도록 하여 반응형 웹을 구현할 수 있는데, 이때 사용하는 것이 미디어 쿼리임 - 미디어 쿼리는 두 가지 방법으로 사용 가능 - @media 규칙 - media 속성 2. @media 규칙을 이용해 미디어 쿼리 사용하기 Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit........... - max-width: 800px는 화면 너비가 800이 되기 전까지의 설정 (최대 너비) - min-width: 800px는 화면 너비가 800이 될 때부터의 설정 (최소 너비) 3. media 속성을 ..

  • format_list_bulleted Front-End Study/HTML+CSS
  • · 2022. 11. 2.
  • textsms
flex 관련 속성 정리 3

flex 관련 속성 정리 3

flex 관련 속성 정리 3 1. flex-basis 속성 - 아이템들의 기본 크기를 설정 (flex-direction이 row 일 경우 너비, column 일 경우 높이를 조절함) - 0, %, px, rem 등으로 설정 가능 ※ flex-basis에서 설정한 너비가 이미 넘은 아이템일 경우, 축소되지 않음 → 그럴 경우, word-wrap: break-word를 적용하여, 설정한 너비만큼 줄어들고 남은 텍스트는 줄바꿈됨 AAA BBB CCC .container { border: 1px solid black; width: 500px; height: 200px; display: flex; font-size: 2rem; font-weight: bold; } .container > div { margin: ..

  • format_list_bulleted Front-End Study/HTML+CSS
  • · 2022. 11. 2.
  • textsms
flex 관련 속성 정리 2

flex 관련 속성 정리 2

flex 관련 속성 정리 2 1. justify-content 속성 - 메인축 방향으로 아이템들을 정렬 ※ justify와 align - justify : 메인축(가로 방향)으로 정렬 - align : 수직축(세로 방향)으로 정렬 - flex-start (기본값) : 아이템들을 시작점으로 정렬 (flex-direction이 column일 경우, 위로 정렬) A B C .container { border: 1px solid black; width: 400px; height: 100px; display: flex; font-size: 2rem; font-weight: bold; justify-content: flex-start; } .container > div { width: 50px; height: 50..

  • format_list_bulleted Front-End Study/HTML+CSS
  • · 2022. 10. 30.
  • textsms
flex 관련 속성 정리 1

flex 관련 속성 정리 1

flex 관련 속성 정리 1 1. display: flex 속성 - 레이아웃을 배치하는데 사용 - 속성에 따라 각각의 아이템들이 어떠한 형태로 배치되는지 설정 - display: flex를 적용하면 블록 형태로 배치된 div가 가로 방향으로 배치 red blue green /* display: flex를 적용할 경우, 세로로 배치되었던 아이템들이 가로로 배치됨 */ .container {display: flex;} .box { width: 100px; margin: 10px; font-size: 2rem; font-weight: bold; } .red {background-color: red;} .blue {background-color: blue;} .green {background-color: gre..

  • format_list_bulleted Front-End Study/HTML+CSS
  • · 2022. 10. 27.
  • textsms