나디아 성장 일기

📌 box-sizing: 요소의 너비와 높이를 계산하는 방법을 지정  - content-box : 요소의 설정된 너비에 + 테두리와 안쪽 여백이 더해진다.기본값(default) width와 height 속성에 콘텐츠 영역만 포함, 안팎 여백과 테두리는 포함하지 않는다.  (ex. box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비(width) = 370px) 요소의 크기: 너비 = 콘텐츠 너비, 높이 = 콘텐츠 높이테두리와 안쪽 여백은 식에 포함하지 않는다. - border-box : 테두리와 안쪽 여백을 추가하면 콘텐츠 영역이 줄어든다.width와 height 속성에 안쪽 여백과 테두리는 포함, 바깥 여백은 포함하지 않는다.  안쪽 여백과 테두리가 ..

📌 display 속성display : 화면에 렌더링 방법을 결정하는 속성block: Nomal flow에 따라 block 요소처럼 동작, 요소 앞 뒤로 줄바꿈을 생성함기본값none: 객체가 만들어지지 않음 (화면에만 안보이는게 아님, DOM Tree에서 없어짐)flex: 요소가 flex 컨테이너가 됨 (부모 요소에 선언) inline-flex: inline 요소처럼 동작, flex-box 모델에 따라 콘텐츠를 배치함flow-root: 부모 요소가 자식 요소들을 감싸고 있을 때, 자식 요소가 부모 요소의 크기를 정확하게 반영하지 않는 문제가 발생하는데 이러한 문제를 해결함  📌 flexflex 요소 가로 배치inline 요소로 변경됨 (크기가 자기 컨텐츠만큼만 설정)  flex-container: 자..

📌 Flow Layout 🔺 Nomal Flow: CSS에서 요소들이 문서 내에서 기본적으로 차지하는 공간과 배치되는 방식 블록 수준 요소와 인라인 요소들이 문서 흐름에 따라 배치되는 방식을 의미 - 블록 수준 요소: 한 줄에 하나씩 차지- 인라인 요소: 컨텐츠만큼의 크기를 갖고 배치  🔺 Block Flow: 위에서 아래로 진행  🔺 Inline Flow: 왼쪽에서 오른쪽으로 진행  📌 논리적 속성: 블록과 인라인 차원에 시작과 끝 속성을 정의한다. inline-size (= width): 가로 크기 block-size (= height): 세로 크기  inset-block-start(= top): 위를 기준으로 배치 inset-block-end(= bottom): 아래를 기준으로 배치   i..

📌 폰트 로컬 폰트(Local Font) : 로컬에서 직접 제공하는 폰트 운영체제(컴퓨터)에 내장된 기본 폰트성능, 렌더링 이슈 발생 위험크로스 브라우징 상태에서 폰트가 적용되지 않을 수도 있는 위험이 있음웹 페이지의 디자인에 사용된 폰트가 사용자 시스템에서 지원되지 않는 폰트면 대체 폰트가 사용되어 디자인이 변경될 수 있다. 웹 폰트(Web Font) : 웹 페이지에서 사용되는 폰트 컴퓨터에 해당 폰트가 설치되어 있지 않아도 서버에서 제공하는 폰트 파일을 다운로드 받아 화면에 표시할 수 있다.  폰트 파일을 서버가 갖고 있음 => 클라이언트 요청에 따라 폰트를 보내줌사용자가 웹 페이지를 방문할 때, 해당 폰트는 웹 서버에서 불러와 사용되므로 사용자의 시스템에 설치되어 있지 않아도 일관된 디자인이 유지..

📌 ::backdrop: 모달창과 모달창 뒤쪽을 분리하여 스타일을 지정할 수 있다.   최상위 레이어 요소 아래에 있는 모든 것을 모호하게 하거나 스타일을 지정하거나 완전히 숨길 수 있다. dialog::backdrop { background: rgb(255 0 0 / 25%);}    참고 ::backdrop - CSS: Cascading Style Sheets | MDNThe ::backdrop CSS pseudo-element is a box the size of the viewport, which is rendered immediately beneath any element being presented in the top layer.developer.mozilla.org  ::backdrop:..

