멋사 TIL (CSS)

display 속성

• display : 박스의 유형을 결정하고 다른 박스들과 어떤 방식으로 배치할지 레이아웃을 설정

  • block : 요소 전후에 줄 바꿈을 생성
  • inline : 요소 전후에 줄 바꿈을 생성하지 않는 인라인 요소 상자를 생성하고, 정상적인 흐름에서 공간이 있으면 다음 요소는 같은 줄에 있음
  • inline-block : inline 줄 바꿈 없이 한 줄에 놓이지만, block처럼 box-model의 width, height, margin, padding 값을 모두 설정 가능
  • flex : 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 단방향(1차원적)으로 설정
  • grid : 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 모두 이용해(2차원적) 설정
  • none : 해당 속성은 접근성 트리에서 해당 요소가 제거하고, 해당 요소 및 해당 하위 요소가 사라지고, 스크린리더에도 읽히지 않음

mdn 사이트

https://developer.mozilla.org/ko/
: 검색창에 css관련 코드를 넣으면 구현된 이미지와 관련된 코드를 보여준다.

reset.css

각 브라우저 마다 기본적으로 다르게 제공하는 스타일이 있다. (폰트 크기, 여백, 색상 등)
이러한 CSS 속성들을 초기화 할 수 있는 방법은,
https://necolas.github.io/normalize.css/
위 링크를 참고해 reset.css 사용하는 것이다.
이러한 코드 뿐만 아니라, 자기 자신이 reset.css를 만들 수 있도록 하자.

• 크로스 브라우징 (Cross Browsing)
  : 웹페이지의 상호 호환성으로, 어느 한쪽에 최적화되지 않고, 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말한다.
  이는, 어떤 웹 브라우저든 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미한다.

• 접근성 호환 가능 사이트
  https://caniuse.com/
  : 각 브라우저마다 웹 사이트가 제대로 작동할 수 있는지 확인해보는 사이트이다.

background

• background-attachment :
  • fixed: 뷰포트에 고정
  • local: 요소 콘텐츠에 대해 고정. 스크롤이 존재하면 배경은 콘텐츠와 함께 스크롤.
  • scroll: 배경 요소 자체에 대해 고정. 요소에 스크롤이 존재해도 배경은 함께 스크롤 되지 않음.
• • background-clip: 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할지 지정.
    • 배경을 잘라냄
    • border-box / padding-box / content-box

img 속성

• img : 문서에 이미지를 삽입

  • src : 경로
  • alt
    : 대체 텍스트로, 이미지의 대한 설명을 넣는다.
    src에 지정한 이미지를 제대로 불러오지 못했을 때 alt 에 적힌 내용을 보여준다.
    시각장애인을 위한 스크린리더를 지원하며, 이미지를 대체하는 텍스트가 중복이면 alt=""로 생략이 아닌 빈 값으로 둔다.

• 이미지를 넣을 때 하단에 빈 공간이 생기는 경우
  : img는 인라인 요소이기 때문에 img의 세로 정렬이 글자의 baseline을 따르게 된다.
  이를 해결하기 위해서는 아래와 같이 초기값을 넣어주면 된다.

  img{
      vertical-align:top;
  }

• figure, figcaption : 이미지에 캡션을 달고 싶을 때 사용
  

    <figure>
        <img src="images/baby.jpg" alt="엄마 코끼리와 아기 코끼리">
        <figcaption>
            관심 받고 싶어 하는 아기
        </figcaption>
    </figure>

• 이미지 비율 유지하기

1. aspect-ratio : 기본 가로 / 세로 비율을 설정

   img{
     width:300px;
     aspect-ratio: 2 / 1;
     object-fit:cover;
   }

2. padding %값 이용 : padding의 top과 bottom % 값은 부모의 세로가 아닌, 가로 너비를 기준

   .thumbnail {
     position: relative;
     height: 0;
     padding-top: 50%; 
     overflow: hidden;
   }
   
   .thumbnail  img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

그라이언트 배경 만드는 사이트

https://cssgradient.io/