's IT STORY 's IT STORY

HTTP METHOD HTTP METHOD에는 get, post, put, delet가 있습니다. get 클라이언트에서 서버로 어떠한 리소스로부터 정보를 요청하기 위해 사용되는 method입니다. 즉, 서버에서 어떤 데이터를 가져와서 보여줄 때, 값이나 내용, 상태 등을 바꾸지 않는 경우에 사용합니다. post 리소스를 생성/업데이트하기 위해 서버에 데이터를 보내는 데 사용되는 method입니다. 서버상의 데이터 값이나 상태를 바꾸기 위해서 사용합니다. 주요 차이점 get 요청은 캐시가 되나, post는 캐시 되지 않습니다. get은 브라우저에 기록되지만 post는 기록되지 않습니다. HTTP 상태 코드 주요 상태 코드 200 : OK 요청이 성공적으로 되었습니다. 정보는 요청에 따른 응답을 반환됩니다...

메인 페이지가 웹사이트의 내용들을 함축적으로 보여주는 페이지라면 서브 페이지는 홈페이지 소개나 갤러리 게시판, 문의사항 게시판 등 웹사이트의 자세한 내용을 담아 메인 페이지의 내용을 뒷받침해주는 페이지입니다. 1. 기본 구조 작업하기 서브 페이지에도 인포메이션 영역과 헤더 영역 그리고 푸터 영역이 있습니다. 앞에서 작업한 메인 페이지에서 세 영역을 그대로 복사해 오면 작업 시간을 훨씬 단축시킬 수 있습니다. 그런 다음 현재 위치와 경로를 보여주는 영역이 있는 서브 헤더 영역과 서브 페이지의 실제 내용이 담길 콘텐츠 영역을 추가할 것입니다. ... ... ... ... 현재 페이지와 연결되어 있는 메뉴 이름 홈 / 현재 페이지와 연결되어 있는 메뉴 이름 ... ... ① 현재 위치와 경로 영역이 들어 있는..

8. 소셜 네트워크 영역의 반응형 웹 작업하기 소셜 네트워크 영역의 반응형 웹 작업을 진행해 보겠습니다. 먼저 모바일용 CSS 코드부터 작성합니다. 소셜 네트워크 영역은 배너 영역 바로 뒤에 이어서 작성합니다. ⓛ 배경색을 설정합니다. ② 소셜 아이콘 목록 영역을 플렉서블 박스로 작동하게 만들기 위해 display 속성의 값을 flex로 설정합니다. 이어서 태블릿용 CSS를 작성합니다. ① 소셜 네트워크 영역을 보면 소셜 아이콘 목록 영역이 소셜 네트워크 영역의 한가운데 배치되어 있습니다. 따라서 주축 방향으로 박스를 배치하는 justify-content 속성의 값을 박스를 중앙으로 배치하는 값인 center로 설정하고, 교차축 방향으로 박스를 배치하는 align-items 속성의 값을 박스를 중앙으로 ..

6. 인기 검색어 영역의 반응형 웹 작업하기 인기 검색어 영역을 작업합니다. 먼저 모바일용 CSS 코드부터 작성합니다. 인기 검색어 영역은 갤러리 영역 뒤에 바로 이어서 작성합니다. ① 배경색을 설정하고, 글자 그림자를 설정합니다. ② 인기 검색어 목록 영역의 목록 구조를 다시 살펴보면 위쪽에 15px 크기의 간격이 있으므로 위쪽 마진값을 15px/0.938rem으로 설정합니다. ③ 글자를 중앙으로 정렬하고 대문자로 변경합니다. 그리고 글자 굵기를 진하게로 설정합니다. ④ 인기 검색어 목록 영역의 목록 중 첫 번째 목록과 두 번째 목록은 위쪽 마진값이 필요 없으므로 첫 번째와 두 번째 목록의 위쪽 마진값을 0으로 설정합니다. ⑤ 인기 검색어 목록 영역의 목록 구조를 살펴보면 목록마다 위/아래 패딩값이 1..

