sally-dot

1. Tailwind CSS Tailwind CSS는 오픈 소스 CSS 프레임워크입니다. 이 라이브러리의 주요 기능은 부트스트랩과 같은 다른 CSS 프레임워크와 달리 버튼이나 테이블과 같은 요소 에 대해 미리 정의된 일련의 클래스를 제공하지 않는다는 것입니다. 대신 여러 CSS 요소를 사용하여 스타일을 지정하는데 사용할 수 있는 "유틸리티" CSS 클래스 목록을 만듭니다. Tailwind는 CSS의 항목을 Tailwind 식으로 목록화한 '유틸리티 클라스'만 사용하여 CSS파일 없이 html 파일만으로 빠른 UI를 제작할 수 있다는 장점이 있습니다. 아래와 같이 Tailwind의 클래스 항목을 html의 태그에 적용하여 노란색 결과를 얻을 수 있습니다. 2. 장점과 단점 장점 클래스 이름을 고민하지 않아..

1. object-fit 속성 나 요소와 같은 콘텐츠 크기를 어떤 방식으로 조절하여 요소에 맞출 것인지 지정합니다. 2. object-fit 값 object-fit : cover 이미지의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나갑니다. object-fit : contain 이미지의 가로세로비를 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절합니다. 콘텐츠가 콘텐츠 박스 크기에 맞도록 하면서도 가로세로비를 유지하게 되므로, 서로의 가로세로비가 일치하지 않으면 객체가 레터박스처럼 됩니다. 이외의 다른 속성값들 출력 이미지 3. 사용 예시 아래와 같이 캐러셀 라이브러리에서 배경 이미지를 넣는 과정에서 사용했습니다. ..

1. % 부모(.parent) element에 따른 %를 나타내는 단위입니다. 자식 요소에 적용한 높이가 100%일 때 부모의 높이와 크기가 동일합니다. 하지만 자식 요소에 적용한 높이가 50%일 땐 부모의 높이와 비교해 절반이 됩니다. 2. vh & vw vh는 Viewport height이고 vw는 Viewport width 축약어 이며, Viewport는 웹사이트에서 보여지는 영역을 뜻합니다. 만일 100vh로 속성값을 설정할 경우 뷰포트 너비의 100% 만큼 계산이 됩니다. 부모 태그와는 상관없이 보이는 Viewport Height의 100%를 다 쓰겠다는 의미입니다. 100vh, 100vw 가 전체 화면의 기준이 됩니다. 예를들어, 현재 스크린 크기가 height = 1000px, width =..

css property 순서 컨벤션 [CSS property 순서] - Layout Properties (position, float, clear, display) - Box Model Properties (width, height, margin, padding) - Visual Properties (color, background, border, box-shadow) - Typography Properties (font-size, font-family, text-align, text-transform) - Misc Properties (cursor, overflow, z-index) 컨벤션은 앞으로 다니게되는 회사의 컨벤션에 맞추면 되는 부분이지만, 해당 컨벤션을 지키면 보다 직관적인 코드를 작성할 수..

1. Semantic Web Semantic Web Semantic Web은 '의미론적인 웹'이라는 뜻으로, ‘의미론적인 웹’이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다. Semantic Web은 사람의 눈으로 보기에 용이한 시각정보에 대한 메타데이터와 자연어로 기술된 문장을 컴퓨터가 의미정보를 해석할 수 있는 메타데이터로 작성한 웹입니다. HTML5 에서의 시멘틱 웹 [ 출처 및 참고자료 ] 더보기 시맨틱 웹 - 위키백과, 우리 모두의 백과사전 기존의 코드 (HTML, HTML4) 내용 시멘틱 웹 코드 (HTML5) 내용 기존에 사용하던 머리부분을 시멘틱 웹코드로 사용하게 되면서 쉽우면서 더 의미론적으로 작성 할 수 있게되었습니다. 2. Semantic Tag Semantic ..