AI 작성해줌
생성자: 트래브릭스-윤이사
문서 제목: 생성자: 트래브릭스-윤이사
HTML 구문 중에서 클릭하면 복사하게 만드는 것은 무엇일까요?
HTML 구문 중에서 텍스트를 클릭하면 해당 텍스트가 클립보드에 복사되도록 구현할 수 있습니다. 이렇게 복사된 내용은 다른 곳에 붙여넣기 할 수 있습니다. 이러한 기능을 구현하려면 "onclick" 이벤트와 "document.execCommand" 메서드를 사용할 수 있습니다.
예를 들어, 다음과 같은 HTML 코드를 사용하여 버튼을 만들고 클릭하면 해당 텍스트가 복사되도록 구현할 수 있습니다.
<button onclick="copyToClipboard()">복사하기</button>
<p id="copyText">복사할 텍스트</p>
<script>
function copyToClipboard() {
var copyText = document.getElementById("copyText");
copyText.select();
document.execCommand("copy");
alert("복사되었습니다.");
}
</script>
Plain Text
복사
<button onclick="copyToClipboard()">복사하기</button>
<p id="copyText">복사할 텍스트</p>
<script>
function copyToClipboard() {
var copyText = document.getElementById("copyText").innerText;
var tempInput = document.createElement("input");
tempInput.value = copyText;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
alert("복사되었습니다.");
}
</script>
Plain Text
복사
위 코드에서 "onclick" 이벤트는 버튼을 클릭할 때 "copyToClipboard" 함수를 호출하도록 합니다. "copyToClipboard" 함수는 "getElementById" 메서드를 사용하여 "copyText" 요소를 선택하고, "innerText" 속성을 사용하여 해당 요소의 내용을 선택합니다. 복사할 텍스트를 선택한 후에는, 이를 클립보드에 복사하는 명령어 "execCommand"를 사용합니다. 복사가 완료되면 "alert" 메서드를 사용하여 복사됨을 알립니다. 만들고 클릭하면 해당 텍스트가 복사되도록 구현할 수 있습니다.
<button onclick="copyToClipboard()">서울사무실 주소 복사하기</button>
<p id="copyText">서울시 강서구 마곡중앙6로66, 퀸즈파크텐 B동 7층(13호) 12층(우측전관) </p>
<script>
function copyToClipboard() {
var copyText = document.getElementById("copyText").innerText;
var tempInput = document.createElement("input");
tempInput.value = copyText;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild
HTML
복사
AI
<button onclick="copyToClipboard()">서울사무실 주소 복사하기</button>
<p id="copyText">서울시 강서구 마곡중앙6로66, 퀸즈파크텐 B동 7층(13호) 12층(우측전관) </p>
<script>
function copyToClipboard() {
var copyText = document.getElementById("copyText").innerText;
var tempInput = document.createElement("input");
tempInput.value = copyText;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
alert("복사되었습니다.");
}
</script>
Plain Text
복사
위 코드에서 "onclick" 이벤트는 버튼을 클릭할 때 "copyToClipboard" 함수를 호출하도록 합니다. "copyToClipboard" 함수는 "getElementById" 메서드를 사용하여 "copyText" 요소를 선택하고, "innerText" 속성을 사용하여 해당 요소의 내용을 선택합니다. 복사할 텍스트를 선택한 후에는, 이를 클립보드에 복사하는 명령어 "execCommand"를 사용합니다. 복사가 완료되면 "alert" 메서드를 사용하여 복사됨을 알립니다.
위 코드에서는 버튼을 사용하였지만, 다른 HTML 요소도 클릭 시 복사 기능을 구현할 수 있습니다. 아래는 서울 사무실을 클릭하면 클립보드에 복사되도록 구현한 예시입니다.
<a class="hello-world" onclick="copyToClipboard()">서울 사무실</a>
<script>
function copyToClipboard() {
var copyText = "서울 사무실 주소";
var tempInput = document.createElement("input");
tempInput.value = copyText;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
alert("복사되었습니다.");
}
</script>
우피사용가능 HTML 구문
생성자: 트래블릭스-윤이사
1. 클릭 후 복사
HTML 구문 중에서 클릭하면 복사하게 만드는 것은 무엇일까요?
HTML 구문 중에서 텍스트를 클릭하면 해당 텍스트가 클
AI 작성해줌
생성자: 트래블릭스-윤이사
문서 제목: 생성자: 트래블릭스-윤이사
HTML 구문 중에서 클릭하면 복사하게 만드는 것은 무엇일까요?
HTML 구문 중에서 텍스트를 클릭하면 해당 텍스트가 클립보드에 복사되도록 구현할 수 있습니다. 이렇게 복사된 내용은 다른 곳에 붙여넣기 할 수 있습니다. 이러한 기능을 구현하려면 "onclick" 이벤트와 "document.execCommand" 메서드를 사용할 수 있습니다.
예를 들어, 다음과 같은 HTML 코드를 사용하여 버튼을 만들고 클릭하면 해당 텍스트가 복사되도록 구현할 수 있습니다.
<button onclick="copyToClipboard()">서울사무실 주소 복사하기</button>
<p id="copyText">서울시 강서구 마곡중앙6로66, 퀸즈파크텐 B동 7층(13호) 12층(우측전관) </p>
<script>
function copyToClipboard() {
var copyText = document.getElementById("copyText").innerText;
var tempInput = document.createElement("input");
tempInput.value = copyText;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
alert("복사되었습니다.");
}
</script>
Plain Text
복사
위 코드에서 "onclick" 이벤트는 버튼을 클릭할 때 "copyToClipboard" 함수를 호출하도록 합니다. "copyToClipboard" 함수는 "getElementById" 메서드를 사용하여 "copyText" 요소를 선택하고, "innerText" 속성을 사용하여 해당 요소의 내용을 선택합니다. 복사할 텍스트를 선택한 후에는, 이를 클립보드에 복사하는 명령어 "execCommand"를 사용합니다. 복사가 완료되면 "alert" 메서드를 사용하여 복사됨을 알립니다.
위 코드에서는 버튼을 사용하였지만, 다른 HTML 요소도 클릭 시 복사 기능을 구현할 수 있습니다. 아래는 서울 사무실을 클릭하면 클립보드에 복사되도록 구현한 예시입니다.
<a class="hello-world" onclick="copyToClipboard()">서울 사무실</a>
<script>
function copyToClipboard() {
var copyText = "서울 사무실 주소";
var tempInput = document.createElement("input");
tempInput.value = copyText;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
alert("복사되었습니다.");
}
</script>
우피사용가능 HTML 구문
생성자: 트래블릭스-윤이사
1. 클릭 후 복사
HTML 구문 중에서 클릭하면 복사하게 만드는 것은 무엇일까요?
HTML 구문 중에서 텍스트를 클릭하면 해당 텍스트가 클립보드에 복사되도록 구현할 수 있습니다. 이렇게 복사된 내용은 다른 곳에 붙여넣기 할 수 있습니다. 이러한 기능을 구현하려면 "onclick" 이벤트와 "document.execCommand" 메서드를 사용할 수 있습니다.
예를 들어, 다음과 같은 HTML 코드를 사용하여 버튼을 만들고 클릭하면 해당 텍스트가 복사되도록 구현할 수 있습니다.
<button onclick="copyToClipboard()">서울사무실 주소 복사하기</button>
<p id="copyText">서울시 강서구 마곡중앙6로66, 퀸즈파크텐 B동 7층(13호) 12층(우측전관) </p>
<script>
function copyToClipboard() {
var copyText = document.getElementById("copyText").innerText;
var tempInput = document.createElement("input");
tempInput.value = copyText;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
alert("복사되었습니다.");
}
</script>
Plain Text
복사
위 코드에서 "onclick" 이벤트는 버튼을 클릭할 때 "copyToClipboard" 함수를 호출하도록 합니다. "copyToClipboard" 함수는 "getElementById" 메서드를 사용하여 "copyText" 요소를 선택하고, "innerText" 속성을 사용하여 해당 요소의 내용을 선택합니다. 복사할 텍스트를 선택한 후에는, 이를 클립보드에 복사하는 명령어 "execCommand"를 사용합니다. 복사가 완료되면 "alert" 메서드를 사용하여 복사됨을 알립니다.
위 코드에서는 버튼을 사용하였지만, 다른 HTML 요소도 클릭 시 복사 기능을 구현할 수 있습니다. 아래는 서울 사무실을 클릭하면 클립보드에 복사되도록 구현한 예시입니다.
<a class="hello-world" onclick="copyToClipboard()">서울 사무실</a>
<script>
function copyToClipboard() {
var copyText = "서울 사무실 주소";
var tempInput = document.createElement("input");
tempInput.value = copyText;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
alert("복사되었습니다.");
}
</script>
우피사용가능 HTML 구문
동 재생을 원하지 않는다면 값을 0으로 주세요!
indicator: # 슬라이드 아래에 나타나는 이동을 위한 점들을 의미합니다.
show: true # 점들을 숨기려면 값을 false로 변경하세요
color: "#6196FF" # 현재 보이는 슬라이드에 대응되는 점의 색깔입니다. 기본값: #6196FF
borderRadius: 16 # 슬라이드의 모서리를 둥글게 하는 값입니다. 기본값: 16
backgroundColor: "#6196FF" # 슬라이드의 배경화면 색상을 지정합니다. *) 배경을 투명색으로 사용하려면 "transparent" 를 입력하세요.
이메일 보내기
.hello-world {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
border: 2px solid;
font-weight: bold;
color: #0356fc;
background-color: #bfe4ef;
border-color: currentColor;
transition: 300ms;
}
.hello-world:hover {
color: white;
background-color: #ff3131;
color: red;
}
Plain Text
복사
</style>
<a class="hello-world" style="border-radius: 32px;" href="mailto:gm-yoon@trabricks.com"> 이메일 보내기</a>
이메일 보내기</a>헤드에 들어가는 콜아웃 블럭 배경 변경
<style>
.notion-callout-block {
background-image: url("https://images.unsplash.com/photo-1615800098746-73af8261e3df?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fHBhcGVyfGVufDB8MXwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
background-size: cover;
}
.notion-callout-block * {
color: #fff
!important
;
background-color: transparent
!important
;
}
</style>
페이지 상단 없애기
3.1. 전체 페이지에 적용하기
<style>
.page_cover, .width.padding:first-of-type {
display: none !important;
}
</style>
HTML
3.2. 특정 페이지에 적용하기
<head><style>
.page_cover, .width.padding:first-of-type {
display: none !important;
}
</style></head>
이미지 슬라이드 만들기
1. 노션에 콜아웃 블럭을 만들고 아래와 같이
oopy:slide를 입력해 주세요.
oopy:slide (앞뒤로 띄어쓰기가 있으면 안 돼요!)
2. 콜아웃 블럭 아래에
이미지들을 붙여주세요.
(이미지 권장 사이즈는 1416*512 입니다!)
oopy:slide ㅤ
고급) 슬라이드에 다양한 값을 조절해 보세요!
콜아웃 가장 상단에 YAML 코드 블럭을 추가해서 슬라이드에서 사용하는 다양한 값들을 조절할 수 있어요.
oopy:slide ㅤ
type: "crossfade" # Pro 플랜 전용) 애니메이션 효과가 크로스페이드로 적용됩니다.
speed: 1000 # 슬라이드가 넘어가는데 걸리는 시간입니다. 기본값: 1000 (ms, 밀리세컨드)
ratio: 2.76 # 슬라이드 너비 : 슬라이드 높이 비율을 지정합니다. 기본값: 2.76 (708px : 256px)
full: false # 슬라이드를 화면에 꽉 차도록 합니다. full 옵션이 true 일때도 ratio는 유지됩니다. 슬라이드가 컬럼이나 토글에 들어가는 경우 해당 옵션은 동작하지 않습니다. 기본값: false
autoplay:
period: 6000 # 슬라이드가 자동으로 넘어가기까지 걸리는 시간입니다. 자동 재생을 원하지 않는다면 값을 0으로 주세요!
indicator: # 슬라이드 아래에 나타나는 이동을 위한 점들을 의미합니다.
show: true # 점들을 숨기려면 값을 false로 변경하세요
color: "#6196FF" # 현재 보이는 슬라이드에 대응되는 점의 색깔입니다. 기본값: #6196FF
borderRadius: 16 # 슬라이드의 모서리를 둥글게 하는 값입니다. 기본값: 16
backgroundColor: "#6196FF" # 슬라이드의 배경화면 색상을 지정합니다. *) 배경을 투명색으로 사용하려면 "transparent" 를 입력하세요.
YAML
이메일 보내기
.hello-world {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
border: 2px solid;
font-weight: bold;
color: #0356fc;
background-color: #bfe4ef;
border-color: currentColor;
transition: 300ms;
}
.hello-world:hover {
color: white;
background-color: #ff3131;
color: red;
}
</style>
<a class="hello-world" style="border-radius: 32px;" href="mailto:gm-yoon@trabricks.com"> 이메일 보내기</a>
이메일 보내기</a>헤드에 들어가는 콜아웃 블럭 배경 변경
<style>
.notion-callout-block {
background-image: url("https://images.unsplash.com/photo-1615800098746-73af8261e3df?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fHBhcGVyfGVufDB8MXwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
background-size: cover;
}
.notion-callout-block * {
color: #fff
!important
;
background-color: transparent
!important
;
}
</style>