240506 TIL_팀 프로젝트2 (영화 검색 게시판 제작) > CSS (accent-color, overflow, white-space, text-overflow, rem, vh, vw, z-index)
우당탕탕 개발 일기
오후 20시 29분... 코딩 공부하기 딱 좋은 시간이다...
연휴 내내 띵까띵까 놀기만 했다... 24시를 목전에 둔 시간이지만 조금이나마 공부해서 조금 공부했어요👀... 라는 말을 해보고자... 누워서 리액트 강의를 보기로 했다...^^
그리고 너무너무 부족한 CSS도 함께...
랭지에 컬러감 주는 법
기본 컬러가 파랑이다.... 우리 테마 컬러는 파랑이 아니기 때문에 다른 색으로 변경!!
#input_range {
border-radius: 8px;
outline: none;
accent-color: red;
}
레디우스 절대 포기 못한다........ 하지만 별로라고 하시면 포기해야지...... 🥹
css
는 힘든데 뭔가 결과물이 바로바로 나와서 귀여운 것 같기도 하다...
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
button
- overflow: hidden;: 요소의 내부 콘텐츠가 요소의 경계를 벗어날 때 어떻게 처리할지를 지정합니다. 이 속성을 사용하면 요소의 내용이 요소의 경계를 벗어날 때 숨겨지게 됩니다.
- white-space: nowrap;: 텍스트의 줄바꿈을 제어하는 속성입니다. "nowrap" 값을 사용하면 텍스트가 요소의 가로 영역을 넘어갈 경우 줄바꿈이 발생하지 않습니다.
- text-overflow: ellipsis;: 텍스트가 요소의 가로 영역을 넘어갈 때 어떻게 처리할지를 지정하는 속성입니다. "ellipsis" 값을 사용하면 텍스트가 가로 영역을 벗어나면 생략 부호(…)가 추가됩니다.
버튼이 그렇게 글자가 많지 않아 상관 없지만 혹시 모를 사태를 대비해서 항상 하기로 했다.
테마에 맞는 효과를 주고 싶은데 꽤나 마이너한 취향인지 아쉽게도 서칭해도 잘 나오지 않는다. 이글이글 효과를 찾긴 했는데, 이건 귀여워 보일 듯 하여 일단 보류하기로...
rem 고정 값
vh, vw 반응 값
display : grid로 주고,
grid-template-columns 속성으로 반응형 구현하기
상위 요소에는 그리드 - 하위 요소에는 flex로 조절하기
z인덱스
'z-index'는 CSS 속성 중 하나로, 요소의 쌓임 순서를 결정합니다. 이것은 요소들 간의 상대적인 위계를 지정합니다. 즉, 더 큰 z-index 값을 가진 요소는 더 앞에 나타나게 되고, 작은 값을 가진 요소는 뒤에 나타나게 됩니다.
일반적으로 'z-index'는 포지셔닝된(positioned) 요소에만 적용됩니다. 즉, 'position' 속성이 'static'이 아닌 요소에만 적용됩니다.
예를 들어, z-index가 1인 요소는 z-index가 0인 요소 위에 나타납니다. z-index가 동일한 두 요소가 있는 경우, HTML 문서에서 뒤쪽에 나타나는 요소가 앞에 있는 요소를 가리게 됩니다.
그러나 z-index 속성은 부모와 자식 요소 간의 관계에 영향을 받습니다. 만약 부모 요소의 z-index 값이 자식 요소의 z-index 값보다 크다면, 부모 요소가 자식 요소를 가리게 됩니다.
요약하자면, z-index는 요소의 쌓임 순서를 결정하며, 이를 통해 요소들이 화면에 어떻게 나타나는지 제어할 수 있습니다.
css가 너무 부족하여 남들 5분이면 할 거 알아보고 알아보고 하다가 시간이 순식간에 지나갔다... 일단 누워서 리액트 강의 진행시키고!! ㅋㅋㅋ 내일부터 또 열심히 달리기로! 이번주는 4일이다아~!
리액트 강의
는 내일 이어서...!!
출간이 안 됐다!!!
