Language/HTML&CSS (4) 썸네일형 리스트형 [CSS] 티스토리 Poster 스킨 메뉴바 고정하기 📝 Poster 스킨 수정사항 ✔︎ 메뉴 버튼을 고정한다. ✔︎ 메뉴바 자체를 고정한다. ✰ 메뉴 버튼 고정 스크롤을 내려 블로그의 하단으로 도달하면 메뉴 버튼이 사라져서 다시 맨 위로 올라가서 메뉴 버튼을 클릭해야 하는 불편함이 있다. 이를 해결하기 위해 메뉴 버튼을 고정해보자. CSS #header .mobile-menu 를 검색해서 찾고 position을 absolute → fixed 로 수정해준다. 수정전 수정후 ✰ 메뉴바 고정 메뉴바를 고정시키면 수시로 메뉴 버튼을 클릭하지 않아도 카테고리를 확인할 수 있는 편리함이 있다. 기존에 메뉴 버튼을 누르면 슬라이드로 보여지는 메뉴바를 고정시켜보자. ☝🏻 메뉴바 고정을 위해 코드를 추가해준다. /* 스킨 수정: 좌측 카테고리 고정 처리 */ @media.. [HTML] 자주 사용하는 태그 (div, p, span 차이) HTML에서 자주 사용하는 태그 참고 요소 내용 문서 제목 외부 리소스 연결 본문 외부 스크립트 포함할 때 사용하며 보통 JavaScript 코드와 함께 사용 제목 href 특성을 통해 다른 페이지를 url로 연결할 수 있는 하이퍼링크 (단독 사용x) 이미지 삽입 줄바꿈 block 요소｜문단 block 요소｜class나 id 속성으로 꾸밀 수 있는 컨테이너 inline 요소｜특별한 기능은 없으며 CSS 적용시 사용 버튼 삽입 표 정렬되지 않은 목록 숫자 목록 목록의 항목 데이터 입력 문장 입력 양식 그 중 헷갈리는 , , 는 하나의 문단을 나타냅니다. 순수 컨테이너입니다. 은 하나의 구문을 나타냅니다. 포함여부 div - p, span p - span span - x 참고 : https://develop.. [HTML] Semantic Web, Semantic Tag : 의미론적 웹과 의미론적 태그 Semantic Web은 기계가 웹페이지에 표현된 의미를 이해하고 해석 가능하게 하는 차세대 지능형 웹 기술이다. HTML에서 사용되는 나 태그는 비의미적은 요소이다. 컨텐츠의 의미를 강화하고 역할을 명확히 하여 태그에 의미를 부여한 것을 Semantic Tag라고 한다. 특별한 기능은 없으나 탐색에 용이하고 정보의 가치를 올려준다. Semantic Tag를 사용하는 이유는? 1️⃣ 접근성이 좋다. - 영역을 정의함으로써 시각적으로 즉시 눈에 들어온다. - HTML 태그를 읽고 이해하기 쉽다. 2️⃣ 태그 내 컨텐츠의 역할을 나타내기 때문에 SEO(검색 엔진 최적화)의 이점이 있다. 3️⃣ 구조가 명확하게 나누어져 있어 최적의 화면을 구현하기 쉽다. 4️⃣ 코드를 수정하는 등 유지보수가 편하다. 이미지를.. [CSS] Position relative와 absolute 활용 HTML가 순서대로 작성한 코드대로 화면에 보여졌다면, CSS의 Position 속성은 원하는 요소에 위치를 지정(속성:top, bottom, left, right)할 수 있다. Position의 사용값은 5가지이다. static : 기본값 relative : 기본 위치에서 상대적으로 배치 absolute : 가장 가까운 상위 요소 기준으로 배치 fixed : 지정된 위치에 고정 sticky : 스크롤시 상위 요소 기준으로 지정된 위치에 고정 아래 이미지를 구현 1. HTML 구조 [HTML] 태그로 검색어 입력창을, 태그로 돋보기 이미지를 추가한다. 두 개의 요소를 로 감싸준다. 2. 스타일링 [CSS] div { position: relative; → parents width: 300px; } inp.. 이전 1 다음
