🔸 CSS
- 모바일에서만 보이는 글을 생성할 때, 사용자 정의 속성을 어떻게 이용할 수 있는가?
: HTML 태그에
data-로 시작하는 사용자 정의 속성과 그 값을 설정하면, 이를 CSS의attr함수로 가져올 수 있음
: 구체적으로는 먼저 모바일 미디어쿼리에 가상 요소를 생성하고,content값의attr함수 변수로 사용자 정의 속성 이름을 작성하면 그 값을 불러와서 모바일에서만 보이게끔 하는 방식
inline-flex를 사용하면 어떤 이점이 있는가?:
flex를 사용해야 하는데 주변에 있는inline요소와의 배치를 신경써야 할 때 유용함
:inline-block을 사용하면 HTML 작성 시 발생한 공백 문자(엔터)가 여백으로 보여지지만,inline-flex를 사용하면 공백 문자가 여백으로 보이지 않음, 추후에 여백이 필요하다면gap으로 유연하게 조절 가능
inline요소의 여백을 제거할 때vertical-align속성을 어떻게 활용할 수 있는가?: 여백이 발생하는 이유는 폰트 사용 시 기본으로 발생하는 descender 라인 때문
:vertical-align속성의 값으로top을 지정하면 폰트 기준 descender 라인 바로 위인 baseline을 기준으로 여백 없이 정렬되기 때문에inline요소의 여백을 제거하는 데 사용할 수 있음
shape-outside속성은 무엇이고, 어떻게 사용하는가?:
float된 요소에shape-outside속성을 사용하면 인접한 인라인 콘텐츠를 값으로 설정한 형태에 따라 감싸는 것처럼 배치할 수 있음
ex)shape-outside: circle(50%);
object-fit,object-position속성은 무엇이고, 어떻게 사용하는가?:
object-fit속성을 사용하면 콘텐츠의 가로 세로비에 따라 콘텐츠 박스에img,viedo요소를 어떻게 채울지 설정할 수 있음
- 반응형 디자인에서
max-width값을 설정하면 어떤 이점이 있는가?:
max-width값을 지정하면 일정 이상으로 이미지 크기가 늘어나면 안 되는 경우에 유용함
- 반응형 디자인 시 너무 용량이 큰 이미지를 사용하면 어떤 이슈가 발생하는가?
: 모든 리소스를 다 요청하여 받아오기 때문에, 너무 용량이 큰 이미지를 막 사용하면 렌더링 시간이 오래 걸리므로 UX에 좋지 않음
flex컨테이너의 자식 요소에flex-grow속성 값을 1로 설정하는 경우 어떤 이점이 있는가?: 설정한 요소가 여백을 가득 채우기 때문에
margin을 따로 설정하지 않아도 콘텐츠 너비만큼 양 끝으로 꽉 차게 정렬됨
flex컨테이너 하위 요소에 사용할 수 있는order는 무엇이고, 어떻게 사용하는가?:
order속성 값을 설정하여 마크업 구조 상으로 뒤에 배치되는 요소를 우선적으로 배치하거나, 앞에 배치되는 요소를 나중에 배치하게끔 할 수 있음
flex를 사용하여 모바일 레이아웃을 배치할 때 하위 요소의width값을 100%로 설정한다면, 그 이유는 무엇인가?: 콘텐츠가 영역의 크기를 가득 차게끔 하여 자동으로 줄 바꿈이 되도록 정렬할 수 있음
grid컨테이너의grid-template-rows속성 값을auto로 지정하면 어떤 이점이 있는가?:
height값을auto로 지정하는 것과 유사한 맥락
:height값을 따로 설정하지 않아도 내부 콘텐츠 크기에 맞춰 높이가 늘어난다는 이점이 있음
grid-area의 값으로 변수명을 지정하는 경우grid레이아웃 배치 시 어떤 이점이 있는가?: 지정한 변수명은
grid-template-areas속성에 사용할 수 있음
:grid-template-columns와grid-template-rows를 따로 사용하지 않고도 2차원 배열처럼grid레이아웃을 쉽게 배치할 수 있음
