MostOneBrush

<p><span style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre; background-color: #1e1e1e;">&nbsp;</span><span style="box-sizing: border-box; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre; background-color: #1e1e1e; color: #569cd6;">let</span><span style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre; background-color: #1e1e1e;">&nbsp;</span><span style="box-sizing: border-box; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre; background-color: #1e1e1e; color: #9cdcfe;">shortSum</span><span style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre; background-color: #1e1e1e;">&nbsp;=&nbsp;</span><span style="box-sizing: border-box; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre; background-color: #1e1e1e; color: #9cdcfe;">total</span><span style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre; background-color: #1e1e1e;">&nbsp;-&nbsp;</span><span style="box-sizing: border-box; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre; background-color: #1e1e1e; color: #9cdcfe;">max</span></p>
<p>max 값이 할당되기 전이라 현재 값이 undefined인데, <br />할당되기 전의 값을 연산되게 하셔서 shortSum이 NaN으로 뜹니다.<br /><br />해당 구문을 max값을 할당한 이후에 받겠금 바꿔서 넣으시면 원하시는 결과 값을 얻으실 수 있습니다.</p>

이렇게했는데 no가 나와요..

<p>css 셀렉터에서 특정 속성이 포함되지 않은 것만 찾으시려 한다면 :not(속성) 으로 표기하시면 됩니다.</p>
<p>음영친 부분을 기준으로 하면 <strong>ul:not(.plus) > li .itemname</strong> 이렇게 되겠네요.</p>

CSS Selector 에서 질문이 있습니다.

<p>저도 현재 수강중인 학생인데요.</p>
<p>todoItem이 div에서 에러난건 todoItem이 todoItems라는 원본 데이터의 반복되는 엘레먼트 요소라서 독립적으로 사용할 수 없는 값이라서 그런거고, 만일 div에도 사용하실거면 li에 사용한 v-for구문을 div에 넣으시면 사용하실 수 있으실거예요.</p>

값(?) 전달 범위

<p>저도 비슷한 이슈로 고민하다가 처리를 한적이 있어서 짤막하게 글을 남깁니다.</p>
<p><swiper> 컴포넌트에 v-if로 조건 넣으시고 api 값을 받아왔을 때 해당 조건을 받아들일 수 있게 처리해보세요.</p>
<p>말씀하신것 처럼 dom 생성전에 plugin을 먼저 읽는다면, 해당 조건이 충족되지 않을 땐 dom을 생성하지 않게 처리하고, api 데이터를 받아올 때 dom이 생성되도록 처리해주시면 됩니다.</p>
<p>현재 코드가 어떻게 작성되어있으신지 몰라서 대충 약식으로 작성해봤는데 도움이 되실지 모르겠네요.</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">template</span><span style="color: #808080;">></span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;"><</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;"><</span><span style="color: #569cd6;">swiper</span>&nbsp;<span style="color: #9cdcfe;">v-if</span>=<span style="color: #ce9178;">"isLoading"</span><span style="color: #808080;">></span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...중략</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;"></</span><span style="color: #569cd6;">swiper</span><span style="color: #808080;">></span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"></</span><span style="color: #569cd6;">template</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></div>
<div><span style="color: #c586c0;">export</span>&nbsp;<span style="color: #c586c0;">default</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #dcdcaa;">data</span>&nbsp;()&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">isLoading:</span>&nbsp;<span style="color: #569cd6;">false</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">swiperOption:</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">slidesPerView:</span>&nbsp;<span style="color: #b5cea8;">1</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">spaceBetween:</span>&nbsp;<span style="color: #b5cea8;">16</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">loop:</span>&nbsp;<span style="color: #569cd6;">false</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;},</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">methods:</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #dcdcaa;">init</span>()&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #dcdcaa;">fetch</span>(<span style="color: #9cdcfe;">url</span>).<span style="color: #dcdcaa;">then</span>((<span style="color: #9cdcfe;">response</span>)&nbsp;<span style="color: #569cd6;">=></span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">swiperOption</span>.<span style="color: #9cdcfe;">slidesPerView</span>&nbsp;=&nbsp;<span style="color: #9cdcfe;">response</span>.<span style="color: #9cdcfe;">data</span>.<span style="color: #9cdcfe;">length</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">isLoading</span>&nbsp;=&nbsp;<span style="color: #569cd6;">true</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;},</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #dcdcaa;">created</span>&nbsp;()&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">this</span>.<span style="color: #dcdcaa;">init</span>()</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div>}</div>
<div><span style="color: #808080;"></</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></div>
</div>

