position absolute 와 relative 에 대해서 알아보자. 1. absolute - 가장 가까운 조상 객체 , relative 속성을 갖는 객체를 기준으로 삼는다. - 단독으로 사용되어 다른 객체에 영향을 주지 않는다. 2. relative - 다른 객체에 영향을 주지 않으며 단독으로 이동된다. absolute 와 relative 를 이용한 간단한 반응형 뷰어 html 이거슨 아이언맨입니다. 닫기

위의 레이아웃은 브라우저의 크기에 따라 자동으로 리사이징 해주는 레이아웃이며, 브라우저 화면 사이즈에 따라 more는 고정되고 What'your name과 가로 dot의 비율이 조정됩니다. 활용하면 반응형웹에 유용할 듯하여 포스팅 합니다. 코드는 아래와 같습니다. What's your name more

1. 해당 글에서는 폭이 400px이하 일 때 텍스트를 숨김 2. 우선 가로폭이 400px이하에 대한 텍스트 숨김 스타일 추가@media screen and (max-width: 400px) { #head .cont .none_txt{display: none;} } 3. 400px이상일 경우 텍스트 표시 스타일 추가.#head .cont .none_txt{display:inline} 5. html 홍길동 천재 6. 위와 같은 작업을 하고나면 폭이 400이 되었을 때 텍스트를 숨기며, 커졌을 경우 다시 텍스트가 표시된다.

1. td 내부에 할당 사이즈를 넘는 텍스트를 "..." 으로 표시해야할 경우 테이블을 고정시켜야한다. 2. 테이블은 가변적이기 때문에 고정시켜야 반응형웹에 맞게 사이즈가 조절된다. 1 TEST 글 TEST 글 TEST 글TEST 글 TEST 글 TEST 글 TEST 글TEST 글 TEST 글 TEST 글 TEST 글TEST 글 TEST 글 TEST 글 TEST 글TEST 글 TEST 글 TEST 글 TEST 글TEST 글 TEST 글 TEST 글 TEST 글TEST 글 TEST 글 TEST 글 TEST 글TEST 글 TEST 글 TEST 글 TEST 글TEST 글 TEST 글 TEST 글 TEST 글TEST 글 TEST 글 TEST 글 TEST 글TEST 글 TEST 글 TEST 글 TEST 글TEST..

background-color:rgba(255, 255, 255, 0.5); 마지막 파라미터가 투명도

1. IE 의 모든 버전과 모든 브라우저별 설정 .testDiv{ opacity: 0.3 filter: alpha(opacity=30) zoom: 1; } 위와같이 입력해주면 모든 브라우저에서 사용가능하다.(나같은 경우 IE 7~10 , 크롬 파폭에서만 테스트)