HTML_CSS/기초 (9) 썸네일형 리스트형 position fixed 와 sticky의 차이 fixed와 sticky는 정말 비슷하지만, 중요한 차이점들이 존재합니다. sticky와 fixed의 차이점 position: fixed는 viewport에 고정되어 있다는 뜻으로 스크롤을 내려도 지정한 위치에 고정되어 있습니다. 스크롤을 내리면 문서에서 물흐르듯 벗어납니다. 하지만, viewport에 고정되지 않는 엣지케이스들도 존재합니다. MDN에서 이 부분은 참고할 수 있습니다. sticky는 스크롤을 내려도 스크롤을 따라 움직이며 내가 정한 offset에 도달하면 그 순간부터 fixed처럼 행동합니다. 즉, 그 위치에 고정됩니다. 하지만 한가지 문제가 존재하는데, 그것은 포함하는 block(부모) 내에 있어야 합니다. 포함하는 블럭, 즉 부모 엘리먼트가 스크롤을 벗어나면, 그와 함께 사라집니다. .. margin 과 padding Margin과 Padding 두가지 속성의 차이점은 Margin은 Object와 화면과의 여백(외부여백)을 말하며 Padding은 Object내의 내부여백을 의미합니다. TIL CSS 레이아웃/셀렉터 정리 grid와 flex 차이 flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있습니다. Grid는 2차원으로 수평 수직을 동시에 영역을 나눌 수 있습니다. 요약하자면, Grid : 수직 and 수평 Flex : 수직 or 수평 Tailwind CSS란? Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크입니다. 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있습니다. Tailwind의 장점: 클래스 이름을 짓는데 에너지를 낭비하지 않습니다. 무언가를 스타일링하기 위해 sidebar-inner-wrapper 같은 바보같은 이름을 추가하지 않고, 단지 유연한 컨테이.. HTML5 template 태그 태그는 추가되거나 복사될 수 있는 HTML 요소들을 정의할 때 사용합니다. 요소 내의 콘텐츠는 페이지가 로드될 때 즉시 렌더링되지 않으며, 따라서 사용자에게는 보이지 않습니다. 하지만 나중에 자바스크립트를 사용하여, 해당 콘텐츠를 복제한 후 보이도록 렌더링할 수 있습니다. 요소는 특정 HTML 요소들을 원하지 않을 때까지 계속해서 다시 사용할 수 있게 해줍니다. 만약 요소를 사용하지 않고 이러한 작업을 수행하려면, 자바스크립트를 사용하여 브라우저가 해당 HTML 요소들을 렌더링하지 않도록 HTML 코드를 작성해야 합니다. 템플릿 엘리먼트는 자바스크립트 코드로 많은 양의 코드를 적지 않아도 되고, 조건에 따라 DOM의 변경도 가능합니다. 이러한 변경은 강력한 DOM API들을 그대로 사용할 수 있어 편리합.. CSS 선택자(Selector) CSS 선택자(Selector)란? 선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다. 선택자의 종류 디자인 요소를 의도에 알맞게 적용하기 위해서는 많은 종류의 선택자를 잘 혼합해서 사용하는 것이 중요합니다. 1. 전체 선택자(Universal Selector) * { } : HTML 페이지 내부의 모든 태그를 선택합니다. 전체 선택자는 HTML 페이지 내부의 모든 요소(태그)에 같은 CSS속성을 적용합니다. 그렇기 때문에 보통 margin이나 padding값을 초기화하는 등 기본값을 정해 둘 때 사용합니다. 하지만 이를 사용하면 문서안의 모든 요소를 읽어내려야 하기 때문에 페이지 로딩의 속도가 느려질 수 있습니다. 따라서 자주 사용하지 않는.. Relative length units 절대적인 유닛에는 px을 사용하고, 상대적인 유닛에는 %, v*, em, rem 등을 주로 사용합니다. Unit Relative to em Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width. rem Font size of the root element. vw 1% of the viewport's width. vh 1% of the viewport's height. % Relative to the parent element. em: relative to parent ele.. HTML 기본 구조와 문법 HTML은 tag들의 집합입니다. HTML Element의 Tag는 보통 opening tag와 closing tag로 구성되며, 두 태그 사이의 콘텐츠를 넣어서 구조를 표현합니다. HTML 속성(attribute)는 두 가지로 구성되는데, attribute name(속성의 이름)과 attribute value(속성의 값)으로 구성됩니다. Tag 부등호()로 묶인 HTML의 기본 구성 요소입니다. 태그로 시작해서 태그로 끝납니다. Tree Structure 트리 구조는 문서 시작을 선언하고 그 아래 HTML이라는 가장 상위의 태그가 있고, 그 자식으로 head, body가 있고 그들의 자식이 있는 이러한 자식노드와 부모노드가 있으며 그 안에 content가 담기는 구조 입니다. Self-closing t.. 웹 개발과 HTML & CSS & JavaScript HTML (HyperText Markup Language) 웹페이지의 구조(Structure)를 담당하는 마크업 언어 입니다. 글자 그대로, HTML은 프로그래밍 언어가 아닙니다. 그러나 HTML은 웹 페이지를 구성하는 틀, 뼈대가 되는 언어입니다. HTML의 구조를 잘 짜놓으면, 자바스크립트로 개발을 할 때 더욱 직관적인 코드를 작성할 수 있습니다. 의미있는(Semantic) 태그를 적절하게 사용한다면, 다른 사람이 HTML 문서를 접할 때 쉽게 이해하고 개발할 수 있습니다. CSS (Cascading Style Sheets) 디자인 요소를 시각화하는 스타일(Presentation) 시트 언어 입니다. HTML과 같은 마크업 언어가 표현되는 방법을 결정하며, 구조의 외부와 내부를 꾸미는 역할을 담당합니.. 이전 1 2 다음
