멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 15 (플렉시블 레이아웃, 폼 스타일링)

 

 

 

목차

• display: contents; (플렉시블 레이아웃)
• 상태 디자인(폼 스타일링)
• 새로 배운 것들
• 오늘 하루를 돌아보며

 

 

display: contents; (플렉시블 레이아웃)

<div class="parent">
  <div class="child"></div>
</div>

<ul class="parent">
  <li>
    <div class="child"></div>
  </li>
</ul>

 

위 코드를 아래 코드처럼 수정하게 된다면 중간에 들어간 li 요소 때문에 레이아웃이 깨지게 된다. 이때 li 요소의 display 값을 contents로 지정하면 li 요소를 컨테이닝 블록이 아닌 컨텐츠로 변경해서 ul 요소가 그 안에 있는 div 요소를 직계 자식 요소로 인식한다. 마크업을 변경하게 되더라도 중간에 끼게 되는 컨테이너를 무시할 수 있게 하는 유용한 속성 값이다.

컨테이너가 아니게 되어서 background나 border 같은 속성은 적용되지 않겠지만, font-color나 font-style과 같은 상속되는 스타일링 요소들은 적용된다.

 

상태 디자인(폼 스타일링)

• :hover - 커서가 해당 요소에 올라갔을 때의 상태를 스타일링한다.
• :focus - 포커싱됐을 때의 상태를 스타일링한다.
• :focus-visible - focus 가상 클래스와 비슷하다. :focus 가상 클래스를 디자인 상 예쁘지 않다고 보이지 않게 하는 경우가 많아졌다. 하지만 그렇게 하면 시각장애인이나 저시력자가 키보드 탐색을 하기 어렵다. 이때 :focus-visible 가상 클래스를 사용하면 마우스로 클릭했을 때는 포커스 링이 보이지 않지만, 키보드를 사용해서 접근했을 때는 포커스 링이 보인다.
• outline 속성은 포커싱됐을 때 포커스 링의 스타일을 지정한다. border와 비슷하게 작동한다. 굵기, 선 종류, 선 색깔을 지정할 수 있다.
• outline-offset 속성은 포커스 링을 바깥(양수) 혹은 안쪽(음수)으로 사이즈를 줄일 수 있다.
• 포커스 링을 만들 때 box-shadow를 사용하기도 한다. 3번 째 값이 blur-radius인데 이 값을 늘이면 끝이 번진 효과를 준다.
• html에서 readonly 속성을 주면 텍스트를 입력할 수 없고 읽기만 가능하다. 읽기만 가능하다는 것을 시각적으로도 볼 수 있도록 알려줄 필요가 있다. background-color를 흐린 회색으로 주어서 직관적으로 알려줄 수 있다.
• html의 disabled 속성은 주로 버튼에서 사용하며, 버튼을 비활성화한다. 조건을 달성하지 못했거나 권한이 없을 때 등 사용할 수 있다.
• cursor: not-allowed; 속성을 사용해서 커서의 모양을 바꿀 수 있다.
• :focus-within - 자식 요소에 포커싱이 됐을 때 부모 요소를 선택하는 선택자. .parent:focus-within으로 접근해야 한다.
• :has() - 특정 조건을 만족하는 자식을 포함한 부모 요소를 선택하는 선택자다. focus-within은 focus에 한정되지만 has는 다양한 조건을 사용할 수 있다.

새로 배운 것들

<img> vs <svg>

편의성 관점에서 img 속성이 더 좋을 있지만, 성능 관점에서는 svg 속성이 더 좋다. img 속성은 서버에 자원을 요청해서 랜더링해야 한다. svg 요소는 코드로 포함되어 있어서 이미지 자원을 요청할 필요가 없다. 서버에 자원을 요청하는 횟수를 줄일 수 있다.

svg 요소로 불러오면 코드 레벨에서 색을 자유롭게 변경할 수 있다. CSS에서도 svg 요소의 fill 값을 제어할 수 있다. fill 속성을 가진 태그를 선택자로 불러서 fill 속성 값을 지정할 수 있다. 또는, svg 요소의 fill 속성 값을 currentColor로 지정하면 css에서 color 값을 변경하는 대로 svg의 색상을 제어할 수 있다.

 

 

background-clip

텍스트에 그라디언트를 적용할 수 있는 방법이다. background-clip 속성을 사용해서 text를 값으로 주면 배경 색을 text에 클리핑한다. 이때 color를 transparent로 줘야 배경이 비춰보인다. 원하는 그라디언트를 background에 주면 적용된다.

 

text-transform

text-transform 속성을 사용하면 소문자로 마크업했더라도 대문자로 변경하거나, 그 반대도 가능하다. 마크업이 꼭 대소문자를 구분하지 않아도 된다.

 

 

오늘 하루를 돌아보며

경쟁력 있는 개발자는 기초가 탄탄한 개발자다. 경력이 아무리 많아도 기초를 다지지 않고, 성장하려 하지 않는다면 물경력이 될 것이다. 어디에 취직하게 되든지 내가 성장하는 것이 중요하다. 회사 내에서 성장할 기회가 없다면, 내가 스스로 배울 것들을 찾아서 성장해야 한다.

개발자는 에러를 통해 성장한다. 에러를 어떻게 해결했는지 뜯어보고 살펴보고 알아보고 기록하는 것이 중요하다!!! 수업 때 들은 내용을 열심히 정리해서 블로그에 업로드하고 있는데, 부트캠프가 끝난 이후에도 스스로 학습하면서 새롭게 알게 되는 것들도 정리하고, 코드를 짜다가 안 되는 부분들도 찾아서 왜 안 되는지, 어떻게 해결했는지 정리해서 올려야겠다.