본문 바로가기

반응형

Design/퍼블리싱 지식창고

(46)
홈페이지에 사용하는 리스트 표현 방법 (ul,li,ol,dt,dd,dl) 홈페이지를 제작하면서 빠지지 않는 리스트의 표현 방법입니다. 흔히 리스트를 표현할 때, 자음+한자를 넣어 "■ 리스트1번" 등으로 표현하는 간단한 문구부터, 숫자를 넣어서 표현하는 방법등, 헤깔리는 순서를 한번 짚고 넘어가는 포스팅입니다. ul,li 순서가 없는 목록을 만드는 리스트 태그문으로 목록의 시작은 ul로 시작하고 안에 리스트들은 li로 시작합니다. 순서 없는 목록은 기본적으로 작은 ㆍ이와같은 점을 만들게 되는데, 아예 css reset문에서 목록에 대한 점 표시를 none;으로 만들거나 많은 리스트를 만드는게 아니라면 html상에서 제거해도 무방합니다. ​ ※ 기본 목록에서 ul에 style을 강제로 입력해 리스트에 대한 표시를 변경 할 수 있습니다. Coffee Tea Milk list-st..
반응형 홈페이지의 제작의 기초 4 (text) 홈페이지를 제작하는 것은 건축물을 생각하면 이해하기가 쉽습니다. 먼저 토지를 다듬어 건축물을 올릴 장소를 마련한 후, 건축물의 뼈대를 만들고, 전기의 배선 및 수도공사 등 과 인테리어를 끝낸 후 건축을 마무리하게 됩니다. ​ 그 중 뼈대를 만드는 부분이 홈페이지 제작에 있어서는 마크업이라고 부릅니다. ​ 마크업의 대표적 해당 요소는 홈페이지를 구성하는 레이아웃 마크업.(html+css) 영역을 구분 짓는 지정 마크업,(html+css) 표와 폼 양식을 만드는 테이블과 폼 마크업, (html) 글을 게시하는 텍스트 마크업, (html) ​ 크게 4종류를 들 수 있습니다. 그 중 마지막으로 글을 게시하고 꾸며주는 텍스트 마크업에 대해 알아보겠습니다. h1~h6 글에서의 중요도가 높은 부분에 해당 태그를 넣어..
반응형 홈페이지의 제작의 기초 3-2 (form & fieldset & input) 홈페이지를 제작하는 것은 건축물을 생각하면 이해하기가 쉽습니다. 먼저 토지를 다듬어 건축물을 올릴 장소를 마련한 후, 건축물의 뼈대를 만들고, 전기의 배선 및 수도공사 등 과 인테리어를 끝낸 후 건축을 마무리하게 됩니다. ​ 그 중 뼈대를 만드는 부분이 홈페이지 제작에 있어서는 마크업이라고 부릅니다 ​ 마크업의 대표적 해당 요소는 홈페이지를 구성하는 레이아웃 마크업.(html+css) 영역을 구분 짓는 블록,인라인 마크업,(html+css) 표와 폼 양식을 만드는 테이블, 폼 마크업, (html) 글을 게시하는 텍스트 마크업, (html) 세 번째 두번째 테마 이야기 폼 만들기입니다. 홈페이지에서 기존에 가지고 있는 정보들을 차례대로 보기 쉽게 나열하거나 정렬이 필요할 때, 또는 도표의 형태로 만들어 정..
반응형 홈페이지 제작의 기초 3-1 (html table) 홈페이지를 제작하는 것은 건축물을 생각하면 이해하기가 쉽습니다. ​ 먼저 토지를 다듬어 건축물을 올릴 장소를 마련한 후, 건축물의 뼈대를 만들고, 전기의 배선 및 수도공사 등 과 인테리어를 끝낸 후 건축을 마무리하게 됩니다. ​ 그 중 뼈대를 만드는 부분이 홈페이지 제작에 있어서는 마크업이라고 부릅니다. ​ 마크업의 대표적 해당 요소는 ​ 홈페이지를 구성하는 레이아웃 마크업.(html+css) 영역을 구분 짓는 블록,인라인 마크업,(html+css) 표와 폼 양식을 만드는 테이블, 폼 마크업, (html) 글을 게시하는 텍스트 마크업, (html) ​ 으로 크게 4종류를 들 수 있습니다. ​ 세 번째 첫번째 테마 테이블,표 만들기입니다. 홈페이지에서 기존에 가지고 있는 정보들을 차례대로 보기 쉽게 나열하..
반응형 홈페이지 제작의 기초2 (block, inline) 홈페이지를 제작하는 것은 건축물을 생각하면 이해하기가 쉽습니다. 먼저 토지를 다듬어 건축물을 올릴 장소를 마련한 후, 건축물의 뼈대를 만들고, 전기의 배선 및 수도공사 등 과 인테리어를 끝낸 후 건축을 마무리하게 됩니다. ​ 그 중 뼈대를 만드는 부분이 홈페이지 제작에 있어서는 마크업이라고 부릅니다. ​ 마크업의 대표적 해당 요소는 홈페이지를 구성하는 레이아웃 마크업.(html+css) 영역을 구분 짓는 블록,인라인 마크업,(html+css) 표와 폼 양식을 만드는 테이블 마크업, (html) 글을 게시하는 텍스트 마크업, (html) 으로 크게 4종류를 들 수 있습니다. 그중 두 번째로 영역을 구분해 섹션 설정을 하는 지정 마크업 대해 알아보겠습니다. 홈페이지는 각 섹션마다 들어가는 부분에 대한 별도의..
반응형 홈페이지 제작의 기초1 (layout) 홈페이지를 제작하는 것은 건축물을 생각하면 이해하기가 쉽습니다. 먼저 토지를 다듬어 건축물을 올릴 장소를 마련한 후, 건축물의 뼈대를 만들고, 전기의 배선 및 수도공사 등 과 인테리어를 끝낸 후 건축을 마무리하게 됩니다. ​ 그 중 뼈대를 만드는 부분이 홈페이지 제작에 있어서는 마크업이라고 부릅니다. ​ 마크업의 대표적 해당 요소는 홈페이지를 구성하는 레이아웃 마크업.(html+css) 영역을 구분 짓는 블록,인라인 마크업,(html+css) 표와 폼 양식을 만드는 테이블 마크업, (html) 글을 게시하는 텍스트 마크업, (html) 으로 크게 4종류를 들 수 있습니다. ​ 그 중 ​ 홈페이지를 구성하는 레이아웃 마크업에 대해 알아보겠습니다. ​ 먼저 웹사이트 제작을 시작하기 전에 2가지 측면을 고려하..
절대경로와 상대경로 개발언어와 퍼블리싱 소스코드를 제작하는 경우에는 경로 지정이 필수적으로 필요한데, 이와 같은 작업은 절대경로와 상대경로를 지정할 수 있습니다. 절대경로 ​ 웹사이트의 주소와 경로이름으로 설정한 방법을 이야기합니다. 예를 들어 웹사이트 주소와 경로가 정해져있는 abc폴더를 지정하기 위해선 http://blueseal.kr/main/sub/abc.html 와 같이 해당하는 도메인 주소를 기입한 후 해당폴더를 하단카테고리로 지정하는 /로 구분지어 줍니다. 각 폴더의 지정된 이름을 나열한다고 하여 절대경로라고 부르고 있습니다. (도메인을 제외한 폴더 이름을 지정하는 루트상대경로와도 일맥상통하는 부분입니다.) ​ 장점은 폴더 구성을 눈으로 쉽게 볼 수 있는 반면, 단점은 서버를 옮기거나 폴더 구성이 바뀔 경우 다..
이미지 파일 사이 공백 붙이기 html 상에서 이미지를 넣을 때, 편하게 보기 위해 블록 형태의 소스 코드로 다단 배치를 하게 될 경우 이미지와 이미지 사이에 공간이 조그맣게 벌어지게 되는데, 이는 img의 소스 코드 자체가 inline 형태이기 때문에 공간이 없이 배치를 하고 싶다면 html 소스 코드상에서의 img 주소를 전부 붙여주셔야 합니다 가령 예를 들면, ​ 보기가 편하게 아래와 같은 소스코드 형태로 이미지를 나열하게 될 경우, 작업상의 편의성을 위해 제작했지만, 이와 같은 식으로 이미지 사이가 벌어지게 되는데, ▲ 위와 같은 형태로 한 라인에 공백없이 붙여주어야 나열하게 됩니다. 해당 소스코드는 CSS작업이아닌 Only html상에서만의 작업으로서 쇼핑몰에서 html코드를 복사해서 붙여 넣을때 주로 쓰이는 상세이미지의 나..

반응형