웹 퍼블리셔 면접시 많이 물어보는 질문은?

개념적인 요소들은 검색해 보면 나오니까 생략할께요^^ 반응형 디자인 3요소만 확인하면 그리드 레이아웃, 가변형 이미지, 미디어쿼리입니다. 스프라이트 이미지 기법은 여기를 참고해주세요 http://darum.daum.net/convention/image 기술적인 질문

1. display:inline 과 display:block의 차이점이 무엇인가요?

display:inline은 텍스트 요소를 말하여 display:block은 박스 영역을 의미합니다.
참고 : http://coderap.tistory.com/303

2. dl,dd가 무엇인가요?

ul, li 는 목록형 태그를 의미하며,
dl은 설명형 목록 태그를 의미합니다.
dd은 설명형 목록 태그의 목록 요소를 의미합니다.
참고 : http://coderap.tistory.com/1

3. strong과 em의 차이점은 무엇인가요?

strong 태그는 콘텐츠가 중요한 의미를 갖거나 단어를 강하게 강조하고 싶을 때 사용합니다.
em 태그는 글씨를 강조하고 싶을 때 사용합니다.
참고 : http://coderap.tistory.com/99

4. float:left를 썼을 경우 영역사라짐(height:0)을 방지하는 방법?

float:left를 쓰게 되면 레이아웃이 깨지는 현상이 발생합니다. 즉 하이트 값이 없어지는거죠~ 다른 말로 한다면 영역이 사라지는 현상입니다. 이 현상을 막기위해서는 여러가지 방법이 있는데 현재는 clearfix 방법을 추천합니다.

- 깨지는 영역에 똑같이 float을 사용하면 깨짐 현상을 막을 수 있지만 모든 박스 영역에 float이 들어가는 문제점이 있어 잘 사용하지 않습니다.
- 깨지는 영역에 clear:both를 사용하여 영역깨짐 현상을 막을 수 있지만 레이아웃이 복잡한 곳에서는 어디가 깨지는지 알 수 없어 잘 사용하지 않습니다.
- 부모요소에 display:inline-block을 사용하면 되지만 성질을 바꾸어야 하기 때문에 제약이 있어 잘 사용하지 않습니다.
- 부모요소에 overflow: hidden을 사용합니다. 제일 편하게 흔히 사용하는 방법이지만 내가 지정한 영역 외에는 보이지 않기 때문에 못쓰는 경우도 있어 완벽하지는 않습니다.
- float을 사용한 부모 태그한테 clearfix라는 css를 만들어 사용합니다. 현재는 제일 많이 사용하는 방법이며 아직까진 문제점을 가지고 있지 않지만 css를 만들어줘야 하는 번거로움이 있습니다.

/* clearfix */
.clearfix {*zoom:1;}
.clearfix:before, .clearfix:after {display: block; content: ''; line-height: 0;}
.clearfix:after {clear: both;}

5. 컨텐츠 요소를 가운데 오게 하는 방법?

반응형을 작업할 때 어떤 요소를 가운데 오게 하는 방법은 상당히 중요하고 방법도 여러가지가 있습니다.

가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다.
- 부모요소(인라인구조) : text-align : center; line-height: (height값과 동일하게)
- 요소(블록구조) : margin:0 auto; line-height: (height값과 동일하게)

요소의 성질을 table로 변환시켜서 가운데 정렬을 하는 방법이지만 table자체를 레이아웃에 많이 사용하지 않기 때문에 잘 쓰지 않는 방법입니다.
- 부모요소 : display:table;
- 자식요소 : display:table-cell, text-align:center; vertical-align:middle;

절대 요소를 이용한 가운데 정렬방법이며, 제일 흔하게 쓰이지만 단점은 영역이 없어지는 것이 단점이어서 반응형을 할 때 사용하기 불편한 점이 있습니다.
- 부모요소 : position:relative;
- 자식요소 : position:absolute; top:50%; left: 50%; margin-top:-(자식 요소 높이값의 반); margin-left:-(자식 요소 가로값의 반);

