1ncode 님의 블로그

1. 세로 방향 기준! 가운데 정렬 하는 방법! 원래! align-content는 display: flex일 때만 동작하는 속성으로 알려져 있습니다!하지만 2022년 CSS 업데이트 이후,align-content는 단독으로도 사용 가능해졌습니다. [ 예시 ]div { height: 200px; align-content: center;} 세로정렬 >> align-content: center;여러 줄(여러 라인)로 배치된 요소들을 세로 방향 묶음으로 정렬원래는 flex 전용이었지만 2022년부터 block/grid에서도 단독 사용 가능 2. 가로 방향 기준! 가운데 정렬 하는 방법! div { text-align: center; /* 글자, 인라인 요소 가로 중앙 */}가로정렬 >> text-al..

aspect-ratio: 1 / 1 이란??가로 : 세로 = 1 : 1 → 무조건 정사각형으로 만들어라! 어떻게 사용하나?width만 정하면 height도 자동으로 똑같이 맞추려고 하는 속성즉, width가 20px이면 height도 자동으로 20px [ 참고 ]/* 정사각형 */aspect-ratio: 1 / 1;/* 가로가 더 긴 직사각형 */aspect-ratio: 16 / 9;/* 세로가 조금 더 긴 박스 */aspect-ratio: 3 / 4; aspect-ratio = 가로 : 세로 비율모니터 비율: 16:9아이패드 화면: 4:3인스타 정사각형 사진: 1:1'16:9, 4:3, 1:1'이 aspect ratio(종횡비) 이다 [ 예시 ].box { width: 200px; aspect-r..

position: absolute를 파헤쳐보자!position: absolute를 사용하면!아마~ relative만을 찾으려고 하는 사람들이 많을 것 이다! 왜냐??보통 position: relative + position: absolute 조합을 많이 사용하기에!absolute는 relative를 기준!으로 한다고 생각한다! 하!지!만!relative만 찾는 것이 아닌! position: static이 아닌 부모 요소를 찾을 때까지 계속 찾는 중이라고 생각해야 한다. 즉!!!position: absolute는 position: static이 아닌 부모를 만날 때까지 위로 올라가며,그 부모를 기준으로 top, left 등을 계산한다. 좀 더 쉽게 말하자면?!?!?! 1. 기본값인 static은 기준이 ..

인라인태그 작업 방법!span태그는 인라인 요소! 인라인 요소는 기본적으로 width, height값 무시 함!그래서 너비, 높이값을 지정해도! 적용이 되지 않음! 그렇다면 어떻게 해결 할 수 있을까? 인라인 요소가 width, height 값을 가지게 하려면?!display 값을 변경해야 한다. [ 첫번째 방법 ]span { display: inline-block; /* 또는 block */ width: 20px; height: 20px;} 인라인태그에~display: block 또는 display: inline-block을 줘서!블록요소로 만들어~! 인라인태그를 블록태그처럼 사용 할 수 있다. 또 다른 방식으로!인라인태그에 너비, 높이 값을 가지게 하는 방법이 있는데~ vv [ 두번째 방법 ]..

수업을 하는 폴백! 폴백이라는 단어가 계속 쓰인다!폴백이란 무엇일까?! 폴백을 알아보자~! vv 폴백(fallback)이란?원래 의도한 기능이 동작하지 않을때! 대신 사용되는 예비옵션, 즉 대안을 말한다. [ 예시 01 ]font-family: 'Noto Sans', Arial, sans-serif; Noto Sans 로드 실패 >> Arial 사용! >> Arial도 없으면 >> OS 기본 sans-serif 사용 [ 예시 02 ]:root { --base-color: gray; --default-color: pink;}div {background: var(--base-color, var(--default-color, red));} var(--base-color) >> var..

웹접근성 텍스트 숨김 방법! sr-only 설정 하는 방법! vv /* 접근성 관련 CSS */.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; margin: -1px; padding: 0; border-width: 0; clip-path: inset(50%);} 1. position: absolute;요소를 화면 레이아웃 흐름에 빼서 보이지 않는 곳에 배치하기 위한 작업2. width: 1px; height: 1px;요소의 크기를 아주 작게(1px) 만들어서 화면에 거의 보이지 않도록 함3. overflow: hidden;요소 안의 내용이 밖으로 보이지 않도록 잘라냄..

CLI란? (Command Line Interface) - 키보드로 직접 명령어를 입력해서 컴퓨터와 소통하는 방식 "명령어로 사용하는 인터페이스"예: 터미널, 명령 프롬프트, Git Bash'명령어'로 컴퓨터와 대화하는 방식GUI란? (Graphical User Interface) - 버튼, 창, 아이콘 등 눈에 보이는 화면을 클릭해서 컴퓨터와 상호작용하는 방식이야. "그래픽으로 사용하는 인터페이스"예: 소스트리, VSCode 등'그래픽'을 클릭하면서 컴퓨터와 대화하는 방식shell 이란?셸(shell)은 운영체제와 사용자간의 인터페이스 역활을 하는 프로그램. 터미널에서 사용되는 주로 CLI를 제고하여 사용자가 텍스트 기반 명령어를 사용하여 컴퓨터와 상화작용 가능 운영체제(OS)와 사용자 사이에서 ‘..