본문 바로가기

Design

 (83)
반응형 홈페이지 제작의 기초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코드를 복사해서 붙여 넣을때 주로 쓰이는 상세이미지의 나..
홈페이지 이미지 요소와 속성 속성이라고 말하는 부분은 모든 태그 요소에 들어가는 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..
무료 이미지 저작권 주의해야 할 4가지 예전 1~2차 웹 시장이 도래했을땐 웹 디자이너가 대세 였다면, 3~4차 웹 시장에는 모바일을 기반으로한 유튜브라는 혁신 플랫폼의 등장으로 영상디자이너 대세가 되었습니다. ​ 여기서의 세대가 바뀌었지만 인기 있는 공통점은 존재하는데요 어떤것일까요? 바로 디자이너입니다. ​ 소비자가 원하는 다양한 심미성이 좋은 컨텐츠들을 많이 생산하고, 또 그걸 토대로 재생산되면서 디자이너의 매력에 빠져 앞으로의 진로를 결정하게 되신 분들도 많을텐데요. 또한 단면으로는 그래픽툴이 워낙 광범위하게 이용하게 되면서 매력을 느껴 직업을 준비하는 분들도 많을 것 같습니다. ​ 그렇다면 디자이너라면 어떤 기본기를 갖추어야될까요? 앞서 디자이너 기본기는 레이아웃,폰트,컬러 라고 말씀드린적이 있었지만 번외적으로 하나를 필수적으로 알고..

티스토리툴바