* px em과 rem의 차이는 무엇인가?
-> 절대적인 유닛엔 px,
상대적인 유닛엔 퍼센트과 뷰포트와 관련된 em과 rem을 사용한다.
부모 요소에 사이즈에 따라 사이즈가 변경이 되어야한다?
%나 em
부모와는 상관없이 브라우저 사이즈에 대해서 반응해야 된다면
v*(뷰포트)나 rem등을 사용하면 된다 ( ex 반응형 )
em과 rem의 차이는?
em과 rem은 어떤게 더 낫다는 개념은 없고 디자인에 따라서, 정확하게 원하는 기능이 무엇인지에 따라서
em을 써야될 때가 있고 rem을 써야될 때가 있다.
좋아요 라는 버튼의 컴포넌트를 만든다고 하면
rem -> relative to root element ( 루트요소에 의해 크기가 결정된다는 뜻 )
em, rem -> 상대단위 = 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위
px -> 절대단위 = 어떤 상황에서든 항상 고정된 길이를 나타내는 단위를 말한다. ( px , pt )
em , rem 공통점 -> 둘 다 css의 font-size 속성 값에 비례해서 결정되는 상대 단위이다.
em의 경우, 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준이 된다.
html에서의 최상위 요소는 <html>이다. 따라서 rem의 경우 ( rem의 r은 root, 즉 최상위를 뜻한다 )
html 요소의 font-size 속성 값이 기준이 된다.
* 둘 중 어떤걸 씀?
-> css가이드들은 em을 사용할 타당한 이유가 없는 경우라면 가급적 rem을 우선적으로 쓰도록 권장하고 있다.
( 특히 초보자들에게는 더더욱! )
왜냐하면, em의 경우 위에서 보았듯이 실제로 몇 px로 변환될지에 영향을 주는 변수가 많아지기 때문에
( 해당 컨테이너로 감싸고 있는 div에 폰트 사이즈가 이미 적용이 되어있다면 그 폰트 크기에 따라 값이 바뀌기 때문 )
em을 사용해서 스타일된 요소의 경우 재사용이 어렵고 유지보수가 힘들어지기 때문에.
em vs rem에선 특별한 상황이 아니고선 rem 사용을 조금 더 추천한다고 한다.
* 블록 요소와 인라인 요소별로 컨텐츠 요소를 가운데에 오게 하는 방법을 서술하라.
-> 부모요소 ( 인라인구조 ) 는 text-align: center; 그리고 line-height : ( height값과 동일하게 )
요소( 블록구조 ) : margin: 0 auto; line-height: ( height값과 동일하게 )
* 절대 요소를 사용하여 가운데에 올 수 있게 하는 방법을 서술하라.
먼저, 자식요소의 가로값과 세로값을 모르고 유동적인 경우에 절대 요소를 사용하여 가운데에 오게 하는 정렬 방법이다.
-> 부모 요소 : position:relative; ( 기준점 )
자식요소 : position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
* display flex를 이용하여 컨텐츠 요소를 가운데에 오게 하는 방법을 서술하라.
-> 부모요소 : height값 설정
- 자식요소 : display:flex; justify-content: center; align-items:center;
* jpg, gif, png의 차이점에 대해 서술하라.
-> jpg : 이미지 손실 압축 방식, 24비트 ( 트루컬러 ) 지원. 투명도는 미지원.
-> gif : 이미지 비손실 압축방식, 256 칼라 방식, 투명도 지원, 이미지 컬러가 적게 들어가는 곳에 사용 gif 애니메이션 가능
-> Png-8 : 이미지 비손실 압축 방식, 256 칼라 방식이며 투명도를 지원.
-> Png-24 : 이미지 비손실 압축 방식, 24비트 ( 트루컬러 ) 지원, 최상의 이미지를 구현할 때 사용.
* 웹 표준 준수를 위한 skip menu에 대해 설명하라. 그리고 이를 구현할 수 있는 간단한 태그를 서술하라.
-> 웹 표준 준수를 위한 메뉴 건너띄기 기능입니다. 보통 숨겨놓았다가 " 탭 " 을 누르면 보일 수 있도록 CSS를 설정하는 기능입니다.
#skip { position: relative; z-index:9999; } - 기준점을 먼저 잡아주고 z-index를 올려줌으로써 밑에 파묻히지 않게.
#skip a { position: absolute; left:0; top:-50px; }
#skip a:focus, #skip a:active { top:0; } - 평소엔 숨겨져있다가 a가 포커스가 되거나 활성화가 되었을 때 나올 수 있게.
html로 표현하면 이와 같다.
웹 접근성 / 웹 표준을 위한 스킵메뉴 *
** 이런 식으로 탭을 누르면 간단히 스킵 메뉴가 나온다.
- 그래서 이거 왜 만든거임? -> 모든 사용자가 웹을 이용할 수 있게끔 해야하기 때문임. ( 키보드만으로도 조작이 가능하고 모-든 버튼 클릭이 가능해야함 )
* 이미지를 html 태그와 Css를 통해 구현하는 방법의 차이에 대해서 서술하라.
-> 의미가 있는 중요한 이미지 ( 이미지가 없으면 내용을 알 수 없는 경우 ) 는 HTML을 통해 이미지를 구현하고 alt(대체텍스트)를 설정.
-> 의미가 없는 단순한 이미지 ( 이미지가 없어도 내용이랑 상관 없는 경우 ) 는 CSS를 통해 이미지를 구현함.
css 같은 경우 이미지 스프라이트 기법으로 이미지를 구현할 수도 있다.
* IR 기법에 대해서 설명하라. 그리고 그걸 쓰는 이유는?
-> css로 이미지를 올리게 되면 여러모로 좋지만 아무래도 대체 텍스트가 빠지기 때문에 웹 표준을 지키기 힘들어진다.
그래서 가상으로 대체 문자를 만들어주기 위해 IR 기법을 사용하는 것이다.
IR 기법 ( Image Replacement ) 이란.
대체 텍스트를 주기 위한 CSS기법을 말한다. 아래와 같이 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를
제공해 줄 수 있다.
1. 의미있는 이미지의 대체 텍스트를 제공하는 경우
( 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면
바깥으로 빼내어 보이지 않게 하는 방법임. )
.ir_pm { display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px; }
2. 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때
( 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span 태그로 감싼 후
z-index:-1을 이용하여 화면에 보이지 않게 처리 )
.ir_wa { display:block; overflow:hidden; position:relative; z-index:-1;
width:100%; height:100%; }
3. 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때
.ir_so { overflow:hidden; position:absolute; width:0; height:0; line-height:0;
text-indent:-999px; }
이는 alt값으로 하기에 너무 길 때에도 사용하기도 함.
* 이 중 가장 효과적인 것은?
어쨋든 이 대체텍스트라는건 스크린 리더기가 읽어줘야하는 것에 의의가 있다고 볼 수 있다.
스크린 리더가 잘 읽을 수 있고 레이아웃이 깨지지 않는 선에서 가장 효율적인 IR 기법은 무엇일까?
( 가장 많이 쓰이는건? )
.ir{ position:absolute; ( 레이아웃에 영향을 끼치지 않도록 )
width:1px; height:1px; ( 위드와 헤이트 값을 0이 아닌 1로 두어서 스크린 리더가 읽을 수 있도록 )
overflow:hideen ( 눈에 보이는 부분을 제거 )
clip:rect(0px 0px 0px 0px); ( 네게의 좌표로 지정한 직사각형 모양대로 요소를 잘라내는 속성이며 포토샵의 mask 효과와 같다.
position 속성 값이 absolute 혹은 fixed인 요소여야 하고, 만약 overflow의 속성 값이 visible인 경우에는 적용이 되지 않는다. )
margin:-1px; padding:0; border:0; white-space:nowrap; }
( white-space:nowrap = 공백을 여러개 넣어도 1개만 표시 글이 길어지면 자동으로 텍스트가 줄바꿈됨. 센스리더기가 자연스럽게 읽어주기 위해서 이 태그를 넣는 것으로 보임 )
* 웹 접근성의 항목에는 무엇이 있는가?
-> 1. img에 alt태그를 사용하는 것. = 대체텍스트
2. a 태그에 title을 사용하는 것.
3. nav, h1, h2, header, section과 같은 의미있는 태그를 사용하는 것 ( 시멘틱 )
4. 메뉴에 ul > li > ul > li 와 같은 구조로 구성하는 것
5. skip 메뉴를 삽입하는 것
등등이 있다.