2024/06/246

728x90
[CSS]CSS에서 사용되는 용어들 기본 용어속성 (Property)스타일링에 사용되는 구체적인 스타일 옵션입니다.예: color, font-size, margin, padding값 (Value)속성에 적용되는 실제 스타일 값입니다.예: red, 16px, 10px, auto선택자 (Selector)스타일을 적용할 HTML 요소를 선택하는 구문입니다.예: div, .class, #id, *고급 선택자속성 선택자 (Attribute Selector)특정 속성을 가진 요소를 선택합니다.예: [type="text"], [href*="example"]가상 클래스 (Pseudo-class)요소의 특정 상태를 스타일링합니다.예: :hover, :focus, :nth-child(2)가상 요소 (Pseudo-element)요소의 특정 부분을 스타일링합니..
[CSS]속성 선택자[class*="string"] 종류 및 예제 속성 선택자(attribute selector)는 HTML 요소의 속성 값을 기준으로 요소를 선택하는 방법을 제공합니다. [class*="string"] 선택자는 이러한 속성 선택자 중 하나로, 특정 부분 문자열을 포함하는 클래스 속성을 가진 요소를 선택합니다. 속성 선택자의 종류와 예제를 좀 더 자세히 설명하겠습니다.속성 선택자 종류 및 예제부분 문자열 포함 선택자 ([attr*="value"])속성 값에 특정 문자열이 포함된 요소를 선택합니다.구문: [attr*="value"]예제:div class="intro-heading">div>div class="main-heading">div>div class="footer-heading">div>div class="content">div>style> [c..
[운영일지]웹미니 블로그 Ver10.0 코드 및 CSS정리 웹미니 블로그 Ver10.0로 업데이트 완료. 업데이트 내역1. 사용하지 않는 코드 정리 및 수정 (접근성 일부추가)2. CSS (float -> display:flex) 형태로 변경3. 기본폰트스타일 변경('Noto Sans DemiLight' --> Pretendard)4. 전체적인 스타일 미세하게 변경(색상,여백등..)  레이아웃 코드 변경- float로 되어있던 속성을 display:flex;로 변경
[CSS]@media쿼리와 @container container-type의 차이점 container-type와 @media는 각각 CSS에서 반응형 디자인을 구현하는 데 사용되는 방법들이지만, 이 둘은 서로 다른 용도로 사용됩니다. 아래에서 두 가지의 차이점과 사용 예시를 설명하겠습니다.@media@media는 미디어 쿼리로, 뷰포트(브라우저 창)의 크기나 기기의 특성에 따라 스타일을 적용하는 데 사용됩니다. 뷰포트 너비, 높이, 해상도, 방향 등의 특성에 따라 다른 스타일을 적용할 수 있습니다.주요 특징:뷰포트나 기기의 특성을 기준으로 스타일을 적용합니다.전체 페이지 또는 특정 요소의 스타일을 변경할 수 있습니다.예시:/* 기본 스타일 */body { background-color: white;}/* 뷰포트 너비가 600px 이상일 때 스타일 */@media (min-width..
[CSS]:is와 :where 가상클래스 알아보기 :is() 및 :where() 가상 클래스는 CSS Selectors Level 4 사양의 일부로 도입되었습니다. 이들 가상 클래스는 셀렉터를 보다 간결하게 작성하고, 특정성(특이성) 문제를 해결하는 데 유용합니다.도입 시기:is() 및 :where() 가상 클래스는 2019년경 W3C에 의해 CSS Selectors Level 4 사양의 일부로 처음 제안되었고, 이후 다양한 브라우저에 점진적으로 지원되었습니다.브라우저 호환성이 가상 클래스는 현대 웹 브라우저 대부분에서 지원됩니다. 다음은 주요 브라우저의 지원 정보입니다.Chrome: 88 이상Firefox: 78 이상Safari: 14 이상Edge: 88 이상Opera: 74 이상사용 예시이 가상 클래스는 현대 웹 브라우저 대부분에서 지원됩니다. 다음..
[웹접근성]table 웹접근성 예시와 설명(scope) 웹 접근성은 다양한 사용자, 특히 장애가 있는 사용자가 웹 콘텐츠에 접근하고 사용할 수 있도록 하는 것을 의미합니다. 표(table)를 사용할 때 웹 접근성을 높이기 위해 다음과 같은 예시와 지침을 따를 수 있습니다.다음 표는 2024년 각 분기별 매출 현황을 보여줍니다. 매출액과 성장률이 포함되어 있습니다. /* 표 설명 */ 2024년도 분기별 매출 현황 /* 표 제목 */ 분기 매출액 (백만 달러) 성장률 (%) 1분기 10 5% 2분기 12 20% 3분기 15 25% 4분기 20 33% ..
반응형