[개발] Programming/HTML, CSS16 페이스북 피드(게시글) 웹 페이지에 내장하기 - Embedded Tag 페이스북 피드 퍼가기 페이스북에 페이지 글을 딱 한 개가 아니라 피드 목록을 나의 웹에 내장(Embed)하고 싶다면 이 글 딱 집중~! 이전에는 'Like Box'라고 하는 기능으로 iframe 형태로 퍼갈 수 있었는데, 근래에 API가 바뀌면서 'Page Plugin'이라는 명칭으로 바뀌었다. (이전 라이크 박스 시절에 퍼갔다면 지금 글이 안 보이고 있을 것이다.) 접속 경로 : https://developers.facebook.com/docs/plugins/page-plugin 링크를 생성하는 방식은 이전과 동일해 보인다. 비록 개발자 페이지이긴 하지만, 계정이 없어도 상관없다. 뭐 이 글은 개발자들이 보고 있을 테니, 아래 값에 대한 설명은 필요 없을 것 같다ㅎㅎ 하단에 체크 박스는 노출하는 설정에.. 2021. 12. 11. HTML input 태그, 여러 개 파일 선택 가능한 옵션 (multiple) HTML input 태그의 file 속성은 기본적으로 하나의 파일만 선택 가능하다. 여기서 간단하게 'multiple' 옵션만 추가해주면 바로 여러 개의 파일을 선택할 수 있다. 선언하는 방법은 multipartsenctype="multipart/form-data"이 선언된 form 내부에 아래와 같이 input 태그에 multiple을 선언해주면 끝~! - 성공 예시 - 2021. 2. 27. [CSS] 수직 정렬 vertical-align 사용 방법, 속성 수직 정렬 vertical-align 문구를 수직으로 정렬하기 위해서는 vertical-align 속성을 설정해주면 된다. 설정할 수 있는 속성은 다양하게 있는데, 아래 위 중간 등 아래와 같이 있다. /* keyword values */ vertical-align: baseline; vertical-align: top; vertical-align: middle; vertical-align: bottom; vertical-align: sub; vertical-align: super; vertical-align: text-top; vertical-align: text-bottom; /* values */ vertical-align: 20%; 가장 흔히 쓰이는 속성은 아래 3개 vertical-align: .. 2020. 8. 26. HTML 페이지에 유튜브 영상 넣는 방법 - (iframe 태그 사용) 유튜브 태그 넣는 방법 유튜브 영상을 웹 페이지에 바로 재생 가능한 형태로 추가하는 작업은 쉽다. (영상 개수가 많으면 엄청난 노가다 작업ㅠㅠ) 오늘은 웹 페이지에서도 마치 유튜브를 보는 듯 영상을 삽입하는 태그를 추가하는 방법은 소개한다. 01 추가할 영상을 선택 뒤 아래에 '공유'를 클릭한다. 02 팝업에서 왼쪽에 퍼가기를 누른다. 03 팝업에서 복사를 누르면 소스 코드가 복사된다. 이때 영상이 시작할 시간을 강제로 지정하거나 개인정보를 강화한다거나 기타 등등 몇 가지 설정을 추가할 수 있다. 단 설정이 적용되려면 당연히 설정 후에 '복사'를 눌러야 한다. 04 이제 웹 소스를 열어서 적당한 위치에 붙여넣으면 끝! 예제 소스) 유튜브 영상 iframe 소스 여기서 영상의 너비나 높이가 마음에 안든다면.. 2020. 8. 21. ul li 태그 가로로(수평) 배열하는 css 설정 메뉴를 만들다 보면 ul, li 태그를 사용하는 경우가 있다. 하지만 리스트가 아래로 펼쳐지기 때문에 수평으로 배열하려면 css를 수정해야 된다. 아래와 같은 소스가 있다고 가정한다. 실행해보면 아래와 같이 아래로 나열된다. menu 1 menu 2 menu 3 menu 4 menu 5 cs 리스트를 수평으로 배열하기 위해서 css에 코드를 추가해본다. 만약 ul, li 태그가 페이지의 여러 곳에서 사용된다면, 클래스를 추가해서 스타일을 입히거나 html 태그에 직접 style을 추가한다. ul { list-style:none; } li { float: left; } cs 막상 만들어보니 너무 지저분하다ㅋ 간단하게 스타일을 추가하면~ 끝ㅋ * html 실행 사이트: http://www.cssdesk.com/ 2020. 4. 28. css, 마우스 over 시 포인터 모양 지정하기 버튼 효과를 내기 위해 mouse over 시 포인터 모양을 손가락으로 만드는 경우가 많이 있죠. 이럴 땐 style에 한 줄만 추가해주면 쉽게 만들 수 있습니다. 예시) 마우스 포인터 손가락 모양으로 만들기 클릭하세요 포인터는 손가락이나 화살표 말고도 많은 종유가 있습니다. 아래는 "stackoverflow" 에서 긁어온 포인터 관련 옵션 목록입니다. 위에 예시와 동일하게 style 내부에 선언해주면 위 이미지 처럼 사용할 수 있습니다. cursor: auto; cursor: default; cursor: none; cursor: context-menu; cursor: help; cursor: pointer; cursor: progress; cursor: wait; cursor: cell; cursor.. 2018. 11. 2. HTTPs 방식으로만 POST 요청하는 방법 가끔 http에서 https로 또는 그 반대로 요청을 하는 경우 보안 문제가 발생할 수 있다. 이럴 위험이 있는 페이지는 강제로 https를 지정하면된다. 아래 form을 submit하여 페이지를 넘어갈 경우가 있다고 가정하면. form이 있는 창의 프로토콜을 따라가게 된다. http일 경우 http://test.com/qna/board.do -> http://test.com/qna/ask.do https일 경우 https://test.com/qna/board.do -> https://test.com/qna/ask.do 이런 경우 확실하게 호출하는 방법은 https 까지 명시해주는 방법이다. 스크립트에서 http를 https로 변경하는 방법도 가능하다. var form = document.getEleme.. 2018. 11. 2. 체크박스 배경을 이미지로 지정하기 체크박스의 기본 형태는 매우 못생겼다.. style로 background-color를 지정해도 인식이 안된다. 이미지를 background로 지정해 줘야 효과를 낼 수 있다. 체크박스의 스타일을 다음과 같이 지정하면 된다. 1 2 style="background:url('이미지 경로'); Colored by Color Scripter cs 그럼 드디어 못생긴 체크 박스를 원하는 색상으로 변경할 수 있다. 2018. 11. 2. a태그 클릭 이벤트, href "#", "#none", onclick 등 차이점 이미지나 문자에 a태그로 링크를 주어 버튼 효과를 만들 수 있다.단순히 클릭 가능하도록 보이기 위해 사용하는 href 에는 다양한 요소를 넣을 수 있다. 아래 소스에서 버튼 클릭으로 clickBtn(); 가 실행된다. 물론 여기서 href는 아무런 이벤트를 발생하지 않는 것이 주 목적이다.이미지를 버튼 처럼 보이게 하는게 목적이니깐. 그럼 href를 버튼 처럼 사용하기 위해 주는 속성을 살펴보자. href="#" // 페이지 맨 위로 이동href="#none" // 페이지 이동 Xhref="javascript:void(0)" // 페이지 이동 Xhref="#특정id" // 페이지에서 해당 아이디가 있는 화면으로 이동 href="#none"과 유사하게 onclick="" 도 사용할 수 있는데,onclick.. 2018. 11. 2. 이전 1 2 다음
