✨ 해당 답변은 취준생의 입장에서
검색하고 찾은 답변이니 혹시라도
답이 잘못되어 있는 경우 말씀해 주시면
수정하겠습니다 ✨
WEB
◼ 웹표준이란
- 웹에서 표준적으로 사용되는 기술이나 규칙을 일컫음
- 모든 브라우저 혹은 운영체제에서 웹페이지가 동일하게 보이고 정상적으로 작동됨.
장점
1. 개발의 효율성이 높아짐 - 소스의 동일화, 수정 및 운영관리 용이
2. 접근성이 향상됨.
3. 논리적인 코드로 코드양이 줄어들어서 서버에 부담이 감소됨.
◼ 웹접근성
- 모든 사용자가 어느 조건에 상관없이 웹에 접근하여 이용할 수 있도록 보장
◼ 크로스브라우징이란
◼ 시맨틱태그
- Semantic = 의미론적
- 개발자와 브라우저에 의미있는 태그 사용
장점
1. 검색엔진이 HTML을 분석할 때 정확하게 컨텐츠를 식별할 수 있음.
2. 접근성의 측면에서, 의미를 더 잘 파악할 수 있음
3. div , span의 요소보다 가독성이 높다.
◼ CDN
- Content Delivery Network
- 지리적으로 제약없이 전세계가 빠르고 안전하게 콘텐츠를 전송할 수 있음
- 단점: 서버가 터지면 홈페이지 장애로 이어짐
HTML
◼ DOCTYPE이란
- Document Type Declaration
- 문서의 유형을 정의하기 위해 사용되는 문서
<!DOCTYPE html>웹 브라우저가 처리할 문서가 HTML이라는 뜻- DOCTYPE은 선택사항이지만 필수다?
없으면 하위호환성에 문제가 생김. 각각의 브라우저의 기준대로 렌더링이 됨. - 각각의 브라우저의 기준대로 렌더링이됨 → 비표준모드(Quirks Mode), 크로스 브라우징이 어려움.
◼ <a> , <button> , <input>
<a>페이지 링크 걸 때 문서간의 URL 연결<button>사용자 인터페이스만을 조작하기 위해 사용<input>사용자 입력을 서버로 전송하기 위한 버튼- 버튼은 다양한 스타일이 가능
◼ <del>, <ins>
<del>취소선<ins>밑줄
◼ <section> 과 <article>의 차이
<section>은 논리적으로 관계있는 문서 혹은 요소를 뜻한다.<article>은 독립적인 콘텐츠
◼ 웹 브라우저, 운영체제 이용률
- 기간참고!
https://www.koreahtml5.kr/front/stats/browser/browserUseStats.do
- statcounter.com보다 훨씬 직관적이라 앞으로 종종 이용할 듯 싶다!
CSS
◼ property 선언순서
- 레이아웃
- Box
- 배경
- 폰트
- 기타
◼ Float Clear방법
- 부모요소에
height부여
단점: 자식요소의height변경 시 부모도 변경해야 함. - 부모에
overflow: hidden부여
단점: 컨텐츠가 커지면 가려짐 - 가상요소에
clear: both사용
◼ <figure>
- 독립적인 요소에 활용
- 예시: 이미지, 도표, 삽화 등
◼ 전처리기
- CSS를 새로운 문법을 통해 작성할 수 있음
- CSS 모듈화에 용이함.
◼ 가상요소, 가상클래스
- 가상요소는 존재하지 않는 요소의 뜻. 가상 클래스와 구분을 위한 이중콜론(::)을 사용.
- 이중콜론의 경우 ie9부터 지원
- 가상클래스는 실제 존재요소에 가상 클래스를 주어 CSS를 제어
:hover,:active등
◼ CSS 스프라이트
- 이미지 최적화 기법 중 하나 (여러 이미지를 한 이미지로 합침)
장점
1. 한번에 로드 되어 이미지 깜빡임 현상이 없다. (서버에 이미지 요청 횟수가 한번)
2. 컴포넌트화 기능
단점
1. background-position을 활용하여 직접 위치를 찾아야 하는 번거로움
◼ 마진겹침 현상
- 마진겹침 현상이란
block엘리먼트의 한해서 발생하는 현상으로 좌우 방향으로는 적용되지 않고 수직방향으로 적용됨 . 2개의 마진 중 더 큰 마진으로 덮어 씌우는 방식임 - 만약에 하나의 마진이 음수인 경우 두 마진을 더하는 방식을 취한다
position: absolute,float: left,display: flex등 다양한 상황에서 마진겹침이 발생하지 않음.
◼ 체크박스 커스텀
input은 스크린리더에는 읽히지만 화면에는 보이지 않도록 CSS로 스타일 처리 후,label에 스타일링 처리.
JS / JQuery
◼ script, script async, script defer
script
<header>태그에 있을 때- 순서: HTML 파싱 - HTML 파싱중단, script 다운 및 실행 - HTML 파싱
script async
- 순서: HTML 파싱, script 다운 - HTML 파싱중단, script 실행 - HTML 파싱
script defer
- 순서: HTML 파싱, script 다운 - HTML 파싱완료 후 script 실행
script를<body>태그 직전에 삽입하는거와 동작은 같지만 브라우저 호환성의 문제로 현재는<body>태그 직전에 삽입하는 것을 권장.
◼ API란
- 서버와 데이터베이스에 대한 출입구 역할
◼ DOM이란
- Document Object Model
- HTML, XML 문서의 프로그래밍 interface이디.
- DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
- DOM은 구조화된 nodes, property, method를 갖고 있는 object로 문서를 표현한다.
◼ REST
- Representational State Transfer
- 백엔드, 클라이언트의 커뮤니케이션 방식
구성요소
1. URL
2. HTTP Method (GET, POST, DELETE, PUT)
3. JSON
◼ AJAX란
- 동적인 웹사이트를 만들기 위한 개발 기법 / 일부분만 갱신가능
- 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능
◼ 이벤트위임
- 이벤트 위임이란 하위 엘리먼트들이 여러개 있을 때, 이벤트를 각각 달지 않고 상위 엘리먼트에 이벤트 핸들러를 달아 하위 엘리먼트를 제어하는 방식이다
장점
1. 동적으로 엘리먼트를 추가할 때 마다 핸들러를 고려할 필요 없음
2. 상위 엘리먼트에 하나의 이벤트 핸들러만 추가하면 되어서 코드가 깔끔해짐
3. 메모리에 있게 되는 핸들러가 적어지기 때문에 퍼포먼스 측면에서 이점이 있다.
◼ 제이쿼리 attr() , prop()의 차이
- attr()의 경우 속성 그 자체의 값으로 속성이 없는 경우
undefined - prop()의 경우 속성의 값을
true혹은false로 나타냄. 실제적인 상태, 활성화, 체크여부, 선택여부등을 알 때 좋음
예시
<input type="checkbox"/>
console.log($('input').attr('checked'))
// undefined
console.log($('input').prop('checked'))
// false - 체크박스의 경우 체크가 되어 있지 않은게 default 값인데 속성에 적혀있지 않아 attr() 사용 시
undefined를 갖게됨 → 이럴때는 prop()이 나음.
◼ 제이쿼리
- 형제 :
siblings() - 부모 :
parent() - 자식 :
children() - 좌표 :
offset()
Frontend Developer