웹디자인 팁(TIP)



"회원으로 가입하시면 모든 내용을 무료로 살펴보실 수 있습니다."

  1. position의 속성을 알아보자 (3) (relative & absolute)

    position 의 속성인 relative, absolute가 잘 이해가 가셨나요? 예전에는 홈페이지를 제작할 때 TABLE을 많이 썼습니다. 하지만 최근 '웹표준코딩'이라는 추세가 이어지면서 DIV를 이용한 코딩은 이제 필수사항으로 여겨지고 있습니다. DIV를 이용한 레이아웃...
    CategoryHTML/CSS file
    Read More
  2. position의 속성을 알아보자 (2) (position:relative, static)

    절대적 위치좌표 상대적 위치좌표 부모레이아웃을 기준으로 X좌표와 Y좌표를 이용해 절대적인 위치를 지정할 수 있다. 동일선상의 레이아웃을 기준으로 X좌표와 Y좌표 또는 margin, padding 값을 이용해 상대적인 위치를 지정할 수 있다. position:absolute (...
    CategoryHTML/CSS file
    Read More
  3. position 속성 (1) (position:absolute, fixed)

    position 위치 속성은 레이아웃의 위치를 잡기 위해 사용되는 속성입니다. 절대적 위치좌표 상대적 위치좌표 부모레이아웃을 기준으로 X좌표와 Y좌표를 이용해 절대적인 위치를 지정할 수 있다. 동일선상의 레이아웃을 기준으로 X좌표와 Y좌표 또는 margin, pa...
    CategoryHTML/CSS file
    Read More
  4. overflow 의 속성 (overflow:hidden, scroll)

    overflow 는 일정한 박스영역을 지정했을 때 텍스트 내용이나 안의 컨텐츠들이 박스영역을 벗어났을 때 어떻게 보여질지를 결정하는 코드입니다. 속성값에는 visible 내용이 영역을 벗어날 경우 자르지 않고 영역 바깥쪽에도 표시함 hidden 내용이 영역을 벗어...
    CategoryHTML/CSS file
    Read More
  5. 흑백사진 만들기 & 부분 강조 사진 만들기

    1. 효과를 주고 싶은 사진을 열어주세요. 저는 귀여운 미니미니들이 있는 사진을 꺼냈습니다 ^^ 레이어에서 배경을 복사(ctrl+J) 해 동일한 이미지 하나를 더 생성해주세요. 2. 이미지 -> 조정 ->흑백을 클릭해 복사한 이미지를 흑백으로 만들어주세요 (ctrl+s...
    CategoryPHOTOSHOP file
    Read More
  6. 다음(daum)에서 약도만들기를 이용하여 지도api를 만들어보자

    요즘 홈페이지들을 보면 지도api라는 기능을 많이 사용합니다. 네이버지도api는 로그인 사용자 정보도 필요하고 아이디마다 제한마저 있기 때문에 다음에서 제공하는 '약도만들기' 아래 링크를 클릭하시면 하단에 '약도만들기'라는 메뉴가 있습니다. http://de...
    CategoryETC file
    Read More
  7. 내 홈페이지 오른쪽 마우스 클릭 금지!

    내 홈페이지의 컨텐츠를 보호하고 싶을 때 필요한 기능이 바로 '우클릭금지' 입니다. 최근 홈페이지 빌더나 블로그에서 우클릭 금지 기능을 제공하기도 하지만 기본적인 소스는 알아야겠죠? oncontextmenu="return false" : 오른쪽 마우스버튼 막기 onseletsta...
    CategoryHTML/CSS file
    Read More
  8. CSS 여백속성(Margin, Padding)에 대해 알아보자

    CSS에서 여백속성은 Margin 과 Padding 이 있습니다. 컨텐츠를 border가 감쌌다고 가정했을 때 border 안쪽 여백은 Padding (컨텐츠와 border 사이의 값) border 바깥쪽 여백은 Margin (border와 브라우저 사이의 값) 위의 속성으로 여백값을 지정할 수 있습니...
    CategoryHTML/CSS file
    Read More
  9. 포토샵 애니메이션으로 깜박이는 이미지(gif) 만들기

    1. 새 창을 열고 레이어별로 내용을 채워주세요. 2. 메뉴에서 '창'을 클릭 '애니메이션'을 클릭합니다. 3. 애니메이션(타임라인) 창을 -> 애니메이션(프레임) 창으로 전환합니다. 4. 애니메이션 시간을 0.2초로 변경하고 한번-> 계속으로 변경한후, 프레임 복...
    CategoryPHOTOSHOP file
    Read More
  10. 모양도구(Shape)툴을 이용해 말풍선을 만들어보자

    1. 말풍선을 추가하고자 하는 이미지를 열기합니다. 그리고 아래 이미지처럼 도구를 선택합니다. 2. 아래처럼 '사용자 정의 모양 도구'를 선택하면 '모양 : '으로 우측에 ▼을 클릭하면 다양한 모양의 도구툴이 확인 됩니다. 말풍선 모양을 클릭해 주세요. 3.말...
    CategoryPHOTOSHOP file
    Read More
  11. 나만의 패턴(Pattern)을 만들어보자!

    1. 5x5 의 새창을 엽니다. 2. 열린 창을 최대한 크게 확대합니다. 세밀한 작업이 필요하기 때문입니다. 3. 새 레이어를 추가합니다. 4. 연필툴 (브러시툴) 을 선택하고 마스터직경을 1px로 맞춰주세요. 5. 새로 추가한 레이어에 사선으로 점을 찍어주세요. 6. ...
    CategoryPHOTOSHOP file
    Read More
  12. CSS 중 border의 속성과 기능에 대해 알아보자

    1. border-style; 테두리의 유무/테두리의 속성 border-style : none; 테두리가 존재하지 않음 border-style : solid; 테두리가 일직선 border-style : dotted; 테두리가 짧은 점선 border-style : dashed; 테두리가 폭이 긴 점선 2. border-color 테두리의 색...
    CategoryHTML/CSS file
    Read More
  13. 패턴(Pattern) 기능을 이용한 배경 만들기 & 사이트 소개

    1. 배경패턴으로 만들고 싶은 이미지를 불러온 후 편집-> 패턴 정의를 클릭합니다. 2. 패턴 이름을 지정한 후 확인을 클릭합니다 3. 패턴배경을 적용할 새 창을 엽니다. 4. 편집-> 칠을 클릭합니다. 5. 사용란의 패턴을 클릭 -> 사용자 정의 패턴에서 등록한 ...
    CategoryPHOTOSHOP file
    Read More
  14. 포토샵에서 글꼴 이름을 영어로 바꾸기

    포토샵에서 종종 발생하는 포토샵 열기 오류가 있습니다. 윈도우와 adobe사의 프로그램 사이의 충돌 때문인데요. 아래와 같이 편집 -> 환경설정 -> 문자로 클릭합니다. 아래처럼 환경 설정 창이 보여지면 '글꼴 이름을 영어로 표시' 란을 체크하면 간단하게 해...
    CategoryPHOTOSHOP file
    Read More
  15. a태그와 링크css 속성을 알아보자!

    a 태그란? 텍스트나 이미지 등의 속성에 링크를 걸 수 있는 태그로 화면 이동이나 스크립트 속성에 사용되는 태그로 많이 사용된다. a 태그의 기본 속성은 <a href="링크주소" target="창의속성" title="툴팁">텍스트나 이미지</a> 1. href : 링크이름과 연결...
    CategoryHTML/CSS file
    Read More
  16. 많이 쓰이는 포토샵 단축키에 대해 알아보자!

    * Ctrl + N : 새 문서 만들기 * Ctrl + Shift +N : 레이어에 새 레이어 추가하기 * Ctrl + O 또는 작업창 배경에서 더블클릭 : 열기 * Ctrl + S : 저장 * Ctrl + Shift + S : 다른 이름으로 저장 * Ctrl + Shift + Alt +S : 웹 및 장치용으로 저장 * Ctrl + A ...
    CategoryPHOTOSHOP file
    Read More
  17. CSS에서 가장 많이 쓰이는 문자(font, text) 속성에 대해서 알아보자!

    CSS를 접하다보면 가장 많이 눈에 띄는 것이 문자(font, text) 속성입니다. 문자 속성은 아래와 같습니다. 글씨서체 font-family : '나눔고딕', 'Dotum' (글씨서체는 ,로 구분하며 나눔고딕 없으면 돋움이 나오는 식으로 기재된 순서대로 글씨 호출) 글씨크기 ...
    CategoryHTML/CSS file
    Read More
  18. 내 홈페이지에 즐겨찾기를 추가하자!

    1. 홈페이지에 즐겨찾기 버튼을 만들어 추가해 주세요. 2. 즐겨찾기 코드를 추가해주세요. 최근 크롬 등의 브라우저를 사용하는 사용자가 많기 때문에 크롬 시 안내문도 추가해 줍니다. <a onclick="try{window.external.AddFavorite(location.href, document....
    CategoryETC file
    Read More
  19. 홈페이지제작에 유용한 포토샵 스타일을 이용한 버튼 만들기

    포토샵 기능 중 활용도가 높은 스타일 기능을 소개합니다. 1. 새 창을 열어 레이어를 추가해 주세요. 2. 추가된 레이어에 사각형 툴을 이용해 원하는 모양의 버튼을 만들어 주세요. 3. 창 -> 스타일을 클릭하여 스타일창을 띄웁니다. 4. ▼을 클릭해 스타일 불...
    CategoryPHOTOSHOP file
    Read More
  20. 홈페이지제작에 유용한 무료 브러시 사이트 소개

    홈페이지만들기, 홈페이지제작을 할 때 이미지 외에 브러시나 패턴 등을 쓰게 될 경우가 있습니다. 헌데 찾으면 없고~ 찾기 막막할 때 참고가 될만한 유용한 사이트입니다. 아래 강좌에서 보여드린 구름브러쉬를 발견한 사이트입니다. 많은 브러쉬가 있으니 천...
    CategoryETC file
    Read More
  21. 홈페이지제작에 유용한 포토샵 브러쉬 활용하기 (구름브러쉬)

    1. 포토샵에서 자주 쓰이는 기능 중 브러쉬(Brush)라는 기능이 있습니다. 왼쪽 툴박스에서 브러쉬를 선택한 후 마우스 '우클릭'을 하면 아래처럼 브러쉬 선택 팝업이 확인됩니다. 2. 선택 후 왼쪽 상단을 확인하면 브러쉬에 대한 선택툴이 나타나고 ▼을 클릭하...
    CategoryPHOTOSHOP file
    Read More
  22. 홈페이지제작 시 div와 플래시를 겹치게 쓸 경우 추가 설정으로 해결하는 방법

    홈페이지제작을 할 때 상단의 메뉴를 div 로 제작하고 메인이미지를 플래시Flash로 제작하면서 겹쳐지게 제작하는 경우가 있습니다. 하지만 아래처럼 2단 메뉴와 플래시가 겹쳐 보이지 않는 경우 때문에 문제가 생깁니다. << wmode 속성 transparent 적용 전 >...
    CategoryETC file
    Read More
Board Pagination Prev 1 Next
/ 1