본문 바로가기

Design

 (83)
홈페이지 레이아웃이 범위를 벗어날 때 (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..
margin과 padding의 차이점 (마진과 패딩의 차이점) html 여백을 줄 때, 필요한 마진(margin) 요소와 패딩(padding) 요소입니다. margin은 정의된 요소 주위에 공간 여백을 늘리는 반면, padding은 컨텐츠를 기점으로 공간이 생긴다고 보시면 되는데, 이는 쉽게 생각해서, 위로 공간이 생기는 것이 margin, 아래에 공간이 생기는 것이 padding이라고 생각하시면 됩니다. 예를 한번 들어볼까요 로 이루어진 컨테이너 박스에 상단 40px 정도 top 여백을 주고 싶습니다. 이때는 padding 값을 주어야 할까요? margin 값을 주어야 할까요? 답은 위에서도 알 수 있듯이, margin 값입니다. padding은 컨텐츠와 박스 사이에 공간감만 줄 수 있기 때문에 컨텐츠 자체를 위에서부터 밀어내려면 margin-top 값을 주어 처..
css 홈페이지 선 만들고 긋기 (border) 홈페이지에서 선을 만들어 주는 css속성인 border속성은 색상,두께,형태,방향 4가지의 방식으로 제어를 할 수 있습니다. 일반적인 선을 비롯해 둥근선, 아랫쪽만 표현, 주석표현 등 쓰임에 따라 의미를 부여할 수 있는 장점이 있고, border값과 필수로 사용되어야 할 css속성은 바로 padding인데 이는 텍스트와 선의 간격을 벌려주는 중요한 역할을 해줍니다. ​ 기본 단축코드는 3속성을 혼합해 사용 할 수 있는 반면, 개별로 적용하면 각각 입력해 주어야 합니다. 단 선을 생성하주는 필수 코드인 style은 꼭 명시를 해야하니 참고 해 주세요 :) [기본 단축코드] border: width / style (필수) / color border: 5px solid red; border-style: sol..
css 배경 이미지 제어하기 background 속성은 배경 효과를 제어하는데 쓰이며, 크게는 바탕 컬러를 색으로 지정하거나 이미지를 배경으로 사용하고 싶을 때, 쓰이는 용어입니다. 마찬가지로 각 언어에 따른 제어 용어가 틀리는 것은 물론, 상황에 따라 복합 언어로 속성을 컨트롤해야 합니다. [단축 코드] background-color / image / repeat / attachment / position body { background: #ffffff url("img_tree.png") no-repeat right top; } [주요 코드] background-color background-image background-repeat background-position background-size background-attachm..

티스토리툴바