이레

Swiper Slider 와 같이 자주 사용되는 Slick slider 사용법입니다. 반응형 웹을 지원하는 슬라이더 라이브러리 입니다 :) 제일 먼저 할 일은 슬릭 슬라이드 홈페이지에서 css, js 파일을 다운로드 하는것입니다. 1. 사이트 접속 후 필요한 파일 다운로드하기 http://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io 2. 코드 작업란에 ..

웹사이트의 레이아웃을 제작할 때 화면의 해상도를 고려해서 제작을 해야 합니다. 요즘은 스마트기기 사용이 많아져 해상도에 따라 배치를 변경하며 가독성을 높이게 됩니다. 이러한 작업을 반응형 작업이라고 합니다. 반응형 작업을 하기 전에 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.

종종 작업을 하다 보면 디자인에 맞춰 스크롤바를 커스텀해야 할 경우가 생깁니다. (티스토리도 적용가능) 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.

HTML 이란? 간단히 말하면 '문서의 뼈대'입니다. HyperText Markup Language의 약자로 웹페이지를 만들기 위한 언어입니다. ​ HTML의 기본적인 구조로는 ​ 이런 식으로 되어있습니다. html은 태그로 구성되어 있어요. 태그에는 여러 규칙이 있는데 그중 기본은 여는 태그와 닫는 태그가 있습니다. 태그에 대해서는 다른 글에서 다뤄볼게요! ​ 기본 구조를 자세히 봐볼까요? ​ [!DOCTYPE 선언 이유] ​ html은 버전별로 지원하는 태그가 다르기 때문에 버전 정보를 미리 선언해서 브라우저가 내용을 올바르게 표시할 수 있도록 해주는 것입니다. !DOCTYPE 은 html5 버전 선언입니다. ​ [meta charset="utf-8" 선언 이유] 웹브라우저나 컴퓨터는 html 파일을..