📌 CSS (Cascading Style Sheet): HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다 Style sheet 언어 구조와 표현의 분리* Cascading: 폭포    🔺 CSS 적용 방식 외부 스타일 시트 : HTML 파일과 CSS 파일을 구분하는 방식 태그로 연결 내부 스타일 시트 : HTML 파일 내부에 CSS를 추가하는 방식  인라인 스타일 : HTML 태그 내부에 CSS를 선언하는 방식    🔺 기본 구조selector { 선언부1; 선언부2;}선택자(Selector) 선언부(Declaration block) 속성(Property) 속성 값(Value) 선언부는 세미콜론(;)으로 구분하여 여러 개 선언할 수 있다.  📌 CSS 변수(Custom Pro..

📌 writing-mode : 텍스트 정렬 방향을 지정한다. horizontal-tb : 가로 정렬 - 초기값 (기본값) vertical-rl : 세로 정렬 - 블록 컨테이너의 표시 방향: 왼쪽 ⬅ 오른쪽 vertical-lr : 세로 정렬 - 블록 컨테이너의 표시 방향: 왼쪽 ➡ 오른쪽 📌 text-orientation : 한 줄에 있는 텍스트의 방향을 설정한다. 세로 쓰기 모드(writing-mode)인 경우에 효과가 있으며 수직 방향의 제목을 달때 유용하다. mixed : 우측 방향으로 세로 정렬 + 영어는 정방향 sideways : 우측 방향으로 세로 정렬 upright : 세로 정렬 출처 CSS writing-mode 속성 – 텍스트 세로 쓰기 모드 설정 - 코딩에브리바디 writing-mode..

📌 object-fit : 요소의 크기에 맞게 태그와 태그의 크기를 조정하는 속성 📍속성 contain 비율을 유지하면서 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절한다. 딱 맞추기 때문에 남는 공간이 발생할 수 있다. cover 비율을 유지하면서 요소 콘텐츠 박스를 가득 채운다. 비율이 맞지 않으면 일부가 잘린다. fill 기본값 박스 크기에 맞춰 요소 크기를 조절한다. none 크기 조절 ❌ scale-down none과 contain 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택한다. 출처 object-fit - CSS: Cascading Style Sheets | MDN CSS object-fit 속성은 나 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인..

📌 BEM (Block, Element, Modifier) : HTML 요소들을 block과 그에 포함된 element로 구분하고, 거기에 적용시킬 개별적 디자인 특성을 modifier로 구분해서 클래스명을 지어주는 규칙 기본 구조 block__element--modifier 📍 Block (블록) : block(블록)은 페이지 전체 요소를 감싸는 컨테이너 블록끼리는 상호작용할 수 있지만, 우선순위나 계층이 없다 ❌ 클래스를 적용할 수 있는 DOM 노드라면 뭐든 블록이 될 수 있다 ⭕ 🔺 Naming 그냥 원하는 이름으로 표기 🔺 CSS 클래명만 사용 ⭕ 태그 이름, ID 중첩 사용 금지 ❌ /* O */ .block { color: #e5e5e5; } /* X */ div.block { color: #..

📌 [SCSS] 문법 모음 📌 색상 rgba($color: #색상 코드, $alpha: 불투명도(소수)); 불투명도: 0.8 -> 80% SCSS 문법으로 CSS에선 동작 X .list-item { border: 1px solid rgba($color: #fff, $alpha: 0.5); // 불투명도 50% padding: 10px; border-radius: 20px; } 📌 css 스타일링을 리셋 시키는 방법 브라우저 기본값에 신경쓰고 싶지 않을 때 사용 모든 태그의 스타일을 동일하게 만듦 1. 링크의 코드를 복사해서 reset 파일(reset.scss)에 붙여넣기 CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is..