본문 바로가기
반응형

html and css11

[svg] 글자 번갈아가며 나오기 아래의 코드를 실행하면 "가나다라", "마바사아"가 번갈아가며 출력된다. HTML 삽입 미리보기할 수 없는 소스 가나다라 마바사아 2022. 10. 20.
[css] print 영역 지정 프린트에 대한 미디어 쿼리를 이용하고 display:none으로 된 부분은 출력되지 않는다는 것을 활용하면 다음과 같이 하면 된다. @media print{ .no-print{ display: none !important; } } no-print 라는 클래스를 프린트 시 출력하고 싶지 않은곳에 넣어주면 끝! 그리고 프린트시에만 출력하고 싶은 영역이 있을것이다 @media screen{ .print{ display: none !important; } } 화면에 보이지 않지만, print에서는 출력될 것이다. 그리고 위에 css처리만으로는 되지 않는 경우가 있을 것이다. 그때는 javascript로 열심히 짜고 css를 이용하면 된다. 간단한 원리는 print시에 출력 전에 실행되는 window.onbefo.. 2022. 10. 6.
[Restful API]HTTP method에 대해서 몇몇 프로젝트에서 API를 구성해서 사용을 했었는데 정확히 따지자면 Restful을 다 따르지는 않았었다. get과 post만 사용한 API들이었다. 시간이 너무 많이 나서 이런저런 강의들을 보다가 HTTP method에 대한 짧은 강의를 보게 되었는데 여기에서 Restful API는 일반적으로 GET, POST, DELETE, PUT을 쓴다고 한다. 예를 들면 아래와 같은 용도로 사용하며, API의 url에는 동작에 대한것은 넣지 않고 명사만 넣는 다는 것이다. 동작에 대한 설명은 HTTP method가 담당 GET 데이터 가져오기 POST 데이터 보내기 DELETE 데이터 삭제 PUT 데이터 업데이트 그런데 또 찾다보니 나온게 DELETE, PUT 메소드의 경우에는 보안상 문제가 발생될 수 있어 사용.. 2022. 9. 20.
input을 동적생성 했는데 submit이 되지 않을 경우 특정 예 중 하나가 table과 form의 위치가 잘못 되었을 경우이다. 예를 들면 위와 같이 구성하고 form안에 input들을 동적 생성하면 submit할때 자동적으로 값이 전달되지 않는다. 위와 같이 사용을 하면 잘 전달될 것이다. 이걸로 몇시간 날린듯 벌써.. ---------------------------------------------------------------------------------------------------- 그리고 추가로 다른 방법은 form을 보내기전에 from.append();를 통해서해당 엘리먼트를 추가 하는 것이다. 이 방법은 form조차 동적으로 생성할때?(확실치 않음) 위에 대한것은 여기를 참조하면 될것 같다. http://b1ix.net/410 b1ix .. 2021. 12. 16.
swiper에 video태그를 넣었는데 영상이 멈추는 경우 swiper안에 video태그를 다음과 같은 형태로 넣었었다. 그런데 영상이 재생도중 멈추는 현상 확인됨. 정확하게는 pager를 사용중이었고 스크롤을 내리고 올리니 영상이 멈춰있던 것이었다. 이런 경우에는 data-keepplaying을 태그에 추가해주면된다. 왜 멈추는지, 왜 저걸로 해결이 되는지는 정확히 모르겠다. 혹시 아시는분 알려주시면(...) 2021. 12. 1.
Position relative에 대해서 지난 몇년동안 인터넷 검색, 그리고 별 생각없이 CSS를 막 쓰고 있었다. 뭐 어떻게든 화면을 만드는것에 급급했던 것이다. 너무 늦게 깨달았지만 css에 있는 여러 속성들에 집중을 할 필요성을 느꼈고, 와이프와 같이 css를 공부를 하면서 내가 알려주는 역할을 하는데 막히는게 너무 많다는 것을 느꼈다. (제대로된 이론도 모르고 그냥 실무에서 사용했다는 것이다...) 이번에 겪은 것은 Position:relative를 사용하면서 left:50px, top:50px을 사용한 경우이다. relative가 무엇인지 본질적인것부터 달아야 맞았다. 상대적인 상대적인 위치를 정하는 것이다. 난 위의 화면이 이해가되지 않았었다. top:50px이 각 item에 적용되어야 하지 않냐 라고 생각했던것.....물론 적용은 .. 2021. 7. 19.
728x90