본문 바로가기
반응형

HTML&CSS

클래스와 속성값을 문자열로 검색하는 5가지 CSS 선택자 사용법 0 2021. 8. 1. 클래스, 또는 속성 값의 일부를 매칭 해서 원하는 요소들을 선택할 수 있는 다양한 CSS 선택자가 제공됩니다. 그중에서 활용도가 가장 높고 빈번하게 사용하는 5가지 주요한 검색 매칭 선택자를 알아보겠습니다. CSS 선택자 매칭에 사용하는 예제 HTML은 다음과 같습니다. 소개말 섹션1 섹션2 섹션3 맺음말 이전글 다음글 클래스와 속성 값을 문자열로 검색, 매칭 할 때는 꺽쇠 괄호([], 브래킷)로 감싸서 표시합니다. "[class='paging']" 매칭은 클래스에 "paging" 이 있는 HTML 문서 안의 모든 요소를 선택하는 것입니다. 문자열 매칭을 선택자 뒤에 붙여서 사용하면 선택된 요소 목록 중에서 클래스, 속성 값이 매칭 되는 요소만 선택합니다. "div[class='paging']" 매칭은 ..
웹페이지 가운데 표시되는 인라인 팝업창 디자인 만들기 0 2021. 7. 31. 많은 사용자들이 웹브라우저 설정에서 실제 모달 팝업창이 안 뜨게 차단해놓는 경우가 많기 때문에 공지사항이나 알림과 같은 방문자에게 꼭 보여야 하는 내용을 웹사이트에 표시하려면 웹페이지 안에 팝업창처럼 보이는 요소를 표시하는 것이 일반적인 추세입니다. 다만, 이렇게 별도의 화면으로 띄워서 알려줌에도 팝업 내용을 확인하지 않고 지나쳐버리기 때문에 실제 모달 팝업창 처럼 방문자가 확인 버튼을 눌러야만 웹 페이지 화면으로 넘어가도록 하는 방식을 사용하기도 합니다. 미리 말하자면 방문자의 확인이 없으면 다른 웹 페이지로 넘어가지 않는 기능은 자바스크립트의 도움이 필수입니다. 방문자가 웹사이트의 링크를 클릭해 다른 페이지로 넘어가지 않도록 이벤트를 차단해야 하고, 확인 버튼을 누르면 팝업 대화상자가 사라지도록 해야..
CSS 작성에 도움이 되는 CSS 툴 웹서비스 5가지 0 2021. 7. 30. 1. PurifyCSS Online PurifyCSS는 사용하지 않는 CSS를 제거해주는 자바스크립트 라이브러리입니다. 사용하지 않는 CSS를 제거해주는 여러 가지 툴이 있고 프런트엔드 프레임워크를 지원하는 대표적인 툴로 PurgeCSS가 있습니다. 다만 PurgeCSS는 온라인에서 간편하게 사용할 수 있는 수단을 제공하고 있지는 않습니다. 온라인으로 사용할 수 있는 사용하지 않는 CSS를 제거해주는 툴로 PurifyCSS Online 서비스가 있습니다. https://purifycss.online/ PurifyCSS Online - Remove unused CSS Removes the unused code from your CSS and reduces the file size by up to 90% p..
CSS 커서를 적용하는 다양한 방법들. 비트맵 이미지와 이모지 아이콘으로 마우스 커서 만들기. 0 2021. 7. 30. CSS 커서 속성 CSS에서 사용할 수 있는 기본 커서의 종류는 30가지가 넘습니다. 그중에서 실제로 CSS에서 사용하는 것은 몇 가지 되지 않으며, 대표적인 커서는 다음과 같습니다. CSS 속성 값 커서 모양 설명 default 기본 커서를 표시합니다. 대부분 화살표 모양입니다. 운영체제, 또는 사용자 설정에 따라 다를 수 있습니다. auto 커서가 위치한 컨텐츠, 또는 요소에 따라 자동으로 커서 모양이 변경됩니다. 웹브라우저 기본 커서 속성값입니다. pointer 하이퍼링크 커서 모양. none 커서 감춤. 예외적인 경우가 아니면 사용하면 안됩니다. text 텍스트 입력 필드 커서 모양. wait 작업중. 또는 결과 대기중 표시. 작업이 진행중이며, 사용자와 상호 작용이 안됨을 표시. 공통되게 사용하..
CSS를 작성할 때 지켜야 하는 7가지 기본 원칙 1 2021. 7. 28. 1. 상대 크기 단위를 사용해라. CSS에서 픽셀 단위 크기를 사용하는 것은 더 이상 권장되지 않습니다. 레티나 디스플레이와 4K 이상의 화면이 서서히 자리를 잡아가고, 모바일 화면과 반응형 웹 지원이 필수가 되면서 다양한 ppi(Pixel Per Inch)를 가지는 기기 지원이 CSS 작성의 필수 요소가 되어가고 있습니다. 픽셀 단위인 px 표시보다는 상대 크기 단위인 em, rem 단위를 사용해야 하고, 레이아웃 크기도 vw, vh와 같은 상대 비율을 적극적으로 사용하는 것이 좋습니다. 특히 문자와 관련된 속성들은 반드시 상대 크기 단위를 사용해야 하고, 내부 요소의 배치 크기, 여백과 같은 요소들에서도 상대 크기 단위를 사용하는 것이 좋습니다. em과 rem 단위에 대한 기본 이해는 다음 글을 보면..
문단을 표현하는 <p> 태그는 중첩해서 사용할 수 없다. 1 2021. 7. 27. HTML 페이지에서 문단을 표시하는 용도로 사용하는 태그는 HTML 문서에서 가장 빈번하게 사용하는 태그 중 하나입니다. 레이아웃을 만드는 데 사용하는 블록 태그를 제외하면, HTML 페이지 안의 텍스트 내용을 표현하는 근간이 되는 태그가 태그입니다. 태그는 "paragraph"(문단) 단어의 앞머리 철자 "p"에서 따와서 사용하는 것입니다. HTML에서 태그는 텍스트로 된 문단을 표현하는 용도로 사용되며, 여러 줄로 된 텍스트 영역을 표현합니다. 태그는 중첩해서 사용할 수 없다. 태그에는 중요한 특징이 있습니다. 태그 안에는 인라인 텍스트를 표현하는 태그만 올 수 있으며, 블록 태그, 또는 다른 태그는 올 수 없습니다. 과 같은 텍스트 표현 태그는 사용할 수 있지만, 블록 태그, 또는 태그를 태그 안에..
CSS만으로 별점 선택 기능 만들기. 형제 선택자(Sibling Selector) "~"를 활용한 별점 선택 기능 만들기. 2 2021. 7. 22. 1. 별점 선택 기본 구조 만들기 별점 기능을 구현하기 위한 별 이미지는 투명 배경 이미지인 PNG나 벡터 이미지인 SVG로 많이 만듭니다. 최근에는 다양한 기본 이모지가 사용 가능해지면서 이모지를 이용해서 별점 기능을 만들 수 있어서 별도의 리소스 제작을 하지 않고 만들 수 있는 이모지를 활용해서 만들어 보겠습니다. 이모지는 기본 시스템 글꼴로 표현이 가능하기 때문에 복사&붙여넣기로 글자처럼 사용이 가능합니다. 먼저 별 모양 이모지를 인터넷에서 찾아서 가져옵니다. 이모지는 코드로 표현하는 기존의 문자 코드와 다르게 이미지 자체가 표현되는 특징이 있습니다. ⭐ 뒷부분에서 마우스 클릭으로 별점 갯수를 선택한 상태가 유지되도록 하는 기능을 구현할 것이기 때문에 클릭한 별점 값이 선택되도록 라디오 버튼으로 별..
CSS 카운터 함수(counter())로 목차형 순번 붙이기 0 2021. 6. 16. CSS의 고급 활용 기법입니다. 초보자에게는 다소 어려운 내용일 수 있습니다. CSS의 기초적인 부분과 가상 요소에 대해서 알려면 먼저 다음 내용을 학습하시기 바랍니다. > HTML+CSS 기초 강의 - 27. CSS 선택자 기초 4 - 가상 요소 > CSS 선택자 고급 - 가상 요소(Pseudo Element)로 선택하기 > CSS 가상 요소를 활용해 삼각형 화살표 만들기 HTML 태그 중에는 태그(Ordered List)가 있어서 목록 앞에 번호 순서를 붙일 수 있는 기능을 제공합니다. 다만, 순번을 붙이는 방식이나 태그가 제한되어 있기 때문에 용도 또한 제한적으로만 사용할 수 있습니다. 일반 태그에도 넘버링을 붙일 수 있는 기능이 있습니다. CSS 카운터라고 하고, 태그 종류에 제한 없이 다양한 순..
eot, woff, ttf 웹 글꼴 포맷의 구분과 이해 0 2021. 5. 8. 웹용으로 사용하는 글꼴은 다양한 글꼴 포맷이 있습니다. 종류별로 용도가 조금씩 다르고, 또 현재 시점에서는 전혀 무쓸모인 것도 있습니다. 웹 글꼴 중 TTF와 WOFF는 대부분의 웹 브라우저에서 지원되는 범용 포맷으로 자리잡았기 때문에 2가지 글꼴만 정의해주면 호환성에 문제는 없습니다. CSS로 웹 글꼴을 정의해서 가져올 때는 다음과 같이 정의합니다. "eot"와 "svg" 포맷은 호환성을 위해서 가져오는 것으로 실제로는 없어도 무방합니다. @font-face { font-family: 'apost'; src: url('fonts/apost.eot?1wm9b1'); src: url('fonts/apost.eot?1wm9b1#iefix') format('embedded-opentype'), url('fon..
CSS font-display 속성으로 웹페이지 텍스트가 먼저 표시될 수 있도록 하기 0 2021. 3. 26. 웹에서 다운로드 가능한 웹 폰트를 사용하는 경우, 기본 설정은 웹 폰트가 모두 다운로드 되어 로딩될 때까지 텍스트 내용이 표시되지 않는 것입니다. 느린 인터넷 환경에서는 처음 웹 페이지가 로딩될 때 다소 미관상 보기 좋지 않을 수 있겠지만, 텍스트 내용이 먼저 표시되어 표시되는 것이 더 중요할 수 있습니다. 아마도 대부분의 웹 환경에서는 텍스트가 먼저 표시되고 그 이후에 다운로드된 웹 폰트가 적용된 결과로 화면이 갱신되는 편이 더 나을 것입니다. CSS에는 이런 경우를 위해 사용자가 선택적으로 웹 폰트의 수 적용을 할 수 있는 방법을 제공합니다. font-display: swap; 속성을 웹 폰트를 적용하는 CSS에 추가하면 해당 CSS 가 적용되는 부분은 먼저 텍스트, 그러니까 시스템 글꼴로 된 텍스트..
SVG 벡터 경로(Path)를 따라 이동하는 CSS 애니메이션 만들기 5 2020. 12. 16. CSS 애니메이션을 만들어 사용할 때 대부분의 애니메이션은 직선 이동, 또는 크기 변경입니다. 전문적인 애니메이션이 아닌 이상 요소의 이동은 직선이 대부분입니다. 직선이 아닌 경우에도 직선을 여러개 이어 붙여서 표현하면 어색하지 않게 방향이 변하는 이동 경로를 만들 수도 있습니다. 예를 들어 다음처럼 여러 개의 직선 이동을 하나의 키프레임 애니메이션으로 표현할 수 있습니다. div.box{ position: absolute; left: 70px; top: 70px; width: 60px; height: 60px; background-color: #a00; border: 5px solid pink; box-shadow: 0 0 15px -5px rgba(0,0,0,0.4); border-radius: 35..
변수를 활용해 CSS 애니메이션 만들기 0 2020. 12. 16. CSS 변수를 잘 활용하면 반복해서 정의해야 하는 애니메이션 작업을 작은 CSS 코드로 줄일 수 있습니다. 키프레임 애니메이션 안에서도 CSS 변수를 사용할 수 있기 때문에 여러 개의 유사한 키프레임 애니메이션을 만들지 않고 한개의 애니메이션 정의를 재활용할 수 있습니다. 하트 모양이 여러개 겹쳐서 입체 느낌이 나면서 퍼져나가는 다음과 같은 애니메이션을 만들어 보겠습니다. 앞의 애니메이션은 투명해지면서 커지는 하트 애니메이션 5개를 겹쳐서 만든 것입니다. 먼저 기본이 되는 하트 애니메이션 1개를 만듭니다. .box{ left:100px; top: 100px; } .box::before{ content: '❤'; position: absolute; display: inline-block; left: 100..
반응형
닫기

티스토리툴바