[개발] 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. 이전 1 2 3 다음
