오늘 회사에서 메인 화면을 퍼블하면서 이런 게시판 디자인을 CSS로 구현하였다(이미지는 예시로 대충 만들어봄).
오늘의 주제는 게시판 타이틀 오른쪽의 더보기 링크에 붙어 있는 적색 라인을 CSS로 구현하는 가장 적절한 방법이 무엇인가에 대해 쓸 것임. 쉬워 보였지만 예상치 못한 난관이 있었고, 끙끙 해메다가 선임이 조언해준 방법으로 해결하였는데, 내가 쓴 방법과 비교를 해보겠음.
더보기 링크에 background-image로 넣으면 되는 것 아닌가?
는 착각이었다.
시안을 보자마자 더보기 링크에 ::before로 넣어줘야 되겠다고 실천에 옮겼으나..
알다시피 가상선택자로 저런 걸 넣으려면 position: absolute로 띄울 수 밖에 없고, 반응형 분기점이 변경될 때마다 라인의 너비값을 일일이 조절해줘야 한다. 가상선택자를 사용하지 않는다고 가정해도, background-position을 일일이 조절해줘야 하는 건 마찬가지임.
내가 썼던 방법
See the Pen XWJBXee by sel (@selucky) on CodePen.
삽질(?)의 순서
- 더보기 링크에
::before로 라인을 넣고position: absolute로 띄웠다. - 고정 너비값을 잡아주고 반응형에서 틀어져서 너비값을 조절해주었는데 분기점마다 틀어진다. 예) 1024px → 767px → 640px → 480px…..
- 이대로는 안되겠다싶어 너비를 퍼센트로도 잡아보고 calc 함수를 이용해 유동적으로 조절되도록 하는 방법도 써보았으나 안됨.
- 컨펌해주던 선임께서 이거보더니 너님 뭐함? 이럴 때 쓰는 방법을 알려주겠음.
타이틀에 background-image로 넣기
선임께서 알려준 방법. 처음 들었을 땐 더보기 링크에 넣는 것과 뭐가 다르냐고 생각할 수 있는데,
박스모델에 대한 이해가 충분하면 어렵지 않은 방법이다. 코드 짜는 순서 설명에 앞서, 온라인 코드 실행기를 사용해 구현해본 결과물을 먼저 봅시다.
See the Pen WNbKQEL by sel (@selucky) on CodePen.
예시를 들려고 대충 만든거니까 참고만 하셈. 순서는 다음과 같다.
- 타이틀에 background-image로 넣고 적당한 background-position을 잡아준다.
- block 요소인 제목태그와 간격을 유지하기 위해 제목태그에 span을 넣고 적당한 간격을 준다.
- span에 간격을 주었으니 타이틀 글자에 라인이 침범하지 않게 된다. 별도의 반응형 작업을 하지 않아도 됨.
어떤 스타일을 반응형 분기점 한 두번도 아니고 계속 일일이 조절해주고 있다면 어딘가 잘못된 길로 가고 있는 코드임을 의심해봐야…