준비 먼저 페이지와 이미지를 준비하고 다음 이미지를 사용합니다.
간단히 다음과 같이 HTML을 작성합니다.
| <div id="컨테이너"> <img id="logo" src="logo.png" alt="리 먼로" /> </div> |
CSS 스타일은 다음과 같습니다:
| body{Background:#999;} #컨테이너{ 너비:960px; 배경:#fff; 여백:20px 자동; 패딩:10px; } |
다음은 효과의 미리보기입니다.
상대 위치로 설정 로고를 배치할 때 위치가 컨테이너를 기준으로 하도록 하므로 상대 위치를 사용합니다.
| #컨테이너{ 너비:960px; 배경:#fff; 여백:20px 자동; 패딩:10px; 위치:상대적; } |
상자 바깥쪽에 배치 이제 로고를 배치하고 컨테이너에서 돌출되도록 수평으로 배치하기만 하면 됩니다.
| #심벌 마크{ 위치:절대; 왼쪽:-15px; } |
이제 상자 바깥쪽에 로고가 표시되는 것을 볼 수 있습니다.