3. 슬라이더 영역의 반응형 웹 작업하기 이제 슬라이더 영역의 작업을 진행해 보겠습니다. 먼저 모바일용 CSS 코드부터 작성해 볼까요? 코드는 헤더 영역 뒤에 바로 이어서 작성합니다. ① 너빗값을 100%로 설정하고, 모바일 환경에서 슬라이더 영역을 살펴보면 높잇값이 300px이므로 높잇값을 300px/18.750rem으로 설정합니다. ② 배경 속성을 사용하여 배경 이미지를 설정합니다. ③ 슬라이더 영역의 버튼인 태그에는 너빗값을 34px/2.125rem, 높잇값을 39px/2.438rem으로 설정하고, 글자 들여쓰기 값을 -9999px로 설정합니다. ④ 글자를 들여쓰기 위한 text-indent 속성의 값을 -9999px로 설정하고, 버튼들을 배경 이미지로 처리하기 위해 배경 속성을 사용해서 배경 이미..

메인 페이지 반응형 웹 작업하기 앞에서는 메인 페이지의 구조 작업을 수행해 보았습니다. 여기서는 메인 페이지를 반응형 웹으로 만들기 위해 모바일, 태블릿, PC 환경 이렇게 세 가지 환경에 적용할 스타일 코드를 미리 준비해 둔 미디어 쿼리에 작성하여 반응형 웹을 만들어보겠습니다. 지금부터 할 작업이 웹 브라우저에서 다소 이상하게 보일 수 있는데 그렇더라도 걱정하지 마세요. 작업을 하나씩 진행하다 보면 차츰 모양새가 갖춰질 것입니다. 1. 인포메이션 영역의 반응형 웹 작업하기 이번에는 인포메이션 영역의 반응형 웹 작업을 진행해 보겠습니다. 먼저 모바일용 CSS부터 작업합니다. ① 너빗값을 100%로 설정하고 초록색 계열의 배경색과 아래쪽에 1px 두께의 초록색 직선을 설정합니다. ② 목록을 구성하는 태그에..

메인 페이지 구조 작업하기 메인 페이지는 웹사이트를 방문하는 사용자들이 가장 처음으로 만나게 되는 웹사이트의 얼굴(화면)입니다. 즉, 첫 화면을 통해 사용자들에게 전하고자 하는 내용을 확실하게 전달하기 위해 구성, 디자인, 배치 등을 신경써서 제작해야 하는 중요한 페이지 입니다. 1. 인포메이션 영역의 구조 작업하기 인포메이션 영역은 홈 링크, 로그인 링크, 회원가입 링크, 검색 버튼 등 웹사이트의 기본적인 링크 또는 버튼 등이 들어 있는 영역입니다. 먼저 앞에서 정리해 높은 메인 페이지 파일인 index.html 파일을 편집기에서 실행합니다. ... 703행 마지막으로 태그에 클래스명을 info_list라고 입력합니다. 2. 헤더 영역의 구조 작업하기 헤더 영역은 로고나 메뉴 영역인 내비게이션이 들어 ..

웹사이트 구조 다지기 1단계: 웹사이트 구조 살펴보기 웹사이트를 제작하기 전에 가장 먼저 할 일은 웹사이트의 구조를 확인하는 것입니다. 직접 디자인한 웹사이트의 포토샵 원본 파일 혹은 디자이너로부터 받은 시안 파일을 꼼꼼이 검토해야 합니다. 웹사이트의 구조를 확인하는 게 1순위인 이유는 반응형 웹의 경우 환경이나 크기에 따라 웹사이트의 구조가 크게 바뀌기 때문에 여러 가지 사항들을 미리 고려해야 하기 때문이죠. 우선 이 책에서 제작할 반응형 웹사이트의 구조를 살펴볼까요? 최근 웹 디자인 트렌드로 떠오른 플랫 디자인 스타일로 디자인된 웹사이트로, 메인 페이지의 구조는 10개의 영역으로 나누어져 있습니다. PC나 태블릿 환경에서는 영역들이 가로로 여러 줄 배치되게 구성되어 있지만 가장 작은 화면인 모바일 환..