왕초보의 쇼핑몰제작 도전기

오늘 배울 내용을 먼저 정리해 봅니다. #하이퍼링크       #책갈피 기능       # 태그       #id 속성 이번 포스팅에서는  태그를 이용하여 페이지 내 상하 이동하는책갈피 기능을 구현해 봅니다^^ 기본형식#이동하려는 id">id 속성 지정원하는 위치의 태그 속성에 id 지정ex sub1">문서제목중요! 한문서 안에서 동일한 이름으로 id 지정할 수 없음예전에 가벼운 홍보 홈페이지를 만들때, 카달로그와 같이, 웹페이지 1개로 만드는 게 유행했었어요. 이전 포스팅에서 여러 페이지로 구현했던 내용들을 한 개의 페이지로 통합해서, 상하 이동하는 방식으로 구현해 보겠습니다.무엇이 선행되어야 할까요? 1개의 기다란 웹페이지이동할 위치 지정0) 먼저, 계획을 세워 볼게요! 4개 페이지를 하나로 합치고,..

오늘 배울 내용을 먼저 정리해 봅니다. #하이퍼링크 #텍스트에 링크 걸기 #태그 #href 속성 #target 속성 이번 포스팅에서는 실제 태그를 이용해서 하이퍼링크 기능을 구현해 봅니다^^ 기본형식 ="이동하려는 주소"> 텍스트or이미지 속성 target="이동하는 창 지정" ; "_self" 현재 창에서 이동(디폴트) "_blank" 새창 열어 이동웹페이지 내, 페이지 이동과 외부사이트로의 이동을 다뤄보려고 해요! html 파일들과 관련 리소스(영상,이미지 등)의 폴더 정리가 한 곳에 잘 정리되어 있어야 수월합니다^^ 어떤 것들이 선행 되어있어야 할까요? 시작페이지와 상세페이지들 몇 개가 필요한데요, 상세페이지들은 블로그 작성하면서 만들었던 웹페이지..

오늘 배울 내용을 미리 정리해 봅니다. #ip주소 #도메인_DNS 주소 #주소체계 #하이퍼링크 #태그 이번 포스팅은 아주 중요한 내용이에요!여러 웹페이지를 연결시키는 내용에 대한 건데요, 이름하여 하.이.퍼.링.크. 하이퍼링크란...? 한 웹페이지에서 다른 웹사이트나, 웹페이지, 문서, 파일 등으로 연결해주는 링크를 의미합니다. 텍스트 또는 이미지에 삽입 가능하며, HTML에서는 태그로 구현을 합니다. 하이퍼링크 기능을 구현하기 앞서, 인터넷 주소의 체계와 작동 방식에 대해 정리해 볼게요. 이게 실제 웹사이트 개발하는 데 있어서 작동 원리와 구조를 파악하는 데 도움이 많이 될 것 같더라구요. 인터넷 주소 2가지, IP 주소와 DNS 주소IP 주소In..

오늘 배울 내용의 주요 키워드를 먼저 정리해 봅니다. #_동영상 삽입 태그       #유투브 주소 따기 비디오 파일 형식        #쿠콘트롤 속성       #자동재생 속성      #루프 속성     #크기 속성 이제 이미지 삽입을 할 수 있게 되었으니, 동영상 삽입을 알아볼까요? 유투브에 있는 동영상을 삽입할 수 있나요? YES! 인터넷상 올려진 동영상을  내가 만드는 문서에 불러오도록 코딩할 수 있어요. 유투브에서 검색한 동영상을 삽입해 보겠습니다!1) 인터넷 동영상의 소스코드를 수집해요 유투브 동영상 선택 --> 공유 --> 퍼가기(소스코드 복사) --> (메모장에 붙이기)주의!) 일반 링크만 가져와서는 삽입할 수가 없어요! 만드시 소스째 복사해야 해요!tip) 네이버TV에서는 마우스 우클릭..

오늘 배울 내용의 주요 카워드를 먼저 정리해 봅니다. # 태그_이미지 삽입        #src 속성           #크기 속성  이번 포스팅은웹문서에 이미지 삽입하는 태그입니다!(뭔가 더 재밌어집니다^^) 기본형식 img src=" 이미지주소" alt="이미지이름">중요!) alt 값은 어떤 이유에서든 이미지를 불러올 수 없을 때 표기되는 임시 값입니다. 이게 있어야 웹표준을 지키는 것이라 웹문서 품질이 떨어지지 않습니다!속성  width="숫자(픽셀)" height="숫자(픽셀)"  align="left/center/right" 인터넷 상에 있는 사진을 삽입할 수 있나요?  YES! 인터넷 상에서 볼 수 있는 사진을 내가 만드는 문서에 불러오도록 코딩할 수 있어요. 검색 사이트에서 검색한 사진을 ..

