일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- const 단언문
- 개발콘텐츠
- 공통컴포넌트
- CSS
- TSDoc
- 타입스크립트
- utilty type
- JS console
- 리액트
- 2022
- NonNullable
- 티스토리꾸미기
- 레이아웃쪼개기
- 타입선언
- returnType
- React.js
- react
- click and drag
- 폰트적용하기
- 누구나 자료구조와 알고리즘
- 성능최적화
- reactjs
- typescript
- 타입좁히기
- vue.js
- javascript
- 제네릭
- 반복줄이기
- 커스텀
- Chart.js
- Today
- Total
목록Development/HTML · CSS (56)
몽땅뚝딱 개발자
ES5에서는 객체를 구현하기위해 prototype을 사용하고, ES6에서는 같은 개념인 class를 사용한다. 가독성도 좋고 쉽게 선언할 수 있는게 차이점인 듯! ◽ ES5: Prototype 프로토타입에서는 함수명.prototype.함수명 형태로 선언하여 객체 외부에서 객체내부에 선언된 함수를 사용할 수 있다. // ES5의 프로토타입(Prototype) let examCountFunction = (function () { function examCount(num) { this.number = num } examCount.prototype.showNum = function () { console.log(this.number); } return examCount; }()); let cnt = new ex..
&__textarea { // .. overflow-y: scroll; &::-webkit-scrollbar { width: 4px; /* 스크롤바의 너비 */ } &::-webkit-scrollbar-thumb { border-radius: 6px; background-color: $kpi-black30; /* 스크롤바의 색상 */ } &::-webkit-scrollbar-track { background-color: $fade; /* 스크롤바 트랙 색상 */ } }
속성을 사용하여 동적으로 콘텐츠를 넣어보자! 📄 HTML 📄 CSS &[data-desc]:hover { &::before { content: ''; position: absolute; top: 5px; right: 6px; width: 0; height: 25px; border-right: 10px solid transparent; border-bottom: 20px solid $white; border-left: 10px solid transparent; } &::after { content: attr(data-desc); position: absolute; top: 40px; right: -13px; width: 57px; height: 35px; border-radius: 5px; font-wei..
border를 주고 box-sizing: border-box;를 줘봐도 자꾸 영역밖으로 나갔다. box-shadow 속성으로 주면 깔끔하게 지정된 div 영역 안으로 들어간다. div { box-shadow: 0 0 0 3px #4872f4 inset; } 출처 HTML 레이아웃 잡을 때 박스 안쪽 테두리 실전 2가지 방법 웹을 디자인(개발?) 하다 보면 레이아웃을 잡기 위해서 외곽 (border) 를 임시로 설정하는 경우가 많습니다. 하지만 외곽을 주면 그 보더의 두께에 따라서 영역이 커집니다. 예를 들어 100% 짜리 폭 indienote.tistory.com
image-box { position:relative; &__image { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 100%; max-height: 100%; } }
◽ transform-origin transform-origin: {세로} {가로} ex) transform-origin: center left; 이라면 세로 기준으로 center, 가로 기준으로 left부터 정렬된다. const BarGraph = styled.div` position: absolute; left: 0; top: 0; width: 100%; transform: scaleX(${({width}) => width / 100}); transform-origin: center left; transition: transform 1.5s ease; height: 100%; background: ${({isSelected}) => isSelected ? 'rgba(126, 198, 81, 0.7)'..
있어야 할 것 같지만 없어도 되는 속성은 'width'이다. 'max-height' 속성의 경우 font-size의 2배나, line-height값이 있다면 해당 값의 2배로 주면 된다. '-webkit-line-clamp' 속성이 줄의 수로, 나는 2줄부터 말줄임이 필요했기때문에 값을 2로 적어주었다. .hidden-text-target { font-size: 15px; max-height: 40px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } 이 2개의 값은 넣어봤지만 변화가 없어서 추가하지 않았다. 추후 문제가 생기면 추가하기! white-space: normal; text..
📄 HTML 📄 CSS .box { width: 200px; height: 100px; background: linear-gradient(to right, black 4px, transparent 4px) 0 0, linear-gradient(to right, black 4px, transparent 4px) 0 100%, linear-gradient(to left, black 4px, transparent 4px) 100% 0, linear-gradient(to left, black 4px, transparent 4px) 100% 100%, linear-gradient(to bottom, black 4px, transparent 4px) 0 0, linear-gradient(to bottom, blac..
보통 영역을 나눌 때 를 사용하여 id나 class를 주어 영역을 구분하지만, 협업 시엔 그 의미를 파악하기 어렵다. 그래서 직관적인 이름을 사용하여 해당 영역을 효율적으로 파악할 수 있도록 돕는 것이 시맨틱 태그(semantic tag)이다. 각 회사의 프로젝트 성향, 정책마다 달리 적용된다. ◽ 사용하는 이유 1. 검색엔진(SEO)의 최적화 2. 웹접근성: 시각장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 용이하다. 3. 유지보수성: 개발자들이 한 눈에 알아보기가 쉽다. ◽ 종류 [레이아웃] - header: 헤더 영역 - main: 문서의 주요 contents 영역 - footer: 푸터 영역 - section: contents 영역으로 반드시 제목(h1~h6)을 가짐 - arti..
보통은 아래와 같이 링크를 걸 것이다. 링크 링크 이렇게되면 글자부분에만 링크가 걸리게 되는데 만약 li 전체에 링크를 걸고싶다면 CSS 속성을 아래와 같이 설정하면 된다. 와 모두에 적용된다. li a { display: block; } 출처 [CSS] li에 영역 전체에 링크 걸기 > 기술자료 | 해피정닷컴 a태그로 링크하면 글씨에만 링크가 걸리죠. 공백에도 링크거는 방법입니다. 아래와 같이 display:block;를 추가해주세요