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

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

이번 작업에 사용된 포토샵 툴을 먼저 정리합니다.#흑백사진_상단메뉴>이미지>조정>black&white              #툴>도형_사각형                #클리핑마스크  오늘의 작업물입니다! 흑백사진 위에 컬러사진이 확 튀어나온 듯한 효과가 났어요. 정말 간단한 조작이었거든요?결과물이 멋져서 정말 맘에 들어요! 작업 순서를 머릿속으로 먼저 정리해요! 메타인지, 메타인지^^ 어떤 작업과정을 거쳐야 할지 전략을 먼저 세워 보아요! 저는 사각 선택 레이어로 작업을 하려다가 회전이 안되어서, 도형툴로 변경을 했었답니다! 사진 레이어 복사 ==> 밑 사진을 흑백화 ==> 사각형 도형만들기 ==> 사진틀 만들기 ==> 클리핑마스크 사전작업용 검은면 채우기 ==> 레이어 순서 확인 ==> 컬러사진 클..

오늘 배울 내용을 먼저 정리해 봅니다. #하이퍼링크       #이미지에 링크 걸기      #링크      #title 속성 지난 포스팅에 이어 태그를 사용해 봅니다. 이전에는 텍스트에 하이퍼링크를 걸었으니,오늘은 이미지에 하이퍼링크를 걸어볼게요. (실제로는 이게 더 많이 쓰인데요!) 기본형식="이동하려는 주소">   img src="이미지경로" alt="사진설명">속성target="이동하는 창 지정" ;"_self"  현재 창에서 이동(디폴트) "_blanktitle="어디로 이동하는지 정보주기"필요한 작업을 먼저 확인합니다 하단 로고 이미지에 태그 쓰기외부 링크 주소 확인 : https://smartstore.naver.com/sunnish1022서브 페이지들에 상단 메뉴 링크 추가3) 하단 이미지..

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

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

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

오늘 배울 내용의 주요 키워드를 먼저 정리해 봅니다.#_표 제목 달기     #표 영역 나누기        #thead_표머리        #tbody_본문       #tfoot_꼬리말        #표 합치기       #_가로방향 합치기      #_세로방향 합치기  이번 포스팅에서는 표 작성의 응용버전을 다뤄보도록 할게요!먼저, html에서는 구조가 가장 중요하기 때문에 구조에 관한 것들을 잘 정리하고 갈게요! 간단히 표 제목 달고 가실게요!  지난번에 작성했던 시간표 html 문서를 불러와서 캡션 형태로 제목을 넣어 볼게요! 바로 아래에 캡션 태그를 넣어 주시면 되어요!  기본형식표제목or표설명 태그 제일 처음에 넣을 수 있음. 표 상단에 달 수 있음다음과 같은 표는 어떻게 만들지 생각해 보아..

오늘 배울 내용의 주요 키워드를 먼저 정리해 봅니다.#width_너비 속성 #height_높이 속성 #align_정렬 속성 #_표제목 태그 지난 포스팅에서 표 만들기를 해 보았는데요, 영 모양새가 이쁘지 않았어요.이번 포스팅에서는 html에서 가능한 표 편집 기능을 알아보도록 하겠습니다^^ width="숫자(픽셀단위)"height="숫자(픽셀단위)" 크기 속성으로, 태그에 쓰면 전체 표 크기 태그에 쓰면 셀의 너비 태그에 쓰면 셀의 높이align="right/center" 정렬 속성으로, , 사용 가능! 메모!)셀의 높이에서는 center 디폴트메모!)셀의 너비에서는 left 디폴트 : 표제목 태그 또는 대신에 사용하면, 해당셀의 데이터가 굵게&가운데 정렬 표기 됩니..

오늘 배울 내용의 주요 키워드를 먼저 정리해 봅니다. #_표 태그 #_행 태그 #_열(셀) 태그 #속성_border_선넣기 태그 문서 중에는 표를 작성할 일이 많죠?html로 표를 작성할 수 있는데요,이번에는 표 작성 태그를 알아보도록 하겠습니다. ; 표 작성 태그 ; 행 태그 ; 열(셀) 태그 속성 border="숫자" ; 표에 선 넣기 기본 태그 형식 - '표를 만든다' 선언 - '행1 만든다' 선언 ** - 1행의 1열. 실제 데이터 ** - 1행의 2열. 실제 데이터 ... 이 태그들을 이용해서 일주일 시간표를 한번..

오늘 배울 내용의 주요 키워드를 먼저 정리해 봅니다.#태그      #태그      #2단 리스트     #속성       #start         지난 번에 이어 리스트 태그의 응용편을 포스팅 해 볼게요!2단 리스트를 작성할 수 있나요?  YES! 우리가 리스트 작성할 때, 대번호 밑에 소번호를 분류해서 쓰고 싶을 때가 많은데요, html 구조를 잘 보고 중첩해서 사용하면 됩니다. 지난 번에 작성했던 버킷리스트 문서를 수정하여,  이루고 싶은 것과 이미 이룬 것으로 분류해서 작성을 해 볼게요!서른이 되기 직전 작성했던 버킷리스트인데, 꽤 많이 이뤘네요^^ 태그를 중첩하여 사용할 때는, 태그를 열고 닫는 것에 주의합니다. 들여쓰기를 하니, 구조가 훨씬 잘 보이는 것 같아요.   ol 태그와 ul태그를 ..