반응형
CSS 만 사용하여 텍스트를 숨기고 표시 할 수 있습니까 (JavaScript 코드 없음)? [닫은]
JavaScript를 전혀 사용하지 않고 CSS만으로 링크를 사용하여 텍스트를 표시하고 숨길 수 있습니까?
예 : 이 페이지에서
"더보기"링크를 참고하십시오. 클릭하면 텍스트가 숨김 해제됩니다. 이 특정 예는 JavaScript이지만 순수한 CSS로 할 수 있는지 확실하지 않습니다.
아직 Edge에 내장되지 않은 <details>요소 가 있습니다 .
<details>
<summary>more <!-- a bad summary --></summary>
<p>Some content</p>
</details>브라우저에서 일관된 스타일을 지정하는 것이 얼마나 어려운지 잘 모르겠습니다.
일반적인 체크 박스 해킹이 있습니다 (체크 박스를 숨길 수 있고 라벨을 어떤 모양이든 스타일링 할 수있는 곳) :
#more:not(:checked) ~ #content {
display: none;
}<input id="more" type="checkbox" /> <label for="more">more</label>
<p id="content">Some content</p>그러나 그것을 사용하는 것이 항상 (아마도? 흠) 적절하지는 않습니다. 일반적으로 자바 스크립트가로드되지 않을 때 콘텐츠를 표시하고 이에 대한 "추가"링크를 가질 수 있습니다.
도 :target있지만 폐쇄 메커니즘을 구축하는 것이 더 어렵 기 때문에 적절하지 않을 수 있습니다.
#content {
display: none;
}
#content:target {
display: block;
}
#less {
display: none;
}
#content:target ~ #less {
display: block;
}<a href="#content" id="more">More</a>
<p id="content">Lorem ipsum</p>
<a href="#" id="less">Less</a>예 , 이것은 순수한 CSS로 가능합니다. 체크 박스의 :checked속성을 <label>요소의 for속성 과 함께 사용하여 요소를 클릭 할 수 있습니다.
체크 박스가 될 수 있기 때문에 선택하지 않은 , 당신은 단순히 추가하여 토글 가시성이를 사용할 수 없습니다 visibility: hidden따른 요소에 :checked(체크 박스를 다시 클릭하면,이 의사 선택이 잘못 될 것이며, CSS 선택기는 더 이상 목표를 일치합니다).
이 속성 <label>을 사용 하여 확장 할 수 있으므로 for체크 박스 자체를 완전히 숨기고 직접 스타일을 적용 할 수 <label>있습니다.
다음은 요소를 클릭 할 때 클래스를 토글하기 위해 인접한 형제 결합 자 ( +) 를 사용합니다 .toggle<label>
input[type="checkbox"] {
display: none; /* Hide the checkbox */
}
/* This is tied to the invisible checkbox */
label {
background-color: #4CAF50;
border: 2px solid black;
border-radius: 20px;
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
display: inline-block;
margin-bottom: 20px;
cursor: pointer;
user-select: none;
}
/* The target element to toggle */
input[type="checkbox"]:checked + label + .toggle {
visibility: hidden;
}<input type="checkbox" id="checkbox" />
<label for="checkbox">Click me to toggle the content</label>
<div class="toggle">CONTENT</div>예, CSS만으로 쉽게이 작업을 수행 할 수 있습니다. 아래 코드를 참조하십시오.
* {
box-sizing: border-box;
}
body {
background-color: #646464;
color: #fff;
}
header {
background-color: rgba(0, 0, 0, 0.5);
font-size: 1.5em;
text-align: center;
padding: 1em;
}
.panel-wrapper {
position: relative;
}
.btn {
color: #fff;
background: #000;
border-radius: 1.5em;
left: 30%;
padding: 1em;
text-decoration: none;
width: 40%;
}
.show,
.hide {
position: absolute;
bottom: -1em;
z-index: 100;
text-align: center;
}
.hide {
display: none;
}
.show:target {
display: none;
}
.show:target~.hide {
display: block;
}
.show:target~.panel {
max-height: 2000px;
}
.show:target~.fade {
margin-top: 0;
}
.panel {
position: relative;
margin: 2em auto;
width: 70%;
max-height: 100px;
overflow: hidden;
transition: max-height .5s ease;
}
.fade {
background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%, #646464 75%);
height: 100px;
margin-top: -100px;
position: relative;
}<!DOCTYPE html>
<html lang='en' class=''>
<head>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
</head>
<body>
<header>CSS Only: Show More</header>
<div class="panel-wrapper">
<a href="#show" class="show btn" id="show">Show Full Article</a>
<a href="#hide" class="hide btn" id="hide">Hide Full Article</a>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra consectetur accumsan. Vestibulum vitae ipsum euismod, tempus ligula non, tempus lacus. Phasellus at pellentesque ex. Praesent at ipsum dui. Cras lectus neque, bibendum ac diam
a, elementum tristique felis. Sed iaculis, diam at vehicula lacinia, odio urna tincidunt felis, sit amet scelerisque urna erat non leo. Pellentesque vel leo vitae tellus bibendum viverra.</p>
<p>Donec id ultrices mi. Suspendisse potenti. Pellentesque cursus sagittis lacinia. Mauris elit sem, eleifend nec facilisis eget, fermentum sed odio. Nam aliquam massa nec leo tincidunt rhoncus. Integer tincidunt finibus tincidunt. Maecenas aliquam
fermentum nisi, vitae mattis neque vehicula vitae.</p>
<p>Nam orci purus, consequat sed lorem id, lacinia efficitur lorem. Vestibulum id quam ut elit congue varius. Donec justo augue, rhoncus non nisl ut, consectetur consequat velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aliquam
auctor sapien lorem, at vestibulum justo congue vel. Duis volutpat, lorem quis tincidunt ornare, felis tortor posuere tellus, nec pretium neque velit vulputate libero.</p>
<p>Morbi tortor tortor, auctor porttitor felis in, eleifend cursus ante. Nullam pellentesque lorem ipsum, in fringilla enim suscipit cursus. Pellentesque feugiat volutpat congue. Donec ac ante elit. Quisque ornare lacus dui, id commodo tortor lacinia
nec. Curabitur dignissim magna sagittis neque aliquam porttitor. Aenean sit amet tincidunt risus.</p>
<p>Cras feugiat, sapien luctus congue gravida, enim enim tristique nisl, vel porta lacus ante vitae dolor. Duis at nisl sed lectus imperdiet congue. Vestibulum pellentesque finibus ligula, sit amet elementum enim dignissim eget. Nullam bibendum justo
eros, in placerat est ullamcorper nec. Donec blandit accumsan venenatis. Vivamus nec elit arcu. Morbi ultrices blandit sapien eget aliquam. Pellentesque placerat et libero a sodales. Donec eget erat ac velit maximus ullamcorper. Nulla laoreet
dolor in purus sollicitudin varius. Duis eu erat ut magna lobortis rhoncus ac at lacus. Nullam in mi sed sem porttitor molestie. Aenean auctor dui in neque vulputate, in mattis purus tristique. Aliquam egestas venenatis ultricies. Nam elementum
ante libero, nec dictum erat mollis dapibus. Phasellus pharetra euismod nibh, sit amet lobortis odio.</p>
<p>Sed bibendum dapibus leo eu facilisis. Cras interdum malesuada diam id lobortis. Phasellus tristique odio eget placerat ornare. Phasellus nisl nulla, auctor convallis turpis tempus, molestie blandit urna. Nullam accumsan tellus massa, at tincidunt
metus imperdiet sed. Donec sed imperdiet quam, id dignissim dolor. Curabitur mollis ultricies tempor. Morbi porttitor, turpis et dignissim aliquam, nunc lacus dignissim massa, a consequat nibh est vel turpis. Pellentesque blandit, ante vehicula
sollicitudin imperdiet, tellus urna fringilla diam, id tempor neque augue eu nisl. Quisque eu sem posuere, vehicula risus ut, ullamcorper massa. Fusce vulputate bibendum erat, vel dapibus dui consectetur nec. Donec mauris mauris, egestas non malesuada
non, finibus nec lacus. Duis at mauris tincidunt, accumsan augue non, vestibulum libero.</p>
<p>Vestibulum fermentum vulputate lectus, at sollicitudin diam laoreet vitae. Aliquam erat volutpat. Nulla condimentum, arcu nec suscipit ultrices, urna tortor rutrum purus, sed mollis lacus ligula vitae justo. Duis vitae malesuada sem, eget finibus
nibh. Etiam facilisis, urna ac blandit molestie, quam velit congue nibh, ac.</p>
</div>
<!-- end panel -->
<div class="fade"></div>
</div>
<!-- end panel-wrapper -->
</body>
</html>확인란을 숨길 수 있지만 관련 <label>요소 를 통해 선택 / 선택 취소 할 수 있습니다 .
확인란의 선택 여부에 따라 추가 텍스트를 숨기거나 표시 할 수 있으며 레이블의 텍스트를 "More"에서 "Less"로 변경할 수도 있습니다.
각 정의의 의도가 좀 더 명확해질 수 있도록 CSS에 몇 가지 추가 세부 정보를 포함했습니다.
1. "More"/ "Less"토글 버튼 하나로 :
.more-text, #more-checkbox { /* Hide the second paragraph and checkbox */
display: none;
}
input:checked ~ .more-text { /* Show the second paragraph when checked */
display: block;
}
.more-label::after { /* Label underline, hand cursor, color */
cursor: pointer;
text-decoration: underline;
color: #666;
}
input ~ .more-label::after { /* Set label text to "More" by default */
content: 'More';
}
input:checked ~ .more-label::after { /* Set label text to "Less" when checked */
content: 'Less';
}<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.
</p>
<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox"></label>
<p class="more-text">
Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>2. 상단의 "More"버튼과 하단의 "Less"버튼 :
.more-text, #more-checkbox, .less-label {
display: none;
}
.more-label, .less-label {
cursor: pointer;
text-decoration: underline;
color: #666;
}
input:checked ~ .more-text, input:checked ~ .less-label {
display: block;
}
input:checked ~ .more-label {
display: none;
}<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.</p>
<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox">More</label>
<p class="more-text">
Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>
<label class="less-label" for="more-checkbox">Less</label>기술적으로 말하면 아래와 같이 버튼이나 링크를 클릭 할 때를 기준으로 텍스트 표시 여부를 전환 할 수 있습니다.
.hidden-text {
display: none;
}
.toggle-text:focus + .hidden-text {
display: block;
}<p>
This is an example with no hidden content until you... <a href="#" class="toggle-text">read more</a>!
<span class="hidden-text">Now I'm visible!!!</span>
</p>즉, JavaScript를 사용하는 솔루션이 훨씬 간단하고 추가 유연성을 허용하므로 JavaScript에 익숙해지는 것이 좋습니다.
예, HTML과 CSS 만 사용하면됩니다.
body { padding: 20px; }
div { margin-top: 10px; border: 1px solid black; width: 200px; height: 100px;
padding: 5px;
}
input:checked + label + div { display: none; }
input + label:after { content: " To Hide"; }
input:checked + label:after { content: " To Show"; }
label {
background-color: yellow;
box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
border-radius: 4px;
font-size: 16px;
display: inline-block;
padding: 2px 5px;
cursor: pointer;
}<input type='checkbox' style='display: none' id=cb>
<label for=cb>Click Here</label>
<div>
Hello. This is some stuff.
</div>이제 CSS 만 사용하여 텍스트를 숨기거나 표시 할 수도 있습니다! 텍스트 입력을 사용 중이고 입력 상자의 상태에 따라 텍스트를 표시하거나 숨기려면 또는에 :placeholder-shown대한 새 CSS 의사 클래스 를 사용할 수 있습니다 . 다음은 위에서 언급 한 가상 클래스의 예제 / 데모입니다! :<input><textarea>
/* Some base style */
.app {
margin: 10px auto;
padding: 10px;
}
code {
background-color: lightgray;
padding: 4px;
}
input {
padding: 5px 10px;
}
input:focus {
outline: none;
}
/* When there is something in input box give
it a solid blue border */
input:not(:placeholder-shown) {
border: solid 2px #42A5F5
}
/* Hide the p initially */
p {
background-color: #F0F4C3;
padding: 5px;
opacity: 0;
transition: all 300ms ease-in-out;
}
/* Show the p when the placeholder is not shown.
i.e. Something is in the input box and placeholder is gone */
input:not(:placeholder-shown)+p {
opacity: 1
}<div class="app">
<h1>Hide/Show Text using input's <code>:placehoder-shown</code> psuedo class!</h1>
<label for="name">Enter your name</label>
<input type="text" id="name" placeholder="Your Name">
<p class="msg">Well done!</p>
</div>Here is Link to MDN Docs.
This is an experimental technology Check the Browser compatibility table carefully before using this in production.
Maybe somebody will find this solution more intuitive and easier to implement. The mechanics of this is that the link targets itself and in that case it's easy to select anything what comes next in the DOM.
.toggle-hide,
.toggle-content {
display: none;
}
.toggle-show:target + .toggle-hide,
.toggle-show:target + .toggle-hide + .toggle-content {
display: block;
}
.toggle-show:target {
display: none;
}<a id="target" class="toggle-show" href="#target">Show</a>
<a class="toggle-hide" href="#" >Hide</a>
<p class="toggle-content">Lorem ipsum</p>Use "display: none;" attribute.
반응형
'IT story' 카테고리의 다른 글
| Roslyn없이 웹 사이트 게시 (0) | 2020.09.15 |
|---|---|
| 부모 클래스에서 자식 구성 요소 메서드 호출-Angular (0) | 2020.09.15 |
| Log4j XML 구성 파일을 사용하여 Hibernate 로깅을 구성합니까? (0) | 2020.09.15 |
| 라인과 지점 커버리지의 차이점 (0) | 2020.09.15 |
| Rails의 하위 도메인간에 세션 (쿠키)을 공유 하시겠습니까? (0) | 2020.09.15 |