반응형 Front-End/HTML & CSS5 [HTML & CSS] 반응형 웹이란? 뷰포트, 미디어 쿼리에 대해서 반응형 웹은 다양한 화면 크기의 디바이스에서 웹사이트의 레이아웃이 동적으로 변화하여 최적화된 사용자 경험을 제공하는 디자인 방식입니다. 이는 모바일, 태블릿, 데스크탑 등 다양한 환경에서 웹사이트를 효과적으로 보여주는 방법을 제공합니다. 장점: 1. 유연성: 다양한 화면 크기에 대응 가능합니다. 2. 비용 효율성: 별도의 모바일 사이트를 만들 필요가 없습니다. 3. 검색 엔진 최적화(SEO): 한 URL에서 모든 디바이스에 대응하므로 SEO 효과가 좋습니다. 단점: 1. 구현 복잡성: 다양한 화면 크기에 대응하기 위해선 복잡한 디자인과 테스트가 필요합니다. 2. 성능 이슈: 모든 디바이스에 같은 리소스를 제공하므로, 모바일 환경에서는 불필요한 리소스 로딩 문제가 발생할 수 있습니다. 뷰포트(Viewpor.. 2024. 2. 2. [CSS3] 선택자란?, 자주 쓰는 선택자들 1. 하위 선택자 (Descendant Selector): 공백으로 구분된 두 선택자를 사용하여 앞의 선택자에 의해 선택된 요소의 하위 요소를 선택합니다. 예: div p - div 요소 내의 모든 p 태그를 선택 2. 자식 선택자 (Child Selector): > 기호로 구분된 두 선택자를 사용하여 앞의 선택자에 의해 선택된 요소의 직계 자식 요소를 선택합니다. 예: div > p - div 요소의 직접적인 자식인 p 태그를 선택 3. 인접 형제 선택자 (Adjacent Sibling Selector): + 기호로 구분된 두 선택자를 사용하여 첫 번째 선택자 바로 다음에 오는 두 번째 선택자를 선택합니다. 두 선택자는 동일한 부모를 공유해야 합니다. 예: h1 + p - h1 태그 바로 다음에 오는 .. 2024. 2. 2. [HTML5] 시맨틱 태그(semantic tag)란?, 자주 쓰는 태그들 "시맨틱 태그"는 HTML에서 특정 의미를 가지는 태그를 말합니다. 이런 태그들은 웹 페이지의 콘텐츠가 어떤 의미를 가지는지, 어떤 역할을 하는지를 명확하게 설명해줍니다. 예를 들어, 웹사이트 제목 메뉴1 메뉴2 섹션 제목 기사 제목 기사 내용... 관련 정보 이 부분은 주요 콘텐츠와 간접적으로만 관련이 있는 정보를 담습니다. 작성자: 홍길동 이메일: hong@example.com 2024. 2. 2. [CSS] CSS 자주쓰는 레이아웃 margin: 요소의 바깥 여백을 설정합니다. 상, 우, 하, 좌 순서로 지정할 수 있습니다. padding: 요소의 안쪽 여백을 설정합니다. 마찬가지로 상, 우, 하, 좌 순서로 지정할 수 있습니다. box-sizing: 요소의 너비와 높이 계산 방식을 설정합니다. content-box는 기본값이며, padding과 border는 너비/높이에 포함되지 않습니다. border-box값을 사용하면 padding과 border가 너비/높이에 포함됩니다. float: 요소를 왼쪽이나 오른쪽으로 띄워 다른 요소가 그 주위를 감싸게 합니다. clear: float 속성이 적용된 이전 요소들에 영향을 받지 않게 합니다. position: 요소의 위치를 조정하는 속성으로 static, relative, absolut.. 2024. 2. 2. 이전 1 2 다음 반응형
