반응형 HTML&CSS HTML&CSS 2021. 8. 18. CSS 가상 요소 "::before"와 "::after" 완벽 정리 가상 요소와 가상 클래스 CSS 가상 요소는 선택자로 선택한 요소의 뒤에 붙여 표기하는 미리 약속된 키워드를 말합니다. 요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 기능이 정의되어 있으며, 요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있기 때문에 마치 하나의 하위 요소처럼 사용할 수 있어서 가상 요소(Pseudo-Element)라고 합니다. 가상 요소 키워드 중에는 HTML 태그로 표현하기 어려운 콘텐츠의 특정 부분만 동적으로 선택하거나, HTML 콘텐츠 내용을 변경하지 않고도 선택한 요소의 앞 뒤에 새 콘텐츠를 추가하는 기능을 하는 키워드도 있습니다. 요소를 꾸미는 다양한 기능들을 제공하기 때문에 잘 사용하면 CSS만으로도 미려하고 고급스.. HTML&CSS 2021. 8. 12. CSS 오로라 UI 만들기 이유는 모르겠지만 요즘 유행하는 CSS UI입니다. 화려하기도 하고 최신 모바일 UI와 비슷한 느낌을 낼 수 있어서 트렌디한 웹 디자인에 자주 사용됩니다. 오로라 UI라고 해서 아주 특별하게 새로운 것은 아닙니다. 오로라 극광처럼 컬러 그러데이션 효과를 다중으로 적용해서 다채롭고 화려한 배경 효과를 만드는 것입니다. 여러 개의 그러데이션을 배치해야 하기 때문에 CSS 코드 양이 많지만, 구조적으로 복잡하지는 않습니다. 일일이 구현해서 사용하기보다는 구현된 것을 복사해서 가져다 사용하는 것을 추천합니다. 오로라 UI에 필요한 그러데이션 효과를 만드는 방법은 2가지 방법이 있습니다. 첫 번째 방법은 과거에 많이 사용하던 방법으로 블러 필터 속성을 여러 개 중첩해서 오로라 효과를 만드는 방법이고, 두 번째 방.. HTML&CSS 2021. 8. 11. CSS 적용 우선순위를 결정하는 특이도(Specificity)의 이해 Specificity, 특이도는 CSS가 적용되는 우선순위를 결정하는 기준입니다. 생소한 단어지만, 표준 통계 수학 용어로 사용되는 용어이고, CSS에서도 같은 의미로 사용합니다. CSS에서는 특이도를 가장 일치하는 요소에 적용할 속성을 결정하는 가중치 숫자를 의미합니다. 어렵게 기술적으로 설명했지만, CSS 선택자 타입(ID, 태그, 클래스, CSS 위치 등)에 따라 정해진 가중치 숫자 값이 부여되고, 같은 요소를 선택하는 CSS 선택자가 여러 개일 경우 가중치 숫자 값이 가장 높은 CSS 선택자의 속성이 최종 적용됩니다. 조금 더 쉽게 설명하면 같은 요소에 속성을 적용하는 클래스가 여러 개면, 그중 특이도 가중치 숫자가 가장 높은 클래스의 속성이 적용됩니다. 가중치 속성 값이 완전히 동일하면, 뒤에 .. HTML&CSS 2021. 8. 11. 가상클래스 :is()와 :where() 비교 가상 클래스 :is()와 :where()는 반복되는 CSS 선택자를 줄여주는 역할을 합니다. 두 가상클래스 모두 클래스, ID, 태그 등을 파라미터로 받으며, 파라미터에 포함된 목록 중 하나만 일치하면 선택자에서 선택한 것이 됩니다. 이해하기 쉽게 다음 CSS 선택자를 예를 들어 설명합니다. .menu li a:hover, article p a:hover, footer li a:hover{ color: #a00; text-decoration: underline; } 여러 개의 반복되는 이런 공통 적용 선택자를 나열한 CSS 정의는 ":where()" 가상 클래스로 다음과 같이 바꿀 수 있습니다. :where(.menu li, article p, footer li) a:hover { color: #a00;.. HTML&CSS 2021. 8. 11. CSS로 반응형 사이드바 메뉴 만들기 자바스크립트 없이 반응형으로 메뉴 크기가 늘어났다 줄어드는 사이드바 메뉴를 만듭니다. 자바스크립트 도움 없이 메뉴를 펼쳤다 닫을 수 있으며, 반응형으로 웹 브라우저 너비에 따라 메뉴의 크기가 조절됩니다. 먼저 HTML 코드로 메뉴 목록을 만듭니다. 순서 없는 목록으로 메뉴 목록을 만들고 메뉴 아이콘은 CSS에서 가상 요소로 메뉴 항목의 하이퍼링크() 태그에 각각 부착합니다. 관리와 유지보수가 더 쉽기 때문에 아이콘 부착은 HTML 태그보다는 CSS로 붙이는 것을 추천합니다. HTML 코드에서 가장 중요한 것은 태그와 메뉴 목록 표시용 태그가 동위에 있는 것입니다. 이렇게 해야 체크박스를 이용해 메뉴 목록을 펼치거나 닫는 상태 제어가 가능해집니다. 자바스크립트 없이 구현하기 위해서는 이런 식으로 상태 제어.. HTML&CSS 2021. 8. 10. CSS로 반투명 얼음 배경 효과 만들기 반투명 유리 또는 반투명 얼음 배경 효과라고 하는 최근 유행하는 반투명 배경 효과입니다. CSS 반투명 배경 효과를 만드는 방법은 2가지가 있습니다. 1. drop 속성으로 만들기 drop 필터 속성으로 반투명 이미지를 만드는 방법은 다소 복잡합니다. 추가 요소는 만들 필요가 없지만, 가상 요소를 만들어서 실제 블러 효과를 적용할 이미지를 배경에 배치해야 하는 번거로운 작업이 있습니다. 실제 "item" 클래스를 적용한 요소는 가상 요소를 담는 틀 역할을 하며, "::before"로 생성한 가상 요소에 적용한 블러 필터 효과가 아이템 바깥으로 퍼져 나오는 것을 막는 틀 역할을 합니다. "item" 요소에 "overflow: hidden;" 속성이 없으면 반투명 효과가 적용한 영역이 불분명해져서 반투명 효.. HTML&CSS 2021. 8. 9. CSS로 메이슨리 스타일 목록 만들기 이미지는 너비가 모두 300px입니다. CSS가 없으면 블록 태그는 세로로 한 줄로 나열됩니다. CSS로 메이슨리 레이아웃과 같은 모양을 만들기 위해서는 컬럼 모드를 활용합니다. 컬럼 모드는 웹 페이지를 2개 이상의 컬럼으로 나누어서 컬럼 흐름을 따라서 컨텐츠가 배치되도록 하는 것입니다. 컬럼 모드는 "column-count"와 "column-gap" 2개의 속성으로 컬럼 갯수와 사이 여백을 정의합니다. 먼저 "container" 클래스에 컬럼 모드를 정의합니다. 배치할 이미지 아이템들 하단에 마진을 20px 지정해서 간격을 띄워주고, 이미지가 컬럼 너비를 넘지 않도록 이미지 너비를 "100%"해서 컬럼 너비에 맞도록 해줍니다. .container { width: 750px; /* 전체 너비 */ mar.. HTML&CSS 2021. 8. 8. 래퍼 태그 없이 레이아웃 가운데 정렬을 구현하는 방법 레이아웃을 구현할 때 콘텐츠 좌우에 여백을 두고 내용을 가운데 영역에 표시하려면 래퍼(콘텐츠를 감싸는 포장용) 태그를 사용해 콘텐츠 태그들을 감싸고, 이 래퍼 태그 좌우에 같은 마진 여백을 지정해서 콘텐츠들을 가운데 표시하는 것이 일반적입니다. 다음처럼 "wrapper" 클래스를 가진 블록 태그로 컨텐츠 표시 태그들을 감싼 후 제목 내용1 내용2 "wrapper" 클래스에 같은 좌우 마진을("margin: 0 auto;") 주고 래퍼 영역 너비를 "600px"로 정하면, 600px 너비를 가진 래퍼 블록이 웹 브라우저 영역 가운데에 항상 정렬되어 표시됩니다. 가장 일반적으로 사용하는 컨텐츠 영역 가운데 정렬 방식입니다. main { width: 100vw; } .wrapper { margin: 0 aut.. 이전 1 2 3 4 5 6 7 ··· 23 다음 반응형
