본문 바로가기

💻WEB FrontEnd

(66)

AJAX AJAX (Asynchronous Javascript And XML) 비동기적 웹 서비스를 개발할 때 사용하는 기법으로, 페이지 이동 없이 서버에 요청을 보내고 응답을 받는 기술이다. AJAX를 사용하는 이유 페이지의 일부분만 갱신할 경우에도 페이지 전체를 다시 로드해야하는데, 이때 엄청난 자원과 시간이 낭비된다. 하지만 ajax는 html 페이지 전체가아닌 일부분만 갱신할수 있도록 XMLHttpRequest객체를 통해 서버에 request한다. 이 경우 Json이나 xml형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다. AJAX의 장단점 장점 웹페이지의 속도가 향상된다. JavaScript를 사용하기 때문에 JS의 특징인 비동기적 통신 가능 = 서버의 처리가 완료 될 ..

다크 모드, 라이트 모드 toggle 다크모드, 라이트모드를 설정하는 토글 버튼에 대해 알아보겠습니다. 웹 사이트를 불러올 때, 테마를 결정하는 경우는 아래 3가지의 경우가 있습니다. 1) 사용자의 테마 설정 저장 2) 운영체제 수준의 다크 모드 3) 위 두가지 경우가 아니면 라이트 모드 참고 사이트 > A Complete Guide to Dark Mode on the Web "토글 테마" 클래스를 토글하는 방법 스타일 시트를 토글하는 방법 light-theme.css와 dark-theme.css 스타일 시트를 따로 저장하여 이 파일을 토글하는 방법 const btn = document.querySelector(".btn-toggle"); const theme = document.querySelector("#theme-link"); btn...

Flex 1. Flex 박스의 배치 순서를 변경하거나 자유롭게 바꾸는 것이 불가능했던 기존의 속성들과 달리, 플렉스는 박스 요소들을 다양하고 자유롭게 조작할 수 있다. Flexible Box, Flexbox라고 부르기도 한다. 1) Container와 Item 플렉스는 플렉스 컨테이너와 플렉스 아이템로 이뤄져 있고, 컨테이너와 아이템에 적용하는 속성이 나뉘어져 있다. - 플렉스의 축 메인축(Main Axis) : 아이템들이 배치된 방향 수직축 또는 교차축(Cross Axis) : 메인축과 수직인 축 - 플렉스 컨테이너(Flex Container) 여러 개의 플렉스 아이템을 포함한 부모 역할을 한다. 속성 설명 속성값 display flex : 블록 수준의 플렉서블 박스 inline-flex : 인라인 수준의 플렉..

미디어 쿼리와 뷰포트 1. 미디어 쿼리(Media Queies) 반응형 웹에서는 필수인 미디어쿼리는, 화면크기,화면 해상도, 기기 방향 등의 조건으로 CSS를 각각 다르게 적용하는 것이다. 1) 기본 문법 @media [only|not 미디어 유형] [and|,] (조건문){ 실행문 } @media : 미디어 쿼리 문법의 시작을 알리는 부분 미디어 유형 미디어 유형 설명 all 모든 미디어 유형 screen 컴퓨터 스크린 tv 텔레비전 handheld 패드 장치 braille 점자 표시 장치 조건문 조건문 설명 조건값 min/max 사용 여뷰 width/height 웹 페이지의 넓이/높이 값 width속성에서 사용할 수 있는 모든 속성값 O device-width/device-height 기기의 넓이/높이 값 orientat..

가변 그리드 / 가변 패딩,마진 / 가변 이미지,동영상 1. 그리드 '그리드(Grid)'는 격자모양의 무늬를 뜻한다. 우리가 흔히 쓰는 프로그램인 Excel, Word, PowerPoint의 '표'와 같은 형태도 이 그리드(Grid) 형태를 가진다. 1) 고정 그리드(fixed grid) : 화면 너비를 일정하게 고정하고 레이아웃을 만든 것. 화면 너비를 특정 값으로 고정해 놓으면 그 안에 표시할 요소들의 넓이 값을 지정할 수 있고 너비가 항상 일정하게 표시되기 때문에 원하는 레이아웃을 만들기도 쉽다. 데스크톱용 사이트만 제작한다면 이 방법이 편리하다. 하지만 여러 종류의 기기를 이용해서 접속하는 사이트라면, 브라우저 창의 너비가 작은 기기에서 접속했을 때는 사이트 일부가 가려져서 스크롤 막대를 사용해 화면을 옮기면서 봐야 하는 불편함이 있다. 2) 가변 그..

