My Boundary As Much As I Experienced

백그라운드  고정하는 방법 body { height: 100vh; background-image: url('path/to/your/image.jpg'); background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat; } background-image: 배경 이미지의 URL을 지정한다.background-attachment: fixed: 배경 이미지를 고정하여 스크롤 시에도 고정하게 만든다.background-size: cover: 배경 이미지가 요소의 전체 크기를 덮도록 조정한다. 이 설정은 이미지가 요소의..

정리해야지 해야지 하면서 안 하고 있던 flex 단축 표기법 공부를 해봤다. 단축 표기되는 속성 목록CSS의 flex 속성은 플렉스 컨테이너에서 플렉스 아이템의 크기와 분포를 정의하는 단축 속성이다.이 속성은 다음과 같은 세 가지 구성 요소를 포함한다. flex-grow: 플렉스 아이템이 컨테이너의 남은 공간을 얼마나 많이 차지할지 결정.flex-shrink: 플렉스 아이템이 컨테이너가 줄어들 때 얼마나 줄어들지 결정.flex-basis: 플렉스 아이템의 기본 크기를 설정.아래처럼 표기된다.flex: [flex-grow] [flex-shrink] [flex-basis];   단축 예시기본값:flex: 0 1 auto;  플렉스 아이템이 남은 모든 공간을 균등하게 차지하게 하려면:flex: 1;이는 fle..

Element.style 속성과 GetComputedStyle() 메소드의 차이점 쿼리셀렉터 혹은 getElement... 메소드로 가져온 HTMLElement의 css 속성을 조작하는데엔 2가지 방법이 있다. Element.style와 getComputedStyle이다. (사실 추가로 css in JS인 스타일드 컴포넌트를 쓰면 state로 조작할 수 있긴 하다..) 이 두 개의 차이점을 알아보자. 아래는 각기 다른 형태로 작성된 엘리먼트들이다. 첫 번째 엘리먼트 두 번째 엘리먼트 첫 번째 엘리먼트는 인라인 방식으로 해당 엘리먼트에 글자색 스타일을 직접 선언하고, 두 번째 엘리먼트는 body태그 바깥에서 style 태그를 이용해서 외부에서 선언하도록 했다. Element.style 을 활용 elemen..

계속 까먹어서 적어둔다. .text { overflow: hidden; // 넘치는거 보이지 않게 처리 white-space: nowrap; // 2줄 처리 안 되게 text-overflow: ellipsis; // ... 처리 } /* 참고점 overflow나 white-space 설정이 저렇게 되어 있지 않으면 text-overflow는 작동하지 않는다. 그리고 부모 컨테이너의 width도 지정되어 있어야 한다. */ css in js이든 css이든 재사용 가능한 테마를 지원하므로 지정해서 원하는 곳에 추가해주면 좋다.

tailwind의 사용 방식 tailwind는 클래스에 "w-full h-full inline-flex items-center justify-center h-11 rounded-md px-8 ..." 이런 식으로 축약어들을 때려넣어 스타일링 해주는 방식으로 사용된다. 축약어들이 낮선게 많아 러닝커브가 상당히 있는 편인거 같다. tailwind의 장점 (headless ui) 1. css in js에 비해 성능이 좋다. css in js는 애초에 성능보다 개발자 경험을 중시한 라이브러리이다. csr 방식에 최적화되어 있으며 브라우저가 js를 다 로딩하기 전까지는 내용물을 보여주기 힘들다. css in js는 js파일을 많이 로딩해야되기 때문에 브라우저 메모리를 많이 잡아먹는다. 그러나 tailwind는 순..

인터넷 프로토콜의 한 종류로서 2010년에 페이스북이 발표했다. 대부분의 웹페이지가 메타 정보 중 decription과 title정도는 표출해주기도 하지만, 그것만으로 링크의 정보를 파악하기 힘든 경우가 많다. 이 문제점을 개선하기 위해 웹페이지에 대한 정보를 담고 있는 메타 정보의 사용 방식을 표준화하여 페이스북을 포함한 모든 sns 링크 공유 시 통일된 형식으로 정보를 표출하게 설계되었다. sns에 특화된 프로토콜이다. SEO에 도움이 되는가 SEO에 직접적인 영향을 주지는 않는다. 하지만 오픈 그래프 태그를 사용했을 때 웹사이트의 사용자 유입, 전환률에 확실한 영향을 준다는 점에서 SEO 못지않은 큰 장점을 가지고 있다. 기본형 og:title - 웹 페이지 제목 og:type - 웹 페이지 유형 ..

인터넷의 발전으로 방대한 양의 웹문서가 생기면서, 제각기 일관적이지 않게 생성된 문서 구조는웹문서에서 원하는 정보를 찾기가 점점 힘들어 지게 만드는 원인이었다. 태그의 기능과 마찬가지로 block element이면서 사이트의 구조(레이아웃)을 설계하기 위한 태그.HTML의 구조를 설계하는데 있어 태그에 의미를 부여 함으로써사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그.   시멘틱태그를 사용하면 좋은점(장점)1. SEO 최적화에 유리. (SEO: Search Engine Optimization)검색 엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어검색 결과의 노출에 유리할 수 있게 해준다. 2. 웹 접근성에 효율적일반적인 브라..

기본적인 Display 속성의 종류 none block inline inline-block - 안 보여요. - 클릭도 안 돼요. - 아예 영역이 사라져요. - 한 블록을 모두 점유하는 요소이다. - 대표적으로는 h, div 등이 있다. - height와 width를 설정할 수 있다. - 구획으로도 많이 쓰인다. - 글자처럼 취급되는 요소이다. - 한 블록에 여러 개가 쌓일 수 있다. - 대표적인 인라인 요소는 p, span 등이 있다. - height와 width를 가질 수 없다. (컨텐츠에 auto로 맞춰짐) - block과 inline의 중간 형태. - 라는데 그렇게 딱히 쓰이는 걸 본 적이 없다. Display: none과 visibility: hidden, Opacity: 0의 차이 display..

포지션 속성으로 원하는 좌표 기준에 따라 요소를 정렬할 수 있다. top, right, bottom, left 값에 따라 offset을 적용할 수 있는데, 그 기준이 좌표 기준은 아래와 같다. 속성값 특징 static (기본값) 특별한 특징 없음 relative 원래 자기 자신의 위치를 좌표 삼아 움직임 absolute 다른 레이아웃과의 관계를 벗어나 고정적인 위치를 갖는다. 자신에게 가장 가까운 포지션 값이 있는 상위 요소를 기준으로 삼게 된다. fixed 뷰포트(Viewport)를 기준으로 고정값을 가진다. 스크롤이 발생해도 뷰포트에서 고정적인 위치값을 갖는다. sticky 요소를 일반적인 문서 흐름에 따라 배치하고, 가장 가까운 스크롤이 가능한 조상과 가장 가까운 블록 레벨 조상을 기준으로 top,..