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

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

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

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

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

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

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

오늘 배울 내용의 주요 키워드를 먼저 정리해 봅니다.#태그_순서 없는       #태그_순서 있는         #      #속성     글을 작성하다 보면, 내용을 정리해서 항목별로 리스트를 나열할 때가 있죠? 이번엔 리스트를 만들 때, 태그를 알아보도록 하겠습니다.  ; unodered list. 순서 없이 특정 도형(블릿)을 붙여 리스트를 만들기로 선언. ; odered list. 숫자, 알파벳 등 순서가 있는 리스트를 만들기로 선언. ; 각 항목 데이터 입력속성 ; 글머리 기호 종류, 시작 번호 등의 속성을 지정할 수 있음기본 형식 ;    _______    _______    _______이 태그들을 이용해서 저의 버킷리스트를 한번 만들어 보도록 하겠습니다^^ 작업 순서를 먼저 머릿속으로 정..

오늘 배울 내용의 주요 키워드를 먼저 정리해 봅니다. #HTML 작성 기초    #비주얼스튜디오 코드 실행 방법     #html 작성 규칙     #html 문서 확인 어제까지 사전 준비를 마치고... 비장한 마음으로 VSC를 실행시켰습니다^^ 오늘은 전반적인 visual studio code 사용방법을 익히고 html 작성 기본 규칙들을 알게 되었습니다.작업 순서를 먼저 머릿속으로 정리해 볼게요!  VSC 실행 ==> 새문서 만들기 ==> 문서 이름 지정 ==> 기본 태그 나오게 하기_!+[enter] ==> 언어 코드 변경 ==> title & body 내용 작성 ==> 저장 ==> html 문서 실행&확인 VSC 사용 방법을 익히는데 목적을 두고, HTML 문서를 하나 임시로 만들어 볼까 해요! ..