🔸 HTML
table태그로 마크업했을 때 발생할 수 있는 이슈에는 무엇이 있는가?:
table태그는tr태그를 하위 요소로 가지기 때문에 키보드 포커싱이 위에서 아래 방향으로 고정되어 있음
: 시맨틱한 마크업을 할 수 없고, 웹 접근성을 저하시킨다는 문제점
- 암시적 레이블링과 명시적 레이블링의 차이는 무엇인가?
:
label태그가input태그를 포함하는지 여부의 차이
:label태그가input태그를 포함하고 있으면 암시적 레이블링, 따로 연결시켜줄 필요 없음
:label태그와input태그를 각각 작성하면 명시적 레이블링,label의for속성과input의id속성을 동일하게 연결시켜야 함
- HTML5에 새로 추가된
input태그의type인:
type을text로 설정하면 이메일 주소를 입력했을 때 유효성 검사를 자동으로 해주지 않지만,
input의placeholder를 작성할 때 주의할 점은 무엇인가?:
placeholder는 입력 값에 대한 힌트이기 때문에,label과 동일하게 작성하는 등 불충분한 정보를 전달해서는 안 됨
button태그의type속성 기본 값은 무엇인가?:
submit
: 그러나 기본 값이라고 해서 무작정 생략하는 습관은 바람직하지 못함, 협업의 관점에서 정보를 명시하는 것이 바람직함
- 단순히
a태그를 나열하는 것보다ul의 하위 요소인li로 목록화하여 마크업했을 때의 장점은 무엇인가?: 접근성 측면에서는
li태그로 목록화하면 스크린 리더가 형제 요소가 몇 개나 있는지 알려주기 때문에 바람직함
: 시맨틱 마크업 측면에서는 사용자가 목록임을 인식할 수 있다는 점에서 바람직함
a태그 클릭시 새 창으로 여는 방법은 무엇인가?:
target속성의 값을_blank로 부여
a태그 클릭시 새 창으로 여는 경우에 보안 이슈는 어떻게 해결하는가?:
rel속성의 값으로noopener와noreferrer를 부여
form태그는 무엇이고 어떻게 활용하는가?💡 답변 정리
: https://velog.io/@nalsae/form
dl,dt,dd태그는 무엇이고 어떻게 활용하는가?
🔸 CSS
- CSS를 작성할 때 설계를 먼저 해야 하는 이유
: 바깥쪽 요소부터 순차적으로 설계하는 것이 바람직함, 그래야 구조적인 접근이 쉽기 때문
: 설계 단계에서 항상 그림을 그려서 어떤 속성을 적용하면 좋을지 키워드를 적어놓고 결과를 예측하는 과정을 거치기
- CSS로 스타일링할 수 있는 다양한 방법 중 합리적인 방법의 기준은 무엇인가?
: 수정의 용이성에 초점을 맞춰야 함, 마크업을 해치지 않으면서 최소한의 수정으로 스타일링을 적용할 수 있는 방법이 가장 합리적임
- CSS로 스타일링시 먼저
background의 색을 적용하면 어떤 장점이 있는가?:
box-shadow등 실질적인width,height값을 갖지 않지만 시각적으로는 구현되는 경우에, 이 부분까지 고려하여 스타일링을 적용할 수 있음
- CSS의 선택자 depth를 너무 깊게 설정하면 어떤 이슈가 발생하는가?
: depth를 계속 내려가면서 탐색해야 하기 때문에 성능 저하 이슈가 발생할 수 있으므로 depth를 생략할 수 있다면 생략하는 것이 바람직함
- 마크업을 수정할 수 없는 경우 CSS에서 사용할 수 있는 트릭에는 무엇이 있는가?
: 동일한 영역인 것처럼 보이고 싶을 때
background색상을 통일하는 등의 눈속임을 사용하는 방법이 있음
- 높이 값을 설정할 때
height값을 설정하는 것보다padding값을 부여했을 때의 이점은 무엇인가?: 정렬이 더 쉽고 overflow 이슈를 해결할 수 있음
inline-block을 활용하면 좋은 점은 무엇인가?:
inline요소에 적용하면 더 이상width값이 콘텐츠 크기가 되지 않기 때문에width값을 통일시킬 수 있음
:block요소에 적용하면inline요소처럼 줄 바꿈이 되지 않는 IFC 방식으로 배치하고 싶을 때 적절하게 사용 가능
input태그의display속성 기본 값은 무엇인가?: 기본적으로
inline요소이지만, 특이하게display기본 값은inline-block
: 그러므로width,height값이 정상적으로 적용된다는 특징
button태그의box-sizing속성 기본 값은 무엇인가?: 별도의 설정 없이도
border-box가 기본 값이므로width값은 '콘텐츠 크기 + 좌우padding값 + 좌우border값'
fieldset요소에 스타일링을 지양해야 하는 이유는 무엇인가?: 오류가 자주 발생하기 때문
margin병합 현상을 방지하기 위한 방법에는 무엇이 있는가?: 방지할 방향에
padding값을 1px 적용
: 방지할 방향에border값을 1px 적용하고, 색은transparent로 투명하게 설정
: 만약display를flex로 설정했다면gap사용, 그러나 IE11에서는 지원히지 않기 때문에 사용 전에 확인 필요
letter-spacing은 무엇이고 어떻게 활용하는가?: 자간을 조절할 수 있는 속성
: -1 등의 음수 값도 적용 가능
text-indent란 무엇인가?: 값을 양수로 설정하면 들여쓰기, 음수로 설정하면 내어쓰기 할 수 있는 속성
- 들여쓰기의 관점에서
text-indent속성과padding속성은 어떤 차이가 있는가?:
text-indent는 콘텐츠 텍스트가 여러 줄인 경우 첫 줄만 들여쓰기함
:padding은 콘텐츠 텍스트가 여러 줄이어도 전부 들여쓰기된 것처럼 보임
- 아이콘을 웹 폰트 방식으로 가져올 때 스타일링시 주의할 점은 무엇인가?
: 가상 요소를 생성하면서 아이콘을 가져오는지 주목해야 함
: 만약 생성한 가상 요소에 아이콘을 적용하는 경우, 가상 요소 선택자로 선택하여 스타일링해야 함
inline요소의 스타일링시 발생하는 어센더, 디센더 이슈는 무엇이고 어떻게 해결하는가?
line-height때문에 폰트와 이미지의 높이가 미묘하게 일치하지 않는 이슈를 어떻게 해결하는가?
🔸 Git
commit메시지를 여러 줄로 작성하는 방법은 무엇인가?:
"로 메시지 작성을 완료하기 전까지 엔터를 눌러 줄 바꿈을 할 수 있음, 작성을 완료할 때"로 마무리만 해주면 됨
ex) $ git commit -m "HTML 오타 수정
: input 태그의 속성 오타 수정
: button 태그의 타입 오타 수정"
add하지 않고 바로commit하는 방법은 무엇인가?:
$ git commit -am "파일 경로와 파일명"
: 그러나 이슈가 발생할 수 있으므로 권장하지 않음, 웬만하면 Staging Area 거친 후commit