만약 자식요소의 가로값과 세로 값을 모르고 유동적인 경우에 절대 요소를 사용하여 가운데로 오는 정렬방법입니다.
- 부모요소 : position:relative;
- 자식요소 : position:absolute; top:50%; left: 50%; transform:translate(-50%, -50%);

절대 요소를 이용한 가운데 정렬 방법이지만 흔하게 쓰이지는 않습니다.
- 부모요소 : position:relative;
- 자식요소 : position:absolute; top:0; left:0; top:0; right:0; margin: auto;

CSS3를 이용한 방법이지만 최신 브라우저 이외에서는 작동하지 않는 단점이 있지만 표준화 된다면 앞으로 많이 쓰일 방법입니다.
- 부모요소 : height 값 설정
- 자식요소 : display: flex; justify-content: center; align-items: center;

6. ::after와 ::before는 언제 사용하는가?

요소에 가상으로 요소를 줄 때 사용합니다. 즉 마크업의 수정없이 또 다른 요소를 줄 때 많이 사용합니다.

7. jpg, gif, png의 차이점이 무엇인가요?

- jpg : 이미지 손실 압축 방식, 24비트(트루컬러) 지원, 투명도 미지원
- gif : 이미지 비손실 압축 방식, 256 칼라 방식, 투명도 지원(0%,100%만지원), 이미지 컬러가 적게 들어가는 곳에 사용, gif 애니메이션 가능
- Png-8 : 이미지 비손실 압축 방식, 256 칼라 방식, 투명도 지원(0%,100%만지원)
- Png-24 : 이미지 비손실 압축 방식, 24비트(트루컬러) 지원(0%~100%지원), 최상의 이지미를 구현 할 때 사용

8. skip menu를 설정하기 위한 방법?

웹 표준 준수를 위한 메뉴 건너 띄기 기능입니다. 보통 숨겨 놓았다가 탭을 누르면 보일 수 있도록 CSS를 설정합니다.
#skip {position: relative; z-index: 9999; }
#skip a {position: absolute; left: 0; top: -50px; }
#skip a:focus, #skip a:active {top: 0; }

9. 이미지를  html태그와 Css를 통해 구현 하는 방법의 차이?

- 의미가 있는 중요한 이미지(이미지가 없으면 내용을 알 수 없는 경우)는 HTML을 통해 이미지를 구현하고 alt를 설정합니다.
- 의미가 없는 단순한 이미지(이미지가 없어도 내용이랑 상관없는 경우)는 CSS를 통해 이미지를 구현합니다.
이미지를 표현하는 방법은 이렇게 두가지 방법이 있었지만
요즘에는 이미지 스프라이트 기법을 통해 중요한 이미지도 CSS를 통해 이미지를 구현합니다. alt태그 효과는 IR효과로 대처합니다.
참고 : http://darum.daum.net/convention/css/css_ir

10. CSS 적용 우선순위?

CSS속성이 여러개가 겹쳤을 경우 !important > inline style > id > class > style (작업한 스타일.css 에서 속성이 겹치는 경우는 속성이 아래이 있을 수록 우선순위가 높습니다.)

11. position:relative은 언제 사용하나요?

- Position: absolute의 기준점이 필요할 때
- z-index를 사용하고 싶은데 포지션이 없으면 relative를 사용하여 z-index값을 인식시킬 수 있습니다.
- 요소의 위치를 유지한채로 left, top, right, bottom의 위치 값을 사용하고 싶을 때

12. 화면상에는 보이지 않으나 스크린 리더에서 읽혀야 하는 요소를 줄 때 하는 방법?

이런걸 ir효과라고 하죠~~ 여러가지 방법들이 있으니 자세한건 링크를 참고하세요
참고 : http://darum.daum.net/convention/css/css_ir

13. 독타입을 사용하는 이유는?

웹 페이지의 문서 유형을 설정하기 위해서 사용합니다. 독타입을 설정하지 않거나 잘못 설정하면 브라우저에 따라 화면이 다르게 나오거나 렌더링이 달라지게 때문에 독타입을 설정해야 합니다.