개발/HTML-CSS (15) 썸네일형 리스트형 HSL Color HTML에서 색상을 색조, 채도 및 명도 (HSL)를 사용하여 다음과 같은 형식으로 지정가능 hsl(hue, saturation, lightness) 색조(hue)는 0에서 360 사이의 색상환 각도입니다. 0은 빨간색, 120은 녹색, 240은 파란색 채도(saturation)는 백분율 값이고 0 %는 회색 음영을 의미하고 100 %는 풀 컬러. 즉 100%일 경우 회색이 색조에 섞이지 않아 색상이 완전히 순수함. 0%일 경우에는 중간 정도의 회색을 가짐. 채도가 강할수록 선명하거나 밝게 나타나타나며 약할수록 칙칙해보임 밝기(lightness)도 백분율이며 0 %는 검은 색, 50 %는 밝거나 어둡지 않으며 100 %는 흰색. 색조와 혼합된 검은색 또는 흰색의 상대적 정도를 측정 참고 jun.hansu.. time 태그와 datetime 속성 time 태그와 datetime 속성 시간의 특정 지점 또는 구간을 나타냄 datetime 특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용 가능 주로 일반 텍스트로 보이는 날짜와 시간 정보를 의미있는 날짜, 시간 정보임을 HTML을 알려주기 위해서 사용된다. datetime 속성 해당 속성을 통해 날짜와 시간을 기계가 쉽게 읽을 수 있는 형태로 알려준다. 형식은 다음과 같다. YYYY-MM-DDThh:mm:ssTZD 형식 같은 경우 ISO 8601 date format에서 변형되었다. TZD 같은 경우는 UTC(협정 세계시)에서의 오프셋으로 Z는 offset이 없음을 의미하고 +01:00 은 UTC에서 1시간 후의 타임존을 의미한다. PTDHMS 같은 경우는 특정 기.. -webkit-line-clamp 속성 사용시 주의사항 -webkit-line-clamp 속성 사용시 주의사항 -webkit-line-clamp 속성 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한할 수 있는 속성 display 속성을 -webkit-box 또는 -webkit-inline-box로, 그리고 -webkit-box-orient 속성을 vertical로 설정한 경우에만 동작 단순히 요소의 줄 수만 제한하기 때문에 overflow: hidden 속성과 함께 사용하면 요소를 넘치는 텍스트를 감출 수 있다. 값 /* 키워드 값 */ -webkit-line-clamp: none; /* 값 */ -webkit-line-clamp: 3; -webkit-line-clamp: 10; /* 전역 값 */ -webkit-line-clamp: inherit; -w.. 브라우저 렌더링 엔진 브라우저 렌더링 엔진 브라우저 기본 구성 요소 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행 UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그리는 역할 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행 자료 저장소 - 자료를 저장하는 계층. 쿠키 저장 가능. 또한 웹 브라우저가 IndexedDB, WebSQL, Fil.. overflow: auto 특징 overflow: auto는 자신의 영역을 초과하는 부분이 있을 경우 스크롤이 되게 한다. 이때 자식 요소를 absolute로 띄우더라도 스크롤 영역에 포함되며 inline 요소에 부모 높이보다 큰 line-height를 설정하는 경우에도 스크롤 영역에 포함된다. 참고: codepen.io/hwanlee/pen/RwGwxyV 여러 애니메이션 효과 차례대로 적용 하기 - 한 요소에 여러 애니메이션을 차례대로 적용해야 하는 경우 `@keyframes` 를 사용하면 쉽게 할 수 있다. - 하나의 애니메이션 지속시간, 시작 시간(지연 시간), 타이밍 함수를 설정하여 적용한다. - codepen.io/hwanlee/pen/rNLxJvY run animation ... codepen.io 레이어 팝업 딤 영역 화면 높이에 따라 투명도 바뀌는 버그 레이어 팝업을 사용할 때 딤 영역이 화면 높이에 따라 투명도가 바뀌는 버그가 있다. 이를 해결하기 위해 딤 레이어 요소에 다음 속성을 추가하면 된다! transform: translateZ(0); // 혹은 will-change: transform; 참고: stackoverflow.com/questions/18972313/css-rgba-transparency-bug-in-chrome 이전 1 2 다음
