본문 바로가기

Design/퍼블리싱 지식창고

 (41)
홈페이지 레이아웃 제어와 영역 분배하기 (column) 각 컨테이너 요소들로 화면을 제어해 준 후, 다단을 나누어 해당 하는 넓이에 맞게 차례대로 컨텐츠를 나열하는 것을 칼럼(column)이라고 합니다. 쉽게 생각해 신문과 같은 나누어 기입하는 나열 형식을 말하는데, 웹 페이지에서 많이 쓰이는 이미지와 설명을 보기좋게 분야별로 나열하는 배치입니다. 이와 같은 칼럼은 아래와 같은 명령문으로 직접 나열하는 것을 제외하고, 그리드 형식인 부트스트랩 같은 자동 레이아웃을 rel속성으로 첨부해 도움을 받는 것이 훨씬 쉽고 간편한데, 그 전에 칼럼 속성의 의미를 인지하고 있어야 사용하기 편리합니다. column 행과 열 중에서, 열 속성을 지정하는 칼럼(column)은 줄여 col 이라는 표기로 통칭 많이 사용됩니다. 그리드라고 부르는 것이 좀 더 어감이 쉬운데, 홈페..
전환과 애니메이션 효과 (transition,animation) 앞서 설명한 변형효과(transform)와 같이 이어서 설명될 트랜지션(transition)은 정해진 시간동안 이동하거나 크기가 커지는 등 다양한 시각적 효과를 제공하는 기능입니다. 마우스를 올리면 버튼이 커진다거나 회전을 하는등의 다이나믹한 요소등을 많이 갖추고 있어, 간단하고 다양하게 사용됩니다. 자바스크립트와 플래시가 없어도 애니메이션의 무한 루프형태와 트랜지션을 활용해 간단한 이동 및 이펙트등의 효과를 보여줄 수 있습니다. ​ 사실 앞서 소개한 기능, 트랜지션이나 애니메이션등의 이동 툴은 각종 브라우저의 하위버전에서는 지원하지 않는 단점은 있습니다만, 최신버전이 아니면 더 이상의 지원과 패치등을 해주지 않는 업계의 특성과 트렌드를 반영해 크로스브라우징쪽만 신경쓴다면, 진행해도 큰 문제는 없다고 생..
홈페이지 그림자와 변형 효과 (shadow, transform) css로 줄 수 있는 정지된 컨테이너에 대한 효과는 그림자, 2D변형,3D변형, 3가지로 나뉘어져 있으며, 간단한 명령문 만으로도 이동시키거나 회전을 하는등의 모션을 줄 수 있어 간편하게 이동과 변환을 시키기에 용이한 기능입니다. 변형은 :hover 기능을 통해 클릭시 변환을 하게 하거나 주목성을 높이는 용도로 많이 사용하는 것은 물론, 이어서 포스팅될 전환효과에 변형을 합해 좀 더 다이나믹한 형태 변경을 위해 숙지해야되는 부분입니다. text-shadow 그림자 효과 코드는 수평, 수직, 블러효과, 색상으로 제어 할 수 있으며, 두 가지를 함께 그림자로 나타내는 효과도 부여할 수 있습니다. 두 가지 컬러는 ,(콤마)를 이용해 표기하면 됩니다. text-shadow: 수평, 수직, 블러강도, 색상; /*..
홈페이지 레이아웃이 범위를 벗어날 때 (min,max,overflow) 모바일과 태블릿, PC 3가지를 염두에 두고 작업하는 홈페이지의 특성상 각 기기별로 레이아웃을 맞추어 주어야 할때가 있는데, 이는 %로 수치를 지정해 각 영역크기를 지정해주는 것을 비롯. 컨텐츠에 대한 영역을 자동으로 잡아주는 명령문을 포함해야 좀 더 가독성과 접근성이 높아지는 효과가 있습니다. 반응형으로 컨텐츠를 제작할 때, 항상 헤깔리는 min,max 명령문입니다. overflow 컨테이너를 잡은 박스에 컨텐츠가 벗어나게 될 경우 설정해주는 기능으로 너무 큰 컨텐츠를 제어할 때 사용합니다. overflow는 기본값으로 x와 y 축을 경계로 디테일하게 제어하는 방법도 사용할 수 있습니다. [기본 값] overflow : 상하좌우 기본값 적용 overflow-x: 왼쪽 / 오른쪽을 어떻게 처리할지를 지정..
홈페이지 레이아웃 위치 제어하기 (float, box-sizing / position, z-index) 콘텐츠 들을 나열하기 전에 박스들을 만들어 해당 위치에 고정시키고, 흔히 말하는 레이아웃을 홈페이지에서 잡는데 필요한 요소는 두 가지, 플롯(float)과 포지션(position)입니다. 어느 것으로 만들어도 홈페이지 레이아웃을 설정하는 데에 큰 차이는 없습니다만, 각각 사용 시 유의점을 내포하고 있습니다. 뜻하는 바가 무엇인지 의미만 정확히 인지한다면 사용하는데 별 어려움은 없습니다. float 떠다니는 의미의 플롯은 방향성을 지시해 주어 배치를 할 수 있으나, 끝까지 떠다니게 할 수 없기에 잡아주는 역할의 명령문을 부모에게, 또는 다음 박스에게 해주지 않는다면 레이아웃을 뭉개버리는 단점을 가지고 있으며, clear 명령문과 같이 사용하는 것이 하나의 세트입니다. [기본 코드] float: left|r..
가상 클래스와 결합 요소, 중요 요소 html타입으로 페이지와 링크의 속성을 target으로 제어한다면, css타입으로 보여지는 속성에 가상으로 클래스를 부여해 좀 더 역동성을 부여하거나 오류가 나는 명령문을 가상클래스에서 잡아 정상적으로 표기하게 끔 해 줄 수 있습니다. 또한 div에 속하는 p 등을 부등호로 등으로 표기해 선택적 요소만을 특별히 관리해 주는 기능도 지시 할 수 있습니다. 앵커 클래스 버튼을 비롯, 숨겨져 있는 글에 마우스를 올리면 주는 간단한 효과등의 마우스를 통해 표현 할 수 있는 클래스들입니다. ​ :link - 순수 그대로의 아무행동도 안했을 때, 링크의 액션 :visited - 클릭을 할 경우 보여지는 액션을 바꾼다. :hover - 마우스를 오버 할 경우 보여지는 액션을 바꾼다. :active - 선택을 할 경우..
홈페이지 폰트 사이즈 수정하기 (font-family,size,weight) 홈페이지의 폰트 제어는 link rel로 html에 외부스크립트로 스타일을 불러와서 링크하는것을 기본으로 원하는 폰트를 적용해 주었다면 css의 스타일로 본문에 적용되는 다양한 폰트들을 상세하게 제어할 수 있습니다. ​ 홈페이지에 적용되는 폰트는 운영체제와 브라우저의 특성을 고려해 하나의 폰트만을 연결해주는 것을 기본으로 잡지 않으며, 첫번째 적용되는 폰트들이 문제가 생길 경우에 순차적으로 적용될 수 있도록 예비폰트들을 지정해 주어야 합니다. 이것을 "폴백 (fallback)시스템" 이라 부릅니다. font-family 텍스트의 글꼴을 모아놓은 명령어로 위의 폴백을 염두에 두어 몇개의 폰트를 세팅 해 줍니다. 브라우저가 첫 번째 글꼴을 지원하지 않으면 다음 글꼴을 시도하는 식으로 진행되며, 모든 글꼴을 ..
css 홈페이지 폰트 정렬 및 제어하기 홈페이지를 제작할 때나 html 코드를 이용한 본문 컨텐츠를 꾸밀 때, 가장 필수적인 요소인 텍스트 제어는 색상을 입히거나 빼는 등의 효과는 물론 제어 속성으로서 정렬, 들여 쓰기, 자간 설정 등을 조절할 수 있으며, 디테일하게 제어하면 컨텐츠의 완성도가 높아져 보이는 장점이 있습니다. 크게는 3가지로 글씨, 문단, 문장을 제어하게끔 되어있는 텍스트 속성은 복합적 css를 동시에 사용할 수도 있습니다. text-aline (글씨 정렬) 텍스트가 시작하는 위치 지점을 제어할 수 있는 속성으로 크게는 4가지로 나뉘는데, 오른쪽, 왼쪽, 가운데, 문단 정렬로 나뉠 수 있습니다. 또한 메인 정렬에 따라 전체 속성의 기본값이 바뀔 수 있으니 이 점을 유의하여 사용해야 합니다. [기본코드] text-align: l..
반응형

티스토리툴바