반응형 코딩 이야기6 jQury로 레이어 팝업과 dim 구현하기 jQury를 사용하여 간단한 레이어 팝업과 dim 페이지 만들기에 대해서 알아보겠습니다. 레이어 팝업이란?dimdim과 팝업을 하나로 만들기dim을 별도 요소로 만들기레이어 팝업 닫기 버튼과 접근성1. 레이어 팝업이란? 레이어 팝업은 window에서 제공되는 시스템 alert 창과는 달리 인위적으로 팝업 형태를 만들어 alert과 동일한 용도로 사용하는 것을 말합니다. 그냥 제공되어 위치를 옮기거나 꾸밀 수 없는 시스템 alert 과는 달리 제작자가 원하는 대로 디자인을 커스텀 할 수 있기 때문에 자주 사용됩니다. 회사에 따라, 사람에 따라 레이어 팝업을 alert, 팝업, 모달 등으로 부르는 방법이 달라지기는 하지만 이번 포스팅에서 저는 '레이어 팝업'이라고 칭하도록 하겠습니다. 아래는 windo.. 2024. 11. 18. Position sticky와 z-index 사용하기 position의 가장 복잡한 속성 sticky와 z-index에 대해 알아보겠습니다. position과 position의 다른 속성들 css 속성 중 하나인 position의 다양한 타입들은 디자인적 명령을 수행하기에 최적화되어있습니다. 단순히 블록을 쌓듯 웹사이트를 만든다면 기능상에 큰 문제 없이 운영은 가능합니다. 그러나 인터넷 이용자가 늘어나고 기능이 발전되면서 우리가 이용하는 웹사이트들은 더욱 독특한 시도를 하고 심미적으로 만족스럽게 변화하고자 하는 경향을 가지게 되었습니다. position은 기존에 블록처럼 쌓여있는 웹 화면의 구성 요소들을 유동적으로 움직여 다양한 커스텀이나 시각적 변화를 가져올 수 있도록 합니다. position에는 오늘 다룰 sticky를 제외하고도 static, rel.. 2024. 11. 9. [css] position의 다양한 속성 알아보기 css 속성 중 하나인 position과 z-index에 대하여 알아보겠습니다. Positionposition은 지정된 태그의 위치를 임의로 띄워 조정하는 태그입니다. top, bottom, left, right 을 추가로 입력하여 요소의 상대적인 위치를 지정할 수 있습니다. 이때 top, bottom, left, right로 입력된 수치는 해당 방향으로 그만큼 떨어지게 되는 것을 의미합니다. 에를 들어 top: 20px; left:20px; 은 해당 요소를 위로부터 20px, 왼쪽으로부터 20px 떨어트려 놓으라는 의미가 됩니다.static position의 가장 기본적인 상태입니다. 사용자가 임의로 position 속성을 변경하지 않는다면 태그는 자동으로 position : static의 상태를 가집.. 2024. 11. 8. input 타입 radio와 checkbox 커스텀 하기 input 태그 타입 radio와 checkbox를 css를 사용하여 커스텀 하는 방법에 대하여 알아보겠습니다. 본 내용에 들어가기 앞서 input 태그에 관한 기초적인 사용 설명은 이전 포스팅 'input 와 label 태그 활용하기'를 참조해 주세요^^ https://salt-planet.com/entry/input-%EC%99%80-label%ED%83%9C%EA%B7%B8-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 input 와 label태그 사용하기웹 사이트를 만드는 데 중요하게 사용되는 input 태그의 종류와 label 태그의 사용법에 대해서 정리해 보겠습니다. input과 labelinput과 label은 한 쌍으로 이루어진 태그입니다. 웹 접근성을 통과하기salt-.. 2024. 11. 7. input 와 label태그 사용하기 웹 사이트를 만드는 데 중요하게 사용되는 input 태그의 종류와 label 태그의 사용법에 대해서 정리해 보겠습니다. input과 labelinput과 label은 한 쌍으로 이루어진 태그입니다. 웹 접근성을 통과하기 위해서는 모든 input에는 연결되는 label이 존재해야 합니다. 간단히 얘기하자면 input은 기능을 제공하고, label은 연결된 input을 정의하고 설명하는 기능을 가집니다. input과 label 연결하기예시)레이블Label: 위의 예시를 html 코드 그대로 옮기면 다음과 같습니다. 레이블Label: input 태그의 id 값을 지정하고 label에 for 값으로 입력하여 두 태그를 상호 연결하였습니다. 마우스로 label 태그를 클릭하였을 때 연결되어 있는 inpu.. 2024. 11. 6. 반응형 웹사이트 이미지 사이즈 비율 맞추기 반응형 웹사이트란?이미지 사이즈의 비율을 맞춰야 되는 이유몇 가지 방법- 미디어 쿼리를 사용하기- vh, vw 사용하기- flex 속성과 calc() 함수 사용하기- javascript(jqurey) resize 함수 사용하기- css 속성 사용하기현업에서 사용하기 반응형 웹사이트를 만들다 보면 이미지 사이즈의 비율을 맞추는 문제는 항상 발생합니다. 화면의 width가 resize 되며 이미지의 크기 또한 자연스럽게 변경되어야 합니다. 반응형 웹사이트란? 반응형 웹사이트란 하나의 웹사이트 주소로 다양한 기기에서 어려움 없이 사용 가능하도록 서비스를 제공하는 웹사이트 형식을 말합니다. 하나의 웹사이트를 다양한 비율과 크기의 기기에 최적화 되도록 제작한다면 별도의 애플리케이션 제공이 필요 없기 때문에 다양한.. 2024. 10. 24. 이전 1 다음
