2020-08-21 / TIL

JJeong·2020년 8월 21일

새로 알게 된 속성

defer : <script> 에 사용한다. DOM element에 이벤트 핸들러를 적용할 때 자주 null error가 발생한다. 해당 노드가 아직 만들어지지 않은 탓이다. 이런 일을 방지하기 위해, html 파일이 먼저 파싱된 후 js 파일의 이벤트 핸들러가 작동되도록 제약을 거는데 이 때 defer 속성이 사용된다.

:root : 자주 쓰이는 속성 값들을 변수로 지정할 때 사용된다. 예를 들어 color를 변수로 지정하면 일일이 6자리 숫자를 비교하지 않아도 같은 색상임을 확인할 수 있다. 디자인 측면에서도 너무 많은 색상과 글자 크기가 사용되면 조잡해보일 수 있기에 가짓수를 적절히 조절하는 데도 도움이 된다.
flex: n n n% : 순서대로 flex-grow, flex-shrink, flex-basis를 포함하는 단축 속성이다.
(display: flex) justify-content: space-between : container를 양 끝으로 붙힌 다음 균일한 간격으로 배치할 때 사용된다. 즉, 2개의 container의 경우 양 끝에 배치되며 3개 이상일 경우 container 끼리의 간격만 생성된다.
(display: flex) justify-content: space-evenly : 위의 속성과 비슷해보이지만 양 끝에 있는 container들이 좌우 간격을 모두 갖는다는 점이 다르다. 즉, container가 가장자리에 붙지 않고 다른 container과 균일한 간격을 갖는다.
(display: flex) justify-content: space-around : container 간의 간격과, 가장자리의 간격의 관계가 다음과 같다.

position: sticky : 스크롤을 따라서 뷰포트의 처음 지정되었던 위치에 머무른다. 이 속성을 사용할 때는 반드시 추가적인 위치를 지정해주어야 한다. 예를 들어, top: 0;를 추가할 경우 뷰포트 최상단에 붙어서 내려오게 된다.
(display: -webkit-box) -webkit-line-clamp: n : text에 최대 보이는 줄 수를 정한다. n 이상으로 줄의 수가 생길 경우 '...'으로 축약된다. 그러나 나머지 부분이 보이지 않는 건 아니므로 반드시 overflow: hidden과 함께 사용해야 한다. webkit-box-orient: vertical 속성과도 같이 쓰라고 명시되어 있다.

display 속성을 -webkit-box 또는 -webkit-inline-box로, 그리고 -webkit-box-orient 속성을 vertical로 설정한 경우에만 동작합니다.

border-radius : n% : element(img 포함)의 가장자리를 둥글게 바꾼다. 100%까지 쓸 수 있지만 정사각형에 적용하는 경우엔 50%만 적용해도 원으로 만들 수 있다.
text-transform : uppercase : 문자열을 대문자로 바꾼다. 소문자로 바꾸는 값은 lowercase, 단어의 첫 문자만 대문자로 바꾸는 값은 capitalize이다.