«html» 태그된 질문

HTML (HyperText Markup Language)은 웹 페이지 및 웹 브라우저에 표시 할 기타 정보를 작성하기위한 기본 마크 업 언어입니다. HTML에 관한 질문에는 최소한의 재현 가능한 예제와 달성하려는 것에 대한 아이디어가 포함되어야합니다. 이 태그는 거의 사용되지 않으며 종종 [CSS] 및 [javascript]와 쌍을 이룹니다.

4
CSS를 사용하여 DIV를 불균등하게 중앙에 배치
flexbox를 사용하여 다른 DIV 내부에 DIV를 배치하고 있습니다. 필요할 때 화면 중앙에 나타나는 대화 상자를 생각해보십시오. 잘 작동하지만 대화 상자 위와 아래의 공간이 정확히 같지 않으면 나머지 공간의 40 %가 대화 상자보다 높고 60 % 아래에 있습니다. 대화 상자 높이는 내부 텍스트의 양에 따라 달라지기 때문에 까다로워집니다. 예를 들어 브라우저 …
23 html  css  flexbox  centering 
10
배경색이 같은 세 div 사이의 이상한 간격을 제거하는 방법은 무엇입니까?
나는 지금이 문제로 꽤 고생하고 있습니다. 이 문제는 휴대 기기 (Android 및 iOS)에서 볼 수 있으며 일부 기기는 약간 확대해야합니다. PC에서는 모바일 모드로 전환 할 때 Chrome 브라우저에서이 버그를 재현 할 수도 있습니다. 다음은 버그를 재현하는 데 사용되는 코드입니다. <!DOCTYPE html> <html lang="en"> <head> <style> .top { height: 100px; background-color: …
23 html  css 
5
2 개의 iframe을 비교하고 시각적으로 차이를 얻는 방법?
사례 : 나는 2 개의 iframe을 가지고 있으며 둘 다 많은 div와 다른 컨트롤을 가지고 있으므로 두 iframe 모두 HTML 웹 사이트의 중간 크기와 같습니다. 둘 다 비교하고 차이점을 찾고 싶습니다. 나는 여기에 다른 옵션을 생각했다. 해결 방법 1 : 2 iframe의 전체 스크린 샷을 찍고 스크린 샷의 불일치 영역에 …
5
JavaScript의 텍스트 영역에서 선택한 텍스트 위치를 얻는 방법은 무엇입니까?
자바 스크립트를 사용하여 선택한 텍스트 위치를 얻고 싶습니다. 예를 들어 간단한 텍스트 영역이 있습니다. #input-text { resize: none; width: 50%; height: 50px; margin: 1rem auto; } <textarea id="input-text">I am a student and I want to become a good person</textarea> 코드 스 니펫 실행결과 숨기기스 니펫 확장 내 텍스트 영역에는 다음과 …
20 javascript  html 
7
이전에 설정 한 테두리 색상 제거
function validate() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; if (username == "") { document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY"; document.getElementById("username").style.borderColor = "red"; return false; } if (password == "") { document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY"; document.getElementById("password").style.borderColor = "red"; return false; } } #username:focus { background-color: yellow; …
20 javascript  html  css 
8
두 개의 HTML 페이지가 동일하게 보이는 것을 어떻게 증명할 수 있습니까?
예를 들어, 나는 이것을 가지고있다 : <pre> sun<br/>     mercury <br/>     venus <br/>         earth <br/>         mars <br/>             jupiter <br/>     saturn <br/> </pre> 코드 스 니펫 실행결과 숨기기스 니펫 확장 이: <div style="font-family:monospace"> <div style="text-indent: 0">sun</div> <br/> <div style="text-indent: 4ch">mercury</div> <br/> <div style="text-indent: 4ch">venus</div> <br/> <div style="text-indent: 8ch">earth</div> <br/> <div style="text-indent: 8ch">mars</div> …
19 html  css  acid3 
5
세로로 스크롤 할 때 가로 스크롤을 허용하지 마십시오 (또는 그 반대)
overflow-x및로 overflow-y설정된 목록 이 auto있습니다. 또한 운동량 스크롤을 설정 했으므로 터치 스크롤이 모바일에서 잘 작동합니다 webkit-overflow-scrolling: true. 그러나 문제는 세로 스크롤 할 때 가로 스크롤을 비활성화하는 방법을 알 수 없다는 것입니다. 왼쪽 상단 또는 오른쪽 상단으로 스 와이프하면 테이블이 대각선으로 스크롤되므로 사용자 환경이 실제로 좋지 않습니다. 사용자가 세로 스크롤 할 …
10
랩 어라운드로 같은 크기의 div 만들기
위아래 이미지와 텍스트로 메뉴 시스템을 만들려고합니다. 데이터는 동적입니다. 메뉴 시스템을 표시하여 각 이미지가 서로 다른 이미지와 동일한 거리를 유지하여 이미지가 가로 및 세로로 격자 모양으로 정렬되도록하고 싶습니다. 문제는 텍스트입니다. 텍스트가 이미지보다 길면 div가 확대됩니다. 그러나 이미지가 더 이상 서로 간격을 두지 않기 때문에 어색한 간격이 생깁니다. 이 문제를 해결하려면 가장 …
17 html  css  flexbox 
2
균일 한 간격으로 점선 원을 만드는 방법은 무엇입니까?
CSS로 점선을 만들고 싶었고 다음 프로세스로 만들었습니다. 이 프로세스에 의해 점선 원이 표시 될 수 있지만, 점선의 끝과 시작 사이의 간격이 좁아지고 간격이 균일하지 않았다. .c { width: 500px; height: 500px; border-width: 15px; border-style: dashed; border-radius: 600px; } <div class="c"></div> 코드 스 니펫 실행결과 숨기기스 니펫 확장 간격을 균일하게 만드는 …
16 javascript  html  css 
8
Ctrl + 클릭을 사용하여 여러 셀을 선택하는 방법
숫자가있는 테이블이 있습니다. 표에서 셀을 클릭하면 활성 상태가 전환됩니다. 하나의 셀을 선택하고 crtl을 누르고 다른 셀을 선택하고 결과적으로 첫 번째와 두 번째 사이의 셀이 활성화됩니다. 그것을 구현하는 방법? 코드 펜 https://codepen.io/geeny273/pen/GRJXBQP <div id="grid"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> <div class="cell">5</div> <div class="cell">6</div> </div> const grid = document.getElementById("grid") …
16 javascript  html  css 
3
다중 레벨 드롭 다운 목록을 작성하고 서버에서 오는 데이터와 바인딩하는 방법
나는 Angular를 처음 접했습니다. Angular에 대한 작업이 있습니다. JsonRest Api를 호출하여 서버에서 오는 데이터에 대해 Nested 드롭 다운 목록을 바인딩해야합니다 . 데이터에는 하나의 속성이 LgLevel있습니다. 그룹의 계층 구조에서 레벨을 지정합니다. 부모는 것 level=0, 즉각적인를 Child=1, Grandchild=2등등합니다. Child그리고 Grandchild이 ParentLocationGroup쇼가있는 내부 부모 메뉴, 하위 메뉴가있을 것입니다 필드. 이것은 내 json데이터입니다. 거대한 …
4
CSS "롤러 코스터"애니메이션에서 선을 어떻게 구부릴 수 있습니까?
CSS를 사용하여 롤러 코스터 스타일의 애니메이션을 만들려고합니다. 루프 단계에있을 때 "코스터"를 구부리는 방법을 알고 싶습니다. 모든 CSS 솔루션을 찾고 있지만 약간의 JavaScript가 필요하다면 괜찮습니다. 지금까지 내 코드 : #container { width: 200px; height: 300px; margin-top: 50px; position: relative; animation: 10s infinite loop; animation-timing-function: linear; } #coaster { width: 100px; height: …
6
고정 된 flexbox 탐색 메뉴 아래에 스크롤 가능한 컨텐츠 배치
다음 스 니펫 (전체 화면 모드로 볼 필요가 있음)이 있습니다. <main>요소를 요소 바로 아래 에 배치하려고합니다 <header>. 나는이 <header>나는 그것이의 콘텐츠를 통해 사용자가 스크롤로 화면 상단에 있고 싶어하기 때문에 고정 된 위치를 <main>요소입니다. 내가 아는 모든 것을 시도했지만 가장 좋은 방법은 <header>요소를 요소 위에 배치 <main>하여 내용의 큰 부분을 잘라내는 …
15 html  css  css-position  fixed 
2
iframe에서 window.location.replace를 사용할 수 있습니까?
우리는 기록window.location.replace 을 피하고 페이지를 다시로드하지 않고 페이지 내 앵커 를 타겟팅 할 수 있지만 iframe에서는 사용할 수 없습니까? 문제는 인 CSP (콘텐츠 보안 정책)을 위반, 국가가 script-src 'unsafe-inline'활성화되어 있어야합니다. CSP가 정의되어 있지 않고 예외를 정의하고 허용하더라도 script-src 'unsafe-inline'여전히 동일한 위반 오류가 발생합니다. ie11 / chrome / ff와 동일한 결과입니다. …
6
Next.js를 다른 페이지로 /에서 다른 페이지로 리디렉션
Next.js의 새로운 기능으로 시작 페이지 ( / )에서 / hello-nextjs 로 리디렉션하는 방법이 궁금합니다 . 사용자가 페이지를로드 한 후 path === / / hello-nextjs로 리디렉션 되는지 확인 에서이 반응 라우터 우리가 그런 짓을 : <Switch> <Route path="/hello-nextjs" exact component={HelloNextjs} /> <Redirect to="/hello-nextjs" /> // or <Route path="/" exact render={() => …
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.