728x90 분류 전체보기530 [CSS] 자식 width 를 부모 width 와 동일하게 맞추기 HTML 상품검색창 JOIN MY PAGE // 이 부분 스타일링. ALL .. 2024. 6. 27. [CSS] Fieldset 태그의 사용 Fieldset 태그의 사용 fieldset 태그는 폼(form) 요소 내에서 관련된 요소들을 그룹화할 때 사용됩니다.보통 legend 태그와 함께 사용되어 그룹의 제목을 제공하는 데 활용됩니다.fieldset 태그는 접근성을 높이고, 폼 요소의 시각적 그룹화를 제공하는 데 유용합니다. Search 언제 사용하는가?- 관련된 폼 요소들을 그룹화할 때.- 특정 폼 섹션에 제목을 제공할 때 (legend 태그와 함께).- 폼 요소들을 시각적으로 구분하고 접근성을 높일 때. 2024. 6. 27. [CSS] padding 축약 설정 padding 축약 속성은 1~4개의 값을 가질 수 있다.1개 값: 모든 방향의 패딩이 동일합니다.padding: 20px;/* padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; */ 2개 값: 첫 번째 값은 상하 패딩, 두 번째 값은 좌우 패딩입니다.padding: 20px 10px;/* padding-top: 20px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; */ 3개 값: 첫 번째 값은 상단 패딩, 두 번째 값은 좌우 패딩, 세 번째 값은 하단 패딩입니다.padding: 20px 10px 30px;/* padding-top: 20p.. 2024. 6. 23. [SCSS] span 태그로 햄버거 메뉴 만들기 HTML span 으로 햄버거 모양 만들기SCSS.banner-header { display: flex; align-items: center; position: relative; width: 100%; .hamburger_menu { width: 80px;// span태그에 magin을 줘서 높이 맞춰줘서 height를 굳이 쓰지 않음.// width를 부여해서 메뉴 바의 가로 길이 지정 // span 태그에 스타일 적용 span { display: block; //display: block을 사용하면 블록 요소로 변환되어, 각각의 span이 새로운 줄에서 시작 height:.. 2024. 6. 21. [SASS] 태그 중첩 사용 HTML 햄버거 메뉴 만들기에서span 태그에 css 넣고 싶을 경우SCSS.banner-header { display: flex; align-items: center; position: relative; width: 100%; height: 90px; .hamburger_menu { width: 80px; height: 65px; // span 태그에 스타일 적용 span { display: block; height: 10px; background-color: $main_color; margin: 15px 0; transition: .. 2024. 6. 21. [SASS] _reset 파일과 SASS 문법 reset 파일 - 후에 @use 로 임포트 해줌.- 파일이름은 _reset.scss 으로 생성./* CSS - 기본 설정 */* { margin: 0; padding: 0; box-sizing: border-box; position: relative; // pointer-events: none; text-decoration: none; list-style: none;}html { font-size: 16px;}a,a:link,a:visited { color: inherit; //하단 밑줄 색깔 없애기}전체에 position:relative 를 준 경우 주의 사항 전체 요소에 position: relative를 적용하는 접근은 일반적으로 권장되지 않음.필요한 요소에만 position: r.. 2024. 6. 19. 이전 1 ··· 24 25 26 27 28 29 30 ··· 89 다음 728x90
