위 사진과 같이 네비게이션 바의 메뉴에서 항목과 항목 사이를 분리하는 것을 HORIZONTAL LIST SEPARATOR(한국말이 적당한게 없네요.)라고 하는데 이를 삽입하는 CSS는 다음과 같습니다. 서울 인천 부산 여기서 first-child 선택자는 li항목의 첫번째 항목을 선택하는 방법입니다. 마지막을 선택하는 것은 last-child입니다. 이와같이 첫번째와 마지막을 선택할 수 있는데 중간의 몇번째에 해당하는 것을 선택하려면 nth-child(3) 를 사용합니다. 세번째 항목을 선택하는 것이죠.
브러시로 만들고자하는 그림이나 사진을 불러온 다음 메뉴에서 편집(edit)-브러시 사용자정의(Define brush preset)을 클릭하면 1과 같은 창이 나옵니다. 2번에서 이름을 적당한 것으로 입력하고 3을 클릭합니다. 1의 브러시를 선택하고 2에서 작은 세모를 클릭하면 브러시 박스가 나옵니다. 3의 스크롤바를 내리면 마지막에 4번의 브러시가 저장되어있습니다. 이것을 클릭하고 5번에서 사이즈를 조정한뒤 6에서 색상을 선택하여 빈공간에 클릭하면 원하는 색상의 브러시가 찍힙니다. 브러시는 한가지 색상만 가능합니다.
웹페이지 작업시 가장 먼저 하게 되는 것이 웹페이지에 대한 설계인데 미리 종이나 포토샵을 이용해서 그림을 그려서 전체적인 규모와 배치를 하게 됩니다. 포토샵을 이용하면 색상과 효과를 쉽게 적용할 수 있어서 편리하므로 대부분의 설계단계에서는 포토샵을 이용합니다. 레이아웃에 있어서 피해야할 것은 전통적으로 페이지레이아웃을 테이블태그를 이용했는데 이 방식은 CSS가 배우기 어렵고 브라우저마다 특성이 있어서 페이지를 나타내는 방식이 다르다보니 한동안 레이아웃의 표준으로 자리를 잡았었고 아직도 이방식을 이용하고 있습니다. 하지만 컬럼을 하나 추가한다든가 좌우의 컬럼을 서로 바꾼다든가 하는 페이지를 수정한다거나 할때 수정이 아니라 처음부터 다시 작업하는게 나을 정도로 테이블레이아웃 방식은 수정하기가 어렵습니다. 하..
파이어폭스는 개발자들이 많아서 플러그인이나 애드온 같은 추가기능을 설치할 수 있는데 그중 폰트를 찾아주는 플러그인이 있습니다. 단, 파이어폭스를 이용해야 가능합니다. 그리고 이미지로 되어있는 것은 안되고요. https://addons.mozilla.org/en-US/firefox/addon/font-finder/ 위 링크에서 다운 받아 설치하면 됩니다. 웹페이지에서 알고 싶은 폰트가 있는 경우 글자를 클릭 드래그 해서 블럭설정을 한다음 우클릭하면 메뉴가 나옵니다. 폰트파인더를 클릭하면 서브메뉴가 나오는데 Analize Selection을 클릭하면 폰트의 이름과 레이아웃관련 정보까지 검색이 됩니다.
한글폰트는 영문폰트에 비해서 양이 많지 않으니 찾기 수월하지만 영문의 경우는 아주 어렵습니다. 비슷한 폰트들도 많고 양도 많아서 원하는 폰트를 찾기가 쉽지 않죠. 해외 영문폰트 사이트 중에 이미지를 스캔하거나 기존의 폰트가 있는 이미지를 업로드해서 검색해주는 사이트가 있습니다. 하지만 모든 폰트를 보유하고 있는 것이 아니어서 업로드한 폰트중 50%정도는 찾을 수가 있습니다. 더구나 이미지가 선명하고 검색조건에 맞는다면 폰트를 찾을 확률이 높아집니다. 어떤 경우는 일러스트레이터로 이미지를 만들어서 업로드하면 원하는 답을 찾을 수가 있습니다. 또한 웹페이지 주소를 입력해도 폰트를 찾을 수 있습니다. 가장 기본적인 업로드 이미지 조건은 폰트의 간격이 좀 떨어져 있어야하고 높이가 100px이상이면 됩니다. 배경..
중세 고딕양식 형태 대표적인 폰트인 Old London체입니다.
무료폰트 사이트에서 폰트를 사용하는데 있어서 주의할 점이 있습니다. Free for personal use 개인용으로 사용할 경우 무제한 사용가능한 폰트입니다. 상업적 용도는 안됩니다. Free- 개인용 상업용 사용가능합니다. demo- 주로 개인이 만드는데 폰트의 일부만 업로드 해 놓고 전체를 사용하려면 이메일을 보내면 얼마를 어디로 입금하는 조건으로 답장을 줍니다. 한글폰트도 데모버전이 있지만 한글은 개인이 만들수가 없습니다. 글자의 수가 워낙에 많기 때문이죠. 그래서 기업이 만드는데 인증제도로 일정기간만 사용이 가능한 폰트입니다. shareware- 이것도 개인이 만드는데 사용하거나 보관만 해도 돈을 지불해야한다는 경고문이 있습니다. 이런 것은 사용하지 않는게 좋습니다. donationware- 사..
영문 무료폰트는 엄청 많습니다. 영문폰트가 만들기도 쉽지만 종류도 다양해서 무료폰트 사이트에 가면 다운 받아 사용할 수 있지만 상업용으로 제한이 있는 경우가 있으니 주의해야합니다. 하지만 개인용으로 사용하는 것은 제한이 없습니다. 소개하는 폰트는 숫자폰트인데요. 두자리이상의 숫자에 둥근 외곽선을 만들 수가 있어서 아주 유용합니다. 다음의 사진은 예제입니다. 첨부된 pdf파일을 보니 상업용 제한은 없지만 이것을 팔거나 수정하면 안된답니다. 다른 숫자폰트
포토샵에서 적당한 크기의 새문서를 만듭니다. 1번의 색상도구의 전경색을 클릭하고 2에서 파란 색을 선택하고 나온 다음, 단축키로 alt+delete키를 누르면 전경색이 문서에 입혀집니다. 1번의 새레이어만들기 아이콘을 클릭하면 2번에 레이어가 만들어집니다. Shift+Backspace키를 누르면 fill 창이 3번의 50%Gray로 되어있는 상태로 나옵니다. 4의 OK버튼을 클릭하면 2번 레이어에 회색이 입혀집니다. 필터를 적용하기 위해서 빈레이어에 회색을 칠하는 것입니다. 색상도구에서 기본색인 전경색 검정, 배경색 흰색을 선택하고 화면 상단 메뉴의 필터에서 스케치(Sketch)를 클릭하고 1의 하프톤패턴을 선택하면 큰 창이 나옵니다. 2번의 라인을 선택하고 3의 사이즈는 1, 4의 콘트라스트는 값을 0..