반응형 웹 vs 적응형 웹 1. 적응형 웹(AWD, Adaptive Web Design) 특정 뷰포트의 크기에 맞게끔 설계된 웹 페이지를 만들어서 별도로 제공하는 것. 1) 방법 (HTTP GET 요청의 user-agent 헤더 정보를 이용해) 웹 페이지를 요청하는 기기를 감지하여 특정 유형의 기기일 경우 해당 뷰포트에 최적화된 페이지로 리디렉션 시켜줌. ex. 스마트폰으로 네이버에 접속할 경우 m.naver.com로 리디렉션 시킴. 2) 특징 기존의 사이트를 재구출할 필요가 없고 다양한 디바이스에 최적의 성능을 가져올 수 있다. 디바이스에 적절한 페이지 혹은 시스템을 각각 제작해야한다. 분리 개발한 웹에 수정사항이 발생하면 다른 환경에 최적화된 나머지 웹페이지도 수정,변경해야 하므로 개발자로선 다소 번거로워질 수 있다. 화면에 ..

시맨틱 태그 을 기본으로 배운 내용입니다. 목차 1) 시맨틱 태그를 사용한 문서 구조 2) 시맨틱 태그를 지원하지 않는(IE8이하) 버전에서 사용하는 방법 2-1. HTML5 Shiv 사용법 2-2. 폴리필(pollyfill) 시맨틱 태그 시맨틱이란 '의미론적인', '의미가 통하는' 이라는 뜻이다. 웹 문서 레이아웃을 만들 때 시맨틱 코드를 사용하면, 소스만으로도 문서 내용을 알 수 있어서 사이트를 검색할 떄 필요한 내용을 정확히 찾을 수 있어 편리하다. 또한 태그에 대한 역할이 정확히 정해졌기 때문에 어떤 장치에서든 문서를 똑같이 해석할 수 있다. 1) 시맨틱 태그를 사용한 문서 구조 태그 설명 위치 사용 내에 다음과 같은 소스를 추가하면 IE8이하 버전에서도 시맨틱 태글를 인식할 수 있다.*/ 2-2. Polly..

표 스타일 을 기본으로 배운 내용입니다. 목차 1) 표 제목 위치 지정 - caption-side 2) 표 테두리 스타일 결정 - border 3) 테두리 통합, 분리 - border-collapse 4) 인접한 셀 테두리 사이 거리 지정 - border-spacing 5) 빈 셀의 표시 여부 지정 - empty-cells 6) 표 너비와 높이 지정 - width, height 7) 콘텐츠에 맞게 셀 너비 지정 - table-layout 8) 셀 안의 텍스트 정렬 방법 지정 - text-align 9) 셀 안에서 수직 정렬하기 - vertical-align 표 스타일 표의 크기, 표의 테두리, 셀의 테두리, 여러 가지 여백 등의 표 스타일을 지정할 수 있다. 1) 표 제목 위치 지정 - caption-side 선택..

다단 구성하기 을 기본으로 배운 내용입니다. 목차 1) 단의 너비 고정하고 다단 구성 - column-width 2) 단의 개수 고정하고 다단 구성 - column-count 3) 단과 단 사이 여백 지정 - column-gap 다단 구성하기 column과 관련된 여러 속성으로 다단으로 편집할 수 있다. 다만, 다단 관련 속성은 브라우저별 접두사를 붙여 사용해야 한다. 한 화면을 여러 단으로 구성할 때, 단의 너비를 고정하거나 단의 개수를 고정해 화면을 분할할 수 있다. 1) 단의 너비 고정하고 다단 구성 - column-width 선택자 { column-width: 크기 | auto } 속성 값 설명 크기 단 너비를 직접 지정한다. auto 단의 개수(column-count) 같은 다른 속성에 따라 단의 너비가 자동..

CSS 레이아웃- 포지셔닝과 주요 속성들 을 기본으로 배운 내용입니다. 목차 1. CSS Positioning 1) 포지셔닝의 종류 1) 포지셔닝 비교 2. 포지셔닝 관련 주요 속성들 1) 박스 너비 기준 정하기 - box-sizing 2) 왼쪽이나 오른쪽으로 배치 - float 3) float 속성 해제 - clear 4) 요소를 보이게/보이지 않게 지정 - visibility 5) 요소 쌓는 순서 정하기 - z-index 1. CSS Positioning CSS 포지셔닝이란, CSS를 이용해서 HTML 요소들의 위치를 제어하는 방법이다. 요소에 CSS 속성으로 position을 지정하면 여러가지 방법으로 위치를 지정할 수 있다. 1) 포지셔닝의 종류 - 상대위치(position: relative) 자신의 위치를 기준으로 한 상대위치 값을 지..

목록 더보기

티스토리툴바