오늘 포스팅의 주요 키워드를 먼저 정리해 봅니다.#HTML      #element        #tag       #에디터 프로그램      #작업환경  세팅 코딩의 가장 기본이 되는HTML부터 진도를 나갈 예정이랍니다.그.래.서 HTML 코딩을 하기 위한사전 준비 작업에 대해 먼저 알아 볼게요.  HTML이란... Hypertext Markup Language로, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 태그(tag)와 요소(element)로 구성되어 있는데, 태그_컴퓨터가 이해할 수 있는 언어를 정리해서 요소_화면에 나타날 내용을 표시하도록 합니다.  HTML  작업을 위해 필요한 건... HTML 편집기 프로그램 설치 - 비주얼스튜디..

오늘 포스팅의 주요 키워드를 먼저 정리해 봅니다.#앞으로 배울 것들     #웹표준    코...코딩이 버...벌써...OTL...예전에는 웹기획과 웹디자인이 구분되었지만최근 트렌드는 그 경계가 옅어지고 있다고 해요.디자인 실습을 병행하면서천천히 아주 차.근.차.근.  필.요.한. 수업만 진행해 갈 예정이랍니다. 무엇을 배우게 되나요? HTML5 ; 웹문서의 구조 담당CSS3 ; 웹문서의 디자인 담당Java script : 웹문서의 동작 담당 3가지나 배운다구요? 가장 익숙한 단어는 HTML인데요, HTML은 웹 페이지의 기본 구조를 HTML이 담당하고, CSS로 예쁘게 꾸며주고, 버튼이 움직이거나 변화하는 것 등의 동작은 JavaScript로 구현한다고 합니다. 웹 페이지를 자동차에 비유하자면, HTM..

이번 작업에 사용된 포토샵 툴을 먼저 소개합니다. #레이어스타일_모드 변경     #페인트 툴   #마법봉 툴    #선택영역 반전 쨔잔! 원본은 하나! 어떤 게 원본인지 찾아 보시겠어요?  마지막 사진은좀 티가 났네요^^ 원본사진은 가장 왼쪽! 빨간 헬멧 사진입니다! 파랑색과 보라색은 정말 감쪽 같지 않나요?^^ 지난 포스팅에 이어, 컬러를 조정하는 방법을 알아보려고 해요! 이전 포스팅에서 사용했던 image>adjustment>Hue/Saturation 은요, 바를 움직여서 색상을 조정하는 방식이기 때문에 내가 딱 원하는 컬러가 있을 때 그 색깔을 찾기가 어려워요! 내가 딱 원하는 컬러가 있을 때 사용하면 좋은 방법은 레이어스타일 모드 변경입니다! 머릿속으로 먼저 정리해요! 먼저, 헬멧만 선택 영역으..

이번 작업에 사용된 포토샵 툴을 먼저 소개합니다. #image>adjustment>Hue/Saturation   #마법봉 툴    #선택영역 반전   #올가미 툴 어느 사진이 실제 촬영된 사진일까요?원본 사진은 하나!감쪽 같죠? 초록색 후드티가 원본 사진, 와인 컬러 후드티가 편집 사진!  쇼핑몰 상품을 올리다 보면, 컬러 옵션을 넣을 때가 많죠? 이때, 포토샵으로 먼저 컬러를 입혀볼 수 있어요! 제품 생산 전 의사결정할 때, 또 급할 땐 한 장의 사진으로 여러 컬러 옵션 사진 제작이 가능할 수 있어요.   작업 순서를 머릿속으로 먼저 정리해요! 후드 티만 선택 영역으로 작업한 뒤에, 컬러 조정 메뉴로 색을 바꾸어 봅니다! 선택영역 ; 마법봉으로 배경 선택 & 반전 & 옷걸이 빼기 ==> 컬러 조정 ; ..

직업훈련학교란...? 근로자직업능력 개발법에 따른 직업능력개발훈련을 위한 시설로서 제 28조에 따라 고용노동부 장관이 지정한 시설로 학위를 수여하는 교육 기관이 아니라, 실무 현장에 필요한 직무수행능력을 기르기 위해 근로자를 교육시키는 고용노동부 산하 기관입니다. 15세 이상 취업을 원하는 자라면, 이용할 수 있는 과정으로 내일배움카드를 발급하여 신청할 수 있습니다. 재직자가 실무능력을 높이기 위해 활용할 수 있는 과정도 많고, 경력단절 여성 또는 전직을 하려는 실직자가 재취업을 위해 크게 도움을 받을 수 있는 기관입니다.  관련 과정들은 고용보험 사이트에서 찾아 보실 수 있습니다.   국민내일배움카드 훈련과정목록다운로드 전체 건수의 경우 다른회차보기(동일과정의 경우 묶음으로 표기) 포함입니다. 훈련기관..