그동안 둥근 모서리의 배경이미지 만들기에서는 3개 이상의 이미지가 필요하였는데 하나의 이미지로 상하좌우로 무한대로 늘어나는 배경이미지를 만들기를 시도해 보았는데 가능하게 되서 포스팅으로 올립니다. 이전 글에서 소개한 것들보다 간단합니다. 다만 모서리부분이 투명이 안되기 때문에 포토샵에서 이미지를 만들때 배경색으로 사용할 색상을 미리 정해야합니다.
압축파일을 풀고 html 파일을 텍스트 에디터에 열면 위와같이 나옵니다. 선택자는 클래스를 사용합니다. 여러곳에서 사용할 수 있도록 하기 위함이죠. 그런데 선택자 이름이 box입니다. 선택자의 이름은 가능한한 특별하게 만들어야합니다. box라는 이름으로 다른 클래스 선택자에서 사용하고 있으면 중복되니까요. 그래서 box를 rounde-corner-box로 고쳐줍니다. 간단한 내용이므로 CSS는 임베디드 형태로 작업합니다. 3의 배경색은 이것을 티스토리 블로그에서 footer의 배경이미지로 사용할 것이므로 현재 작업중인 티스토리 블로그 스킨 만들기에서 컨텐트 영역의 색상인 f0f0f0을 사용합니다. .box의 이름도 .rounde-corner-box로 고쳐야겠죠. 넓이는 시험용으로 500픽셀입니다. 마진을 5처럼 하면 상하 10픽셀의 마진이 만들어지고 중앙정렬됩니다. 박스의 배경색은 스킨 컨텐트영역의 배경색인 흰색입니다. 7처럼 하면 박스의 테두리로 1픽셀의 옅은 회색의 실선 테두리가 만들어집니다. 이상태에서 저장하고 웹에서 보면 다음과 같은 이미지가 나옵니다.
각 코너부분이 각지게 나옵니다. 여기서 하게될 작업은 하나의 둥근 모서리의 이미지를 만들어서 4곳의 각 모서리를 덮어주는 것입니다. 그렇기 때문에 이미지를 만들때 모서리 부분의 배경이 투명으로 안되고 위 이미지의 배경색인 f0f0f0를 사용해야합니다.
포토샵에서 가로세로 300픽셀의 새문서를 만들고 배경색을 f0f0f0으로 선택하고 Alt+Delete키를 눌러 색을 채웁니다. 둥근 모서리 셰이프툴을 선택하고 옵션바에서 7픽셀을 입력합니다. 스킨의 컨텐트영역의 모서리의 반지름은 5픽셀입니다. 여기서 7필셀을 사용하는 것은 레이어스타일에서 테두리의 포지션을 7처럼 Inside로 해야하기 때문입니다. 이렇게 하면 반지름이 5픽셀에 테두리를 Outside로 한 것과 같은 결과가 나옵니다. Inside로 하는 이유는 테두리까지만 정확하게 잘라야하기 때문입니다. 아웃사이드로 하게 되면 변의 테두리는 포함되지않고 달라지게 됩니다. 4에서 색상을 흰색으로 하고 적당한 크기로 그려줍니다. 정사각형이 아니라도 됩니다. 레이어스타일 아이콘을 선택하고 Stroke(선)을 선택합니다. 사이즈는 1픽셀, 포지션은 인사이드, 컬러는 c0c0c0으로 선택하고 나오면 위처럼 이미지가 됩니다. Ctrl키를 누르고 레이어의 9를 클릭하면 테두리까지 선택이 됩니다. 메뉴에서 이미지-자르기(Crop)를 선택하면 선택부분만 잘라집니다. 투명은 아니지만 corner.png로 저장합니다. 첨부파일에 포토샵 psd파일이 있으니 참고하세요.
위처럼 4개의 div 태그를 만들어줍니다. 선택자는 클래스로 하고 이름은 숫자를 추가해줍니다. 마감태그는 시작태그와 나란히 있게됩니다. 이제 html 상에서 작업할 내용은 없습니다.
CSS에서 첫번째 박스 태그에 대해서 이미지를 넣어줍니다. 이미지는 크지만 일부만 사용할 것이므로 1처럼 width와 height 속성으로 10픽셀을 정합니다. 이미지의 위치를 어디로 정하느냐에 따라서 다르게 나오게 됩니다. 폴더이름과 파일이름을 입력하고, 이미지는 반복하지 않을 것이며 이미지의 좌측상단을 사용할 것이니 4처럼 left top을 입력합니다. 이렇게 하고 저장하면 다음과 같이 나옵니다.
모서리부분을 확대해보면 이미지가 코너부분을 완전히 덮고 있지 않습니다. 지금 부모요소의 박스에서 1픽셀만큼의 테두리를 사용하고 있어서 이 테두리 부분밖으로 나가지 못하는 상황입니다. 그러면 위로 1픽셀 좌로 1픽셀을 이동해주면 완전히 덮게 될 것입니다.
박스1에 포지션을 절대위치로 설정합니다. 좌로 1픽셀 위로 1필셀 이동합니다.그런데 절대위치는 이대로만 하면 부모요소를 뛰쳐나가서 루트요소인 body를 상대로 자리를 잡게 됩니다. 이것을 부모요소 범위 안에서 자리잡게 하려면 부모요소인 박스에 3처럼 상대위치로 포지션을 설정해야합니다. 이에관한 자세한 내용은 이전글 을 참고하세요. 이렇게 하고 나면 이제 아래 사진처럼 원하는대로 나오게 됩니다.
1을 복사하여 아래로 3번 붙여넣습니다. 각 클래스 선택자의 이름을 바꿔줍니다. 추가로 수정할 부분은 5와 6입니다. 두번째 박스는 우측 상단을 기준으로 배치될 것이니 5는 right:-1px; 과 top: -1px; 이 됩니다. 6은 이미지의 우측 상단부분만 사용할 것이니 right top이 됩니다.
세번째 박스는 좌측 하단을 기준으로 배치될 것이니 left: -1px; bottom: -1px; 이 되고 배경이미지는 left bottom부분을 사용합니다. 네번째 박스는 right: -1px; bottom: -1px;이 됩니다. 이미지도 right bottom이 됩니다. 이렇게 하고 저장하면 다음과 같이 원하는대로 나오게 됩니다.
그러면 박스를 늘려도 잘 나오는지 확인해야겠죠. 부모 박스에 좌우 패딩이 필요하니 round-corner-box에 padding: 0 10px;을 입력하고 width를 1000픽셀로 늘린 다음 p 태그의 내용을 복사하여 아래로 아주 많이 붙여넣은 다음 저장해서 웹에서 보면 다음과 같이 나옵니다.
상하좌우로 잘 늘어납니다.
one-image-flexible-rounded-corner.zip압축파일을 풀고 html 파일을 텍스트 에디터에 열면 위와같이 나옵니다. 선택자는 클래스를 사용합니다. 여러곳에서 사용할 수 있도록 하기 위함이죠. 그런데 선택자 이름이 box입니다. 선택자의 이름은 가능한한 특별하게 만들어야합니다. box라는 이름으로 다른 클래스 선택자에서 사용하고 있으면 중복되니까요. 그래서 box를 rounde-corner-box로 고쳐줍니다. 간단한 내용이므로 CSS는 임베디드 형태로 작업합니다. 3의 배경색은 이것을 티스토리 블로그에서 footer의 배경이미지로 사용할 것이므로 현재 작업중인 티스토리 블로그 스킨 만들기에서 컨텐트 영역의 색상인 f0f0f0을 사용합니다. .box의 이름도 .rounde-corner-box로 고쳐야겠죠. 넓이는 시험용으로 500픽셀입니다. 마진을 5처럼 하면 상하 10픽셀의 마진이 만들어지고 중앙정렬됩니다. 박스의 배경색은 스킨 컨텐트영역의 배경색인 흰색입니다. 7처럼 하면 박스의 테두리로 1픽셀의 옅은 회색의 실선 테두리가 만들어집니다. 이상태에서 저장하고 웹에서 보면 다음과 같은 이미지가 나옵니다.
각 코너부분이 각지게 나옵니다. 여기서 하게될 작업은 하나의 둥근 모서리의 이미지를 만들어서 4곳의 각 모서리를 덮어주는 것입니다. 그렇기 때문에 이미지를 만들때 모서리 부분의 배경이 투명으로 안되고 위 이미지의 배경색인 f0f0f0를 사용해야합니다.
포토샵에서 가로세로 300픽셀의 새문서를 만들고 배경색을 f0f0f0으로 선택하고 Alt+Delete키를 눌러 색을 채웁니다. 둥근 모서리 셰이프툴을 선택하고 옵션바에서 7픽셀을 입력합니다. 스킨의 컨텐트영역의 모서리의 반지름은 5픽셀입니다. 여기서 7필셀을 사용하는 것은 레이어스타일에서 테두리의 포지션을 7처럼 Inside로 해야하기 때문입니다. 이렇게 하면 반지름이 5픽셀에 테두리를 Outside로 한 것과 같은 결과가 나옵니다. Inside로 하는 이유는 테두리까지만 정확하게 잘라야하기 때문입니다. 아웃사이드로 하게 되면 변의 테두리는 포함되지않고 달라지게 됩니다. 4에서 색상을 흰색으로 하고 적당한 크기로 그려줍니다. 정사각형이 아니라도 됩니다. 레이어스타일 아이콘을 선택하고 Stroke(선)을 선택합니다. 사이즈는 1픽셀, 포지션은 인사이드, 컬러는 c0c0c0으로 선택하고 나오면 위처럼 이미지가 됩니다. Ctrl키를 누르고 레이어의 9를 클릭하면 테두리까지 선택이 됩니다. 메뉴에서 이미지-자르기(Crop)를 선택하면 선택부분만 잘라집니다. 투명은 아니지만 corner.png로 저장합니다. 첨부파일에 포토샵 psd파일이 있으니 참고하세요.
위처럼 4개의 div 태그를 만들어줍니다. 선택자는 클래스로 하고 이름은 숫자를 추가해줍니다. 마감태그는 시작태그와 나란히 있게됩니다. 이제 html 상에서 작업할 내용은 없습니다.
CSS에서 첫번째 박스 태그에 대해서 이미지를 넣어줍니다. 이미지는 크지만 일부만 사용할 것이므로 1처럼 width와 height 속성으로 10픽셀을 정합니다. 이미지의 위치를 어디로 정하느냐에 따라서 다르게 나오게 됩니다. 폴더이름과 파일이름을 입력하고, 이미지는 반복하지 않을 것이며 이미지의 좌측상단을 사용할 것이니 4처럼 left top을 입력합니다. 이렇게 하고 저장하면 다음과 같이 나옵니다.
모서리부분을 확대해보면 이미지가 코너부분을 완전히 덮고 있지 않습니다. 지금 부모요소의 박스에서 1픽셀만큼의 테두리를 사용하고 있어서 이 테두리 부분밖으로 나가지 못하는 상황입니다. 그러면 위로 1픽셀 좌로 1픽셀을 이동해주면 완전히 덮게 될 것입니다.
박스1에 포지션을 절대위치로 설정합니다. 좌로 1픽셀 위로 1필셀 이동합니다.그런데 절대위치는 이대로만 하면 부모요소를 뛰쳐나가서 루트요소인 body를 상대로 자리를 잡게 됩니다. 이것을 부모요소 범위 안에서 자리잡게 하려면 부모요소인 박스에 3처럼 상대위치로 포지션을 설정해야합니다. 이에관한 자세한 내용은 이전글 을 참고하세요. 이렇게 하고 나면 이제 아래 사진처럼 원하는대로 나오게 됩니다.
1을 복사하여 아래로 3번 붙여넣습니다. 각 클래스 선택자의 이름을 바꿔줍니다. 추가로 수정할 부분은 5와 6입니다. 두번째 박스는 우측 상단을 기준으로 배치될 것이니 5는 right:-1px; 과 top: -1px; 이 됩니다. 6은 이미지의 우측 상단부분만 사용할 것이니 right top이 됩니다.
세번째 박스는 좌측 하단을 기준으로 배치될 것이니 left: -1px; bottom: -1px; 이 되고 배경이미지는 left bottom부분을 사용합니다. 네번째 박스는 right: -1px; bottom: -1px;이 됩니다. 이미지도 right bottom이 됩니다. 이렇게 하고 저장하면 다음과 같이 원하는대로 나오게 됩니다.
그러면 박스를 늘려도 잘 나오는지 확인해야겠죠. 부모 박스에 좌우 패딩이 필요하니 round-corner-box에 padding: 0 10px;을 입력하고 width를 1000픽셀로 늘린 다음 p 태그의 내용을 복사하여 아래로 아주 많이 붙여넣은 다음 저장해서 웹에서 보면 다음과 같이 나옵니다.
상하좌우로 잘 늘어납니다.
더보기
'부트스트랩.CSS.JS/CSS기초' 카테고리 관련글
