본문 바로가기

www/CSS_tip51

clear 속성 개요float 속성으로 텍스트와 이미지를 배치 시킬 때는 문제가 없지만 div 태그 등을 배치 시킬 때는 상위 태그가 높이 값이 float를 적용한 하위 태그의 높이를 반영하지 않아 이상하게 된다. 다음요소가 float에 영향을 받지 않고 일반적인 레이아웃을 사용하게 하기 위한 여러 방법이 있는데 그 중 float를 준 태그 다음에 clear속성을 준 요소를 삽입하는 방법이 가장 쉽다.사용법asdf clear 속성 값에 "both"을 적용하면 float의 left, right 모두 제거된다.css혹은 style속성에서 float를 사용한 후 마지막 객체에 clear속성을 지닌 태그를 일일이 추가시키는 방법대신 after 가상 선택자를 이용하면 더 편리하게 관리 할 수 있다.사용법#container1{ f.. 2015. 1. 5.
CSS 적용 우선순위 / !important 사용법 개요CSS의 특성상 중복되는 속성이 등장 할 수 있다.이때 특정 원칙에 따라 CSS를 처리한다.1. 속성값 뒤에 !important 를 붙인 속성 2. HTML에서 style을 직접 지정한 속성 3. #id 로 지정한 속성 4. .클래스, :추상클래스 로 지정한 속성 5. 태그이름 으로 지정한 속성 6. 상위 객체에 의해 상속된 속성같은 우선 순위에 있는 경우, 쪽수가 많은 경우가 우선되며, 이마저 같은 경우 CSS에서 나중에 선언한 것이 우선되어 적용된다.CSS에는 중복되는 속성 사용시 특정 순위에 따라 적용하는데, 이를 무시하고 절대적으로 우위에 가게 하고 싶다면 속성 값 뒤에 !important 를 사용하면 된다.!important 는 우선순위 뿐만 아니라 디자이너-개발자간 교류에서 중요한 속성이라.. 2015. 1. 5.
clear 속성 개요float 속성으로 텍스트와 이미지를 배치 시킬 때는 문제가 없지만 div 태그 등을 배치 시킬 때는 상위 태그가 높이 값이 float를 적용한 하위 태그의 높이를 반영하지 않아 이상하게 된다. 다음요소가 float에 영향을 받지 않고 일반적인 레이아웃을 사용하게 하기 위한 여러 방법이 있는데 그 중 float를 준 태그 다음에 clear속성을 준 요소를 삽입하는 방법이 가장 쉽다.사용법asdf clear 속성 값에 "both"을 적용하면 float의 left, right 모두 제거된다.css혹은 style속성에서 float를 사용한 후 마지막 객체에 clear속성을 지닌 태그를 일일이 추가시키는 방법대신 after 가상 선택자를 이용하면 더 편리하게 관리 할 수 있다.사용법#container1{ f.. 2015. 1. 5.
float 속성 개요부유 속성이라고도 한다. 이미지와 텍스트를 쉽게 배치시키기 위해 만들어졌으며, float 속성을 left 나 right 로 지정해 준 요소 아래 혹은 위 요소는 float를 지정해 준 요소를 감싸게 된다.inherit - 기본 값이며, 요소를 감싸는 바깥 요소에서 float 속성을 상속받는다. left - 요소는 왼쪽에 부유하는 블록 박스를 생성한다. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐른다. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라진다. none 이 아니라면 display 속성은 무시된다. right - 요소는 오른쪽에 부유하는 블록 박스를 생성한다. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐른다. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라.. 2015. 1. 5.