Tumblr에서 "고정 요소"라는 용어는 브라우저 창을 기준으로 이동하지 않는 Tumblr 테마의 모든 개체를 의미합니다. 예를 들어 테마에 고정 된 사이드 바가있을 수 있습니다. 이 경우 페이지를 아래로 스크롤 할 때 사이드 바가 이동하지 않습니다. 항상 브라우저 창을 기준으로 같은 위치에 있습니다. 고정 요소는 테마의 Cascading Style Sheets 코드에 정의되어 있습니다.
HTML 및 CSS
모든 Tumblr 테마는 HTML과 CSS의 조합으로 정의됩니다. 일반적으로 HTML은 테마의 구조를 제어하고 CSS는 스타일을 지정합니다. 많은 웹 사이트에는 별도의 HTML 및 CSS 파일이 있습니다. 그러나 일반적인 Tumblr 테마의 HTML과 CSS는 하나의 통합 된 소스 코드에 함께 존재합니다.
테마 CSS 찾기
테마의 소스 코드를 찾으려면 Tumblr 계정에 로그인해야합니다. 대시 보드에서 톱니 바퀴 아이콘을 클릭하여 설정 메뉴에 액세스합니다. 설정 메뉴에서 보려는 블로그를 선택하십시오. 블로그 사용자 정의 메뉴의 테마 섹션에서 "사용자 정의"를 클릭하십시오. 테마 사용자 지정 페이지로 이동합니다. 테마 제목 아래에서 "HTML 편집"을 클릭하십시오. 테마의 HTML 및 CSS가 표시됩니다.
위치 : 고정 재산
테마 코드 내에서 "Ctrl-F"를 눌러 특정 항목을 검색 할 수 있습니다. 검색 필드에 "position : fixed"를 입력하면 테마에서 고정 요소의 여러 인스턴스를 순환 할 수 있습니다. 검색에서 결과가 없거나 예상보다 적은 경우 콜론 뒤에 공백없이 "position : fixed"를 검색해보십시오. 고정 된 요소는 "{"대괄호 앞에 이름이 지정됩니다. 예를 들어 #sidebar {position : fixed;}는 "sidebar"ID로 요소를 수정합니다.
요소 배치
요소의 위치 지정 방법이 지정되면 가로 또는 세로 축을 따라 특정 픽셀 수만큼 이동할 수 있습니다. 이렇게하려면 요소 컨테이너의 가장자리와 해당 가장자리에서 요소를 분리하려는 픽셀 수를 지정합니다. 예 : #sidebar {position : fixed; 상단 : 20px; right : 10px;}는 사이드 바를 브라우저 창 상단에서 20 픽셀, 오른쪽에서 10 픽셀 떨어진 위치에 배치합니다.
고정 요소 변경
고정 된 요소를 찾은 경우 해당 요소가 배치되는 방식을 변경할 수 있습니다. "position : static"속성은 HTML 코드 흐름에서 해당 위치를 기준으로 요소 위치를 수정합니다. 이 속성은 일반 정적 위치에서 특정 양만큼 요소를 오프셋하는 데 사용됩니다. 예 : #sidebar {position : relative; right : 20px;}는 #sidebar 요소를 정상적인 오른쪽 테두리에서 20 픽셀 오프셋합니다. 마지막으로 position : absolute 속성은 문서 흐름에서 요소를 제거하고 포함하는 요소를 기준으로 배치합니다. 예를 들어, 절대 위치 요소가 상대 위치 요소 내부에있는 경우 해당 위치에 대한 모든 변경은 상대 위치 요소를 기준으로 발생합니다. Tumblr 테마에서 수정되는 요소를 사용자 지정하기 위해 이러한 다양한 위치 유형을 실험 할 수 있습니다.
