728x90 반응형 > 메모65 [CSS] img 에 display: block 을 쓰는 이유 이미지의 위치가 이상할 때 display:block 적용또는 이미지 하단에 여백이 생길 때 사용 이미지 태그 ()는 기본적으로 인라인 요소처럼 동작display: block;을 사용하면 이미지를 블록 요소로 변환하여 이러한 여백을 제거할 수 있다.= 블록 요소는 자신만의 줄을 차지하므로, 이러한 여백이 제거.display: block;을 추가하면 여백이 사라지는 이유는 다음과 같습니다:인라인 요소의 기본 특성 때문에 여백이 발생합니다.display: block;을 사용하면 이미지가 블록 요소로 변환되어, 상하 여백이 제거됩니다.결과적으로 이미지가 상단에 정확히 맞게 배치됩니다.reset.css기본설정/* CSS - 기본 설정 */* { margin: 0; padding: 0; box-sizing: .. 2024. 6. 28. [CSS] transform의 사용 transform transform 속성은 요소를 2D 또는 3D 공간에서 변형하는 데 사용됨.transform 기능은 다음과 같습니다translate(): 요소를 이동시킵니다.rotate(): 요소를 회전시킵니다.scale(): 요소의 크기를 조절합니다.skew(): 요소를 기울입니다.matrix(): 위의 변형을 결합하여 변형합니다.사용 예시 transform: translateY(-50%);transform: translateY(-50%);는 요소를 수직으로 가운데 정렬하는 데 사용됨. 이를 위해 position: absolute; 또는 position: fixed;를 함께 사용하여 기준 위치를 설정한 후,top: 50%;와 함께 사용된다. 요소가 부모 요소의 높이의 50% 지점에 위치한 후,자기 .. 2024. 6. 27. [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. [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. [CSS] Pseudo, 이벤트 정리 Pseudo Class Pseudo Class - 가상 클래스: hover 할 때 , : ( 콜론) 이 하나 들어가는 것들을 CSS의 가상 클래스 라고 함.:active= 사용자에 의해 엘리먼트가 활성화 됐을 때( 마우스를 누르는 중일 때 ):hover= 사용자의 커서가 엘리먼트 위에 있을 때( 마우스가 올라가 있을 때):target= 상호작용된 요소가 가리킨 URL과target 요소가 일치할 때 사용되는 가상 class:any-link= link / visited 이 두개를 포괄하는 가상 class= 방문 여부와 관계없이 링크가 걸린 요소 전부의 style 적용 가능:checked= 대상 체크박스가 체크됐을 때:focus= 대상 요소가 활성화됐거나 된 직후일 때:focus-within= label/fo.. 2024. 6. 17. [CSS] display: inline 과 inline-block 차이 display: inline 하고display: inline-block 차이display: inline = 딱 자기 컨텐츠 영역만 차지 = 가로 정렬이 된 것처럼 보임. = 높이가 지정이 안됨. - 높이를 지정해도 설정이 되지 않음.display:inline-block - 자기 컨텐츠 만큼 차지 - 높이 값 지정 가능= 인라인 요소지만, 블록 속성 가짐. = 높이 값을 바꿔주지 못했던 기존 인라인 요소와 달리 블록 속성이 추가돼서 하위 값을 지정할 수 있음. = 인라인 요소기 떄문에 자기 컨텐츠 만큼 차지를 해서 가로 정렬처럼 보임. = 중간에 인라인 요소가 끼어든다면, 해당 요소에 높이값은 지정되지 않은 채 차이를 보이게 됨. 2024. 6. 17. 이전 1 2 3 4 ··· 8 다음 728x90 반응형
