css 질문.. 정보
css 질문..본문
안녕하세요.
테이블밖에 짤 줄 모르는 제가 css로 최신글을 만들어 보려고 합니다.
아침부터 여기저기 둘러보고 있는 중인데.. 감이 안오네요..
css배경 좀 부탁드릴께요..
제목 more
┌───────┐
└───────┘
요렇게 기본적인 스타일이구요.
제목이랑 more는 이미지로 들어가고.. 각각 왼쪽 정렬 오른쪽 정렬로 들어갑니다.
사각형배경은 검정색 알파값30% 정도 테두리는 흰색 10%정도 들어가면 좋겠습니다..
테두리도 알파값이 적용이 되는지 모르겠네요...
무식이 죄이니만큼 가진 포인트 총동원해 봅니다..ㅜㅜ
아침부터 자동차 키박스안에 키가 부러져서..
오도가도 못하고 있네요..ㅜㅜ
테이블밖에 짤 줄 모르는 제가 css로 최신글을 만들어 보려고 합니다.
아침부터 여기저기 둘러보고 있는 중인데.. 감이 안오네요..
css배경 좀 부탁드릴께요..
제목 more
┌───────┐
└───────┘
요렇게 기본적인 스타일이구요.
제목이랑 more는 이미지로 들어가고.. 각각 왼쪽 정렬 오른쪽 정렬로 들어갑니다.
사각형배경은 검정색 알파값30% 정도 테두리는 흰색 10%정도 들어가면 좋겠습니다..
테두리도 알파값이 적용이 되는지 모르겠네요...
무식이 죄이니만큼 가진 포인트 총동원해 봅니다..ㅜㅜ
아침부터 자동차 키박스안에 키가 부러져서..
오도가도 못하고 있네요..ㅜㅜ
댓글 전체
내일은 서점에 들려 책이라도 한권 사봐야겠어요..;;
제가 예전에 만들어본 경험으로는 테두리에 투명값을주면 익스에선 적용이안돼던데...
지금은 그소스를 잊어버려서 모르겠고요.
저거 레이아웃 짜달라는 말씀이신가요?
뭐지. 무슨용도인지 몰르겟네요
알파값을 넣으신다는건 그냥 쉽게 생각하겠습니다.
그안에 컨텐츠까지 다 투명해보인다는거 인식하시구요..
넓이 높이 수치조절은 알아서 잘하심되요^^
반드시 문서 최상단에 <!doctype html> 명시해주셔야합니다... 그래야 크로스브라우징 되요~
그리고 익스6 호환은 고려하지 않았씁니다 저도 머리가아파서 ㅋㅋ;
즉..
<!doctype html>
<div style="positon:relative; width:500px; min-height:100px;">
<div style="float:left; height:20px; width:50px;">
제목
</div>
<div style="float:right; height:20px; width:50px;">
more
</div>
<div style="clear:both; color:#fff; text-align:center; border:5px solid #fff; width:490px; min-height:300px; background:#000; filter:alpha(opacity=70); opacity:0.7; -moz-opacity:0.7;">
이렇게 하면 됩니다.
</div>
</div>
저안에서 패딩값과 넓이값, 마진값 잘조절하셔서 응용하심되요~
지금은 그소스를 잊어버려서 모르겠고요.
저거 레이아웃 짜달라는 말씀이신가요?
뭐지. 무슨용도인지 몰르겟네요
알파값을 넣으신다는건 그냥 쉽게 생각하겠습니다.
그안에 컨텐츠까지 다 투명해보인다는거 인식하시구요..
넓이 높이 수치조절은 알아서 잘하심되요^^
반드시 문서 최상단에 <!doctype html> 명시해주셔야합니다... 그래야 크로스브라우징 되요~
그리고 익스6 호환은 고려하지 않았씁니다 저도 머리가아파서 ㅋㅋ;
즉..
<!doctype html>
<div style="positon:relative; width:500px; min-height:100px;">
<div style="float:left; height:20px; width:50px;">
제목
</div>
<div style="float:right; height:20px; width:50px;">
more
</div>
<div style="clear:both; color:#fff; text-align:center; border:5px solid #fff; width:490px; min-height:300px; background:#000; filter:alpha(opacity=70); opacity:0.7; -moz-opacity:0.7;">
이렇게 하면 됩니다.
</div>
</div>
저안에서 패딩값과 넓이값, 마진값 잘조절하셔서 응용하심되요~
늦었네요...^^
답변 감사합니다.
png로 배경 만들어서 썼어요..OTL
공부를 좀 해봐야 겠어요.
감사드려요~
답변 감사합니다.
png로 배경 만들어서 썼어요..OTL
공부를 좀 해봐야 겠어요.
감사드려요~
png로 만들면.. 익스6에서는 회색 배경이 나오는군요..크하하
네.. 저도 이번에 사이트만들면서 png로 거의 모든 이미지를 표현했는데요..
png 익스플로러 핵 스크립트들을 사용하면서했는데.. 그것때문에 문제가 많네요..
특히 배경으로 사용할때의 핵을 적용하면 해당 div 내에서
포지션 abolute속성과 ul li 테그가 개판이됩니다.. ㅠ
다른 스크립트를 찾아봐야하나..
png 익스플로러 핵 스크립트들을 사용하면서했는데.. 그것때문에 문제가 많네요..
특히 배경으로 사용할때의 핵을 적용하면 해당 div 내에서
포지션 abolute속성과 ul li 테그가 개판이됩니다.. ㅠ
다른 스크립트를 찾아봐야하나..
