본문 바로가기

프론트엔드/CSS10

CSS | 요소 임시 삭제 ⭕ CSS | 요소 임시 삭제CSS에서 특정 요소를 화면에서 완전히 숨기는 방법 중 하나는 display: none; 속성을 사용하는 것입니다. 이 방법은 요소를 보이지 않게 하며, 레이아웃에서 해당 요소가 차지하던 공간도 제거합니다. 이 기법은 동적인 웹 인터페이스에서 요소를 일시적으로 숨겨야 할 때 유용하게 사용됩니다. ➡️ display: noneCSS의 display: none; 속성은 요소를 DOM에서 숨기되, 공간도 차지하지 않도록 합니다. 이는 요소가 페이지 레이아웃에 전혀 영향을 주지 않는 것처럼 만듭니다. 예를 들어, 사용자 상호작용에 따라 보일 필요가 없는 정보를 숨길 때 이 속성을 사용할 수 있습니다..hidden-element { display: none;} ➡️ 주의사항di.. 2024. 5. 16.

CSS | 중앙 정렬 : 수평 중앙 정렬, 수직 중앙 정렬 ⭕ CSS | 중앙 정렬 : 수평 중앙 정렬, 수직 중앙 정렬➡️ 수평 중앙 정렬inline / inline-block 요소inline 또는 inline-block 요소는 텍스트의 흐름을 따라 배치됨부모 요소가 block 요소인 경우 text-align: center; 속성을 설정함.parent { text-align: center;}.child { display: inline-block; /* 또는 inline */} block 요소일반적인 설정block 요소는 기본적으로 전체 가용 너비를 차지함width 속성을 설정하고, 좌우 마진을 auto로 지정함.block { width: 200px; /* 너비 지정 */ margin: 0 auto; /* 위 아래 마진 0, 좌우 마진 auto */} 이.. 2024. 5. 16.

CSS | CSS 초기화 (reset.css) ⭕ CSS | CSS 초기화 (reset.css)크로스브라우징(Cross-Browsing) 문제를 해결하기 위해 CSS 초기화(reset)를 사용함HTML 문서 내 다른 모든 CSS 파일보다 상위에 위치해야 함jsdelivr CDN reset.css모든 HTML 요소의 마진, 패딩, 폰트 크기 등을 초기화함https://www.jsdelivr.com/package/npm/reset-css 2024. 5. 16.

CSS | CSS 선택자 : 기본 선택자, 복합 선택자, 동작 기반 가상 클래스 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자 ⭕ CSS | CSS 선택자 : 기본 선택자, 복합 선택자, 동작 기반 가상 클래스 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자➡️ 기본 선택자전체 선택자 (*)모든 HTML 요소* { margin: 0; padding: 0; }모든 요소의 마진과 패딩을 0으로 적용함태그 선택자지정된 태그를 의미p { font-size: 16px; }모든 태그에 16픽셀의 글꼴 크기를 적용함클래스 선택자 (.)지정된 클래스를 가진 모든 요소.menu { background-color: blue; }menu 클래스에 파란색 배경을 적용함ID 선택자 (#)특정 ID를 가진 단일 요소자주 사용하지는 않음#header { height: 100px; }header ID에 높이를 100픽셀로 적용함 [프론트엔드.. 2024. 5. 16.

CSS | 요소(Element)와 클래스(Class)의 차이 ⭕ CSS | 요소(Element)와 클래스(Class)의 차이➡️ 요소 (Element)HTML 요소는 웹 페이지의 구조를 정의하고 의미를 담당합니다. 이러한 요소들은 특정 태그로 표현되며, 웹 브라우저에 어떻게 내용을 표시할지 알려줍니다. , , , p { color: blue;}➡️ 클래스 (Class)클래스는 HTML 요소에 스타일을 적용하기 위해 사용되는 식별자입니다. 클래스는 점(.)으로 시작하며, 하나 이상의 요소에 재사용 가능한 스타일을 정의할 수 있습니다. .menu, .header, .footer.menu { background-color: #333; color: white; padding: 10px;}.header { font-size: 24px; fo.. 2024. 5. 16.

CSS | 플렉스(Flex, Flexbox, Flexible Box Layout) 레이아웃 배치 ⭕ CSS | 플렉스(Flex, Flexbox, Flexible Box Layout) 레이아웃 배치레이아웃을 배치하기 위한 기능구성 요소 플렉스 컨테이너(Flex Container): 플렉스 레이아웃을 적용받는 부모 요소 플렉스 아이템(Flex Item): 플렉스 컨테이너 안에 배치되는 자식 요소 축메인축(Main Axis): 아이템들이 배치되는 주 축입니다.교차축(Cross Axis): 메인축에 수직으로 있는 축입니다. ➡️ 플렉스 컨테이너(Flex Container)의 속성배치 설정 - display: flex아이템들은 가로 방향으로 배치됩니다.width: 내용물의 크기만큼 차지합니다.height: 컨테이너의 높이만큼 늘어납니다. 배치 방향 설정 - flex-directionrow (기본 값): 아.. 2024. 5. 14.

CSS | position 위치 속성: Static, Relative, Absolute, Fixed, Sticky ⭕ CSS | position 위치 속성: Static, Relative, Absolute, Fixed, Sticky요소의 위치 지정 기준 ➡️ static (기본 값)요소를 문서 흐름에 따라 배치합니다.positon 설정이 없는 것과 같다.position: static; ➡️ relative (거의 사용하지 않음) static 위치를 기준으로, top, right, bottom, left 값을 사용하여 배치합니다. position: relative;top: 40px; left: 40px; ➡️ ⭐ absolute일반 문서 흐름에서 요소를 제거하고, 위치상 부모 요소를 기준으로 배치합니다.position: absolute;top: 40px; left: 40px; ➡️ fixed일반 문서 흐름에서 요소를.. 2024. 5. 14.

CSS | 여백 속성: Margin 및 Padding ⭕ CSS | 여백 속성: Margin 및 Paddingmargin : 요소의 외부 여백을 설정한다.padding : 요소의 내부 여백을 설정한다. 2024. 5. 14.

CSS | background-size 속성: contain 및 cover ⭕ CSS | background-size 속성: contain 및 cover➡️ contain비율을 유지요소의 더 짧은 너비에 맞춤이미지와 요소의 비율이 다를 경우 이미지가 반복될 수 있습니다.background-size: contain; background-repeat: no-repeat; 옵션이미지가 반복되지 않고, 대신 요소 주변에 빈 공간이 생깁니다.background-size: contain;background-repeat: no-repeat; ➡️ cover비율을 유지요소의 더 넓은 너비에 맞춤이미지가 요소의 가로와 세로를 완전히 덮으며, 이미지의 일부가 잘릴 수 있습니다.background-size: cover; 2024. 5. 14.

웹 구조 WEB | 스타일 시트 CSS, Cascading Style Sheets ✅ 스타일 시트 CSS, Cascading Style Sheets스타일 시트 CSS, Cascading Style Sheets는 웹 페이지의 외관을 표현한다.웹 페이지의 디자인으로써 레이아웃, 텍스트 장식, 배경 등을 표현한다. CSS는 페이지 수가 많은 HTML 파일 코드를 간소화하는 데 유용하다.각 페이지마다 스타일을 정의할 경우 번거롭다. HTML 파일에서 CSS 파일을 참조하는 태그를 사용하여 연결한다. CSS 대신 Bootstrap 프레임워크나 Sass를 이용하기도 한다. 2023. 2. 9.

이전 1 다음

티스토리툴바