CSS 실무 테크닉
▶ 점진적 향상 기법
▷ 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공해 더 나은 사용자 경험을 제공할 수 있는 방법.
▶ 이미지 포맷에 따른 특징을 알아야 한다.
▷ 디자이너에게 이미지를 받으면 용량 체크 필수! (50kb 이하로 권장)
▶ picture 태그를 사용하는 게 미디어쿼리 사용보다 더 성능에 좋다
▷ 브라우저 작동방식을 생각하면 유추하기가 쉽다.
▷ 브라우저는 렌더링을 할 때 먼저 html 파싱을 하고 css 파싱을 한다. html을 먼저 해석하기에 picture를 먼저 거치게 되는 결과. 하지만 유의미한 차이가 크게 나진 않는다!
▷ style이 깨져 css를 다운받지 못하는 경우가 있다. 안전을 위한 대비 용도로 html에 작성하기도 한다.
HTML + CSS
▶ 웹을 빠르게 만드는 팁
1. 홈페이지 구조를 파악해 중복 컴포넌트를 찾는다.
└ 모든 페이지에 들어간다면 common, main으로 보이는 컴포넌트는 main 등.
└ 공통되는 컴포넌트를 css 파일별로 나누어 작업한다.
로그인에만 들어가는 건 조인
2. 중복되는 버튼들은 컴포넌트로 만든다.
└ 가져와서 레고처럼 조립하면 속도가 빨라짐.
3. 미리 만들어놓고 레이아웃에 배치한다.
▶ 태그 사용 시 유의할 점
▷ section을 만들면 안에 제목(h1, h2 등등)이 기재되어야 한다.
💡 section뿐만 아니라 article을 사용할 때도 제목 태그를 넣어줘야 한다고 했는데?
그런 설명을 들은 기억이 있어 서치를 하던 중, 다음과 같은 글을 발견했다.
('section 버리고 HTML5 article 써야 하는 이유')
✨ 글을 읽고 알게된 것들
1. section의 깊이에 따라 h1의 크기가 달라진다는 것.
2. aria-label 태그는 스크린리더 사용자에게 글의 특정 영역이 시작하고 끝나는 지점을 알려준다.
3. article과 section 태그의 차이점.
📝 더 알아보기
article과 section을 사용하면서 아직도 쓰임새를 헷갈릴 때가 많아 조금 더 내용을 찾아보았다.
article : 블로그 글이나 유튜브 영상처럼 다른 형식으로 추출해서 제공할 수 있는 콘텐츠를 담는다. 언제든지 해당 홈페이지에서 벗어나 다른 홈페이지나 영역에 독립적으로 가져다 붙일 수 있다.
section : 목차를 구성하는 용도의 컨테이너. 주제별로 영역을 감싸거나 구분할 때 사용한다.
(참고 글: '[html 태그] section, article 태그 (사용, 비교)')
▷ 모달창을 띄워주고 싶다면 Button, 이동을 위해서라면 a 태그를 사용한다.
▷ strong 태그는 키워드 검색(SEO)으로 인식된다. 강조하고 싶은 내용은 bold 대신 strong을 사용하자.
▷ ul, li, a는 논리적 마크업 순서를 고려해 작성해야 한다.
💡 논리적 순서 마크업이란 ?
내용을 논리적 흐름에 맞게 마크업하는 것.
논리적 순서 마크업은 키보드(tap키)나 터치패드와 같은 입력 장치만으로 HTML 문서의 모든 콘텐츠를 논리적 순서로 이동하여 사용할 수 있도록 하는 '입력장치 접근성'과 밀접한 관련이 있다. 따라서 마크업을 할 때 최대한 논리적 순서에 맞게 마크업을 하는 것이 중요하다.
참고 글: ('시멘틱 마크업 과 논리적인 순서 마크업')
▶ 웹 제작 시 유의할 점
▷ css에서 pixel perfection보다 중요한 건 코드의 품질이다.
▷ 사용자의 환경, 컨텐츠의 변화에 따라 유연하게 반응하는 웹을 제작해야 한다.
▷ 명확하게 알아볼 수 있는 class명을 붙여야 한다.
CSS 특강 (margin 편)
▶margin의 핵심
▷ margin은 차지하는 공간의 크기 & 보여주는 이미지의 크기를 별개로 가져갈 수 있다.
(공간이 달라지지 비주얼이 달라지진 않는다)
▷ margin은 사용할 수 있는 공간이므로 요소가 한 줄을 차지하면 margin: auto 시 중간에 위치한다.
▶margin으로 position 응용하기
▷ 마진은 -값이 가능하다(음수 마진, Negative margin). 이는 버그가 아닌 정해진 스펙이다.
▷ 많이 쓰면 혼란스럽지만 적재적소에 사용하면 좋다.
💡 텍스트를 품은 요소가 Negative margin으로 레이아웃을 벗어나도 스크린 리더가 읽을 수 있나요?
해당 부분에 대한 이슈가 존재한다! 이를 인지하고 유의해서 사용하자. 해결 방법을 알아보고 추후 내용 추가하기.
▷ 레이어가 겹쳐있는 형태는 전형적으로 Negative margin을 사용한 예.
▷ Negative margin으로 요소를 겹치면 나중에 작성된 마크업이 앞으로 튀어나온다.
▷ static이 아닌 값이 들어간 (relative 등) 요소는 마크업 순서와 상관없이 앞으로 튀어나온다.
▶ absolute와 컨테이닝 블록
▷ absolute의 기준은 body가 아닌 뷰포트이다.
└ 하지만 스크롤을 내린다고 따라가진 않는다. 이건 fixed를 사용해야 함.
▷ position 속성이 absolute인 경우, 컨테이닝 블록을 원하는 요소로 바꿔주려면 가장 가까운 조상의 position 속성 값을 relative로 변경한다.
▷ 컨테이닝 블록이 된 부모는 컨텐츠 영역의 크기를 자식에게 제공한다.
▶ flex
▷ flex-basis는 flex-grow나 shrink가 적용되기 전 아이템의 기본 크기를 설정한다.
└ width, height 속성보다 우선된다.
▷ flex-shrink는 flex-basis와 함께 사용된다.
└ flex-shrink가 0이면 컨테이너 크기에 상관없이 요소 크기가 유지되고, 1이면 컨테이너 크기에 요소가 맞춰진다.
▷ flex-grow 또한 flex-basis와 함께 사용된다
└ 아이템이 기본값을 넘어 넓어질 수 있는지 설정한다. basis로 설정한 크기에서 더해진다.
▷ flex-item으로 지정되면 min-width:auto로 설정된다.
▷ justify-content은 flex-start가 기본 세팅이다.
▷ align-items은 stretch가 기본 세팅이다. 그래서 부모에게 height를 주면 자식까지 길어진다.
▶ 기타
▷ 용어 정리 필수! 기본기가 가장 중요하다.
▷ min-width: 내부 컨텐츠 너비를 자신의 최소 사이즈로 강제한다.
