's IT STORY 's IT STORY

메인 페이지가 웹사이트의 내용들을 함축적으로 보여주는 페이지라면 서브 페이지는 홈페이지 소개나 갤러리 게시판, 문의사항 게시판 등 웹사이트의 자세한 내용을 담아 메인 페이지의 내용을 뒷받침해주는 페이지입니다. 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나 태블릿 환경에서는 영역들이 가로로 여러 줄 배치되게 구성되어 있지만 가장 작은 화면인 모바일 환..

플렉서블 박스 이용해 목업 웹사이트 만들기 먼저 우리가 만들어볼 웹사이트의 구조와 각각의 영역이 어떠한 역할을 하는지 살펴볼까요? ← 로고와 메뉴를 담고 있는 헤더 영역 ← 이미지를 효과적으로 보여주기 위한 슬라이더 영역과 사진을 보여줄 갤러리 영역 그리고 인기 검색어를 순위대로 보여주는 인기 검색어 영역 ← 최근에 작성한 글들과 사람들이 많이 본 글을 보여주는 최근 글 영역과 인기 글 영역, 광고 또는 웹사이트에서 전달할 사항을 담고 있는 배너 영역, 그리고 사람들과의 소통을 위한 소셜 네트워크 영역 ← 웹사이트의 저작권 정보 등을 담고 있는 푸터 영역 기본 구조 잡기 1. 편집기를 실행시켜 실습 파일인 04_1.html을 불러옵니다. 그리고 , 태그 사이에 wrap이라는 아이디로 태그를 작성합니다. ..