[html, css] 웹린이 도와주시면 감사하겠습니다!!! ㅜㅜ

안녕하세요.
웹 공부 독학한 지 한 달도 안된 웹린이입니다!

제가 모바일웹을 만들고 있는데 아무리 구글링하고 제가 코드를 짜봐도 도저히!!! 답이 안나와서 글을 올리게 됐습니다.

사이다도 없이 몇 일동안 고구마 먹은 웹린이 도와주시면 정말 감사하겠습니다!

<문제>

1. height 가 device height에 딱 맞게 나오기
제가 만든 웹을 틀었을 때, 제가 구성한 화면의 height가 mobile device의 height에 100% 딱맞게 나왔으면 좋겠습니다! 예를 들어서 앱같은 경우에는 보통 스크롤 없이 화면의 높이가 딱 맞게 나오잖아요? 그걸 원합니다ㅜㅜ

width같은 경우에는 구글링을 통해서 해결했는데 height는 도저히 모르겠습니다 ㅜ
overflow: none; 할 필요도 없이 height 값이 화면에 딱 맞게 나오는 방법은 없을까요??
코드는 아래와 같이 짰습니다.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

2. 화면 당 box비율
위의 문제와 이어지는 문제일 수도 있겠습니다.

저는 text에 border을 줘서 box와 같은 모양으로 만들고 margin 값을 줘서 화면에 어떻게 나올 지 box들의 위치를 조정합니다. 그런데 이렇게 하다보니까 chrome에서 보여지는 비율과 제가 github에서 사이트를 틀어서 휴대폰으로 볼 때랑 화면 비율이 너무 다르고 스크롤도 생기고 하더라고요 ㅜ overflow: none;을 통해서 스크롤은 없앨 수 있지만 보통 개발하시는 분들이 content의 위치를 조정할 때 어떤 방법을 쓰는지 궁금합니다!

position: absolute; 등 을 줘서 top이나 left 등을 주어서 위치를 조정하는지 아니면 제가 하는 것 처럼 margin으로 위치를 조정하는 지 아니면 또 다른 방법이 있을까요?

3. text나 height의 단위
마지막으로 text나 height 등을 조절하는 단위가 많아서 어떤 것을 써야할지 혼동이 옵나다 ㅜㅜ
px은 device 크기에 상관없이 고정적인 단위라고 해서 보통 border을 줄 때 빼고는 쓰지 않습니다. 보통은 font-size에는 rem을 쓰고 box크기 조절(width나 height)에는 %나 vh를 주는데 이렇게 코딩을 하는 것이 맞을까요??

제가 너무 궁금한 점이 넘쳐섴ㅋㅋㅋㅜㅜ
말이 길어졌는데 알려주시면 정~~말정말정말정말 감사하겠습니다!!

그럼 이 글 보시는 분들 모두 좋은 하루 보내세요! :slight_smile:

+++

참고로 제가 만드는 페이지 중 하나입니다!

글이 중복된 것 같습니다
하나를 지워주세용

2 Likes

처음 가입되어서 글 등록 승인대기중인 분들이, 어 왜 글이 안올라가지? 하고 두 번 올리는 경우들이 많아용.

아직 삭제 권한도 없으실지도 : )

둘 다 제가 승인했는데 ( 폰으로 슬쩍 보니 본문 내용이 조금 다르길래 어느쪽을 살려야 하는지 확인 후 삭제하려공 )

다른쪽 글은 지금 삭제했습니다~

1 Like

아 넵 감사합니다 ! :slight_smile:

글 한 번 더 등록해야하는 줄 알고 두 번 올려버렸네요.
감사합니다!!