vue 플러그인 data 동적으로 변동하는 질문입니다ㅠ

<p>강사님은 아니지만 몇 가지 답변을 남겨드리면,</p>
<p>1.</p>
<p>웹 접근성은 유저가 어떠한 도구나 장애를 갖더라도 똑같이 사이트를 이용하는데 지장이 없겠금 하는 것에 목적을 두고 있습니다.</p>
<p>display:none 속성을 사용할 경우 청각 장애를 갖고 있는 사용자일 경우 스크린리더라는 보조기기를 사용하는데, display:none으로 숨김 처리를 할 경우 보조기기가 해당 컨텐츠를 읽지 않습니다. ir 기법이라 해서 이미지를 설명할 수 있는 대체텍스트를 제공함으로써 시각적으로는 보여지지 않지만 그들을 위한 보조 텍스트를 제공하기 위해 좀 더 수고롭게 스타일을 넣는거죠.</p>
<p>https://juyeol.tistory.com/25</p>
<p></p>
<p>2.</p>
<p>h1 태그를 굳이 남기고 스타일 처리하는 것은 코드 가독성보다는 스크린리더 사용자가 해당 컨텐츠에 대한 이해를 쉽게 할 수 있도록 하기 위한 목적이 더 큽니다. 부가적으로 검색엔진에 컨텐츠와 맞는 텍스트를 제공할 경우 그만큼의 가중치를 얻을 수 있습니다.</p>
<p></p>
<p>3.</p>
<p>국내에서는 널리가 접근성 관련해서 어떤 부분들이 있는지 안내를 잘해놔서 한 번 사이트 참고해보시는 것도 좋을 것 같네요.</p>
<p>https://nax.naver.com/index</p>

css 관련 질문있습니다.

<p>강사님은 아니지만 지나가다가 보고 작성합니다</p>
<p></p>
<pre class="language-html"><code>              
              <input type="radio" name="tabmenu" id="tab1" checked />
              <input type="radio" name="tabmenu" id="tab2" />
              <input type="radio" name="tabmenu" id="tab3" />
              <input type="radio" name="tabmenu" id="tab4" />
              <input type="radio" name="tabmenu" id="tab5" />
              <input type="radio" name="tabmenu" id="tab6" />

              
              <input type="radio" name="tabmenu" id="tab10" checked />
              <input type="radio" name="tabmenu" id="tab11" />
              <input type="radio" name="tabmenu" id="tab12" />
              <input type="radio" name="tabmenu" id="tab13" /></code></pre>
<p></p>
<p>현재 작성하신 코드를 보면 반응형 슬라이드랑 적응형 슬라이드의 input type은 radio로 선언되어 있고 동일한 name으로 명시해주셨는데 이 경우 radio의 특성상 동일한 name을 가진 것들 중 하나만 선택되기 때문에 하나만 노출되는 것이 정상입니다.</p>
<p>만약 별도로 선택되는 것을 원하실 경우 다음과 각각 다른 name을 가지도록 같이 바꿔주셔야하는데요</p>
<p></p>
<pre class="language-html"><code>                
              <input type="radio" name="tabmenu1" id="tab1" checked />
              <input type="radio" name="tabmenu1" id="tab2" />
              <input type="radio" name="tabmenu1" id="tab3" />
              <input type="radio" name="tabmenu1" id="tab4" />
              <input type="radio" name="tabmenu1" id="tab5" />
              <input type="radio" name="tabmenu1" id="tab6" />

              
              <input type="radio" name="tabmenu2" id="tab10" checked />
              <input type="radio" name="tabmenu2" id="tab11" />
              <input type="radio" name="tabmenu2" id="tab12" />
              <input type="radio" name="tabmenu2" id="tab13" /></code></pre>
<p></p>
<p></p>
<p>이렇게 별도의 name을 지정해서 설정해주시고</p>
<p></p>
<pre class="language-css"><code>/* 속성선택자 */
input[name^="tabmenu"] {
  display: none;
}</code></pre>
<p></p>
<p>css는 셀렉터를 이렇게 바꿔주시면 name 속성이 tabmenu라는 이름으로 시작하는 경우에 대해 적용됩니다.</p>

선생님 project 섹션 2개로 늘렸는데 2개의 섹션중 하나만 checked가 적용됩니다. 이럴땐 어떻게해야할까요?

<pre class="language-html"><code><link href="index.css" type="text/css" rel="styleheat" /></code></pre>
<p>rel="styleheat"를 stylesheet로 바꿔보시고 안되시면 index.css 파일 위치를 확인해보세요.</p>

MostOneBrush

投稿