* CSS 미디어쿼리는 어떤 역할을 수행하는지 서술하라.
-> 미디어쿼리(mediaqueri)는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 도와주는
소프트웨어 모듈이다. 미디어 쿼리를 이용한 사이트는 웹 사이트에 접속하는 기기에 따라서 레이아웃이 바뀌게 된다.
즉, PC로 접속하면 모니터 화면에 맞게 스마트폰으로 접속하면 스마트폰에 맞게 레이아웃이 변형되는 것.
웹 문서의 스타일을 정의할 때, 즉 CSS 코드를 작성할 때 미디어쿼리 모듈을 사용해 주는 것이 일반적인 사용 방법이다.
* 미디어 쿼리를 작성하는 방법에 대해서 서술하라.
-> 미디어 쿼리는 @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정해준다.
@media screen and ( min-width:200px ) and ( max width:360px ) { 스타일 정의 }
해당 구문은 미디어 유형이 ' screen ' 이면서 최소 너비 200px 부터 최대 너비 360px 사이의 기기일 경우에
적용할 스타일을 정의하는 구문이다. 위처럼 작성한 코드를 <style> 태그에 추가하거나 CSS파일에 작성해주면
반응형 웹 사이트를 제작할 수 있다.
* 모달창과 팝업창의 차이는 무엇인가?
-> 팝업창이란 현재 열려있는 브라우저 페이지에 또 다른 브라우저 페이지를 띄우는 것을 말한다.
창 + 창n 인 것이다. 브라우저에서 이 창을 열기 닫기를 제어할 수 있다.
모달창이란 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌 레이어를 까는 것을 말한다.
모달창은 제거를 하지 않고도 페이지를 이동하면 자연히 사라진다.
기존의 페이지와 부모-자식 관계를 갖는다. 브라우저의 새 창 제어 옵션에는 전혀 영향을 받지 않는다.
둘의 목적은 같다. 프로 모션을 진행하거나, 서비스에 대한 공지, 주의사항, 안내문 등을
전달해야할 때, 또는 강조해야할 때 새 창을 이용한다.
요즘엔 팝업창을 잘 쓰지 않는다.
-> 예전에는 한 페이지가 로드 되면 팝업창이 4-5개씩 뜨기도 했다. 하지만 이는 사용자 입장에서 일일히 x를
누르며 지워야하는 불편함이 있었다. 불필요한 팝업창의 등장은 강조해야하는 컨텐츠의 노출을 되려 떨어트리는
악효과를 낳는다. ( 지나치게 많은 팝업창 역시 지양해야할 부분 중 하나 )
또한 브라우저 옵션에서 팝업창을 차단한 경우엔 팝업창을 볼 수 없다.
CSS 관련 질문
* z-index에 대해서 설명하라.
z-index는 겹치는 요소의 쌓임 순서를 정해주며, 이는 position이 static이 아닌 값을 갖는 요소에 적용된다.
만약 z-index가 지정되지 않으면 DOM에 나타나는 순서대로 요소가 쌓이게 된다.
* css 그리드에 대해서 서술하라. 또한 Flex와의 차이점을 서술하라.
Flex와 Grid의 차이점은.
1. Flex는 한 방향 레이아웃 시스템이고 ( 1차원 )
2. Grid는 두 방향 레이아웃 시스템이다. ( 2차원 )
Flexbox는 CSS에서 컨테이너 안에 있는 요소의 수직 가운데정렬등과 같은 일반적인 문제들을 해결합니다.
요즘 레이아웃을 만드는데 권장되는 방법 중에 하나.
Grid는 그리드 기반의 레이아웃을 생성하기 위한 가장 직관적인 접근법이며 현재 ie를 제외한
모든 브라우저에서 grid 관련 대다수의 기능등을 지원하고 있다.
.container { display:flex, ( 먼저 선언 )
flex-direction : column ( 세로로 정렬 ) -> flex 방향 설정. 다이렉션.
flex-wrap:wrap ( 기본값을 nowrap ) -> wrap으로 설정했을시 화면을 벗어나면 컨텐츠들이 떨어지게끔 nowrap은 안떨어짐.
justify-content: flex-start, center, flex-end -> 요소의 방향을 설정 <-쪽 가운데 ->쪽 space-between, ( 사이에 스페이스 ),
space-around( 시작과 끝 부분도 같이 여백 나눠 갖는다 )
align-items: flex-start, center, flex-end -> 요소의 방향을 수직으로 설정 위 아래 가운데
align-content: space-between,
.item { flex-grow: ( 각각을 얼마만큼의 비율로 보여줄 것이냐 남은 여백만큼을 어떻게 나눌 것이냐를 결정함. ) }
flex:비율을 정하는 것 ( ex) 1:2:1 )
order: 순서 바꾸기! }
각 아이템에 flex을 넣으면 신축성있게 만들어줌! ( 그래서 이름이 flex인가봄. 뭔가 유연한? )
* 그럼 그리드는 뭔데? 1차원 2차원? 그게 끝임? 뭔 소리임 그게?
Grid Garden
A game for learning CSS grid layout
cssgridgarden.com
간단히 grid를 공부할 수 있는 게임 ( feat. 1분코딩 )
그리드는 약간 이런 느낌? 포토샵 웹페이지 시안짜고 그리드 잡을 때랑 느낌이 똑같음. 다만 이제 그런걸 css로 조정해줄 수 있다의 차이.
* CSS 그리드에 대한 설명 - 왜 쓰는가?
레이아웃을 짤 때 구조를 맞춰주기 위해 div를 쓰게 되는데 이러면 header - nav - section이 아니라
header - div ( nav - section ) 이런 식으로 된다. 그리고 이렇게 div로 감싸서 일반적인 마크업을 하게 되면
추후에 레이아웃을 위 그림처럼 변경하게 될 시 nav가 맨 앞으로 오게 되고 그러면서 레이아웃이 엄청 꼬이며
유지보수가 엄청 불편해진다. 그렇기 때문에 등장한 것이 display flex , 그리고 css 그리드 방식이다.
그리드 방식은 위 그림처럼 마치 레고처럼 저렇게 하나 하나 구역을 나눠놓고 css 로 각 부분을 정렬할 수 있는 방식이다.
이점은 레이아웃 정리가 매우 깔끔해진다는 것. 추가 html 수정 없이 css 하나만으로 자유자재로 유지 보수 또는 추가 수정까지 가능하다.
+로 레이아웃을 잡아주는 용도로 div를 추가할 필요가 없어져서 시멘틱 태그를 조금 더 효율적으로 쓸 수 있어서 웹접근성 또한 올라간다.
( grid, flex 개념을 알아야하고 현업에서 자주 활용해야 하는 이유 )
CSS grid 같은 경우 1차원이 아닌 2차원의 레이아웃을 잡는게 가능해졌다.
*column = 열
#garden { display:grid;,
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%; }
#water { grid-column-start:3; }
컨테이너에 grid 선언. ( 그리드 쓰겠다. )
그리고 그리드 템플릿 로우스 -> 100px짜리 2개의 행을 만들겠다.
그리드 템플릿 콜럼스 -> 100px짜리 3개의 열을 만들겠다.
fr = 프렉션 = 비율 ( 단위 )
grid-template-columns: 1fr 1fr 1fr 1fr = 1 : 1 : 1 : 1 비율로 4개의 열로 배치하겠다.
grid-template-columns:repeat(4, 1fr); = 1 : 1 : 1 : 1 비율로 4개의 열로 배치하겠다.
파이어폭스 기준 개발자도구에서 그리드를 누르면 저렇게 번호들이 나옴 ( 선택할 수 있는 번호, 약간 엑셀같은 느낌 )
.item:nth-child(1) { grid-column: 1 / 4; } -> 1번 박스를 4번까지 확장하겠다.
* 암시적 / 명시적 개념.
해당 그림에서 grid-auto-rows: 100px 을 넣어주는 이유 = 일단 1,2,3번 박스는 명시적 개념이다.
왜냐면 .item:nth-child(3) { grid-column: span 2; } 를 넣어줬기 때문에 3번 박스가 2번만큼 공간을 차지했다.
그러면 위 태그대로라면 1번과 2번과 3번이 명시되어 있는 상태인데 그렇게 되면 나머지 4번과 5번과 6번이
아무 명시도 되어있지 않은, 일종의 암시적 상태가 된다.
그래서 그리드 오토 로우스란 암시적 상태인 요소들을 선택하는거고 거기에다가 100px을 넣어줌으로써
암시적인 요소들도 레이아웃이 깨지지 않고 핸들링이 가능해진다.
( 꽤 어려움 계속 써봐야할듯 )
* 문제점.
Q. 그리드 콜럼 스타트가 5임. 그러니까 5개의 열부터 시작했기 때문에 물이 5개에 있고, 그럼 5부터 시작한다는거고
끝나는걸 2로 설정하니까 답이던데 왜 이게 이렇게 되는거지? 이 부분이 이해가 안감.