오늘 작업한 내용 : 웹 디자인 시안대로 반응형 구현
오늘의 학습포인트 ->
https://tailwindcss.com/docs/container
container None width: 100%;
sm (640px) max-width: 640px;
md (768px) max-width: 768px;
lg (1024px) max-width: 1024px;
xl (1280px) max-width: 1280px;
2xl (1536px) max-width: 1536px;
브레이크 포인트 (중단점)
📘 CSS의 hidden 속성
오늘은 CSS의 hidden 속성에 대해 알아보았다. 이 속성은 주로 요소를 화면에 보이지 않게 하거나 접근성 측면에서 필요할 때 사용된다.
🔍 hidden 속성의 역할
- 요소를 숨김: hidden 속성은 해당 요소를 DOM(Document Object Model)에 남겨두지만, 화면에는 표시되지 않게 한다.
- 공간 차지 여부: display: none과는 달리 hidden 속성을 사용하면 요소가 차지하는 공간은 그대로 유지된다. 예를 들어, 레이아웃 상에서 공간을 차지하지만, 사용자는 보지 못한다.
- 접근성: hidden 속성은 접근성 측면에서도 유용하다. 예를 들어, 스크린 리더(Screen Reader)는 이 속성이 적용된 요소를 무시한다.
🛠️ 사용 방법
HTML 요소에 hidden 속성을 간단히 추가하면 된다.
<div hidden>이 텍스트는 숨겨집니다.</div>
📝 주요 차이점
display: none vs hidden
- display: none: 요소가 화면과 DOM에서 모두 제거된 것처럼 작동한다.
- hidden: 요소는 DOM에 존재하지만, 화면에 표시되지 않는다.
💡 활용 예시
- 로그인/로그아웃 상태에 따른 UI 변경: 사용자가 로그인된 상태에 따라 보여야 할 콘텐츠와 숨겨야 할 콘텐츠를 관리할 때 유용하다.
- 로딩 중 상태 관리: 로딩이 완료될 때까지 사용자가 보지 않아도 되는 요소를 숨길 때 사용된다.
📘 CSS의 block 속성
이 속성은 웹 페이지의 레이아웃을 설계할 때 중요한 역할을 한다.
🔍 block 속성의 역할
- 요소의 박스 모델(Box Model) 적용: block 속성을 적용한 요소는 박스 모델(box model)을 따르게 되며, 기본적으로 폭이 부모 요소의 100%를 차지한다.
- 줄 바꿈 발생: block 요소는 다음에 오는 요소를 새로운 줄로 밀어내므로, 각 block 요소는 독립된 줄에 배치된다.
높이와 폭 지정 가능: block 요소는 width와 height를 명시적으로 설정할 수 있다.
🛠️ 사용 방법
block 속성은 display 속성의 값으로 사용된다.
.element {
display: block;
}
<div class="element">이 요소는 block 요소입니다.</div>
📝 주요 특징
기본 block 요소: HTML의 기본 block 요소로는 div, p, h1~h6 태그 등이 있다.
다른 요소들과의 차이점: inline 또는 inline-block 요소와는 다르게, block 요소는 다른 요소를 자신의 오른쪽에 배치하지 않고, 독립된 줄로 밀어낸다.
💡 활용 예시
레이아웃 구성: 웹 페이지의 큰 구조를 설계할 때, block 요소를 사용하여 레이아웃을 정의한다.
카드 디자인: 카드 디자인에서는 각 카드가 block 요소로 설정되어야, 카드를 아래로 쌓을 수 있다.
🚩 주의사항
의도하지 않은 줄 바꿈: block 요소를 사용하면 줄 바꿈이 발생하므로, 인접한 요소들이 같은 줄에 있어야 할 경우 inline-block 또는 flex 속성을 고려해야 한다.
Position 속성
요소를 옮기려면 일단 위치를 옮길 기준점을 잡는다.
값 의미
static 기준 없음 (배치 불가능 / 기본값)
relative 요소 자기 자신을 기준으로 배치
absolute 부모(조상) 요소를 기준으로 배치
fixed 뷰포트 기준으로 배치
stickey 스크롤 영역 기준으로 배치
