옵션으로 더 볼 것들
-
2022.01.05옵션으로 더 볼 것들 2022. 1. 6. 09:08
1. 아이템 별로 크기를 늘려주고자 할 때 flex basis를 설정해줘야함 2. media 쿼리 안에 들어가는 애들은 최소한의 설정들만 들어가야함 예를 들면 토글 버튼은 화면 크기 상관없이 html에 박혀있음 그렇지만 768px초과 일때는 화면에서는 숨겨야함 -> 어차피 media 쿼리 밖에서 숨기는 설정을 써줘야함 (이미 밖에 설정 값을 쓰는데 안에서도 쓴다?? 댓츠 no no) 그냥 밖에서 일괄 처리 해버린다. 3. 기존 자리에서 빠져나와서 새로운 자리에 포지션을 만들고자 할 땐 앱솔루트를 이용한다.
-
2021.11.14옵션으로 더 볼 것들 2021. 11. 14. 15:34
1. data attribute 데이터 속성 -> HTML5에서 추가됨 html5에서 제공하는 속성만이 아니라 내가 원하는 데이터를 DOM 요소에 추가할 수 있는 역할 'data-' 의 형태로 사용할 수 있음 태그가 다르다면 javascript에서 document.querySelector('div[data-display-name="world"]'); 만들어준 속성에 대해 querySelector를 해주고 해당 객체의 dataset을 콘솔에 찍으면 data- 뒤에 오는 속성명과 값을 key:value로 가져오는 것을 확인할 수 있음. -도 사라지고 camelcase화 되어 map에 들어간다. 한가지 주의할 점은 우리가 dom에 요소로 데이터를 추가한다는 것은 사용자가 데이터를 다운받거나 해커에게 해당 데이..
-
2021.11.11옵션으로 더 볼 것들 2021. 11. 11. 23:00
css custom properties 반복해서 사용하는 수치 -> 상수로 정해서 쓰는 것이 좋음 (하드 코딩은 왠만하면 피하자 유지보수에도 좋지 않음) css properties에서 선언한 변수는 해당 박스와 그 안의 자식 요소들에게 적용한다. 위의 경우에는전역 변수는 아니므로 다른 박스에 css로 먹히지 않음 실제로는 root에서 선언한다고 함 media 쿼리 사용할 때 삶의 질을 급상승 시켜준다고 함 @media screen and (max-width: 768px){ :root{ --font-size : 32px; --background-color : rgb(121, 138, 160); --base-space : 8px; } } 이렇게 한번만 선언해주면 언제든지 쓸 수 있으니까!! 만약에 변수 선언..
-
2021.11.07_background옵션으로 더 볼 것들 2021. 11. 7. 17:23
mdn 링크 https://developer.mozilla.org/en-US/docs/Web/CSS/background-image background-image - CSS: Cascading Style Sheets | MDN The background-image CSS property sets one or more background images on an element. developer.mozilla.org https://developer.mozilla.org/en-US/docs/Web/CSS/background background - CSS: Cascading Style Sheets | MDN The background shorthand CSS property sets all background s..
-
2021.11.07_align옵션으로 더 볼 것들 2021. 11. 7. 16:56
flext 박스 중심축에서 정렬하는 것 : justify-content 반대축에서 정렬하는 것 : align-items flex box가 아닌 상황에서 정렬을 하고자 할 때 margin auto를 쓰면 정렬이 가능하다. div는 블럭요소 이므로 브라우저 상에서 자동으로 한줄을 자동으로 채워주는 margin을 넣어준다. => 한줄을 채워주는 역할을 하므로 수평 상으로만 정렬이 가능하다. text-align은 블록요소에 먹히지 않는다. => margin: auto 속성을 줘서 센터로 만들어야 함 (수평에서만 정렬 가능) -> 인라인 요소에는 바로 먹힌다. 아무튼 text-align으로는 수직 정렬이 되지 않으니까 다른 방법이 필요하다. -> transform 사용 화면 끝에서 자기자신의 사이즈 비율 만큼 이..