WEB개발이야기/웹퍼블리싱 2020. 2. 10.
jquery로 높이(height)와 넓이(width)를 측정하는 모든 방법
jquery가 정점을 찍은 후 지금은 Angular, react, vue에 의해 퍼블리싱 업계에서 조금씩 힘을 잃어가고 있긴 하지만 아직까지 현장에서 가장 많이, 그리고 요긴하게 사용되고 있는 기술임에는 틀림없습니다. 그중에서 가장 많이 사용되는 Function중 하나가 element's(요소)의 높이와 넓이 값을 알아내거나 세팅할 때 매우 편리하게 사용할 수 있는 height(), width() 가 아닐까 합니다. 쉽지만 헷갈리기 쉬운 element's(요소)의 높이(height)와 넓이(width)를 측정하는 방법을 소개하려고 합니다. 사전 지식 이것을 설명하기 전에 element's(요소)의 크기 값에 영향을 미치는 구성방식을 간단히 설명하면 아래와 같습니다. div 요소가 있다고 하면 내부의 여백..
WEB개발이야기/웹퍼블리싱 2019. 10. 2.
이미지를 DIV 가로, 세로에 대해 가운데 위치시키는 방법
예전에 이미지를 정해진 크기의 DIV의 가로, 세로 기준으로 중앙으로 정렬시키는 방법에 대해 포스팅한 적이 있습니다. 원하는 DIV박스 안에 최적의 이미지 사이즈로 표시하기 이 방법보다 더 쉽고 간단한 방법을 찾아내어 다시 포스팅을 합니다. background image의 cover을 활용하는 방법입니다. HTML 구성 먼저 HTML로 구성해야 하는 코드입니다. 이미지를 감싸고 있는 DIV를 통해서 나와야 할 이미지의 크기를 설정하시면 됩니다. 그러면 이미지가 그 크기에 맞게 중앙 정렬이 됩니다.
WEB개발이야기/웹퍼블리싱 2018. 8. 29.
jQuery로 A태그 실행 시키기
웹퍼블리싱을 하다 보면 사용자가 아니라 javascript에서 A태그에 적혀있는 링크를 실행시켜야 하는 경우가 종종 있습니다. 다시말해 사람이 클릭하는 것이 아니라 조건에 맞으면 javascript가 클릭하게 하는 방법입니다. 저도 한참 찾아 해맸었는데.. 아래와 같은 jQuery 명령어로 실행이 가능 합니다. $('선택자').get(0).click(); 간단하게 예제를 살펴보시면 이해가 될것입니다. Javascript 코드 if( true ) { $('#uxgjs').get(0).click(); } HTML 코드 조건이 참이면 http://uxgjs.tistory.com이 경로로 이동을 합니다.
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
레이아웃의 다단을 100% 로 맞추기
예전에 Table로 레이아웃을 잡을 때는 어렵지 않게 구현되었던 표현인데 근래들어서 웹표준에 맞게 코딩을 하게 되면서 레이아웃을 DVI태그로 구현해야 하게 되므로써 다소 구현이 어려워진 것 중에 하나가 다단을 구성하는 것이 아닐까 합니다. 그 다단을 구현하는 방법이 여러가지가 있을 것 같은데.. 이번에 소개를 해드리는 것은 javascript로 구현하는 방법입니다. 레이아웃을 구성 시 2단 또는 3단 이상의 다단을 구성할때 상위 Tag에 대해 가로 100%로 자동으로 맞춰지는 javascript 입니다. 예를들어 만약 레이아웃을 4단으로 구성한다고 했을 때 3개의 단에 대해서는 px 또는 %로 고정값을 지정하고 나머지 하나의 단에 대해서만 .pct 클래스를 지정해 주면 .pct 클래스가 자동으로 나머지 ..
