본문 바로가기
728x90
반응형

front-end16

[html] meta tag og (open graph) og 적용해달라는 요청이 왔었는데, og에 대해 몰라서 알아보기로 했습니다. og. 즉, open graph는 html meta 태그 종류 중 하나입니다. SNS 등에 url을 공유 할 때 미리 보여주는 이미지나 그 링크에 대한 설명, 제목을 표시하기 위한 태그입니다. 자세한 설명 : https://ogp.me/ Open Graph의 기본 태그 og:title - 사이트의 제목 og:type - 사이트객체의 유형. 예) website, video.movie 지정한 유형에 따라 다른 속성도 필요할 수 있다. og:image - 사이트를 나타내는 대표 이미지의 URL og:url - 영구 ID로 사용될 사이트의 정규 URL Open Graph의 옵션 태그 og:audio - 사이트와 함께 사용할 오디오 파일.. 2020. 10. 9.
[javascript] JSON 합치기 Object.assign(a, b) Object.assign 함수를 이용하여 두 개의 JSON을 병합할 수 있습니다. ​ var d = {a:1, b:2}; var c = {c:3}; Object.assign(d, c); // {a:1, b:2, c:3} 단, 같은 key 값을 가지고 있으면 뒤에 오는 JSON의 value값이 적용됩니다. var d = {a:1, b:2}; var c = {a:3, c:3}; Object.assign(d, c); // {a:3, b:2, c:3} 하지만 IE에서만 해당 기능이 작동하지 않습니다. IE.... 이런 점을 고려해서 상황에 맞게 사용하면 좋겠습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Obje.. 2020. 10. 9.
[css] 효율적인 CSS 작성하기 효율적인 CSS 작성하는 방법입니다. Universal 규칙은 사용하지 않습니다. /** Universal 규칙 예제 */ [hidden="true"] { ... } * { ... } div > [type="number"] { ... } ​ ​ ID 규칙에 쓸모없는 태그나 클래스를 사용하지 않습니다. ID는 고유하므로 태그나 클래스를 붙이는 것은 매칭 작업을 더디게 만듭니다. (예외: 만약 여러가지 다른 스타일을 위해 ID가 지정된 엘리먼트의 class가 동적으로 바뀌고 이 class가 ID가 지정되지 않은 다른 엘리먼트와 공유될 경우에는 클래스 선택자가 필요합니다. ) button#btn { ... } button#btn.on { ... } table#tbl { ... } input#num[type=".. 2020. 10. 9.
[javascript] 뒤로가기 이벤트 onpopstate onpopstate (뒤로 가기) 이벤트를 적용하면 window.history.back(); 시에도 작동됩니다. 게시물 목록에서 게시물 상세 페이지로 이동 한 뒤, 뒤로 가기 버튼으로 페이징 값과 조회 조건을 가져가고 싶을 때 onpopstate 이벤트를 사용하면 값을 넘길 수 있습니다. /* detail.jsp */ window.onpopstate = function(event) { history.pushState({pageNum:3, searchDt:'2019-05-07'}, null, '/board/list'); location.reload(); } history.pushState(null, null, null); /* list.jsp */ console.log(history.state); // {.. 2020. 10. 9.
[css] 가변 값을 위한 함수 calc() calc는 반응형 웹 구축 시 유용한 css 함수입니다. 만약 전체 width에서 230px를 제외한 길이만큼 영역을 지정하고 싶다. 고정된 영역에서 230px를 더하고 빼는 것은 어렵지 않지만, 반응형 웹에서는 상대적인 영역을 사용하기 때문에 calc 함수를 사용합니다. .width-m230 { width: calc(100% - 230px); } 매우 간단한 방법으로 원하는 width를 사용할 수 있게 되었습니다. width 값 말고도 padding, margin, font-size 등에도 유용하게 쓸 수 있습니다. 유의할 점은 값과 연산자 사이에 띄어쓰기를 꼭 해야 한다는 점입니다. calc(값1 연산자 값2) 2020. 10. 9.
[script] foreach문을 이용하여 json 데이터 key, value 값 꺼내기 Javascript var json = { 'NAME':'성춘향', 'GENDER':'F', 'AGE':'18세' }; for (key in json) { console.log('key:' + key + ' / ' + 'value:' + json[key]); } JQuery var json = { 'NAME':'성춘향', 'GENDER':'F', 'AGE':'18세' }; $.each(json, function(key, value) { console.log('key:' + key + ' / ' + 'value:' + value); }); 2020. 10. 9.
728x90
반응형

티스토리툴바