거북이개발자

1. 시맨틱 마크업이란? - HTML5의 가장 큰 특징 중 하나인 시맨틱 태그이다. - 시맨틱은 "의미론적인"이란 뜻을 가진 단어이다. - 간단한 예로 는 non-semantic이다. -, , 은 semantic 태그이다. 2. 시맨틱 마크업 장점 - 접근성이 좋아짐 - SEO에 유리해진다. - 코드 가독성이 좋아진다. - 코드와 데이터의 재상 용성이 높아진다. 3. 자주 사용하는 시맨틱 마크업 - : 페이지에서 머리말 - : 내비게이션 역할을 하는 태그로 보통 에 사용이 많이 된다. - : 주로 콘텐츠 영역을 나타낸다. - : 실질적인 내용이 들어가야 하는 영역으로 사용한다. - : 배너, 사이드바와 같은 영역에 주로 사용된다. - : 외부 문서를 삽입할대 사용된다. - : 주로 안에서 사이트의 제작자..

1. 순서 - : HTML 파싱이 중단되고 즉시 스크립트가 로드되며 로드된 스크립트가 실행되고 파싱이 재개된다. - : HTML 파싱과 병력적으로 로드가 되는데, 스크립트를 실행할 때는 파싱이 중단된다. 구글 애널리틱스와 같이 다른 스크립트가 의존하지 않는 독자적인 스크립트를 로드할 때 적합하다. - : HTML 파싱과 병력적으로 로드가 되는데, 파싱이 끝나고 스크립트를 로드한다. 보통 태그 직전에 를 삽입하는 것과 동작은 같지만 브라우저 호환성에서 다를 수 있으므로 그냥 태그 직전에 삽입하는 것이 좋다.

1. Local Storage setItem("key", "value") getItem("key") removeItem("key") clear() - 단순하고 사용하기 쉬운 key, value 저장소이다. - 기능이 key, value로 한정적이며 string 타입만 지원한다. - 지원 용량이 5mb ~ 10mb 정도이다. - 데이터를 만료기간 없이 계속 저장할 수 있다. 2. Session Storage setItem("key", "value") getItem("key") removeItem("key") clear() - api 사용방법은 local storage와 비슷한다. - 브라우저를 종료하거나, 새 탭을 열면 Session storage는 초기화된다. - 새로고침 시에는 데이터가 유지된다. - ..

1. 과거 웹 페이지 - 과거 웹 페이지는 넷스케이프 내비게이터용과 인터넷 익스플로러용의 두 가지 버전으로 만들어졌다. - W3C가 웹 표준을 만들면서 브라우저가 웹 사이트를 제대로 표현할 수 없게 되자 렌더링을 할 때 표준 모드와 호환 모드로 렌더링을 할 수 있게 옵션을 제공한다. 2. 표준 모드(Standards mode) VS 호환 모드(Quirks mode) - 브라우저는 HTML 문서가 DOCTYPE을 가지고 있지 않으면 호환 모드로 렌더링을 하고, 가지고 있다면 주어진 DOCTYPE에 맞게 표준 모드로 렌더링을 한다. - 호환 모드로 렌더링을 하게 되면 오래된 웹페이지들을 최신 버전의 브라우저에서도 깨지지 않게 하기 때문에 각 브라우저마다 다르게 보일 수 있다. -결론적으로 일반적인 경우 DO..

1. DOCTYPE - DOCTYPE 선언은 HTML 문서에서 태그를 정의하기 전에 먼저 선언되어야만 한다. - 이러한 DOCTYPE 선언은 HTML 태그는 아니지만, 선언된 페이지의 HTML버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문으로, 대소문자를 구분하지 않습니다. - HTML 4.01에서 DOCTYPE 선언은 SGML을 기반으로 하기 때문에 DTD를 참조해야 한다. - DTD는 브라우저가 콘텐츠를 정확하게 표현하도록 마크업 언어에 대한 규칙을 명시한다. - HTML5는 SGML을 기반으로 하지 않기 때문에 DTD를 참조할 필요가 없다. 2. DTD (Document Type Definition) - DTD란 문서 형식을 정의해놓은 것으로 DOCTYPE을 명시할 때 사용한다. 즉, ..

1. WebPageTest (1) WebPageTest란? : 웹 페이지의 성능을 진단하는 방법을 알려주는 페이지이다. (2) 모바일 사이트 성능 측정하기 : - [Test Location] 드롭박스 메뉴에서 선택 가능하다. - 네트워크 환경 : 설정 가능하다. (3) 모바일 사이트 성능 측정하기 : - First Byte Time : First Byte Time은 HTTP 요청을 했을 때 처음 byte가 브라우저에 도달하여 프로세싱이 시작되는 시간을 뜻합니다. 구체적으로 브라우저의 요청 준비 시간, 서버 처리시간, 네트워크 혼잡에 따른 지연시간을 포함한다. First Byte Time이 느린 경우 대부분 서버의 처리 시간이 오래 걸렸다고 의심해 봐야 한다. 일반적으로 500ms 이하의 속도가 나오도록 ..

1. HTTP의 발전 (1) : - HTTP/0.9 : 웹 콘텐츠를 요청하는 GET 메소드만 존재하고 HTML만 읽을 수 있고, 클라이언트의 정보를 서버에 전달할 방법은 없었다. - HTTP/1.0 : HTTP 페이로드 외에도 헤더를 통해 클라이언트와 서버의 정보를 전달할 수 있다. 또한 이미지나 동영상 등 다양한 정보를 주고받을 수 있게 되었다. POST 메소드를 추가하여 클라이언트의 정보를 웹 서버로 전달하는 방법도 지원하기 시작했다. Content-Encoding 헤더를 통해 클라이언트 - 서버 간 지원하는 압축 알고리즘 정보를 서로 공유함으로써 압축을 지원한다. (2) HTTP/1.1 : - HTTP의 첫 번째 공식 표준 버전이다. GET, POST 외에 PUT, DELETE를 이용해 파일 업로드..

1. 웹 브라우저 현황 (1) 웹 브라우저 현황 : 2. 웹 브라우저 동작 이해하기 (1) 브라우저 동작 원리 : - 웹 사이트 주소를 입력함으로써 브라우저의 동작이 시작된다. - 브라우저는 가장 먼저 도메인 서버와 통신하여 접속하려는 호스트의 IP를 찾는다. - 그리고 해당 아이피를 가진 서버와 통신을 시도해 TCP 연결을 맺는다. - HTTPS는 암호화된 연결을 생성하려는 협의 단계가 더 추가된다. - 브라우저는 서버로부터 필요한 리소스들을 다운로드해 이를 화면에 표현한다. - 브라우저가 리소스를 다운로드할 때는 랜딩페이지의 HTML을 서버에 요청해 다운로드한다. - 그리고 HTML의 구문을 분석(parsing)하면서 참조된 하위 리소스들을 차례로 다운한다. (2) 브라우저 아키텍처 : 브라우저는 크..