본문 바로가기

Design/퍼블리싱 지식창고

(46)

홈페이지 이미지 요소와 속성 속성이라고 말하는 부분은 모든 태그 요소에 들어가는 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 이라는 표기로 통칭 많이 사용됩니다. 그리드라고 부르는 것이 좀 더 어감이 쉬운데, 홈페..

전환과 애니메이션 효과 (transition,animation) 앞서 설명한 변형효과(transform)와 같이 이어서 설명될 트랜지션(transition)은 정해진 시간동안 이동하거나 크기가 커지는 등 다양한 시각적 효과를 제공하는 기능입니다. 마우스를 올리면 버튼이 커진다거나 회전을 하는등의 다이나믹한 요소등을 많이 갖추고 있어, 간단하고 다양하게 사용됩니다. 자바스크립트와 플래시가 없어도 애니메이션의 무한 루프형태와 트랜지션을 활용해 간단한 이동 및 이펙트등의 효과를 보여줄 수 있습니다. 사실 앞서 소개한 기능, 트랜지션이나 애니메이션등의 이동 툴은 각종 브라우저의 하위버전에서는 지원하지 않는 단점은 있습니다만, 최신버전이 아니면 더 이상의 지원과 패치등을 해주지 않는 업계의 특성과 트렌드를 반영해 크로스브라우징쪽만 신경쓴다면, 진행해도 큰 문제는 없다고 생..

홈페이지 그림자와 변형 효과 (shadow, transform) css로 줄 수 있는 정지된 컨테이너에 대한 효과는 그림자, 2D변형,3D변형, 3가지로 나뉘어져 있으며, 간단한 명령문 만으로도 이동시키거나 회전을 하는등의 모션을 줄 수 있어 간편하게 이동과 변환을 시키기에 용이한 기능입니다. 변형은 :hover 기능을 통해 클릭시 변환을 하게 하거나 주목성을 높이는 용도로 많이 사용하는 것은 물론, 이어서 포스팅될 전환효과에 변형을 합해 좀 더 다이나믹한 형태 변경을 위해 숙지해야되는 부분입니다. text-shadow 그림자 효과 코드는 수평, 수직, 블러효과, 색상으로 제어 할 수 있으며, 두 가지를 함께 그림자로 나타내는 효과도 부여할 수 있습니다. 두 가지 컬러는 ,(콤마)를 이용해 표기하면 됩니다. text-shadow: 수평, 수직, 블러강도, 색상; /*..

이전 1 2 3 4 5 6 다음

티스토리툴바