[TIL] 엘리스 SW 엔지니어 트랙 Day 005

📖 오늘 배운 내용 - 2021.10.29

• position
• z-index
• box-shadow
• border-radius : 테두리 둥글게
• 웹폰트 사용법
• 패럴랙스
• form, input, textarea

 

📝 2차원과 3차원을 결정짓는 요소 :: position

[CSS] position 속성과 사용법 총정리

 

📝 background 속성

[CSS] background 속성 총정리

 

📝 y축 중앙 정렬 방법

{
    /* top이라는 속성을 사용했기 때문에 position 속성값이 3차원인 상태에만 아래 코드를 적용시킬 수 있다. */
    position: relative;

    top: 50%;
    transform: trnaslateY(-50%);
}

• 자기 자신의 크기를 기준으로 좌표가 형성된다.
• trnaslateY를 사용할 때는 크로스 브라우징을 고려해서 작업해야 된다.

 

📝 box-sizing

• width와 height는 엘리먼트의 콘텐츠의 크기를 지정한다. 따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵다.
• box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽다.
• ex) 패딩을 사용했을 때 공간의 크기가 바뀌지 않게 하기 위해서

 

💡 오늘 깨달은 것

• 2차원, 3차원을 결정짓는 속성 → position
• z-index를 사용하려면 position의 속성 값 상태가 3차원이어야 한다. -> 포지션이 3차원일 경우 사용 가능(relative, fixed, sticky)
• box-shadow: inset hoff voff blur color;
• Box Shadow
• 패럴랙스는 이미지 스크롤 시 시간차에 따른 효과를 적용할 때 사용되는 용어이다.
  • background-attachment: fixed;를 사용해서 구현
  • 이미지는 뒤에 고정된 상태. 공간 자체가 스크롤되면서 감춰진 이미지가 보이는 일종의 트릭
• article태그 안에는 h태그가 무조건 1개가 들어가 있어야 한다.
• font-family : 브라우저마다 지원하는 폰트가 다름, 입력한 순서대로 우선순위 적용. sans-serif는 마지막에 작성하는 디폴트 값. 모든 브라우저에서 적용 가능한 폰트이다.
• 블록 요소는 공간 크기 설정 가능, 상/하 배치 작업 가능
• 인라인 요소는 margin/padding은 좌우만 가능
• inline-block을 적용하면, inline 요소도 block 요소처럼 width와 height을 설정할 수 있다.
• 초기 공백 설정 * { margin: 0; padding: 0; }

 

📌 참고

• https://opentutorials.org/course/2418/13405
• https://dev.to/lupitacode/que-es-el-box-sizing-en-css-2pi9