브라우저 크기에 따른 위치 변경에 관한 질문이 있습니다.
338
작성한 질문수 38
선생님 안녕하세요.
hiring-slogan 쪽에서 질문이 있습니다.
따옴표 모양을 before로 줘서 position을 absolute로 준 후 top, left 위치를 각각 -82px, -29px로 조정해주셨는데
이렇게 하니 화면이 작아졌을 때 :before와 기존 slogan이 아래처럼 겹치는 현상이 발생합니다.
보통 이런 현상을 막아주기 위해서는 어떤 방법을 쓰나요?
찾아보니 반응형 웹에서는 미디어쿼리를 적용시키는 것 같은데 이런경우에도 같은 방법을 사용하는지 궁금합니다.
답변 1
0
rem 또는 vw 이런 단위를 사용해서 만들면 브라우저 크기가 줄어드는 것에 비례해서 따옴표 모양의 크기를 변하게 할 수 있습니다. 그런데 rem 또는 vw 단위를 쓰면 폰트 사이즈 뿐만 아니라 마진 패딩 줄간격 좌표까지 rem 또는 vw 단위를 써야 하니까 여간 번거로운 일이 아닙니다.
일단 라우저 크기가 줄어드는 것에 비례해서 따옴표 모양의 크기를 변하게 하는 것은 지금은 무리라고 생각듭니다. 미디어쿼리에서 태블릿 구간에서 세팅, 모바일 구간에서 세팅 하시는게 어떨까 합니다.
0
첫 단어인 "Every"를 span 태그로 감싸고, 따옴표를 span의 before로 넣으면 브라우저 크기에 따라 이상하게 변하는 것을 예방할 수 있습니다.
<p>
<span>Every</span> summer we offer a Fellowship to a select group of students in architecture, planning and landscape architecture. Read about our 2019 Fellowship winners and learn more about what the Fellowship has to offer.
</p>.hiring-slogan p span:before {
content: ',,';
font-family: 'Overpass', sans-serif;
font-size: 200px;
position: absolute;
color: #ddd;
transform: rotate(180deg);
top: -82px;
left: -5px;
}full reload 질문
1
197
3
섹션4에 있는 4번째 강의 질문(스크롤링)
1
159
2
안녕하세요. 질문있어서 조심스레 글을 올려봅니다.
1
209
1
브라켓 라이브 실행시 실행오류때문에 진도가안나갑니다..ㅠㅠ
1
333
3
css full reload 문제가 발생하여 질문드립니다!
1
328
3
파일 내 index.html에 대한 오류
1
268
1
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 부분 해결되지 않아 재 질문 드립니다ㅠㅠ
1
214
1
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 질문입니다
0
221
2
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 다시 수정하여 질문드립니다!
1
208
2
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 질문드립니다.
1
262
3
크로스브라우징-크롬
1
292
2
섹션 17 하드코딩으로 이미지맵 만들기 부분 연습파일이 없어요..
0
261
1
line-hieght를 em 단위로 쓰는 것에 대하여 질문 드립니다
1
222
1
슬릭 슬라이더 dots 보이게 하는 방법 질문 드립니다
1
290
1
이거 h2 가 안나오고 스크롤도 안되는데 왜이래요?
1
265
1
모바일 버전에서 메뉴 클릭 후 그 위치로 이동할 때 상단 영역
1
522
2
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)4
2
235
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)3
2
316
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스 js)2
2
276
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태
2
441
1
포지션 속성 중복과 관련해서
1
228
1
section about에 관련.. 궁금해요
1
260
1
섹션3 모바일네이게이션 퍼블리싱 모바일트리거 관련
1
201
2
개발자도구
2
503
6