<![CDATA[CSS 반응형 버튼 만들기]]> https://www.cosmosfarm.com/threads/rss/document/20579 CSS 질문 입니다.

안녕하세요.

모바일에서 버튼 크기가 작아지지 않게 하려면 어떤 코드를 추가해야 할까요..?ㅜㅜ

https://imgur.com/bkTwcqM

<head>
<style>

body {
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 16px;
}

.wrap {

position: absolute;
top: 50%;
left: 50%;
margin-top: -86px;
margin-left: -89px;
text-align: center;
}

a {
-webkit-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
-moz-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
-ms-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
-o-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
display: block;
margin: 20px auto;
max-width: 180px;
text-decoration: none;
border-radius: 15px;
padding: 20px 30px;
}

a.button {
color: rgba(30, 22, 54, 0.6);
box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}

a.button:hover {
color: rgba(255, 255, 255, 0.85);
box-shadow: rgba(30, 22, 54, 0.7) 0 0px 0px 40px inset;
}

a.button2 {
color: rgba(30, 22, 54, 0.6);
box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}

a.button2:hover {
color: rgba(255, 255, 255, 0.85);
box-shadow: rgba(30, 22, 54, 0.7) 0 80px 0px 2px inset;
}
</style>
</head>

<body>
<div class="wrap">
<a href="http://ai-tips.com/blog/" class="button">Blog</a>
<a href="#" class="button2">Community</a>
</div>
</body>
]]> Copyright 2026, 코스모스팜 <![CDATA[안녕하세요~^^ 워드프레스로 사이트를 만들고 계신지요? PC와 모바일 화면의 레이아웃이 다르다면 테...]]> https://www.cosmosfarm.com/threads/document/20584 안녕하세요~^^

워드프레스로 사이트를 만들고 계신지요?

PC와 모바일 화면의 레이아웃이 다르다면

테마 또는 다른 플러그인과의 CSS 충돌 문제로 보입니다.

이런 경우에는 CSS 미디어 쿼리를 사용해서

모바일에서도 PC 화면과 동일한 CSS 속성을 적용해주시면 될 듯합니다.

아래의 코드를 활용해보시겠어요?

@media screen and (max-width: 600px) {
	// 이곳에 모바일 화면에서 표시할 CSS 코드를 입력해보세요.
	a { -webkit-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); -moz-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); -ms-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); -o-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360); display: block; margin: 20px auto; max-width: 180px; text-decoration: none; border-radius: 15px; padding: 20px 30px; }
}

미디어 쿼리에 대한 내용은 구글에 검색해보면 많은 정보들이 있으니 찾아보시겠어요?

고맙습니다.

]]> 스레드봇 Mon, 12 Mar 2018 00:06:13 +0000 HTML/CSS/웹표준 <![CDATA[pc에서 열때와 모바일 화면에서 열때의 차이 입니다.. https://imgur.com/bkTwcqM https://imgur.com/...]]> https://www.cosmosfarm.com/threads/document/20580 pc에서 열때와 모바일 화면에서 열때의 차이 입니다..

https://imgur.com/bkTwcqM

https://imgur.com/gYtZPTQ

]]> DianaHulk Sat, 10 Mar 2018 08:18:39 +0000 HTML/CSS/웹표준