본문 바로가기

반응형 웹디자인4

서브라임 텍스트로 만든 첫 웹페이지3 (수월-) ABOUT 페이지를 분석할 차례다. HOME 페이지는 완성되었고, 같은 html을 그대로 복사해서 ABOUT과 SERVICES로 복사하면 된다. 지금까지 분석했던 기본 설정 및 HOME에 대한 분석을 참고하고 싶다면 다음의 두 글의 링크로! https://dowhateveryouwant1661.tistory.com/28 서브라임 텍스트로 만든 첫 웹페이지1 (뿌듯-) (유툽을 보고 따라 만들긴 했지만) 다음과 같은 모습이다. 누가봐도 엉성하긴 하지만 하나하나 따라서 만들어 보니 진짜 만들어 지는구나..! 신기하기도 하고 재밌기도 하다. 태그를 한줄 한줄 덧붙여 갈 때 마다.. dowhateveryouwant1661.tistory.com https://dowhateveryouwant1661.tistory... 2020. 4. 7.
서브라임 텍스트로 만든 첫 웹페이지2 (지끈-) 오늘은 쇼케이스, 뉴스레터, 각주 등 첫 화면의 중간-아래 부분을 분석해보려고 한다. 어제는 헤드, 헤더 부분을 분석해봤다. 사용할 때는 잘 몰랐던 아주 디테일한 과정까지 신경써서 생각해야 했다. 더 구체적으로 확인하고 싶다면 아래의 글을 참고! https://dowhateveryouwant1661.tistory.com/28 서브라임 텍스트로 만든 첫 웹페이지1 (뿌듯-) (유툽을 보고 따라 만들긴 했지만) 다음과 같은 모습이다. 누가봐도 엉성하긴 하지만 하나하나 따라서 만들어 보니 진짜 만들어 지는구나..! 신기하기도 하고 재밌기도 하다. 태그를 한줄 한줄 덧붙여 갈 때 마다.. dowhateveryouwant1661.tistory.com 사진에 큰 메세지가 있는 부분이 'showcase'인데 이 부분.. 2020. 4. 6.
서브라임 텍스트로 만든 첫 웹페이지1 (뿌듯-) (유툽을 보고 따라 만들긴 했지만) 다음과 같은 모습이다. 누가봐도 엉성하긴 하지만 하나하나 따라서 만들어 보니 진짜 만들어 지는구나..! 신기하기도 하고 재밌기도 하다. 태그를 한줄 한줄 덧붙여 갈 때 마다 새로고침을 해서 계속해서 바뀌는 웹페이지를 확인하면서 작업하는 것도 재미가 쏠쏠하다. 번거롭게 캡쳐해가면서 까지 이렇게 글로 남기는 이유는 무작정 따라하기만 하는 것 보다 하나씩 분석해 보면 머릿속에 더 오래 남을 거 같아서이다. 파일 작성시에는 html > css순서대로 작성했지만, 분석은 해당 부분별로 html>css를 나눠가면서 하는 게 나을 거 같다. 0. html기본설정 가장 먼저, 기본 문서는 index.html로 지정하고 해당 폴더와 그 안에 css폴더와 img폴더를 만든다. 사용할 이.. 2020. 4. 5.
HTML 레이아웃, 반응형 웹 디자인 1. HTML 레이아웃 요소 잡지나 신문처럼 여러 행에 내용을 담고 있는 것처럼 서로 다른 영역에 서로 다른 내용 요소를 담을 수 있다. - 문서나 각 섹션의 머릿말 부분 - '탐색메뉴'라고 하면 적절하려나, 네비게이션 링크의 정보를 담는 영역 - 문서 안의 한 부분 - 개별적인 한 기사가 실리는 부분 - 사이드바 처럼 내용 옆 부분 - 웹페이지 하단 부분에 실리는 각주 - 추가적인 세부정보 - 영역의 제목 영역 2. HTML 레이아웃 기술 HTML tables (not recommended) CSS float property CSS flexbox CSS framework CSS grid HTML tables (not recommended) 표를 만드는 요소는 행을 만들 순 있지만 레이아웃용은 아니므로,.. 2020. 3. 28.