🔸 HTML
meta태그로 검색 키워드를 어떻게 지정하는가?:
<meta name="keywords" content="키워드1, 키워드2, 키워드3, ...">
: 속성 값 설정하면 SEO에 유리
meta태그로 확대/축소 기능을 어떻게 설정하는가?:
<meta name="viewport" content="user-scalable=값">
: 값을yes로 설정하면 확대/축소 가능,no로 설정하면 확대/축소 불가
: 기본 값은yes
iframe태그 사용시 주의점은 무엇인가?: XHTML의 strict 모드에서는 사용할 수 없음
thead,tfoot요소를 사용하면 어떤 이점이 있는가?: 여러 페이지를 인쇄하는 경우 페이지마다
table의thead,tfoot정보 인쇄 가능
:thead다음에 바로tfoot요소를 마크업 할 수 있는데, 이 경우 스크린 리더 사용자가table의 종합 정보를 빠르게 파악할 수 있음
input의label을 헤딩 태그로 처리하면 어떤 이슈가 발생하는가?: 접근성 측면에서
input과label이 1:1 관계가 유지되지 않으면 어떤input인지 사용자가 알기 어려움
placeholder로label을 대체하면 어떤 이슈가 발생하는가?:
placeholder와label은 각각 입력 값에 대한 힌트, 입력 서식의 제목으로 기능 자체가 다르기 때문에 접근성 면에서 좋지 않음
- 헤딩 태그를 사용할 때 유의할 점은 무엇인가?
: 디자인적으로 헤드라인(폰트 크기가 크고 굵은 느낌)에 가깝다고 헤딩 태그를 사용하면 안 됨
: 헤딩 태그는 해당 섹션에서 핵심적인 정보를 요약하는 역할
- HTML의 전역 속성에는 무엇이 있는가?
: 전역 속성이란 모든 태그에 사용될 수 있는 속성
:class,id,title,aria로 시작하는 일부 속성,style,lang등
- HTML 전역 속성 중
title은 어떤 역할을 하는가?: 보편적으로 태그에 툴팁을 추가하여 대체 설명, 추가 설명을 담당
:label을 대체하여title속성을 사용할 수는 있지만, WAI-ARIA 지침에 의하면title의 우선 순위가 낮기 때문에 접근성 면에서는aria-label속성으로 정보를 제공하는 것이 바람직함
input의name속성은 왜 사용하는가?:
form을 제출한 후 서버에서 데이터를 참조하기 위해 사용
: 서버로 정보를 전달하기 위한 그릇의 역할
:id와 동일하게 지정할 필요는 없음
time태그는 무엇이고 어떻게 사용하는가?: 일반 텍스트로 보이는 날짜, 시간 정보가 진짜 날짜, 시간을 의미한다고 HTML에게 알려주는 역할
: 필수 속성인datetime과 함께 사용하여<time datetime="YYYY-MM-DDThh:mm:ssTZD>와 같이 시간을 나타낼 수 있음
aria-label과aria-labelledby의 차이는 무엇이고 각각 어떻게 사용하는가?
🔸 CSS
legend태그의 스타일링시 유의점은 무엇인가?: 크로스 브라우징이 어렵기 때문에 아예 숨김 처리하거나, 스타일링을 한다면 디자인의 차이를 감안해야 함
- 스타일링시
id의 사용을 지양해야 하는 이유는 무엇인가?: 우선 순위에 이슈가 발생할 수 있기 때문, 웬만하면
class로 처리
width값을 100%로 설정하면 어떤 상황에서 이점이 있는가?: 부모 콘텐츠가 커지거나 작아지는 등 수정 상황에서도 유연하게 대처할 수 있음
: 특히 반응형 레이아웃에서 이슈 상황의 해결 쉬움
border-bottom을 보이지 않게 설정하는 방법에는 무엇이 있는가?:
border-bottom의 값을 0으로 설정
:border-bottom-color의 값을 흰색으로 설정
- 영역을 넘치는 텍스트 콘텐츠를 제한하는 방법에는 무엇이 있는가?
:
white-space속성의 값을nowrap으로 설정하여 줄 바꿈이 일어나지 않도록 함
:overflow속성의 값을hidden,scroll등으로 지정
:text-overflow를ellipsis로 지정
: 넘치는 텍스트를 말줄임표로 표현하고 싶을 때 일련의 3가지 속성을 묶어서 많이 사용
- 색상 속성 값으로
currentColor는 어떻게 사용하는가?: 기본적으로 부모의
color값을 상속하고 싶을 때 사용
: 글자color값을border-color가 상속하도록 사용할 수도 있음
rgba대신hsla를 사용하면 좋은 점은 무엇인가?: 앞의 색상을 고정해놓고 뒤의
hue,lightness값만 조절하면 되기 때문에 변수화시키기도 쉽고, 직관적임
flex의gap사용시 유의점은 무엇인가?: IE11에서는 지원하지 않기 때문에 사용 전에 서비스 대상 브라우저를 먼저 고려해야 함
flex는 무엇이고, 어떻게 사용하는가?
🔸 Git
- GitHub로 간단하게 배포 테스트를 해볼 수 있는 방법은 무엇인가?
: 테스트를 원하는 repository > setting > pages > main 브랜치로 선택 후 save > url을 repository setting에 붙여넣고 파일 경로와 파일명을 지정
🔸 Distribution
- 배포시 고려해야 하는 최우선 사항은 무엇인가?
: 크로스 브라우징 이슈의 발생 여부
- 모바일 배포시
border-radius의 값이 설정했던 것과 다르게 보인다면, 그 이유는 무엇인가?: UI가 제공하는 agent의 기본 스타일 때문일 가능성이 큼,
appearance속성을 통해 제어 가능
: 예를 들어input의type속성 값을text로 지정하면border-radius를 기본으로 가지지 않지만,search로 지정하면 기본으로 가지는border-radius값이 있음
: 이는 webkit에서만 발생하는 문제이므로-webkit-appearance속성을none으로 지정해주면 해결
