CLIEN

본문 바로가기 메뉴 바로가기 보기설정 테마설정
톺아보기 공감글
커뮤니티 커뮤니티전체 C 모두의광장 F 모두의공원 I 사진게시판 Q 아무거나질문 D 정보와자료 N 새로운소식 T 유용한사이트 P 자료실 E 강좌/사용기 L 팁과강좌 U 사용기 · 체험단사용기 W 사고팔고 J 알뜰구매 S 회원중고장터 B 직접홍보 · 보험상담실 H 클리앙홈
소모임 소모임전체 ·굴러간당 ·아이포니앙 ·주식한당 ·MaClien ·일본산당 ·방탄소년당 ·개발한당 ·자전거당 ·안드로메당 ·이륜차당 ·소셜게임한당 ·나스당 ·골프당 ·가상화폐당 ·소시당 ·물고기당 ·클다방 ·덕질한당 ·요리한당 ·스팀한당 ·AI그림당 ·바다건너당 ·노젓는당 ·패스오브엑자일당 ·WOW당 ·창업한당 ·AI당 ·테스트당 ·키보드당 ·육아당 ·여행을떠난당 ·콘솔한당 ·갖고다닌당 ·PC튜닝한당 ·사과시계당 ·위스키당 ·3D메이킹 ·X세대당 ·ADHD당 ·날아간당 ·배드민턴당 ·야구당 ·농구당 ·블랙베리당 ·곰돌이당 ·비어있당 ·FM당구당 ·블록체인당 ·보드게임당 ·활자중독당 ·볼링친당 ·캠핑간당 ·냐옹이당 ·문명하셨당 ·클래시앙 ·쿠키런당 ·대구당 ·DANGER당 ·뚝딱뚝당 ·디아블로당 ·개판이당 ·동숲한당 ·날아올랑 ·전기자전거당 ·e북본당 ·이브한당 ·패셔니앙 ·도시어부당 ·FM한당 ·맛있겠당 ·포뮬러당 ·젬워한당 ·걸그룹당 ·안경쓴당 ·차턴당 ·총쏜당 ·땀흘린당 ·하스스톤한당 ·히어로즈한당 ·인스타한당 ·IoT당 ·KARA당 ·꼬들한당 ·어학당 ·가죽당 ·레고당 ·리눅서당 ·LOLien ·Mabinogien ·임시소모임 ·미드당 ·밀리터리당 ·땅판당 ·헌팅한당 ·오른당 ·영화본당 ·MTG한당 ·소리당 ·노키앙 ·적는당 ·방송한당 ·찰칵찍당 ·그림그린당 ·소풍간당 ·심는당 ·라즈베리파이당 ·품앱이당 ·리듬탄당 ·달린당 ·Sea마당 ·SimSim하당 ·심야식당 ·윈태블릿당 ·미끄러진당 ·축구당 ·나혼자산당 ·스타한당 ·파도탄당 ·퐁당퐁당 ·테니스친당 ·빨콩이당 ·공대시계당 ·터치패드당 ·트윗당 ·VR당 ·시계찬당 ·WebOs당 ·와인마신당 ·윈폰이당
임시소모임
고객지원
  • 게시물 삭제 요청
  • 불법촬영물등 신고
  • 쪽지 신고
  • 닉네임 신고
  • 제보 및 기타 제안
© CLIEN.NET
공지[점검] 잠시후 서비스 점검을 위해 약 30분간 접속이 차단됩니다. (금일 18:15 ~ 18:45)

팁과강좌

PC/모바일 코딩 1도 모르는 사람의 웹사이트 제작법 - 번외 1 (디자인모드) 3

4
2019-10-04 14:48:36 수정일 : 2019-10-04 14:50:08 125.♡.124.22
먹갭

지난번에 아임웹을 이용해서 직접 웹사이트를 제작하는 법에 대해 간단하게 글을 작성했었는데

개인적으로 디자인에 대한 부분이 조금은 부실했던것이 아쉬웠습니다 ㅎㅎ;

마침 일도 많지 않아 시간 여유가 있는지라 틈틈히 아임웹 디자인모드에 대한 공부를 조금 더 하고

글쓰기 연습도 할겸 디자인에 대한 강좌를 더 작성해보려고 합니다..!


비 전공자 인데다가 벼락치기로 단기간에 배운 지식이라 전문가분들의 디테일한 스킬에 비할 순 없지만,

저와같은 초심자 분들이 보시고 '아~ 이런식이구나' 하는 정도의 느낌만 받으셔도 행복할것 같습니다 ㅎㅎ.


※지난글 링크


코딩 1도 모르는 사람의 웹사이트 제작법 1 - https://www.clien.net/service/board/lecture/13954210CLIEN

코딩 1도 모르는 사람의 웹사이트 제작법 2 - https://www.clien.net/service/board/lecture/13983656CLIEN

코딩 1도 모르는 사람의 웹사이트 제작법 3 - https://www.clien.net/service/board/lecture/14022623CLIEN


아임웹 디자인모드의 영역은 크게 3가지(상단, 본문, 하단) 로 나뉘어집니다.


