Design/퍼블리싱 지식창고 (40) 썸네일형 리스트형 절대경로와 상대경로 개발언어와 퍼블리싱 소스코드를 제작하는 경우에는 경로 지정이 필수적으로 필요한데, 이와 같은 작업은 절대경로와 상대경로를 지정할 수 있습니다. 절대경로 웹사이트의 주소와 경로이름으로 설정한 방법을 이야기합니다. 예를 들어 웹사이트 주소와 경로가 정해져있는 abc폴더를 지정하기 위해선 http://blueseal.kr/main/sub/abc.html 와 같이 해당하는 도메인 주소를 기입한 후 해당폴더를 하단카테고리로 지정하는 /로 구분지어 줍니다. 각 폴더의 지정된 이름을 나열한다고 하여 절대경로라고 부르고 있습니다. (도메인을 제외한 폴더 이름을 지정하는 루트상대경로와도 일맥상통하는 부분입니다.) 장점은 폴더 구성을 눈으로 쉽게 볼 수 있는 반면, 단점은 서버를 옮기거나 폴더 구성이 바뀔 경우 다.. 이미지 파일 사이 공백 붙이기 html 상에서 이미지를 넣을 때, 편하게 보기 위해 블록 형태의 소스 코드로 다단 배치를 하게 될 경우 이미지와 이미지 사이에 공간이 조그맣게 벌어지게 되는데, 이는 img의 소스 코드 자체가 inline 형태이기 때문에 공간이 없이 배치를 하고 싶다면 html 소스 코드상에서의 img 주소를 전부 붙여주셔야 합니다 가령 예를 들면, 보기가 편하게 아래와 같은 소스코드 형태로 이미지를 나열하게 될 경우, 작업상의 편의성을 위해 제작했지만, 이와 같은 식으로 이미지 사이가 벌어지게 되는데, ▲ 위와 같은 형태로 한 라인에 공백없이 붙여주어야 나열하게 됩니다. 해당 소스코드는 CSS작업이아닌 Only html상에서만의 작업으로서 쇼핑몰에서 html코드를 복사해서 붙여 넣을때 주로 쓰이는 상세이미지의 나.. 홈페이지 이미지 요소와 속성 속성이라고 말하는 부분은 모든 태그 요소에 들어가는 html이 이해하도록 명령해주는 코드라고 생각하면 이해가 쉽습니다. img ▲이미지는 이렇게 시작되며, src=""라는 속성을 붙여줌으로서 정상적으로 동작합니다. 확장자명은 .jpg처럼 꼭 붙여주어야 인식합니다. ▲또한 이미지의 크기도 지정할 수 있는데, 가로(width) 세로(height)를 지정해 원하고자 하는 크기를 정해줄 수 있습니다. (가로와 세로를 지칭하는 width, height는 나중에 CSS에서도 많이 쓰는 퍼블리싱 요소기 때문에 단어 입력을 손에 꼭 익혀 놓으시는 게 좋습니다.) ▲ alt 요소로 이미지가 가진 내용의 의미를 붙여 줄 수 있으며, 이는 엑박이 뜨는 현상을 대체하거나 시각장애인들을 위한 태그 요소로 꼭 붙여주시는 게 좋습.. 홈페이지 엘리먼트 요소들 (Element) 앞서 홈페이지를 제작하기 전에 선언 및 플러그인 연결(도킹)들을 진행한 다음, 장식 부분에 앞서 홈페이지에 들어갈 정보들의 요소와 속성들을 입력해 주는 과정을 이어갑니다. 먼저 요소 부분을 살펴볼까요, Element는 요소를 뜻합니다. 컴퓨터 및 서버가 홈페이지 구성을 이해하고 적용 할 수 있도록 각종 언어로 구성해 입력하는 모든 행동을 이야기합니다. 아래는 홈페이지 구성을 이루는 요소의 맛배기 요소들입니다. 자세한 내용은 후의 포스팅을 참고 해 주세요 :) HTML 요소 HTML의 속성은 태그로 시작해 태그로 끝납니다. 가령 "Hello world"라는 단어를 온라인에 입력하기 위해선 Hello wold 라는 수식으로 입력을 해주어야 요소를 읽어들일 수 있습니다. 태그 요소는 열고.. 홈페이지 css연결하기 (LINK script,css연결) 홈페이지의 정보와 성격인 독타입(Doctype)과 메타태그(Meta tag)를 시작한 후 (html 게시글1번 참고) 다양한 기능들을 활용할 수 있는 필수소스인 script와 css를 플러그인화 시키는 타입으로 연결 함으로서 최종적으로 홈페이지의 제작 준비가 끝났음을 선언할 수 있습니다. 우주에서 우주선 또는 인공위성들이 결합하는 것을 도킹이라고 부르는데, 광할한 웹에서 홈페이지 제작을 위해 명령어를 담은 페이지들이 마치 결합하는듯 장착되어 홈페이지를 제작하게 되는 모습을 띄는바 html docking이라 블로그에선 새롭게 명명합니다. 연결은 사이에 입력하는 것으로 시작되며, 각종 "홈페이지를 사용할 수 있는 명령어를 담은 장치들이 머리에 장착된다"고 이해하면 간단하고 쉽습니다. 그 중 그 언어는.. 홈페이지 독타입과 메타태그선언 (DOCTYPE,METATAG) 홈페이지 제작 을 위해서는 홈페이지의 정보를 담고있는 DOCTYPE(독타입)과 홈페이지의 성격을 담고있는 META TAG(메타태그)를 선언해 주는것 으로 제작이 시작됩니다. DOCTYPE 홈페이지를 제작하기전 선언하는 일종의 표식과 선언문에 해당합니다. ▲ HTML5 독타입 선언 홈페이지를 제작할때 처음 시작하는 선언문과 비슷합니다. ▲ 홈페이지의 언어가 이루어져있는 언어코드를 삽입하는 코드로 '이 홈페이지는 이런 언어로 만들어졌어' 라는것을 선언하는일종의 선언문입니다. 각 국가별 언어코드를 기록해줍니다. 한국="ko" 일본="ja" 미국="en" 등으로 이루어져 있습니다. ▲ 홈페이지를 장식하는 머리부분으로 각종 스크립트와 CSS 링크들을 연결시키는 역활을 합니다. 블루씰 웹디자인 - BLUESEA.. 반응형 홈페이지 미디어 쿼리 기본 설명 (@media) 홈페이지를 하나의 레이아웃이 아닌 미디어에 따라 반응하는 형태로 변하게 만드는 별도의 작업을 미디어쿼리 또는 반응형 이라고 부르며, 이를 위한 작업으로 파생된 언어가 바로 웹퍼블리싱과 퍼블리셔입니다. 기존의 레이아웃으로 또 하나의 홈페이지가 미디어에서 다르게 보이는 현상을 말하고, 모두 이용자들을 위한 편의성에서 출발한 것인 만큼, UI,UX와도 밀접한 관계를 지니고 있습니다. 뷰포트 선언 미디어쿼리를 시작하기 전에 메타 태그를 통해 뷰포트적용(반응형 홈페이지) 선언문을 작성 해 줍니다. 이 과정을 건너뛰면 홈페이지가 반응형으로 적용되지 않습니다. 선언문과 관련한 내용은 이 곳을 클릭해 예전 포스팅을 확인 해 주세요. ▲ 각 요소들을 다 적고 제일 하단에 미디어 쿼리를 기술한 모습 body { backg.. 홈페이지 레이아웃 제어와 영역 분배하기 (column) 각 컨테이너 요소들로 화면을 제어해 준 후, 다단을 나누어 해당 하는 넓이에 맞게 차례대로 컨텐츠를 나열하는 것을 칼럼(column)이라고 합니다. 쉽게 생각해 신문과 같은 나누어 기입하는 나열 형식을 말하는데, 웹 페이지에서 많이 쓰이는 이미지와 설명을 보기좋게 분야별로 나열하는 배치입니다. 이와 같은 칼럼은 아래와 같은 명령문으로 직접 나열하는 것을 제외하고, 그리드 형식인 부트스트랩 같은 자동 레이아웃을 rel속성으로 첨부해 도움을 받는 것이 훨씬 쉽고 간편한데, 그 전에 칼럼 속성의 의미를 인지하고 있어야 사용하기 편리합니다. column 행과 열 중에서, 열 속성을 지정하는 칼럼(column)은 줄여 col 이라는 표기로 통칭 많이 사용됩니다. 그리드라고 부르는 것이 좀 더 어감이 쉬운데, 홈페.. 이전 1 2 3 4 5 다음
