css를 사용하여 엘리먼트 요소를 한 곳이 고정시키면서(fixed) 다른 요소와는 겹쳐지지 않는 방법(relative)을 알아봅니다.position 프로퍼티를 사용하면 엘리먼트 요소를 고정하거나 상대적으로 이동하도록 정할 수 있습니다. 여러 값 중에서 position 설정으로 sticky 값을 사용할 수 있는데요 아래와 같이 css에 설정합니다.position: stickysticky는 무엇이고 는 언제 왜 사용하는지 아래에서 알아보겠습니다.# position sticky 알아보기이처럼 position값을 Sticky로 설정할 경우 relative처럼 동작하면서 relative 요소가 없는 경우에는 fixed처럼 동작하는 두 가지 효과를 모두 가질 수 있습니다. 이런 레이아웃은 aside 요소... 즉 추가적인 콘텐츠를 계속해서 보여줄 때 많이 사용됩니다. 특히 수익 목적의 광고를 노출하는 경우에도 많이 쓰입니다. 실제로 유명한 매체 사이트에서도 sticky 속성을 사용할 웹사이트가
2018-11-16 11:20:46제이쿼리는 특정 요소의 상대적인 위치를 구할 수 있는 매우 효과적인 메소드를 지원하는데 그 중에서도 아래 두 메소드를 사용하면 매우 간단하게 구할 수 있다.$(선택요소).offset();$(선택요소).position();만약 test라는 클래스 명을 가진 요소가 있을 경우 그 요소의 상대적 위치를 구하기 위해 아래의 방법을 사용한다.$('.test').offset();// 문서로부터의 좌측과 상단으로부터의 거리를 출력$('.test').position();// 가장 첫 번째 부모요소로부터의 좌측과 상단으로부터의 거리를 출력
2015-07-07 17:31:47세로 정렬을 하기 위한 방법들은 몇가지의 방법들이 있습니다. 가장 쉬운 방법중 하나가 table 태그를 사용하는 방법입니다. table을 사용하면 안에 있는 요소는 자동으로 세로정렬됩니다. 아니면 display의 속성을 table과 table-cell로 변경하는 방법 역시 유용합니다. 이 방법들은 아래 링크에 잘 소개되어 있으니 참고하세요.특정요소를 세로정렬하는 방법 바로가기 >그런데 이 방법을 사용하기 위해서는 세로정렬하게 될 요소가 position: absolute; 즉 절대값을 가지면 안됩니다... 하지만 이를 가능하게 하기 위해서 다른 방법을 사용해야 하는데 오늘 알아볼 방법은 바로 이 방법입니다. 먼저 아래 예제를 참고해주세요.# 세로 정렬 방법 예제보기* HTML 코드<div><p>Middle Align</p></div>* CSS 코드<style>div { width: 200px;height: 200px;border: 1px solid #d1d1d1;box-sizin
2015-03-23 10:06:04크로스 브라우징 작업을 하던중에 Firefox에서 background-position값 중 일부가 적용이 안되는 부분을 발견했습니다. Chrome(크롬)에서는 잘 되던 속성인데 말입니다... 알아보니 이 속성은 표준 CSS 속성이 아니더군요. 그래서 Opera와 Firefox에서는 바꾸어 사용해야합니다.* background 관련 파이어폭스 사용가능 속성1. background: .... ( O )2. background-position: .... ( O )3. background-position-x: .... ( X )4. background-position-y: .... ( X )결론부터 얘기하자면 FireFox에서 적용되기 위해 background-position-x와 background-position-y는 사용을 안하는게 좋을 것 같습니다. 대체할수 있는 코드는 아래처럼 사용해야 할 것입니다.1. background-position-x: 50%; 의 경우; backgroun
2015-03-09 11:16:25자바스크립트를 사용하여 특정 엘리먼트의 위치를 알려고합니다. 어떻게 해야할까요? jQuery를 사용하면 간단하게 요소의 절대좌표와 상대좌표를 구하거나 이를 이동할 수 있습니다. 그럼 아래에서 그 방법에 대하여 알아보고자 합니다... 우선 요소들의 위치 값들이 언제... 왜 필요할까요?# 절대좌표, 상대좌표(절대위치 및 상대위치) 필요한 경우는?모바일 및 태블릿 사용환경을 고려한 반응형 웹사이트 구현할 경우 브라우저의 크기에 따라 레이아웃이 바뀌는 경우가 많습니다. 이런 경우 콘테츠의 크기가 변경하거나 위치가 바뀔 수도 있습니다. 또한 단순하게 위치가 변경된 것이 아닌 경우 엘리먼트의 현재 위치를 이동하거나 어느 정도의 위치조정이 필요하겠죠. 이 경우 좌우 상하 값은 어떻게 결정해야 할까요? 좌우상하 좌표값이 필요합니다.가장 쉽게 볼 수 있는 예로 움직이지 않고 고정되어 붙어있는 스티키 네비게이션(sticky nav)을 구현할 경우도 이에 해당합니다... 반응형 또는 모바
2014-09-07 07:35:46안녕하세요. position 속성이 absolute인 경우 정렬을 맞추는 방법입니다. 해당 요소의 position이 absolute일때 정렬하는 방법은 relative와는 다른 방법을 사용해야 합니다. absolute일 경우의 특징을 고려해서 레이아웃을 설정해야 하는데요...1. position 속성이 absolute?; absolute 속성이 되는 경우 주변의 다른 레이어 객체들과 상관하지 않은채 정렬이 가능하게 됩니다. 예를 들어 position이 relative인 경우는 다른 요소들을 고려해 정렬을 맞추어야 합니다. 앞 또는 뒤에 위치한 요소에 영향을 받기 때문이죠. 하지만 absolute의 경우는 다른 요소에 영향을 주지 않아 겹쳐지거나 화면 밖으로 이동하는 등 독립적인 레이아웃이 가능하게 되죠. 그리고 absolute로 설정한 경우 정렬 기준은 다음과 같이 두 가지가 됩니다.1) 전체 윈도우를 기준으로 정렬2) 바로 상위 레이어를 기준으로 정렬1번은 브라우저 창 전체를 기준
2014-03-24 14:59:00
