코딩ㆍ개발 정보/웹 스타일 따라하기 검색 결과

해당 글 3건

태블릿 UI 만드는 스타일 팁, 동적으로 너비가 변하는 레이아웃 margin-right padding-right

이러한 모습을 만들어 줄 때 콘텐츠 영역에 대한 스타일 지정방법이다. 동적으로 너비가 변하는 레이아웃인데요. 다음 화면을 봐주세요. 1. HTML 왼쪽 서브 메뉴 오른쪽 본문 바디 ButoO ButoO ButoO ButoO ButoO Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum pariatur veritatis facilis laborum ad. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eos officiis eaque sit placeat quam aperiam molestiae magnam eum, ipsum ..
코딩ㆍ개발 정보/웹 스타일 따라하기 2020. 9. 19. 19:58

텍스트가 너무 길 경우 ... 으로 말 줄임 표시하기 text ellipsis

다음과 같이 할 수 있다. 코드내용 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur possimus molestias dolor unde, neque, et quos dolorem optio ex. 포인트는 ellipsis 클래스로 설정한 부분이다. white-space, overflow, text-overflow 삼총사를 묶어서 글자 줄임표를 표시할 수 있다.
코딩ㆍ개발 정보/웹 스타일 따라하기 2020. 9. 19. 16:02

버튼 토글로 메뉴 보이기 숨기기 하는 방법 checked 속성 사용

HTML태그 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 CSS 값 #toggle{ display: none; } #toggle + #wrap > #toggle_gnb_wrap{ display: none; } #toggle:checked + #wrap > #toggle_gnb_wrap{ display: block; } 여기서 핵심은 CSS 선택자 중 + 활용법과, input box이 checked 상태값을 활용하는 것이다. 참고 자료 : 모든 웹 디자인을 위한 HTML5 + CSS3 입문, 개정판, 330page 발췌
코딩ㆍ개발 정보/웹 스타일 따라하기 2020. 9. 19. 15:54