홈페이지만들기 10
[아임웹] 로고 변경하기
안녕하세요. 플입니다. 아임웹에서 로고를 변경해보겠습니다. 1. 디자인모드 내사이트 > 관리 메뉴를 클릭해 관리자 페이지로 들어가 줍니다. 왼쪽 메뉴를 보시면 디자인모드라는 메뉴가 있는데 클릭해서 디자인모드를 열어줍니다. 2. 상단설정 로고는 위에 표시된 부분을 변경할 것입니다. 우측 상단에 상단설정 메뉴를 클릭해주세요. (너무나 우리를 쳐다보는 시선이 느껴지지만 무시합니다.) 3. 로고 설정 상단 설정 페이지에 들어오면 로고를 변경할 수 있습니다. 로고에 마우스를 올리고 오른쪽 클릭을 하면 메뉴를 확인할 수 있습니다. 메뉴 중 로고 설정을 클릭해주세요. 간단하게 이름만 바꾸고 싶다면 표시된 부분, 타이틀명에서 이름을 변경해줍니다. 코딩을 몰라도 디자인을 간편하게 변경할 수 있습니다. 원하는 폰트를 골라..
[아임웹] 여백 추가하기
안녕하세요. 플입니다. 아임웹에서 여백을 추가해보겠습니다. 1. 디자인 모드 내사이트 > 관리 버튼을 클릭해 관리 페이지로 넘어갑니다. 관리 페이지 왼쪽 메뉴를 보면 디자인 모드 메뉴가 있습니다. 디자인 모드를 클릭합니다. 2. 추가 하기 여백을 넣고 싶은 곳의 경계에서 마우스를 움직이다 보면 +모양의 버튼이 나타납니다. +모양 버튼을 클릭해주세요. 여러 가지를 추가할 수 있는데 그중 여백을 선택합니다. 3. 여백 설정 여백이 만들어지면 여백에서 오른쪽 클릭을 해 여백 설정을 할 수 있습니다. 여백 설정 메뉴를 클릭합니다. 설정창이 뜨면 원하는 높이를 설정해줍니다. 저는 50px정도를 설정했습니다. 설정 창을 닫고 나오면 여백 설정이 완료된 것을 확인할 수 있습니다. 그럼 이만. 총총.
[아임웹] 이미지 바꾸기
안녕하세요. 플입니다. 아임웹에서 이미지를 변경해보겠습니다. 1. 관리 (잘 안 보여서 왼쪽을 일부 잘랐습니다.) 오른쪽 상단에서 내 사이트 메뉴를 클릭하면 내 사이트 목록이 뜨고 관리가 가능합니다. 수정할 사이트의 관리 버튼을 누릅니다. 디자인 수정은 왼쪽 메뉴에서 디자인 모드를 선택합니다. 디자인 모드에서 수정이 가능합니다. 2. 이미지 변경 디자인 모드에서는 각자 골랐던 템플릿이 설정되어 있을 겁니다. 변경하고 싶은 이미지에서 오른쪽 클릭을 한 뒤 설정에 들어갑니다. 수정하려는 부분이 비주얼이라 비주얼 설정이라고 적혀있는데 다른 이미지는 이미지 설정이라고 적혀있습니다. 설정 창이 뜨면 이미지 업로드 버튼을 선택합니다. 폴더에서 원하는 이미지를 선택하면 이미지가 뙇! 변경됩니다. 이미지의 위치도 간략..
[반응형] 스터디카페
안녕하세요. 플입니다. 오늘은 wix로 작업한 반응형홈페이지가 완성되어서 가져왔습니다. wix로 작업하니까 작업시간이 코딩할 때보다 빠르네요.(당연) 모바일 작업까지 마친 상태입니다. wix 작업은 포토샵이나 코딩을 몰라도 홈페이지 작업이 가능해서 전문가가 아니어도 손쉽게 홈페이지를 만들 수 있습니다. 물론 조금 타협해야 하는 부분도 있습니다. 전체 가로사이즈가 고정돼있는 점이라거나, 드롭다운(하위 메뉴)의 디자인이 자유롭지 못한 점은 아쉽지만 무료로 홈페이지를 제작해 띄울 수 있다는 점을 생각한다면 괜찮다고 생각합니다. 호스팅이나 도메인 비용이 따로 들지 않는다는 점도 장점이죠. 다만 wix의 광고를 없애고 싶으시다면 도메인을 따로 구매해서 연결해야 합니다. 도메인 구매는 별도로 하셔야 하고, 윅스에 ..
[wix] 모바일 디자인
안녕하세요. 플입니다. 오늘은 모바일 디자인을 해보겠습니다. 1. 모바일 버전 변경 모바일 디자인은 상단에 모바일을 누르면 변경할 수 있습니다. 2. 메뉴 디자인 모바일 메뉴를 선택하면 디자인 변경이 가능합니다. 디자인 사용자 지정을 들어가 디자인을 마음에 들게 변경합니다. 모바일 메뉴의 확장 디자인도 여기서 변경이 가능합니다. 3. 배경 변경 배경의 글씨가 모바일에서는 잘려 보여서 수정해주려고 합니다. 좌측 메뉴에서 배경 > 이미지를 눌러주세요. 이미지에 마우스를 올리면 더보기 아이콘이 뜹니다. 여기서 이미지 자르기 및 편집이 가능합니다. 임의로 크기를 지정해줘도 괜찮고 저처럼 크기 및 비율로 정해줘도 괜찮습니다. 수정이 끝났다면 저장을 눌러주세요. 이미지가 추가된 것을 확인할 수 있습니다. 이미지를 ..