일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- click and drag
- react
- 타입좁히기
- 성능최적화
- React.js
- CSS
- JS console
- 공통컴포넌트
- 개발콘텐츠
- vue.js
- typescript
- reactjs
- returnType
- 커스텀
- const 단언문
- Chart.js
- NonNullable
- javascript
- 반복줄이기
- 타입선언
- 레이아웃쪼개기
- 리액트
- 제네릭
- utilty type
- TSDoc
- 2022
- 타입스크립트
- 누구나 자료구조와 알고리즘
- 티스토리꾸미기
- 폰트적용하기
- Today
- Total
목록Development/HTML · CSS (56)
몽땅뚝딱 개발자
Vue는 v-html이라는 디렉티브를 이용하여 깔끔히 구현할 수 있지만 리액트는 없는 것으로 보인다. 방법 1. split 사용 {characterInfo.ka_star_info && characterInfo.ka_star_info.split('\n').map((line) => { return ( {line} ) })} 방법 2. white-space: pre-line; 사용 '\n'만 적용된다. &_desc { white-space: pre-line; } 출처 React에서 줄바꿈을 하는 방법 리액트에서 줄바꿈을 하는 방법 jsx에 의해서 개행문자나 태그는 동작하지 않고 그대로 출력한다. Reference https://developer.mozilla.org/ko/docs/Web/CSS/white-sp..
부모 태그에 컬러를 지정한 경우, 자식 태그에 컬러 생략이 가능하다. 테스트 문구 /* 폰트, 선에 컬러지정을 하지 않았다. */ .test-area { color: #1f8cff; span { border: 1px solid; text-decoration: underline; } } 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.
[키워드 요소] 아래와 같은 키워드요소는 transition이 적용되지 않는다. heigth: auto; display: none; display: block; color: white; /* 'auto'라는 키워드 요소이기 때문에 적용되지 않는다. */ transition: heigth all .5s; [수치 요소] 수치 요소일 때 만 적용된다. heigth: 500px; color: #FFFFFF; /* '500'이라는 수치 요소이기 때문에 적용된다. */ transition: heigth all .5s; 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.
◽ Paragraph: 단락 : 문장, 문단을 작성할 때 사용한다. ◽ Span: 간격 : 별 의미가 없는 인라인 태그이다. 는 문장, 문단이었다면 은 단어를 작성할 때 사용한다. display: block; display: inline-block;을 넣는건 비효율적인 작업이 아니라 그냥 당연한 것. 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.
// unset는 IE11에서 지원하지 않는다. max-height: unset; // max-height의 기본값은 none이다. max-height: none; 출처 https://stackoverflow.com/questions/13988145/how-to-unset-max-height
input의 type을 정하고 이렇게 패턴을 정해놓으면 브라우저에서 알아서 체크하고 UI까지 만들어준다. 하지만 대부분 자체적으로 처리하고 싶을 것이다. :pattern="type === 'password' ? '[A-Za-z]+' : ''" 그때는 아래의 옵션을 추가해주자. // ... 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.
◽ setProperty() // 적용되지 않는다. element.style.height = "240px !important" // setProperty()를 사용하여 적용한다. element.style.setProperty('height', '240px', 'important') 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.
display: flex 속성을 초기화하기 위해서는.. unset인가? (block임) white-space: no-wrap 속성을 초기화하기 위해서는..... 역시 unset인가? (normal임) 더 이상은 unset무새가 될 수 없기에,,ㅠ 각 속성에 대한 초기값은 mdn에서 확인할 수 있다! 출처 white-space - CSS: Cascading Style Sheets | MDN CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정합니다. developer.mozilla.org
이 속성은 HTML 요소들의 hover/active, click/tap, cursor, drag 등의 이벤트를 조정할 수 있는 속성이다. 나의 경우 index가 다른 요소들 때문에 문제를 겪었는데, z-index가 높은 요소때문에 그 아래에 있는 요소의 hover 이벤트가 작동하지 않아 해당 옵션을 주었다. ◽ 사용하기 /* none: HTML 요소에 정의된 각종 이벤트(클릭, 상태, 커서 옵션)가 비활성화 된다. */ pointer-events: none; /* auto: 비활성화된 이벤트들이 다시 발생하게(기본 기능으로 원복) 한다. */ pointer-events: auto; /* inherit: 부모 요소로부터 pointer-events값을 상속받는다. */ pointer-events: inher..
◽ z-index란? HTML 요소가 겹치는 순서를 정의하는 CSS 속성으로 인덱스가 높은 요소는 인덱스가 낮은 요소 위에 배치된다. ◽ z-index의 적용 방법 z-index는 position의 속성이 relative, absolute, fixed처럼 위치가 지정된 요소에서만 작동된다. static에서는 동작하지 않으므로 주의하자! 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.