프로그래밍/HTML16 16 웹사이트에 YouTube와 지도를 넣어보자 YouTube 넣기 1. 유튜브에서 원하는 동영상을 우클릭 해 소스코드를 복사한다. 2. 코드를 붙여 넣고 저장을 한다. * 사이즈를 조정하고 싶으면 ifram 태그 내에 width와 height 값을 조절한다. [결과] 지도 넣기 1. 구글 맵에서 원하는 장소를 검색하고 공유하기를 클릭한다. 2. 공유하기를 누른 후 지도 퍼가기를 클릭한다. 3. HTML 복사를 클릭한다. 4. 코드를 붙여넣고 저장을 한다. * 사이즈를 조정하고 싶으면 ifram 태그 내에 width와 height 값을 조절한다. [결과] 열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다. 수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 2021. 5. 17. 15 HTML 디스플레이 속성 HTML 디스플레이 속성 1. inline 태그 display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않는다. 또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다. * content 크기 만큼만 자리를 차지하는 요소로, 분자(텍스트)의 특징을 가지고 있다. 주로, 텍스트의 특정 부분에 스타일을 적용하거나, 글자를 묶어줄 때 많이 사용한다. , , 요소는 display 속성값이 인라인(inline)인 대표적인 요소이다. 이렇게 span요소로 텍스트의 일부분 만을 따로 묶은 후에 스타일을 적용할 수 있습니다. . block 태그 display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, .. 2021. 4. 24. 14 입력상자 <input>의 요소 2 의 요소 이번 포스팅에서 다뤄볼 것은 HTML5에서 추가된 다양한 타입의 input 요소이다. 1) email 이메일을 입력 받는 글상자 이다. [예시] 이메일 [결과] 이메일 형식에 맞지않으면(@가 없으면), 해당 문구가 뜬다. 2) url 웹사이트를 입력받는 글상자 이다. [예시] 웹사이트 [결과] url형식에 맞지않으면(http 부터 시작된 url이 아니면), 해당 문구가 뜬다. 3) tel 전화번호를 입력받는 글상자이다. 웹사이트 결과창에서는 달라진게 안보이지만, 모바일로 입력시 숫자 키패드만 사용이 가능하다고 한다. [예시] 전화번호 [결과] 4) data (★ 많이 사용함) 원하는 날짜를 입력받는 글상자이다. [예시] 생년월일 [결과] 달력 모양을 클릭하면 달력이 나오고, 원하는 날짜를 선택하.. 2021. 4. 19. 13 입력상자 <input>의 요소 1 HTML에서는 다양한 타입의 input 요소를 사용하여 사용자로부터 입력을 받을 수 있다. HTML에서 사용할 수 있는 대표적인 input 요소들을 알아보자 o(*￣▽￣*)ブ 1) text 태그의 type 속성값을 "text"로 설정하면, 한줄의 문자를 입력받는 글상자가 생성된다. 2) password 태그의 type 속성값을 "password"로 설정하면, 비밀번호를 입력받는 글상자가 생성된다. 비밀번호이기 때문에, 화면에는 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시된다. [text와 password를 이용한 로그인창 예시] 아이디 비밀번호 잠깐! size, mexlength, required 속성을 알아보고 넘어가자 :) size : 크기를 설정하는 속성 mexlength : 값의 최대 .. 2021. 4. 18. 12 폼 <form>과 method 속성 폼 웹페이지에서 사용자로부터 입력을 받을 떄 사용하는 태그이다. 사용자가 입력한 데이터를 서버로 보낼 때 form요소를 사용한다. [문법] action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시한다. 이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다. method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시한다. 즉, 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달된다. method 속성 method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과 POST 방식으로 나눠진다. GET POST - 데이터(data)를 URL에 추가하여 .. 2021. 4. 18. 11 아이프레임 <iframe> 아이프레임 inline frame의 약자로, iframe을 이용하면 웹페이지 안에 또 다른 웹페이지를 삽입할 수 있다 iframe요소를 지원하지 않는 브라우저를 위한 텍스트 [사용할 수 있는 속성] 속성명 속성값 설명 height 픽셀 요소의 높이를 명시함. width 픽셀 요소의 너비를 명시함. name 텍스트 요소의 이름(name)을 명시함. sandbox allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation 요소에 보일 콘텐츠에 대한 추가적인 제한 사항(restrictions)들의 집합을 명시함. src URL 요소에 보일 문서의 URL를 명시함. srcdoc HTML 코드 요소에.. 2021. 4. 18. 10 뉴스 페이지를 만들어보자 학원 프론트엔드 수업 숙제 ! ༼ つ ◕_◕ ༽つ 아직 배운지 얼마 안돼서 복붙복붙... 엉성하지만 열심히 만들었습니당 [뉴스 메인 - 기사 목록] 인터넷 기사📰 인사이트 1일전 카카오 프렌즈 새 멤버 후보 '여우·고슴도치·햄스터' 대국민 투표 상.. 지난 15일 라이언과 춘식이는 은행나무 옆 서점 지킴이 '홍이'에게 한 통의 편지를 받았다. 편지에는 오는 4월 23일 '세계 책의 날'을 맞이해 진행하는 이벤트에 라이언.. 조선비즈 2020.12.17 카카오 프렌즈, 라이언의 반려묘 '춘식이' 굿즈 첫 출시 라이언의 반려묘, 길고양이 ‘춘식이’가 굿즈로 출시됐다. 카카오커머스는 카카오프렌즈의 새 캐릭터 ‘춘식이’를 선보인다고 17일 밝혔다. 춘식이는 라이언이 길에서... [뉴스1 상세페이지] 카카오 프렌.. 2021. 4. 17. 09 <a> 하이퍼링크와 bookmark 하이퍼 링크 하이퍼 링크란, 다른 페이지나 사이트로 연결하는 링크(문자 또는 이미지) 링크에 사용될 문자 또는 이미지 실습을 통해 보는것이 가장 좋을 것 같아 바로 활용! 하이퍼 링크 다음 이미지 연습 절대경로와 상대경로로 나누어 만들어 보았다. 절대경로는 https에 대한 경로로, 다음이라는 문자를 누르면 다음 사이트로 이동되도록하고 내가 불러온 이미지를 클릭하면 카카오이모티콘샵으로 이동하게끔 만들었다. 상대경로는 이미지 연습이라는 글자를 누르면, 내가 이전에 만든 이미지1.html 로 가도록하고 상대경로로 불러온 이미지를 클릭하면 이전에 만든 테이블3.html로 이동하게끔 만들었다. [결과] 책갈피(bookmark) 태그의 name 속성 또는 특정 태그의 id 속성을 이용하면 책갈피 기능을 만들 수 .. 2021. 4. 17. 08 <table> 테이블 태그 테이블 테이블이란 여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표이다. [문법] : 테이블의 각 층을 구성 : 각 열의 제목 : 테이블의 셀을 구성 테이블 속성 border : 테이블의 테두리 두께를 설정(기본 0) width : 테이블의 가로 폭을 설정 align : 테이블의 정렬 설정(left, right, center) [예시] ,, 속성 width : 셀의 가로 폭을 설정 height : 셀의 세로 폭을 설정 align : 셀의 텍스트 정렬 설정(legt, right, center) 에 사용시 해당 층 전부 적용 에 사용시 해당 셀만 적용 [예시] 1번째 제목 1번째 셀 위의 내용을 사용해보자 ヾ(•ω•`)o 테이블 - 1 1번째 셀 1번째 제목 2번째 제목 1번째 셀 2번째 셀 1번째 제목.. 2021. 4. 17. 이전 1 2 다음 반응형
