웹 디자인
1.[웹디자인] 개발팁
웹 접근성 지침 모든 컨텐츠는 컨텐츠마다의 제목이 필요하다. 헤더 푸터 등 전문 용어 사용을 지양 제목을 사라지게 할때 display: none을 쓰면 화면 낭독기가 읽지 못함으로 css로 화면밖으로 보내는 방식 사용 배경 이미지 삽입시 대체 텍스트를 넣어야한다. 그 외 헤더 영역이 3개의 영역으로 나누어질 경우, 양 끝은 position: absolu...
2.[웹디자인] 마름모꼴 이미지
html css 부모요소를 45도 회전 max-width,min-width를 100%로 주어 이미지 전체 꽉 채우기 자식요소를 다시 반대로 45도 회전하고 scale로 여백 채우기 자식요소 position을 relative로 하고 중심으로 맞추기 유노코딩
3.[웹디자인] 체크박스 스타일
htmlcss아이디어1\. 원래 체크박스를 숨긴다(clip속성 사용)2\. 새로운 네모칸을 만든다(가상요소 ::before사용)3\. 체크시 네모칸 모양 변경escape sequence(이스케이프 시퀀스)컴퓨터 언어에서 사용하는 여러 기호들에 코드를 부여한 것
4.[웹디자인] 가운데 배치
positon 사용마진을 auto로 주기 위해서는 반드시 width,height값이 지정되어 있어야한다.
5.[웹디자인] 말풍선 만들기
원리border를 각각 다른 색으로 지정한뒤 width를 없애면 아래와 같은 모양이 된다.이후 border-top,border-left,border-right,border-bottom속성을 조절하여 사각형을 아래와 같이 4등분 할 수있다.예시 border-top이 0인
6.[웹디자인] 가로세로 비율이 일정한 요소
hltmlcsspadding-top = 세로 / 가로 \* 100
7.[웹디자인] 네비게이션
htmlcssli사이에 선은 가상요소 ::before를 사용하여 첫번째 요소를 제외한 요소에 absolute로 만들어 배치한다.a태그의 선택범위를 늘리기위해 padding을 주어 영역을 넓힌다.
8.[웹디자인] 검색바
htmlcssjavascript초기에 input에 width를 적게주고 선택시 transition효과와 함께 너비를 늘린다.js로 전체 div를 클릭하면 input에 focus하도록 해준다.
9.[웹디자인] 스크롤에 반응하는 badge
자바스크립트로 제어하는 타임라인 기반의 애니메이션 라이브러리htmlcssjavascript
10.[웹디자인] Swiper 슬라이드
Swiper 하드웨어 가속 전환과 여러 기본 동작을 갖춘 현대적인 슬라이드 라이브러리 html javascript 공지사항 자동 슬라이드 html css javascript
11.[웹디자인] 유튜브 비디오
htmlcssjavascript
12.[웹디자인] parallax
htmlcssbackground-attachment: fixed는 이미지가 뷰포트에 고정되어 스크롤 영향을 받지 않는다.background-size: cover는 비율을 유지하면서 빈공간없이 가득 채운다.
13.[웹디자인] Scroll To Top
htmlGSAP & ScrollToPlugin,Google Material Icons,Lodashcssjavascript
14.[웹디자인] 반응형 헤더
.gif) 컴포넌트 구조 CSS 데스크톱 화면일때 토글버튼은 display:none으로 제거한다. 모바일 화면일때 display:block으로 토글 버튼을 살린후 useState를 사용하여 메뉴에 show또는hidden클래스를 넘겨 토글 기능을 구현한다.