Fieldset 태그의 사용
fieldset 태그는 폼(form) 요소 내에서 관련된 요소들을 그룹화할 때 사용된다.
보통 legend 태그와 함께 사용되어 그룹의 제목을 제공하는 데 활용됩니다.
fieldset 태그는 접근성을 높이고, 폼 요소의 시각적 그룹화를 제공하는 데 유용하다.
HTML - aside
<aside id="aside">
<div class="aside-content">
<div class="aside-top">
<div class="aside-search">
<fieldset>
<legend>상품검색창</legend>
<div class="input-container">
<input name="search" placeholder="검색하기" />
<img src="img/돋보기.svg" class="search-icon" />
</div>
</fieldset>
</div>
<div class="aside-cart">
<a href="#"><img src="img/장바구니.svg" /></a>
</div>
<div class="aside-close">
<a href="#"><img src="img/닫기.svg" /></a>
</div>
</div>
<div class="aside-middle">
<ul>
<li>JOIN</li>
<li>LOGIN</li>
<li>CART</li>
<li>MY PAGE</li>
</ul>
</div>
<span class="dote-line"></span>
<div class="aside-bottom">
<ul>
<li>ALL</li>
<li>NEW</li>
<li>BEST</li>
<li>EVENT</li>
<li>OUTLET</li>
<li>ABOUT US</li>
<li>OFFLINE</li>
</ul>
</div>
</div>
</aside>
aside-top 부분
<div class="aside-top">
<div class="aside-search">
<fieldset>
<legend>상품검색창</legend>
<div class="input-container">
<input name="search" placeholder="검색하기" />
<img src="img/돋보기.svg" class="search-icon" />
</div>
</fieldset>
</div>
<div class="aside-cart">
<a href="#"><img src="img/장바구니.svg" /></a>
</div>
<div class="aside-close">
<a href="#"><img src="img/닫기.svg" /></a>
</div>
</div>
CSS 확인하기
#aside {
position: fixed;
top: 0;
right: 0;
width: 488px;
height: 100vh;
background: $main_color;
z-index: 999;
overflow-y: auto; // 질문 정리하기
display: none; // js로 건들기
padding: 78px 54px;
font-size: 18px;
li {
font-weight: bold;
margin-bottom: 16px;
color: $sub_color;
&:last-child {
margin-bottom: 0;
}
&:hover {
color: white; // 밑줄 생기게 꾸며주기
}
}
.aside-top {
margin: auto; //가운데 정렬
width: 100%;
margin-bottom: 44px;
display: flex;
align-items: center;
justify-content: center;
.aside-search {
legend {
display: none;
}
fieldset {
border: none; /* 기본 fieldset 테두리 제거 */
padding: 0; /* 기본 패딩 제거 */
margin: 0; /* 기본 마진 제거 */
}
.input-container {
position: relative;
width: 100%;
}
.input-container .search-icon {
position: absolute;
right: 10px; /* 필요한 경우 조정 */
top: 50%;
transform: translateY(-50%);
width: 20px; /* 필요한 경우 조정 */
height: 20px; /* 필요한 경우 조정 */
pointer-events: none; /* 아이콘이 입력 이벤트를 차단하지 않도록 설정 - 이거 뭔지 잘 모르겠으므로 질문하기.*/
}
input {
padding: 10px;
background-color: $main_color;
width: 260px;
height: 38px;
border: 5px solid $sub_color;
border-style: dashed;
border-radius: 50px;
letter-spacing: 2px;
color: $sub_color;
font-weight: bold;
outline: none; /* 포커스 시 기본 테두리 제거 */
box-shadow: none; /* 포커스 시 그림자 제거 */
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px $main_color inset;
-webkit-text-fill-color: $sub_color;
border: 5px dashed $sub_color;
}
// input 요소의 자동완성 스타일을 덮어쓰는 CSS - 질문
}
}
.aside-cart {
display: flex;
align-items: center;
margin-left: 21px; // 간격 추가
}
.aside-close {
margin-left: 21px; // 간격 추가
img {
width: 39px;
height: 39px;
}
}
}
.dote-line {
width: 100%; //.aside-content 너비 만큼 라인 채워주기.
//.dote-line이 부모 요소인 .aside-content의 너비를 가득 채우도록 했음.
height: 5px;
display: inline-block; //span태그는 inline.
margin: 27.5px 0; /* 총 높이를 59px로 맞추기 위해 조정 */
border-bottom: 5px dashed $sub_color;
}
}
aside-top 부분
.aside-top {
margin: auto; //가운데 정렬
width: 100%;
margin-bottom: 44px;
display: flex;
align-items: center;
justify-content: center;
.aside-search {
legend {
display: none;
}
fieldset {
border: none; /* 기본 fieldset 테두리 제거 */
padding: 0; /* 기본 패딩 제거 */
margin: 0; /* 기본 마진 제거 */
}
.input-container {
position: relative;
width: 100%;
}
.input-container .search-icon {
position: absolute;
right: 10px; /* 필요한 경우 조정 */
top: 50%;
transform: translateY(-50%);
width: 20px; /* 필요한 경우 조정 */
height: 20px; /* 필요한 경우 조정 */
pointer-events: none; /* 아이콘이 입력 이벤트를 차단하지 않도록 설정 - 이거 뭔지 잘 모르겠으므로 질문하기.*/
}
input {
padding: 10px;
background-color: $main_color;
width: 260px;
height: 38px;
border: 5px solid $sub_color;
border-style: dashed;
border-radius: 50px;
letter-spacing: 2px;
color: $sub_color;
font-weight: bold;
outline: none; /* 포커스 시 기본 테두리 제거 */
box-shadow: none; /* 포커스 시 그림자 제거 */
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px $main_color inset !important;
-webkit-text-fill-color: $sub_color !important;
border: 5px dashed $sub_color !important;
}
// input 요소의 자동완성 스타일을 덮어쓰는 CSS - 질문
}
}
.aside-cart {
display: flex;
align-items: center;
margin-left: 21px; // 간격 추가
}
.aside-close {
margin-left: 21px; // 간격 추가
img {
width: 39px;
height: 39px;
}
}
}
HTML
<div class="aside-search">
<fieldset>
<legend>상품검색창</legend>
<div class="input-container">
<input name="search" placeholder="검색하기" />
<img src="img/돋보기.svg" class="search-icon" />
</div>
</fieldset>
</div>
fieldset 을 사용해서 검색창을 그룹화 함.
fieldset 과 세트인 legend 를 사용해주고,
div 태그를 사용해서
input 태그와 돋보기 이미지를 넣어줬다.
CSS
.aside-search { // .aside-search 클래스에 대한 스타일 정의
legend {
display: none; // legend 요소를 숨깁니다.
}
fieldset {
border: none; // fieldset 요소의 기본 테두리를 제거합니다.
}
.input-container {
position: relative; // 내부 요소의 위치를 기준으로 배치합니다.
width: 100%; // 부모 요소의 너비를 100%로 설정합니다.
}
.input-container .search-icon {
position: absolute; // 검색 아이콘의 위치를 절대 위치로 설정합니다.
right: 10px; // 오른쪽에서 10px 떨어지도록 설정합니다.
top: 50%; // 위쪽에서 50% 떨어지도록 설정합니다.
transform: translateY(-50%); // 아이콘을 세로 중앙으로 맞춥니다.
width: 20px; // 너비를 20px로 설정합니다.
height: 20px; // 높이를 20px로 설정합니다.
pointer-events: none; // 아이콘에 마우스 이벤트가 발생하지 않도록 설정합니다.
}
input {
padding: 10px; // 내부 여백을 10px로 설정합니다.
background-color: $main_color; // 배경 색상을 $main_color 변수로 설정합니다.
width: 260px; // 너비를 260px로 설정합니다.
height: 38px; // 높이를 38px로 설정합니다.
border: 5px solid $sub_color; // 테두리를 5px 두께의 $sub_color 색상으로 설정합니다.
border-style: dashed; // 테두리 스타일을 대쉬(dashed)로 설정합니다.
border-radius: 50px; // 테두리를 둥글게 만들어 줍니다.
letter-spacing: 2px; // 글자 간격을 2px로 설정합니다.
color: $sub_color; // 글자 색상을 $sub_color로 설정합니다.
font-weight: bold; // 글자 굵기를 굵게 설정합니다.
outline: none; // 포커스 시 기본 테두리를 제거합니다.
box-shadow: none; // 포커스 시 그림자를 제거합니다.
// 자동완성 텍스트에 대한 스타일 정의
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px $main_color inset !important; // 자동완성 배경 색상을 $main_color로 설정합니다.
-webkit-text-fill-color: $sub_color !important; // 자동완성 텍스트 색상을 $sub_color로 설정합니다.
border: 5px dashed $sub_color !important; // 테두리를 5px 두께의 대쉬 스타일로 설정합니다.
}
}
}
이전
.aside-search {
legend {
display: none; /* legend 요소를 화면에 보이지 않게 함 */
}
fieldset {
border: none; /* 기본 fieldset 테두리를 제거함 */
padding: 0; /* 기본 패딩을 제거함 */
margin: 0; /* 기본 마진을 제거함 */
}
.input-container {
position: relative; /* 검색 아이콘을 input 내부에 배치하기 위해 위치를 상대적으로 설정 */
width: 100%; /* 컨테이너의 너비를 100%로 설정 */
}
.input-container .search-icon {
position: absolute; /* 검색 아이콘의 위치를 절대적으로 설정하여 input 내부에 배치 */
right: 10px; /* 검색 아이콘을 input 오른쪽에서 10px 떨어지게 설정 */
top: 50%; /* 검색 아이콘을 input의 세로 중앙에 배치 */
transform: translateY(-50%); /* 검색 아이콘을 정확히 중앙에 맞추기 위해 수직 변환 */
width: 20px; /* 검색 아이콘의 너비를 20px로 설정 */
height: 20px; /* 검색 아이콘의 높이를 20px로 설정 */
pointer-events: none; /* 검색 아이콘이 클릭 등 입력 이벤트를 차단하지 않도록 설정 */
}
input {
padding: 10px; /* input 내부 텍스트의 여백을 10px로 설정 */
background-color: $main_color; /* input의 배경색을 $main_color 변수로 설정 */
width: 260px; /* input의 너비를 260px로 설정 */
height: 38px; /* input의 높이를 38px로 설정 */
border: 5px solid $sub_color; /* input의 테두리를 $sub_color 변수로 설정하고 두께를 5px로 설정 */
border-style: dashed; /* input의 테두리 스타일을 점선으로 설정 */
border-radius: 50px; /* input의 모서리를 50px로 둥글게 설정 */
letter-spacing: 2px; /* 글자 간격을 2px로 설정 */
color: $sub_color; /* 텍스트 색상을 $sub_color 변수로 설정 */
font-weight: bold; /* 텍스트를 굵게 설정 */
outline: none; /* 포커스 시 기본 테두리를 제거함 */
box-shadow: none; /* 포커스 시 그림자를 제거함 */
/* input 요소의 자동완성 스타일을 덮어쓰는 CSS */
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px $main_color inset; /* 자동완성된 배경색을 $main_color로 설정 */
-webkit-text-fill-color: $sub_color; /* 자동완성된 텍스트 색상을 $sub_color로 설정 */
border: 5px dashed $sub_color; /* 자동완성된 상태에서도 테두리를 5px 점선 $sub_color로 유지 */
}
}
}
수정된 css
position 속성의 사용 목적
.input-container {
position: relative; // 내부 요소의 기준점을 이 요소로 설정합니다.
width: 100%; // 부모 요소의 너비를 100%로 설정합니다.
}
.input-container .search-icon {
position: absolute; // 이 요소를 가장 가까운 위치 지정 조상의 기준으로 배치합니다.
right: 10px; // 오른쪽에서 10px 떨어지도록 설정합니다.
top: 50%; // 위쪽에서 50% 떨어지도록 설정합니다.
transform: translateY(-50%); // 아이콘을 세로 중앙으로 맞춥니다.
width: 20px; // 너비를 20px로 설정합니다.
height: 20px; // 높이를 20px로 설정합니다.
pointer-events: none; // 아이콘에 마우스 이벤트가 발생하지 않도록 설정합니다.
}
position: relative
.input-container에 position: relative를 준 이유는 내부 요소들의 위치를 이 요소를 기준으로 설정하기 위해서입니다. relative는 요소의 원래 위치를 기준으로 상대적인 위치를 설정할 수 있게 해줍니다.
이 코드에서는 내부에 위치한 .search-icon 요소의 배치를 위한 기준점을 설정하는 역할을 합니다.
position: absolute
.search-icon에 position: absolute를 준 이유는
이 요소를 .input-container를 기준으로 원하는 위치에 정확히 배치하기 위해서입니다.
absolute는 가장 가까운 position이 relative, absolute, fixed, 또는 sticky로 설정된 조상을 기준으로 요소를 배치합니다. 여기서는 .input-container가 relative로 설정되어 있으므로, .search-icon은 .input-container를 기준으로 배치됩니다.
top: 50%와 transform: translateY(-50%)의 사용
= 요소를 수직 중앙에 정렬하기 위해서
top: 50%
top: 50%는 부모 요소의 상단에서부터 자신의 높이의 50% 위치로 요소를 이동시킵니다.
그러나 이렇게 하면 요소의 상단이 부모 요소의 중간에 오게 됩니다. 즉, 요소의 절반이 위로 튀어나오게 됩니다.
transform: translateY(-50%)
transform: translateY(-50%)는 요소를 자신의 높이의 50%만큼 위로 이동시킵니다.
이로 인해 요소가 정확히 부모 요소의 수직 중앙에 오게 됩니다.
결합된 효과
이 두 속성을 결합하면 요소의 수직 중앙 정렬이 정확하게 이루어집니다.
간단히 말해, top: 50%는 요소를 부모의 중간으로 보내고,
transform: translateY(-50%)는 요소의 절반을 위로 올려서 전체 요소가 중앙에 위치하도록 합니다.
top: 50%와 transform: translateY(-50%) 의 차이
top: 50%
이 속성은 요소의 상단이 부모 요소의 높이의 50% 지점에 위치하도록 합니다.
그러나 이것만으로는 요소가 정확히 중앙에 배치되지 않습니다.
왜냐하면 top: 50%는 요소의 상단을 기준으로 위치를 잡기 때문입니다.
따라서 요소의 절반은 부모 요소의 50% 지점 아래에 있게 됩니다.
transform: translateY(-50%)
요소를 자신의 높이의 50%만큼 위로 이동시킵니다.
이는 요소의 세로 중심을 기준으로 이동을 시킵니다.
두 속성의 조합
이 둘을 함께 사용하면 요소를 부모 요소의 중앙에 정확히 배치할 수 있습니다.
- top: 50%는 요소의 상단을 부모 요소의 높이의 50% 지점에 위치시킵니다.
- transform: translateY(-50%)는 요소를 자신의 높이의 50%만큼 위로 이동시켜, 요소의 세로 중심이 부모 요소의 높이의 50% 지점에 오게 합니다.
예시
예를 들어, 부모 요소의 높이가 200px이고, 자식 요소의 높이가 40px라고 가정해봅시다.
- top: 50%는 자식 요소의 상단을 부모 요소의 50% 지점인 100px에 위치시킵니다. (부모 요소가 200px 이니까)
- 그러나 이 상태에서는 자식 요소의 상단이 100px에 위치하므로, 자식 요소의 하단은 140px에 위치하게 됩니다.
- transform: translateY(-50%)는 자식 요소를 20px(자신의 높이 40px의 50%) 위로 이동시킵니다.
- 따라서 자식 요소의 상단은 80px, 하단은 120px에 위치하게 됩니다.
- 결과적으로 자식 요소는 부모 요소의 세로 중심에 배치됩니다.
그림으로 설명
예시 상황
- 부모 요소의 높이: 200px
- 자식 요소의 높이: 40px
top: 50% 적용 후: 자식 요소의 상단을 부모 요소의 50% 지점인 100px에 위치시킵니다. (부모 요소가 200px 이니까)
부모 요소 (높이 200px)
+---------------------+
| |
| (100px) | <- 자식 요소의 상단
| +------+ |
| | 자식 | |
| | 요소 | |
| +------+ |
| |
+---------------------+
자식 요소의 상단이 100px에 위치하므로, 자식 요소의 하단은 140px에 위치하게 됩니다.
자식 요소의 상단이 부모 요소의 높이의 50% 지점에 위치합니다.
따라서 자식 요소의 상단은 100px 지점에 위치합니다.
부모 요소 (높이 200px)
+---------------------+
| |
| (100px) | <- 자식 요소의 상단
| +------+ |
| | 자식 | |
| | 요소 | |
| +------+ | <- 자식 요소의 하단 (100px + 40px = 140px)
| (140px) |
| |
+---------------------+
자식 요소의 높이는 40px이므로, 자식 요소의 하단은 상단에서 40px 아래에 위치합니다.
따라서 자식 요소의 상단이 100px에 위치할 때, 하단은 140px에 위치합니다.
2. transform: translateY(-50%) 적용 후: 자식 요소를 20px(자신의 높이 40px의 50%) 위로 이동시킵니다.
부모 요소 (높이 200px)
+---------------------+
| |
| |
| +------+ |
| | 자식 | | <- 자식 요소의 상단 (80px)
| | 요소 | |
| +------+ | <- 자식 요소의 하단 (120px)
| |
+---------------------+
자식 요소의 상단은 80px, 하단은 120px에 위치하게 됩니다.
결과적으로 자식 요소는 부모 요소의 세로 중심에 배치됩니다.
자식 요소를 자신의 높이의 50%만큼 위로 이동시킵니다.
자식 요소의 높이가 40px이므로 50%는 20px입니다.
자식 요소를 20px 위로 이동시키면, 상단이 80px에 위치하게 되고, 하단이 120px에 위치하게 됩니다.
( 총 높이 240 에서 1/2 하면 120px 이니 정확한 세로중심에 배치되는 것. )
최종 결과
top: 50%와 transform: translateY(-50%)를 함께 사용하면,
자식 요소는 부모 요소의 정확한 세로 중심에 배치됩니다.
이 방법은 자식 요소의 높이가 무엇이든, 부모 요소의 세로 중심에 항상 일관되게 배치되도록 합니다.
시각적 요약
- top: 50%:
- 자식 요소의 상단이 부모 요소의 50% 지점에 위치합니다.
- transform: translateY(-50%):
- 자식 요소를 자신의 높이의 50%만큼 위로 이동시켜, 정확히 부모 요소의 세로 중심에 배치합니다.
참고할만한 사이트
가운데 정렬 최강자 top:50% left:50% transform:translate(-50%,-50%)🥰
오늘은 아주 유용하게 사용하는 가운데 정렬 css문법을 소개하려고 한다.top:50%;left:50%;transform:translate(-50%,-50%);위 코드처럼 transfrom의 translate를 사용하면 매우 편리하게 가운데 정렬을 할 수 있다.
velog.io
webkit 설명
:-webkit-autofill은 브라우저가 사용자의 입력 데이터를 자동으로 채워줄 때 적용되는 특수한 CSS 선택자
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px $main_color inset; /* 자동완성된 배경색을 $main_color로 설정 */
-webkit-text-fill-color: $sub_color; /* 자동완성된 텍스트 색상을 $sub_color로 설정 */
border: 5px dashed $sub_color; /* 자동완성된 상태에서도 테두리를 5px 점선 $sub_color로 유지 */
}
이 CSS의 역할
- :-webkit-autofill: 브라우저가 자동완성 데이터를 입력 필드에 채울 때 적용됩니다.
- :-webkit-autofill:hover: 자동완성된 입력 필드가 마우스 오버 상태일 때 적용됩니다.
- :-webkit-autofill:focus: 자동완성된 입력 필드가 포커스를 받을 때 적용됩니다.
- :-webkit-autofill:active: 자동완성된 입력 필드가 활성화되었을 때 적용됩니다.
:-webkit-autofill은 개발자모드 #shadow-root 에 보이지 않던데 어디서 알 수 있는 지?
준비중
'> 포트폴리오 > wiggle wiggle' 카테고리의 다른 글
[JS/CSS] 드래그와 터치되는 캐러셀 만들기 (1) (0) | 2024.07.04 |
---|---|
[SCSS] 지나가는 전광판 만들기 (0) | 2024.07.02 |
[SASS] aside 메뉴 만들기 ( position 사용 ) (0) | 2024.06.23 |
[SASS] 로고와 메뉴바 위치 지정하기 (display:flex) (0) | 2024.06.21 |
[SASS] 상단 메뉴바 생성과 position 이해 ( X버튼 추가 ) (0) | 2024.06.19 |