html & css /select, word-break, slick-arrow

* float left로 수평배치 후 중앙에 배치하려면 각각의 크기를 알아야함 
float을 안주고 inline-block으로 하면 text-align으로 중앙배치 할 수 있음 

*단어, 음절별로 끊기게 해주는 속성 word-break: keep-all;

*제이쿼리로 슬라이드하면 li에 다른거 할거없이 img width 100% 

*slick-slider 자체가 position relative = inner를 줬어도 ul에 일정 크기를 주면 그만큼 보여짐 


*slick-arrow 모양을 화살표로 만드는 방법 
=border를 두개 없애고 rotate해서 만들수있음 

#info .slick-arrow{font-size: 0; border-top: 3px solid #000; 
border-left: 3px solid #000; border-right: 0; border-bottom: 0; 
width: 30px; height: 30px; position: absolute; top: 0; left: 50%; z-index: 99;}

#info .slick-prev{transform: translateX(-20px) rotate(-45deg); }
#info .slick-next{transform: translateX(20px) rotate(135deg);}

*width 값은 화면을 줄여도 고정적으로 나오게 하려면 px단위보다 %단위가 일정하게 나온다 

*중복 선택할때 아이디도 중복작성 해줘야 한다 안그러면 하위에 작성하는 요소에 영향을 끼칠수 있다 
ex) #now p, #now h3

*초기화요소를 추가했는데 form태그 사용시 legend,caption은 유효성때문에 작성은 해야하지만 이게 보여짐이 필요한
경우가 잘 없기때문에 display none을 하고 fieldset border도 0으로 기입 
 
*뭔가 이상하거나 속성을 바꾸고싶은데 모르겠거나 하면 검사를 돌려보면 뭐가 문제인지 알수있고 모르는 속성도 찾을수있다

*패밀리사이트 form태그 select
 <form>
                        <fieldset>
                            <legend>패밀리사이트</legend>
                            <select>
                                <option>Family Site</option>
                                <option>Family Site</option>
                                <option>Family Site</option>
                            </select>
                        </fieldset>
                    </form>  

#footer select { position: absolute; right: 0; top: 0; width: 200px; padding: 5px; 
background: #333; border: 1px solid #ccc; color: #999; font-family: 'Noto Sans KR'; }
=크기는 패딩으로 잡고 위치는 footer 안에 inner에 relative잡고 그에맞춰서