레이아웃3

• 

  사파리에서 디바이스별로 확인하는 방법 (응답형 디자인 모드) 크롬에서는 디바이스별로 레이아웃을 볼 수 있는 것이 개발자 도구에 떡하니 있는데, 사파리에서는 찾아볼 수가 없었습니다. 사파리에서는 조금 다른 메뉴인 [응답형 디자인 모드 시작] 이란 메뉴를 선택해야 디바이스별로 레이아웃을 볼 수 있습니다. 사파리 -> 개발자용 -> 응답형 디자인 모드 시작 응답형 디자인 모드가 실행되면 위의 디바이스를 클릭하면 레이아웃을 확인할 수 있습니다. iOS 기기 디바이스인 아이폰 SE부터 아이패드 프로(12.9인치)까지 확인이 가능합니다. 디바이스를 클릭하면 세로/가로로 전환되면서 레이아웃을 확인할 수 있습니다. 가로/세로 사이즈를 늘리고 싶다면, 하단에 네모박스처럼 생긴 부분을 드래그하면 늘릴 수도 있습니다. 이번에 아이폰 디바이스를 확인하면서 사용한 응답형 디자인 모드였습.. HTML 2022. 12. 26.

• 

  [웹 퍼블리셔 189일차] 결함과의 싸움! 정말 오랜만에 글을 쓰게 되었습니다. 거의 두 달 만에 글을 쓰게 되면서 그간 있었던 것 중에 가장 많이 했던 제 실수부터 잘 놓치는 부분을 크게 3개를 써봤습니다. 계속해서 프로젝트를 진행할 때 참고하고, 또 참고하고 신경쓰기 위해서 작성 하였습니다. 1. 크로스브라우징에 신경쓰자 제가 가지고 있는 휴대폰은 갤럭시노트10으로 디바이스 화면도 크다고 생각하지 못했습니다. 제가 생각했던 크로스 브라우징이라는 것은 크롬, 사파리, IE 환경에서 레이아웃이 달라지지 않아야 한다는 것! 바로 그 뿐이라고 생각했습니다. 하지만, 어플리케이션에서 브라우저 환경을 보는 것이 아닌, 디바이스별로 화면에서 레이아웃이 깨지는지 확인하는지 이번 프로젝트를 통해서 알게 되었습니다. 참 다양한 환경에서 레이아웃이 틀어지는 부분.. 웹 퍼블리셔 일기 2021. 10. 10.

• 

  [CSS] 여전히 헷갈린 Float 해제 방법을 정리! 요즘에는 레이아웃을 잡는 방법이 display: flex를 이용하여 다양한 방법으로 하지만, 그래도 아직까지는 IE를 대응해야하기 때문에 float을 사용하는 방법을 그래도 알고 있어야 합니다. (뼈저리게 느끼고 있습...) 일단 float을 사용해서 레이아웃을 잡는 경우는 바로 가로로 배치하려고 하는 부분에서 사용이 됩니다. 하지만 float을 많이 사용하지 않는 이유는 해제하는 방법이 까다로워서 그런 것이 아닐까? 그리고 flex나 다른 방법으로 가로 배치하는 방법도 많은데 궂이? 라고 생각하시겠지만 꼭! 알아두시는 것이 좋습니다. left 요소를 왼쪽에 배치 right 요소를 오른쪽에 배치 ※ HTML 코드 안녕하세요 저는 Lorem ipsum dolor, sit amet consectetur ad.. CSS 2021. 6. 28.