HTML (8) 썸네일형 리스트형 4.html-컨트롤 (form,input,button태그) @@@@해당 내용은 강의 내용바탕으로 메모용도인 점 참조 부탁드립니다@@@@ @form태그 전체 폼의 부모역활(웹상에서 입력 항목을 구상할 때 사용하는 태그) (1)action 속성 >>>값 전송시 자동호출될 서버프로그램 주소지정 (2)method 속성 >>>전송에 필요한 http방식 설정(get, post) >>>> @input 태그 웹상에서 입력항목을 구성할 때 사용하는 태그 (1)type 속성: 속성의 값에 따라서 다양한 입력폼구성 ex) (2)name 속성: 속성의 값은 데이터 전송시 데이터의 식별자로 사용됨 ex) (3)value 속성: 우리 눈에 기본적으로 보여지는 값(로그인, 글쓰기..) ex) (4)password 속성: 입력 시 입력되고 있는 글자가 다른문자(*)로 대체 (5)radio .. 3.데이터 전송방식 (head,body/ get,post방식) @@@@해당 내용은 강의 내용바탕으로 메모용도인 점 참조 부탁드립니다@@@@ @HTTP (header와 body로 이루어져있음) (1)header -요청방식(method)알림, 사용자정보, 브라우저정보 등 제공 (나랑 대화할래?) (2)body -서버에 데이터를 전송할 때 데이터가 담겨지는 부분 (대화 내용의 요청과 응답) 1. : 문서에대한 정보 (meta태그나 css코드등 보통여기에넣음) 2. : 본문내용(화면에보이는 내용) 1) : top영역 2) : 네비게이션(lnb, gnb) 3) : 본문내용 - 화면설계서에 contents영역 4) : bottom영역 header,nav,article,footer 등은 이건 body뿐아니라, css 등에서도 의미론적으로 사용할수 있음. 또한 코딩스타일마다 다를.. 2.HTML속성 (속성/A태그/엠티 엘리먼트/식별자) @@@@해당 내용은 강의 내용바탕으로 메모용도인 점 참조 부탁드립니다@@@@ @속성(설정값) 콘텐츠 @a태그 콘텐츠 >>>콘텐츠에 대한 하이퍼링크 지정가능 네이버 >>>네이버 클릭 시 해당 url로 이동 @empty 엘리먼트 -쌍을 이루지 않는 태그 >>>닫는 태그 없음 *대표적 태그 (1)br태그 태그가 대표적임 (줄바꿈) (2)img태그 >>>>이미지 파일 적용하는 태그 (연결주소는 이미지의 주소>그럼 해당 url에 있는 이미지를 끌고와서 사이트에 바로 보여짐) @식별자 1)”유일한” 요소 식별자 (하나의 페이지의 유일한 요소의 식별자 역할) 콘텐츠 2)”다중” 요소 식별자 (하나의 페이지의 다중 요소의 식별자 역할) 콘텐츠 1.HTML구조 (태그/HTML5/기본구조/포함관계) @@@@해당 내용은 강의 내용바탕으로 메모용도인 점 참조 부탁드립니다@@@@ @HTML (HyperText Markup Languge) @태그언어 -기본구조: 내용 -종류: 등 -엘리먼트: 내용 이 자체를 엘리먼트라고 부르자 @HTML5 -버전이름(버전1~5) > 버전5라는걸 알려주려면 > 이라고 코드 가장 처음에 표시해주면 HTML5라는걸 브라우저에게 알려주는것임 (즉, 웹표준이라는걸 알려주는것임) @@@@@6강~7강@@@@ HTML 구조 @HTML 탬플릿 (기본적인 틀) 안녕하세요. >>>실제 표시될 컨텐츠들 작성 제목입니다 문단입니다 @태그의 포함관계 -엘리먼트 안에 또다른 엘리먼트를 작성하기 위한 관계 (html태그 안에 body태그 안에…) @HTML관계 -부모, 나, 형제 등 관계 -div(부.. [HTML]3.활용 (동영상삽입,댓글기능,채팅기능) @@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@ @@@@@30강~35강@@@@@ 부록 [1]동영상 삽입 -유뷰브 소스 (iframe 태그)내거에 복붙해서 영상사용 [2]댓글 기능 추가 -디스커스 사이트활용 https://disqus.com/ 1)your sites(왼쪽 상단) > new > 웹사이트이름,카테고리 지정 > 크리에이트 사이트 > 렛츠겟스타트 >인스톨 디스커스 > I don’t…클릭 > 상단 코드 복사 > 웹사이트 body하단에 붙여넣기 2)url을 서버를 통해서 열어야함 (로컬호스트 IP index.php 열어야함 > 그럼 댓글기능 생김 [3]채팅 기능 추가 -tawk 사이트 활용 https://www.tawk.to/ 1)로그인 > 왼쪽 관리자(톱니바퀴)클릭 .. [HTML]1.기본 (실습환경 ATOM, 깃허브, 아파치) @@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@ [1]ATOM - 코드 편집기 @@@@@5강@@@@@실습환경 준비 1.atom설치 2.atom인스톨 3.html폴더 (바탕화면이든 아무데나)만들기 4.atom에서 open folder로 html폴더 열기 5.파일 생성 ( “아무이름”.html) ( 확장자가 html) 6.브라우저에서 컨트롤+o > 열기 > 해당 파일 열기 7.atom에서 작업하고 > 브라우저 새로고침하면 작업한거 반영됨 @@@@@16강@@@@@ 원시웹 [1]원시웹 (1)인터넷 > 웹 (인터넷이 큰 범위) -인터넷은 1960년대 핵전쟁 이후 통신마비 대비해 보완하면서 발전 -웹은 1990년대 스위스에서 생성 (팀버너스리) (info.cern.ch 에서 웹이시작.. [HTML] 2.태그 및 속성으로 사이트 완성 @@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@ @@@@@html vs css 기본구조@@@@ @html 1.기본구조 컨텐츠 ex) 방문해주셔서 감사합니다 방문해주셔서 감사합니다 전송버튼 2. id, class 식별 콘텐츠 콘텐츠 @css 1.기본구조 선택자 {속성:속성값; 속성:속성값;} ex) h1 {color:red; font-size:12px;} 자손: div p {color:red; font-size:12px;} 자식: div > p {color:red; font-size:12px;} 일반형제: div ~ p {color:red; font-size:12px;} 인접형제: div + p {color:red; font-size:12px;} 2. id, class 식별.. [HTML]2.태그 및 속성으로 사이트 완성 @@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@ @@@@@html vs css 기본구조@@@@ @html 1.기본구조 컨텐츠 ex) 방문해주셔서 감사합니다 방문해주셔서 감사합니다 전송버튼 2. id, class 식별 콘텐츠 콘텐츠 @css 1.기본구조 선택자 {속성:속성값; 속성:속성값;} ex) h1 {color:red; font-size:12px;} 자손: 자식: 일반형제: 인접형제: 2. id, class 식별 @@@@@6강@@@@@기본문법 태그 [1]태그 1.strong태그 볼드처리해주세요 2.underline 태그 밑줄해주세요 @@@@@7강@@@@@혁명적인 변화 3.h1 태그 제목처리해주세요 @@@@@8강@@@@@통계에 기반한 학습 -150개 정도의 태그가 있지만.. 이전 1 다음
