전체 글

[CSS] 선택자

https://jsfiddle.net/Kimara/b7s0qvyy/13/ 동위 선택자(sibling selector)동위 선택자는 동위 관계에 있는 요소 중에서 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택합니다. 동위 관계란 HTML 요소의 계층 구조에서 같은 부모(parent) 요소를 가지고 있는 요소들을 의미합니다.이러한 동위 관계에 있는 요소들을 형제(sibling) 요소라고 합니다. 일반 동위 선택자(general sibling selector)일반 동위 선택자는 해당 요소와 동위 관계에 있으며, 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택합니다. 다음 예제는 모든 태그와 동위 관계에 있는 요소 중에서 태그보다 뒤에 존재하는 태그를 모두 선택하는 예제입니다. 예제 : ..

[CSS] 플렉서블 박스 레이아웃

플렉서블 박스 레이아웃플렉서블 박스(flexible box) 레이아웃플렉서블 박스(flexible box)는 플렉스 박스(flex box)라고도 불리며, CSS3에서 처음 소개된 레이아웃 모델입니다.이 레이아웃은 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되어, 웹 페이지의 레이아웃을 언제나 똑같이 유지할 수 있게 해줍니다. 플렉스 박스(flex box)을 위해 제공되는 속성은 다음과 같습니다. 1. display2. flex-direction3. justify-content4. align-items5. flex-wrap6. flex-flow7. align-content 또한, 플렉스 요소(flex item)를 위해 제공되는 속성은 다음과 같습니다. 8. order9. align..

[제이쿼리] 스크롤 부드럽게 내려가기

//부드럽게 올라가기$(function(){ $(".event_up").click( function() { $("html, body").animate( { scrollTop : 0 }, 350 ); return false; } ); }); // 앵커 부드럽게 내려가기$('a').click(function(){ $('html, body').animate({scrollTop: $( $.attr(this, 'href') ).offset().top}, 500); return false;}); // 앵커 부드럽게 내려가기$('a').on('click', function(event){ event.preventDefault(); var fixedHeight = $('.nav_wrap').height(); // 상단 ..

[제이쿼리] iframe에서 부모 접근 컨트롤

1. iframe 부모창에 .background_layer 활성화$('.background_layer', parent.document).show(); 2. iframe 부모창의 다른 아이프레임 컨트롤$("#id", parent.frames['frameid'].document); 3. iframe 부모창의 높이값 구하기$(parent.window).height(); //브라우저의 뷰포트의 높이 반환$(parent.document).height(); //HTML의 높이를 반환 4. iframe 부모창 스크롤바 이동var position=$("#pre_userdb",parent.document).offset();$('html, body', window.parent.document).animate({scroll..

[CSS] 텍스트 줄바꿈 처리 word-break, white-space

한우자조금관리위원회 서울특별시 서초구 서리풀3길 20-1 케피아회관 2,3층 우편번호:06641｜ TEL 02-522-3608(am 09:00~pm06:00)｜ FAX 02-522-4314 고유번호:114-82-61108 단체명:한우자조금관리위원회｜ 대표자:민경천｜ 개인정보관리책임자:임빛나라(hanwoolove@daum.net) COPYRIGHT(C) 2017 한우유명한곳 ALL RIGHTS RESERVED. .footer_menu span { color: #999; font-size: 2.8vw; /* 단락 줄바꿈 */ word-break: break-all; display: inline-block;}