HTML, CSS에서 미처 알지 못했던 부분들

현수·2023년 5월 1일

HTML, CSS 지식 보완

나는 직접 IT 프로젝트에 부딪히며 실제로 필요한 기능을 그때마다 공부하는 탑다운 방식을 선호한다.

그렇게 3건의 웹 개발 프로젝트를 마치고 난 뒤 내가 프로젝트를 통해 습득한 HTML과 CSS 지식을 다시 처음부터 차근차근 공부하며 내가 미처 알지 못한 부분을 배우고 잘못 알고 있던 부분은 수정하고자 했다.

인프런에서 얄코님의 제대로 파는 HTML CSS을 수강했고 그 과정에서 내가 이 부분을 알았다면 더 효율적으로 기능을 구현할 수 있었을텐데... 라는 생각을 여러부분에서 했다. 그것들을 프로젝트의 경험과 연결지어 정리해보려한다.

특정 요소로 이동

특정 요소로 스크롤하여 이동하기는 리액트에서 useRef 로 특정 DOM을 선택하고 scrollIntoView 메소드를 이용하여 구현한적이 있다.
다만 순수 HTML로 구현하는 방법은 몰랐고 a태그의 href 속성에 #(요소의 id값)을 주면 해당 요소로 스크롤 할 수 있다는점을 배웠다.

em과 rem

em과 rem이 상대적인 수치라는 것만 알고있었다. 그러나 1em은 100%와 동일하고 부모 요소와의 상대적 크기를 나타내고 rem은 html요소와 상대적 크기를 가진다는점을 알게됐다. 특히 em은 부모와 연관되어있어 요소의 중첩에 영향을 받고 rem은 최상위 html 요소와 연관되어있어 중첩에 영향을 받지 않는다고한다.

inline 요소

inline요소를 제대로 이해하고 있지 않아서 inline 요소에 크기와 마진, 패딩 적용이 잘 되지 않는 것을 보고 의아해했으며 결국 가로로 요소를 배치할 때는 대부분 flex의 flex-direction: row 속성을 사용하여 구현했다.
그러나 지금처럼 inline, block, inline-block의 특성과 차이를 정확히 이해하고 있는 상태였다면 가로로 요소를 배치할 때 크기 조절과 마진, 패딩이 정상적으로 적용되는 inline-block 을 적극 사용했을 것이다.

block 요소

프로젝트에서 여러개의 block 요소에 margin을 적용하다보면 margin이 겹쳐지는 부분에서 한쪽 margin 만 적용되는 것을 보고 특이하게 생각한적이있다. 해당 강의에서 block 요소의 margin 속성이 상하 영역에서 겹칠때 더 큰 마진만 적용한다고 알려주어 그당시의 궁금증을 해결했고 block 요소의 특징을 정확히 파악했다.

리스트 아이템 사이의 선

반복되는 아이템 사이의 선 스타일을 구현할 때 자바스크립트를 이용하여 map의 아이템 인덱스가 처음일 경우 boolean props를 CSS 스타일에 넘겨주어 처음 요소가 아닐 때만 위쪽 테두리 라인을 표시하게 하였다.

// JS를 이용한 리스트 아이템 사이의 선 구현
return list.map((el, idx) => {
    return (
      <Element key={el.id} isFirst={idx===0}>  // 첫 요소 판단 조건
        // 아이템 요소         
      </Element>
    )
})

// 처음 요소가 아닐 때만 위쪽 테두리 라인 표시
const Element = styled.div`
  padding: 24px 66px 24px 65px;
  border-top: ${props => props.isFirst ? "none": "0.7px solid rgba(165, 165, 165, .33)"};
`

그러나 CSS의 가상 선택자인 first-child와 not 을 부모 요소에서 적용하면 CSS 만으로 손쉽게 구현 가능함을 알게되었다.

// CSS를 이용한 리스트 아이템 사이의 선 구현
return list.map((el, idx) => {
    return (
        <div key={el.id}>
        // 아이템 요소         
        </div>
    )
})

// 리스트의 부모 요소인 List에서 가상 선택자로 효과 적용
const List = styled.div`
  > div {
    padding: 24px 66px 24px 65px;
    &:not(:first-child) {
      border-top: 0.7px solid rgba(165, 165, 165, .33);
    }
  }
`

box-sizing

디자인 시안을 보고 퍼블리싱을 할 때 요소의 너비와 높이를 분명 시안과 똑같이 지정했음에도 불구하고 실제 화면에는 다른 크기로 표시되는 문제를 겪은적이 있다. 이 문제는 box-sizing 속성을 이해하지 못해서 발생한 문제였다.
디자인 시안은 요소의 테두리를 기준으로 크기를 측정하기 때문에 box-sizing 속성을 border-box로 지정해야한다. 그러나 나는 content-box 로 설정했기 때문에 콘텐츠 크기에 패딩, 테두리 값이 더해져 실제 요소에서는 크기가 다르게 표현 되었던 것이다.

시맨틱 태그

프로젝트에서 html을 작성할 때 대부분 div를 사용했다. 검색엔진 최적화와 코드 분석과 가독성을 높이기위해 시맨틱 태그를 적극 사용할 것이다.

BEM

html 태그 이름을 정하는 것이 힘들었고 체계적인 규칙없이 마음대로 이름을 정하다보니 코드가 길어질 경우 구조를 파악하기 힘든 문제점이 발생했다. 그러나 BEM 방법론을 사용하면 목적 또는 기능을 직관적으로 알아보기 쉽게 구조를 설계할 수 있음을 알게되었다.

가상요소

carousel 슬라이드를 구현하기위해 react-slick 라이브러리를 이용하고 원하는 디자인으로 CSS를 수정하는 작업을 한적이있다. 이때 구조 분석중에 가상요소인 ::after을 본적이 있었고 이를 제대로 이해하지 못해 스타일 변경을 어렵게 해낸적이 있다. 그러나 지금은 해당 요소가 CSS가 만들어낸 가상 element임을 알고있다.