HTML/CSS - position, display 속성에 대하여

요즘 매일 장고 템플릿 쪽만 작업을 하다 보니
웹 퍼블리셔인가 백엔드 개발자인가.. 헷갈리는 순간들이 자주 온다.

덕분에 차후에 장고 템플릿 쪽 작업을 하거나
쌩 HTML, CSS, JS로 뭔가를 구현해야 할 때 도움이 될 만한 스킬들을 익히고 있는 중이다.
(이게 좋은 건지는 모르겠지만..)

position, display 속성에 대해서는 구글링 하면 매우 잘 나오니까 그걸 그대로 설명할 건 아니고
실무를 하다가 겪은 내용을 간략하게 적어보려 한다.

처음에 position을 absolute로 설정했다가
다국어 지원을 위해서 수정을 하려고 보니, 각 언어별로 위치가 조금씩 달라지게 된다.
그래서 relative로 변경을 했더니... 기존에 작성했던 레이아웃이 와장창!!
마음을 부여잡고 relative 기준으로 수정을 했더니, 이제는 <br> 태그가 제대로 안 먹는다.. ㅠㅠ

구글링을 여어어얼심히 해보다가
기초적인 display 속성에 대해 확인 후,
내 레이아웃에 맞는 걸 찾아보니 'inline' 대신 'inline-block' 속성을 써야 되는 것 같아서 바꿨더니
<br> 태그가 문제없이 적용이 되었다.
부가적으로 <span></span> 사이에는 <br> 태그가 안 먹는다고 한다.
(실제로는 적용되는데.. 쓰지 말라는 이야기인 듯?)

그리고 SCSS 문법에 대해서도 꽤 익숙해졌다.
쌩으로 CSS를 적용하는 거에 비해 엄청 효율적인 거 같았다.
생각보다 추상화(?) 혹은 캡슐화(?) 혹은 구조화(?)를 잘 시키면
짧은 SCSS 코드로 매우 효율적인 레이아웃을 구성할 수 있을 거 같다는 생각이 들었다.

흐아.. 여하튼 장고 템플릿 쪽 작업은 이제 그만 했으면 싶다 ㅠㅠ
이런 작업들도 분명 내 전반적인 실력 향상에는 도움이 되긴 하지만... 하 너무 노잼 ㅠㅠ
깔끔하게 안 끝나는 작업들은 구현한 뒤에도 찝찝~~ 하다.