'📃 Front-End' 카테고리의 글 목록 (15 Page)

쿠키(Cookies) & 세션 스토리지(SessionStorage) & 로컬 스토리지(LocalStorage)

2022.10.19

쿠키 & 세션 스토리지 & 로컬 스토리지 로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소 입니다. 그리고, HTML5가 나오기 이전에도 브라우저에 저장소 역활을 하는것이 쿠키 입니다. 쿠키(Cookies) 클라이언트(브라우저) 로컬에 저장되는 키와 값(Key/Value) 형태로 이루어져 있는 작은 데이터 파일 입니다. 쿠키의 특징 대부분의 브라우저가 지원을 합니다. 보안에 취약 합니다. 유효 시간동안 보관되기 때문에 유효 시간이 있을 경우 브라우저가 닫혀도 유지가 가능 합니다. 매 HTTP 요청마다 포함되어 서버로 전송되기 때문에 서버에 부담이 큽니다. 용량이 작습니다.(4KB) 쿠키의 동작 순서 HTTP 요청 쿠키를 HTTP 헤더(Set-Cookie)에 담아서 응답 쿠키 저장 / HTTP ..

📃 Front-End/HTML

다국어 페이지를 만들 때 고려해야 할 사항

2022.10.19

1. 다양한 인터넷 속도를 수용할 수 있는 사이트 구축 웹사이트의 정보를 보려면 그 정보가 로드 되어야 합니다. 또한 그래픽이나 텍스트가 많은 페이지가 로드되기를 무작정 기다리게 할 수 없고, 각국의 인터넷 속도는 상당히 다릅니다. 따라서 해외 사용자의 다운로드 시간이 느려질 수 있는 그래픽 및 대용량 파일을 제거, 최적화 또는 수정하여 사이트를 대상 지역의 인터넷 속도와 일치 시켜야 합니다. 2. 각 나라별로 언어를 읽어들이는 시각 방향을 지원 읽는 우선순위가 각 나라별로 다릅니다. 3. 전자 상거래 웹사이트인경우 해당 통화 및 주소 조정 온라인 구매 및 배송이 경우, 웹사이트를 다양한 통화 및 배송지 주소 형식에 맞게 조정 해야 합니다. 4. 각국의 차이를 위해 시간/날짜 표기 12시간제를 사용하는 ..

📃 Front-End/HTML

시맨틱 마크업(Semantic Markup)

2022.10.19

'Semantic' 이란 의미론적인 뜻을 가지며 'Markup' 은 HTML문서 태그로 문서를 작성하는 것을 말합니다. 따라서, 시멘틱 마크업이란 의미가 잘 전달되도록 HTML문서를 작성하는 것을 말합니다. 사용하는 이유 ❓ 검색 엔진 최적화(SEO) : 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리합니다. 웹 접근성 : 시각장애인들도 웹을 편리하게 접할 수있도록 도와줍니다. 유지보수 : 정리된 마크업은 코드 식별에 용이합니다. ✔ 작성방법 시맨틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용해야 합니다. 헤더/푸터에 와 사용 메인 컨텐츠에 과 사용 독립적인 컨텐츠에 사용 최상위 제목으로 사용 순서가 없는 목록으로 과 사용 내비게이션에 사용 이런 식으로 ..

📃 Front-End/HTML

메타태그

2022.10.19

웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용 합니다. keyword는 검색 엔진을 위한 키워드를 정의 합니다. description은 웹 페이지에 대한 설명을 정의 합니다. author는 문서의 저자를 정의 합니다. 5초 뒤에 다른 페이지로 리다이렉트(redirect)시키는 예제 입니다. viewport는 모든 장치에서 웹 사이트가 잘 보이도록 뷰포트를 설정 합니다. 위의 예시를 제외하고 다양한 종류가 있습니다. 결론 HTML 문서의 head 태그 사이에 입력하는 특수 태그로서 사이트의 디자인에는 전혀 영향을 미치지 않고 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 무엇을 만들었는지 등의 문서 자체의 특성을 담고 있습니다. 참고 HTML 태그 - 코딩의 시작, TCP S..

📃 Front-End/HTML

웹 접근성 & 웹 표준 & 웹 호환성

2022.10.19

✔ 웹 접근성 모든 사람들에게 평등한 웹 이용을 위해 만들어졌습니다. 웹 접근성이 필요한 이유 보통 사람과 달리 웹 이용에 불편함을 느끼는 사람들 ( 장애인, 노약자 등 ) 은 다른 사람들에 비해 웹 접근성이 떨어집니다. 이를 위해 스크린 리더기, 마우스 스틱 등 보조기기를 이용하는데 보조기기가 읽게 하기 위한 방법들을 통해 접근성을 좋게 해야 합니다. ✔ 웹 표준 W3C라는 국제 웹 표준화 단체에서 발표한 자료들에 기반해 만들어지는데, 어떤 웹 브라우저를 사용하던 또는 모바일, 태블릿 , PC 등 어떤 화면 사이즈에서 웹을 이용하던 어려움 없이 이용하도록 하는 표준 입니다. 웹 표준을 지키면 좋은 점 웹 표준을 따라 효율적으로 짜여진 코드는 코드의 양도 줄고 동시에 서버의 부담을 줄여 줍니다. 보조기..

📃 Front-End/HTML

표준모드(Standards mode) & 호환 모드(Quirks mode)

2022.10.19

과거의 웹 페이지는 넷스케이프와 익스플로러 버전이 따로 존재했고 웹 표준이 없었습니다. 그러나 W3C가 웹 표준을 만들면서 기존 브라우저가 새롭게 만들어진 표준을 기반으로 웹사이트를 제대로 표현할 수 없게 되자 렌더링을 할 때 표준 모드(Standards mode)와 호환 모드(Quirks mode)로 렌더링을 할 수 있게 옵션을 제공 하였습니다. 이때, 브라우저가 DOCTYPE 을 보고 가지고 있지 않으면 호환 모드로 렌더링을 하고, 가지고 있다면 주어진 DOCTYPE 에 맞게 표준 모드로 렌더링을 합니다. 차이점 호환 모드 : 오래된 웹페이지들을 최신 버전의 브라우저에서도 깨지지 않게 하기 때문에 각 브라우저마다 다르게 보일 수 있습니다. 즉, 각 브라우저 별 문서를 나타내는 방식이 다르기 때문에 크..

📃 Front-End/HTML

DOCTYPE

2022.10.19

Document Type의 약어입니다. DOCTYPE 선언이란 ❓ 웹 브라우저에게 해당 문서의 HTML 버전을 알려주는 역할을 합니다. DTD(Document Type Declaration)를 통해서 현재의 웹 문서가 어떤 버전의 HTML 기술로 작성되어 있는지 웹 브라우저에게 전달합니다. DTD : 문서별로 해당 문서에 대한 태그 정보가 다르면 가독성 과 파악하기 어렵기 때문에, 공통 규칙에 따라 문서를 작성하게 하는 것 입니다. 선언의 목적 문서간의 호환성을 높이기 위함 입니다. HTML 문서 버전의 종류에는 HTML5, HTML4 이하 및 XHTML이 있습니다. 사용 용도와 발전 기간에 따라 버전이 달라졌습니다. (DOCTYPE에 대하여 알아보는 것이므로 각각 HTML 버전에 대한 자세한 설명은 생..

티스토리툴바