[워드프레스] html로 만든 div가 column 밖으로 나갈 때 / 워드프레스에서 다운로드 버튼 만들기

한 row를 4개의 column으로 나눠서 중앙 두개의 컬럼에 버튼을 각각 위치시켰다. 

위에는 html로 custom한 버튼을 넣었고, 아래에는 button component를 사용했다. 

같은 조건아래 둘을 위치시키면 아래와 같이 출력된다. 

즉, html로 만든 버튼은 row를 벗어나서 위치하게된다. 

왜일까.. 왜 줄바꿈을 하는거지? html로 만든 button의 width가 그렇게 큰것도 아니고, margin을 따로 주지도 않았다. 

<a href = "http://10.10.16.229/wordpress/wp-content/uploads/2023/04/%EC%98%81%EB%AC%B8%EA%B0%80%EB%A1%9C%ED%98%95.png" download><button style="background-color:#E50000; color:white; border-radius:20px; width:200px; height:66px; padding:1em 2em; font-wieight:500; line-height: 1.2!important; font-size:15px;text-transform:none;">영문가로형(레드)<br>다운로드</button></a>
</div>

 

 

</div>가 왜 거기있었을까..?

하하.., VSCode에서 테스트하느라 디브안에 넣어서 만들었던걸 복사붙여넣기 한 뒤 워드프레스 환경에서 수정한거였는데, </div>를 미처 지우지 못해 생기는 문제였다. 

지우니 해결완료! 

 

>> 코드를 자세히 잘 봐보자.. 뭘 더 추가하려고 하지말고! 하하

 

 

추가적으로 나는 버튼을 클릭하면 이미지를 다운로드할 수 있도록 구현하고 싶었는데, 워드프레스에서 해당 기능을 부여하는걸 찾기가 어려워서 (javascript를 쓰면 된다는데 더 복잡한듯) a tag로 구현해줬다. 

<a href = "이미지 경로.png" download><button>다운로드</button></a>

이 모양으로 만들면 된다. 워드프레스 자체 button도 <br>은 인식하니 이것도 참고하면 좋을 듯 하다.