이레

scrollLeft를 이용해 특정 위치로 이동시키는 이벤트를 주는 경우가 있습니다. 그럴 때 간혹 딱딱 끊기는 느낌이 들 때가 있는데 그걸 방지하고 부드러운 이동 효과를 원한다면, scrollLeft를 사용하는 영역에 ( 임시로 scrollBox라고 정함) .scrollBox {scroll-behavior: smooth;} 해당 css를 추가해주세요.

웹사이트의 레이아웃을 제작할 때 화면의 해상도를 고려해서 제작을 해야 합니다. 요즘은 스마트기기 사용이 많아져 해상도에 따라 배치를 변경하며 가독성을 높이게 됩니다. 이러한 작업을 반응형 작업이라고 합니다. 반응형 작업을 하기 전에 head 태그 안에 meta 태그를 추가해줍니다. css에는 @media 쿼리를 이용합니다. ✨ 모바일 우선일 때 작은 폭을 먼저 작성합니다. @media ( min-width: 768px ) { 768 이상일때 스타일 } @media ( min-width: 1024px ) { 1024 이상일때 스타일 } ✨ 데스크톱 우선일 때 큰 폭부터 먼저 작성합니다. @media ( max-width: 1024px ) { 1024 이하일때 스타일 } @media ( max-width: ..

보통 img 태그를 쓸 때는 html 안에 아래와 같이 들어가게 됩니다. 해당 src를 바꾸고 싶거나, background-image를 사용하지 않을 때 css에서 아래와 같이 사용할 수 있습니다. img {content: url(../images/img2.png);} ⭐️ 2022.12.15 추가 비슷한 유형으로 span 의 내용을 바꿀때도 content 를 사용합니다. https://sevendays.tistory.com/67 [CSS]css를 사용해 텍스트 바꾸기 / span 내용 바꾸기 html 구조를 변경하지 않고 css를 통해 span 안의 텍스트를 변경하고 싶은 경우가 있습니다. 그럴 때 '가상 선택자'를 사용하여 변경해줍니다. 저는 클래스를 하나 더 추가해 사용했습니다. 변경하 sevend..

html 요소들은 각 요소에 따른 기본 표시값이 있습니다. 크게 block과 inline 요소가 있습니다. block 은 페이지에서 전체 너비를 차지하는 요소로 자동으로 줄 바꿈이 되는 태그입니다. 주로 레이아웃 영역을 만들 때 사용합니다. inline은 줄바꿈이 일어나지 않고 필요한 만큼만 너비를 차지하는 태그입니다. ✨ block tag 대표적인 태그로는 가 있습니다. 그 외 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ✨ inline tag 대표적인 태그로는 이 있습니다. 그 외 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ✨ 중첩 이러한 속성들은 중첩에 유의해야 합니다...

css에서 색상을 표현하는 방법은 3가지가 있습니다. 1, 색상 이름 사용 원하는 색상의 이름을 바로 입력하여 사용합니다. 140가지의 색상을 이름으로 지원하지만, 디자인에 맞는 색상을 사용하기엔 한계가 있습니다. https://www.w3schools.com/cssref/css_colors.asp CSS Colors W3Schools 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 위의 ..

화면에서 버튼을 만드는 방법은 여러 가지 있습니다. 저는 그중 a태그와 button태그를 사용하고 있습니다. a태그는 페이지의 이동, 페이지 내의 이동과같은 역할 (문서를 url로 연결) button 태그는 단순 클릭 이벤트의 역할(type="button" 으로 지정해야 함) ✨ a태그 (anchor) href 요소와 결합하여 하이퍼링크를 만듭니다. target 속성을 사용해 이동하는 방법을 지정합니다. 페이지간의 이동을 위해 링크를 생성할 때만 사용합니다. 페이지 내의 동적 UI 작성할 때에는 a태그 사용을 지양해야 합니다. ✨ button 태그 페이지 내의 단순 클릭이벤트를 주는 경우에는 button태그를 사용합니다. button에는 3가지 타입이 있습니다. button / submit / reset..

css로 말풍선 만들기입니다. 말풍선의 뾰족함의 정도는 after의 border-radius를 조절하면 됩니다. 크기도 마찬가지 *codepen 참고 See the Pen 말풍선만들기 by jh-baek-95 (@jh-baek-95) on CodePen.

웹 접근성이란? 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킵니다. 자세한 방법에 대해선 따로 정리하겠습니다. blind css 콘텐츠를 숨기고 싶지만, 스크린 리더기에는 읽혀야 하는 경우 사용합니다. 우선, 콘텐츠를 숨기는 방법 중 display:none과 visibility:hidden , font-size:0, line-height:0, width:0, height:0과 같이 화면에서 영역이 잡히지 않는 속성들이 있습니다. 이런 속성들은 스크린 리더로 읽히지 않기 때문에 웹 접근성에 좋지 않은 속성입니다. 스크린리더는 width, height가 0인 속성들은 읽을 수 없으므로, 사이즈는 최소 1px 이상으로 해야 합니다. 아래 css는 제가 사용하..

종종 작업을 하다 보면 디자인에 맞춰 스크롤바를 커스텀해야 할 경우가 생깁니다. (티스토리도 적용가능) See the Pen 스크롤바 커스텀 by jh-baek-95 (@jh-baek-95) on CodePen.

css로 text에 줄 효과주기 입니다. 앞으로도 추가할 예정 1, 형광펜 효과주기 기본 mark 태그 사용 mark 태그의 컬러변경 형광펜 그러데이션 효과주기 글씨의 반절, 형광펜으로 그은듯한 효과 See the Pen Untitled by jh-baek-95 (@jh-baek-95) on CodePen. 2, 기본 text-decoration See the Pen text-decoration by jh-baek-95 (@jh-baek-95) on CodePen.