728x90 HTML24 [HTML/SCSS] Swiper로 만드는 자연스러운 슬라이드 이동 효과 Swiper 슬라이더를 활용한 부드러운 애니메이션 Swiper 슬라이더에서 현재 슬라이드에는 'swiper-slide-active' 클래스가 추가됩니다. 참고: https://swiperjs.com/swiper-api#parameters 이 swiper-slide-active 클래스에 스타일을 주면 현재 액티브된 슬라이드에만 스타일을 적용할 수 있습니다. 각 슬라이드의 item div에 padding-top을 주고 흑백 필터(grayscale)를 적용했습니다. .item { width: 100%; height: 100%; padding-top: 2.5rem; filter: grayscale(0.8); } position: absolute;로 자식 요소들을 원하는 레이아웃대로 꾸며 위와 같이 만들었습니다... 2024. 1. 29. [HTML] HTML Entity 코드로 특수문자 입력하기 📍HTML Entity 코드란? HTML 문서에서 특정 문자는 특별한 의미를 가지거나 렌더링 되지 않을 수 있습니다. 이런 경우에 HTML 엔터티를 사용하여 해당 문자를 나타냅니다. 예를 들어, ''와 같은 기호는 HTML에서 태그를 나타내는 데 사용되므로 이러한 문자를 일반 텍스트로 표현하려면 HTML 엔터티를 사용해야 합니다. -챗GPT- 즉, entity 코드는 일부 특수문자가 HTML에서 오류를 일으키거나 렌더링이 안될 때 사용하는 코드입니다. 대표적으로 공백 코드인 가 있습니다. 📍HTML코드와 HTML Entity 코드의 차이 HTML코드는 마크업 언어입니다. 일반적으로는 HTML코드에 특수문자를 직접 넣으면 되지만, 기능을 갖는 일부 특수문자는 Entity 코드를 사용하여 나타냅니다. 이렇듯.. 2023. 12. 7. [CSS] Hover 하면 현재 배경 색상에서 어두워지게/밝아지게 하는 CSS Trick 버튼에 각각 오버할 때 현재 색상에서 어두워지게 하고 싶은 경우, 아래 코드처럼 따로 색상 hover를 주고 계신가요? /* 예시 */ .btn--red {background-color: brown;} .btn--red:hover {background-color: #62191b;} .btn--green {background-color: green;} .btn--green:hover {background-color: #074d09;} background-image 속성을 이용하면 한번에 현재 색상에서 어두워지게 할 수 있습니다. background-image: rgba(0,0,0,.4); 검은 색상(0,0,0)에 40%의 투명도를 준 값이죠. hover에 위와 같이 값을 주면 각각 현재 색상에서 40%만큼.. 2023. 10. 25. [HTML/javascript] 옵션 선택에 따라 달라지는 셀렉트 박스 Cascading dropdown 상위 셀렉트박스에서 어떤 옵션을 선택하는지에 따라 다음 셀렉트박스의 옵션 내용이 바뀐다. 자바스크립트가 필요하다. https://www.w3schools.com/howto/howto_js_cascading_dropdown.asp How To Create a Cascading DropdownW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com 위의.. 2023. 6. 24. [CSS/javascript] 스크롤 하면 줄어드는 헤더 (How To Shrink Navbar on Scroll) 스크롤 높이가 100이 넘어가면 gnb에 변경 후 스타일이 적용된 fixed 클래스를 추가하여 헤더 크기를 줄이는 코드이다. &.fixed { padding: 1rem 0; background-color: #fff; .gnb-wrap { .gnb-logo {max-width: 14rem;} .gnb-list {font-size: 1.8rem;} } } See the Pen Untitled by sel (@wimmwell) on CodePen. 2023. 6. 22. [HTML/CSS] DIV 안에 이미지 가득 차게 중앙 정렬하기 같은 비율의 이미지만 사용한다면 수직, 수평 중앙정렬이 어렵지않겠지만 클라이언트들은 보통 제각각의 이미지를 사용하잖아요?그래서 이미지 박스를 작업할 때는 어느 비율의 이미지든 박스에 풀로 채워지며 센터 정렬이 되게 해야한다. 이런 세로 이미지를 박스에 풀로 채운다고 치자이미지 중앙 정렬은 크게 두가지의 CSS로 맞추는데 display: flex,나 position: relative;가 있다.왼쪽(1번)은 flex로 센터 정렬 (object-fit: cover;를 안넣으면 이미지 원본 비율이 깨진다.),.box1 { display: flex; align-items: center; justify-content: center; img { width: 100%; height: 100%; .. 2023. 5. 23. [HTML/CSS] ul li에 이미지 사용할 경우 list-style 들여쓰기 맞추기 ul li 구조로 마크업을 하면 li의 텍스트가 여러줄이 되도 들여쓰기가 (지금 이 문단처럼) 자동으로 들어간다. list-item의 마커 타입이 disc,square 등 꽤나 다양하다고 해도 한계가 있기 때문에 보통은 ul {list-style: none;}으로 초기화 시키고 커스텀 이미지를 li 태그 안에 사용할 때가 많다. 이 경우 아래 이미지의 파란선처럼 텍스트 들여쓰기가 맞지않다. 한줄이면 상관없지만 여러줄이면 들여쓰기가 맞지않아 거슬린다. 특히 기관 홈페이지 작업하면 십중팔구는 들여쓰기 맞춰달라고 요청이 들어온다. ul의 list-style에 url을 이용하여 마커를 이미지로 변경할 수도 있지만 사이즈나 위치 등 자유로운 수정이 어렵다. 그래서 이렇게 li 태그 안에 img를 넣어 사용하게 된.. 2023. 4. 18. [HTML/CSS] CSS로 텍스트 여러줄에 여백 있는 밑줄을 만드는 여러가지 방법 (multi line underline) 글에 밑줄을 치는 방법은 기본적으로 text-decoration: underline;이 있다. 하지만 가끔 글씨랑 밑줄간격이 너무 가까워서 간격을 벌리고 싶을 때! 위의 기본 underline 속성에서는 쉽지 않음 아래에 나온 5,6번이 기본 underline속성에서 밑줄 포지션이랑 offset을 수정하여 결과를 만든 케이스인데, 호환성이 매우 떨어져서 사용하지 않는게 좋다. (최신 버전의 크롬 브라우저로만 사용하는 웹사이트가 아니라면..!) 아래 텍스트 중 글자와 밑줄 사이에 여백이 있는 게 몇 개인가요? 밑줄이 보이시나요? 밑줄이 보이시나요? 밑줄이 보이시나요? 이와 같이 3개라면 아래 속성들이 호환되는 브라우저를 사용하고 계십니다. 텍스트에 밑줄을 주는 방법과 여백을 주는 방법을 알아보자 *사용된 .. 2023. 3. 30. [HTML/SCSS/jQuery] 모바일 내비게이션 메뉴 만들기 with 애니메이션 메뉴(햄버거 버튼) 클릭시 내비게이션이 슬라이드 되는 모바일 GNB 코드이다. 닫기 버튼 애니메이션에 노력을 기울임ㅋㅋ 클래스를 통해 영역을 left -100%에서 0%로 주면 슬라이드 된다. 여기에 transiton을 적용해면 자연스럽다. 닫기 버튼은 span으로 만들고 transform을 주어 메뉴버튼에서 닫기버튼으로 전환되게 만들었다. 그나자나 SCSS를 사용하다보니 CSS로 스타일링을 하려면 너무 귀찮다. SCSS 왕편함! &.on { left:0%; .btn_gnb__inner { transform:rotate(180deg); -webkit-transform:rotate(180deg); span { &:nth-of-type(1) {transform:rotate(45deg) translate(4p.. 2023. 2. 16. 이전 1 2 3 다음 728x90
