| [HTML/CSS] html 에서 카카오맵 불러오기 및 가운데 정렬 (!important) (2) | 2021.02.20 |
|---|---|
| [HTML/CSS] 중복되는 html 처리방법(flask) (1) | 2021.02.17 |
| [HTML/CSS] 부트스트랩 시작 템플릿 (0) | 2021.02.15 |
<!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="daumRoughmapContainer1613788870358" class="root_daum_roughmap root_daum_roughmap_landing"></div>
<!--
2. 설치 스크립트
* 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.
-->
<script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
<!-- 3. 실행 스크립트 -->
<script charset="UTF-8">
new daum.roughmap.Lander({
"timestamp" : "1613788870358",
"key" : "24iif",
"mapWidth" : "640",
"mapHeight" : "360"
}).render();
</script>카카오맵을 가져오는건 쉽게 해결했는데 어떤 이유에선가 <style>로 가운데 정렬 하는 코드가 적용이 안되었습니다.
현재 해결된 상태로 생각해 보면 내 html보다 카카오에서 지정한 style이 늦게 적용되어 기존 내가 작성한 html의 <style>이 덮어져 기능구현이 안되었습니다.
.root_daum_roughmap {
margin: auto !important;
}위와 같이 !important 명령어를 통해 언제 적용되는지와 관계없이 해당 코드를 실행하도록 하여 해결했습니다.
| [HTML/CSS] CSS, JS, img파일 변경 후 적용시키기 (0) | 2021.03.02 |
|---|---|
| [HTML/CSS] 중복되는 html 처리방법(flask) (1) | 2021.02.17 |
| [HTML/CSS] 부트스트랩 시작 템플릿 (0) | 2021.02.15 |
웹 사이트를 만드는 경우 상단(nav)/하단(footer) 등 여러 페이지에 중복해서 사용되는 부분이 있다. 이러한 경우 html마다 작성하게 되면 보기에도 불편하며 나중에 수정이 생길 경우 하나하나 다 바꿔야 하는 번거로움이 생기며 오타로 인한 오류가 발생할 수 있다. 이러한 문제점을 해결하기 위해 하나의 코드를 작성 후 필요한 html에서 불러오는 방법을 사용할 수 있다.
{% include '????.html' %}
{% include 'nav.html' %}
{% include 'footer.html' %}
//상대 경로로 인한 html호출
{% include_relative somedir/footer.html %}nav.html, footer.html과 같이 중복적으로 사용할 html을 따로 만들어 놓은 후 사용하길 원하는 곳에 해당 코드를 입력하면 됩니다.
| [HTML/CSS] CSS, JS, img파일 변경 후 적용시키기 (0) | 2021.03.02 |
|---|---|
| [HTML/CSS] html 에서 카카오맵 불러오기 및 가운데 정렬 (!important) (2) | 2021.02.20 |
| [HTML/CSS] 부트스트랩 시작 템플릿 (0) | 2021.02.15 |
부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동한다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</head>
<body>
</body>
</html>getbootstrap.com/docs/4.0/components/alerts/
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
getbootstrap.com
Free Bootstrap Themes, Templates, Snippets, and Guides
Start Bootstrap develops free to download, open source Bootstrap 4 themes, templates, and snippets and creates guides and tutorials to help you learn more about designing and developing with Bootstrap.
startbootstrap.com
출처 :
스파르타코딩클럽 웹개발종합반 -1주차 中
| [HTML/CSS] CSS, JS, img파일 변경 후 적용시키기 (0) | 2021.03.02 |
|---|---|
| [HTML/CSS] html 에서 카카오맵 불러오기 및 가운데 정렬 (!important) (2) | 2021.02.20 |
| [HTML/CSS] 중복되는 html 처리방법(flask) (1) | 2021.02.17 |