개발자를 희망하는 초보의 자기개발 이야기

서론input 태그에 padding-inline-start라는 css가 적용된 사례가 있어 무엇인지 알아보다가 다국어와 관련해 유용한 속성인 것을 알게 되었다.아랍어나 히브리어 등은 한글과 달리 오른쪽에서 왼쪽으로 읽고 쓰는 RTL ( Right To Left ) 계통이다.텍스트 시작지점에 여백을 주고 싶다고 해서 단순히 padding-left로 처리하게 되면 영어나 한국어 같은 LTR( Left To Right ) 계통은 문제가 없으나 RTL 계통은 UI에 문제가 발생한다. 그럼 먼저 언어에 따라 텍스트의 방향을 바꿔줘야 하지 않을까? 라는 생각이 들었다. directioncss적으로 요소의 텍스트와 inline 방향을 설정하는 속성이다. 블록의 시작 위치가 오른쪽으로 이동하여 정렬되지만 한글과 영어 ..

Inline-block이란?inline-block은 inline과 block 요소의 특성을 모두 가지는 속성이다. 기본적으로 inline처럼 한 줄에서 여러 개의 요소가 배치되지만, block처럼 width, height를 지정할 수 있다.사용 예시See the Pen inline-block by luckyzi (@luckyzi) on CodePen.원래 태그는 inline 요소로 width와 height를 가질 수 없으나 inline-block을 적용하면 위와 같이 width와 height를 적용할 수 있다.Inline-block의 장점Block처럼 크기 조절 가능width, height 속성을 자유롭게 지정할 수 있어 레이아웃을 쉽게 조정할 수 있다.Inline처럼 자연스럽게 정렬여러 개의 inl..

Collapsing Margins(여백 병합 현상)이란?CSS에서 margin은 요소 간의 간격을 조정하는 속성이지만, 특정 상황에서는 두 개 이상의 margin이 병합되어 하나로 처리된다. 이를 Collapsing Margins(여백 병합)이라고 한다.병합되는 조건형제 요소 간의 margin서로 인접한 블록 요소들이 각각 margin-bottom과 margin-top을 가지고 있으면, 두 값 중 더 큰 값이 적용된다..box1 { margin-bottom: 20px; }.box2 { margin-top: 30px; }실제 적용된 여백은 30px (둘 중 더 큰 값)만 반영된다.부모와 자식 요소 간의 margin부모 요소의 margin-top과 첫 번째 자식 요소의 margin-top이 병합될 수 있다...

폰트를 다운받아서 설정해도 되지만 빠르게 테스트하게 cdn으로 처리하기 위해 기록함 프리텐다드 웹 폰트는 깃헙에서 cdn과 font-family 예시를 제공 중html 삽입 코드:css에서 사용할 font-family:font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;참고자료https://github...

zoom effect이미지 위에 마우스를 올리면 커지는 효과.쇼핑몰 사이트에서 흔히 볼 수 있음See the Pen css - zoom effect by luckyzi (@luckyzi) on CodePen.코드 해석 주석.zoom-effect {/* 이미지가 확대되더라도 컨테이너 밖으로 안 보이게 함*/ overflow: hidden;}.zoom-effect img {/* 이미지 비율 유지하며 크기 조정 */ object-fit: contain;/* 확대 효과 애니메이션 *//* : 대상 적용시간 방식 */ transition: transform 0.5s ease-out;}.zoom-effect > img:hover {/* scale은 확대 비율. 하나의 값은 전체 비율을 조정. 두개의 값은 수..

flex란?flex : (동사) 몸을 풀다 (명사) 신축성 있는 전선, 가요선화면 크기에 따라 레이아웃이 유동적으로 늘었다 줄었다 변하는게 특징이다. 반응형 웹을 위한 필수 스킬이다. 기본 원칙 :flex는 부모요소에 지정한다. 자손을 컨트롤하는 개념.가로정렬이 기본(주 축)이다. 기본 구성 :기본적으로 div 태그는 block요소이기 때문에 한줄씩 쌓이는 형태See the Pen css - flexbox by luckyzi (@luckyzi) on CodePen. display:flex부모 태그를 기준으로 자식 태그들이 가로로 정렬된다.See the Pen css - display:flex by luckyzi (@luckyzi) on CodePen. justify-content가로 요소들의 배치 방..

position 속성이란position 속성은 HTML 요소가 웹 페이지에서 배치되는 방식을 결정하는 CSS 속성이다. 기본적으로 모든 요소는 static 값을 가지며, 이를 변경하면 다양한 레이아웃 효과를 줄 수 있다. 각 속성의 예시static :position의 기본(Default) 속성값으로 입력하지 않아도 자동 적용됨See the Pen css - relative by luckyzi (@luckyzi) on CodePen. relative:해당 태그의 원래 위치에서 left right top bottom값을 통해 움직임See the Pen Untitled by luckyzi (@luckyzi) on CodePen.absolute:가장 가까운 부모영역을 기준으로  left right top b..

원하는 태그를 클릭한다.마우스 우클릭 후 [Force state] - 원하는 의사 클래스를 선택한다.Force state가 번역하면 강제 상태. 즉 의사 클래스 상태를 강제유지한다는 의미다.강제되고 나면 style 란에서 적용된 CSS를 바로 확인할 수 있다.

구글을 클론하면서 :hover하거나 :focus시에 입력칸의 색상이 위와 같이 바뀌도록 하고 싶었다.  search__container 영역 전체가 색상이 변해야 하기에 :focus를 주었으나 동작하지 않았다. MDN을 통해 focus는 입력 칸 등 포커스를 받은 요소를 나타낸다는 것을 알았고, input에 focus처리하니 양쪽 아이콘 영역의 색상이 변경되지 않았다. 포커스된 경우 전체를 강조해야 할 때는 focus-within을 써야 한다..search__container:focus-within { background-color: #f1f3f4;}.search__container:hover { background-color: #f1f3f4;}

문제유효성 검증예시) 텍스트 입력란이 비었을 때 테두리를 빨간색으로 지정한다.JSSee the Pen valid - js by luckyzi (@luckyzi) on CodePen.CSSSee the Pen Untitled by luckyzi (@luckyzi) on CodePen.결과css로 단순히 처리할 수 있는 영역도 JS를 사용하면 메모리 낭비가 발생한다.