잘못된 형식의 이미지 링크입니다.

제가 녹색으로 칠해놓은 공간중 윗 부분을 '상단', 아랫부분을 '하단', 그리고 이외의 주요 내용이 들어가는 가운데 부분이 '본문' 입니다.

보통 상단에는 주로 카테고리와 사이트명, 회원가입 그리고 로그인에 관련한 메뉴들이 있고 하단은 오프라인 주소 혹은 이메일, 팩스번호와 같은 사이트에 대한 정보가 기재되어있는것이 일반적입니다.


이번에 제가 선택한 템플릿의 경우 상단에 총 4개의 메뉴가 세팅되어있네요.

제가 원하는 상단 메뉴는 ABOUT US / GALLERY / COMMUNITY 이렇게 총 3가지 이기 때문에

살짝 수정을 하도록 하겠습니다.



좌측 상단의 메뉴관리를 클릭하면 메뉴에 대한 설정창을 불러올 수 있고

이 설정에서 메뉴의 이름을 변경하거나 삭제, 추가할 수 있습니다.

(변경한 내용들은 디자인모드에 곧바로 적용됩니다.)


메뉴명을 바꿔줬으니 이번엔 내용을 수정할 차례입니다.

가장 추천하는 방법은 아임웹에서 기본으로 만들어 놓은 섹션을 활용하는 방법인데요.


(빌더를 이용하는 가장 큰 이유)


사실 텅 빈 페이지에 작은 아이콘이나 텍스트 박스들을 하나하나 채워넣어 제작할 수도 있지만..

직접 도전해보니 전문가가 세팅해놓은 놓은 섹션의 퀄리티는 따라갈 수 없었습니다.. ㅠ

위처럼 미리 만들어진 섹션을 불러온 다음, 내용(텍스트, 이미지, 위치)을 내가 원하는 대로 수정하는 것이 가장 빠르고

퀄리티도 괜찮은 방법이라고 생각합니다.


이미지를 설정할때 아직 제작 초기 단계라서 제대로 준비된 이미지가 없다면 일단 무료 이미지를 사용하여 본문을 구성해 보시는것도 추천합니다.


(지난번 말씀 드렸던 것 처럼 어떤 섹션이든 우클릭을 통해 설정창으로 접근할 수 있습니다.)


이미지 설정에는 '무료 이미지' 라는 탭이 존재하는데,

여기서 제공되는 이미지들은 모두 영리목적으로 활용해도 괜찮은 이미지들 이라고 하니

원하는 느낌과 일치하는 자료가 있다면 자유롭게 사용하면 됩니다.


이번글 에서는 아임웹의 상단 메뉴 편집과 새로운 본문 제작 방법에 대해서 살펴보았습니다.

사실 굉장히 별거 아닌 작업이지만, 이 별거 아닌 작업을 통해 내 웹사이트를 만들 수 있다는게

웹빌더의 가장 큰 장점인듯 합니다 ㅎㅎ.


다음번에는 조금 더 디테일하게 섹션을 활용해보려고 합니다.

부족한 글 읽어주셔서 감사합니다!

먹갭 님의 게시글 댓글
  • 주소복사
  • Facebook
  • X(Twitter)
댓글 • [3]
수수깡65
IP 175.♡.34.122
10-19 2019-10-19 05:52:43
·
감사합니다. 다음에 다시 읽어볼게요~
suncain0988
IP 123.♡.242.41
05-26 2020-05-26 21:21:19
·
윅스보다 더 효율적이여서 굉장히 유용해 보여요. ㅎㅎ
손님어디로가십니까?
IP 126.♡.162.8
10-15 2020-10-15 00:27:22
·
좋은 정보 감사합니다.
새로운 댓글이 없습니다.
이미지 최대 업로드 용량 15 MB / 업로드 가능 확장자 jpg,gif,png,jpeg,webp
지나치게 큰 이미지의 크기는 조정될 수 있습니다.
목록으로
글쓰기
글쓰기
목록으로 댓글보기 이전글 다음글
아이디  ·  비밀번호 찾기 회원가입
이용규칙 운영알림판 운영소통 재검토요청 도움말 버그신고
개인정보처리방침 이용약관 책임의 한계와 법적고지 청소년 보호정책
©   •  CLIEN.NET
보안 강화를 위한 이메일 인증
안전한 서비스 이용을 위해 이메일 인증을 완료해 주세요. 현재 회원님은 이메일 인증이 완료되지 않은 상태입니다.
최근 급증하는 해킹 및 도용 시도로부터 계정을 보호하기 위해 인증 절차가 강화되었습니다.

  • 이메일 미인증 시 글쓰기, 댓글 작성 등 게시판 활동이 제한됩니다.
  • 이후 새로운 기기에서 로그인할 때마다 반드시 이메일 인증을 거쳐야 합니다.
  • 2단계 인증 사용 회원도 최초 1회는 반드시 인증하여야 합니다.
  • 개인정보에서도 이메일 인증을 할 수 있습니다.
지금 이메일 인증하기
등록된 이메일 주소를 확인하고 인증번호를 입력하여
인증을 완료해 주세요.