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 [ 두번째 방법 ]..