이레

safe-area란 화면 해상도가 다양해지면서 필수 콘텐츠의 노출을 보장할 수 있는 영역을 말합니다. 아이폰 x 이후의 기종들은 상단의 노치(notch) 영역과 하단의 라운드영역이 있어 콘텐츠가 안정적으로 보일 수 있는 safe-area를 가지고 있습니다. 앱 개발을 하다보면 이런 화면들에서 생기는 문제점이 있습니다. * 가로모드일때 좌우 영역이 노치에 의해 가려짐 * 하단의 홈 인디케이터 영역과 콘텐츠 영역의 겹침 이미지 출처 : https://wit.nts-corp.com/2019/10/24/5731 이런 문제점들을 해결하기 위한 대응 방법입니다. 1, html 메타 태그 추가하기 html 에 있는 meta 태그에 viewport-fit=cover를 추가해 줍니다. (기본값은 auto입니다) 2, c..

html 구조를 변경하지 않고 css를 통해 span 안의 텍스트를 변경하고 싶은 경우가 있습니다. 그럴 때 '가상 선택자'를 사용하여 변경해줍니다. 저는 클래스를 하나 더 추가해 사용했습니다. 변경하고 싶은 텍스트를 type 2의 가상 선택자의 css에 추가하고 기존 텍스트는 보이지 않게 해줘야 하기 때문에 .txt.type2 의 font-size를 0으로 설정해줍니다. See the Pen span txt by jh-baek-95 (@jh-baek-95) on CodePen. ⭐️ 비슷한 유형 img src를 css로 수정하기 https://sevendays.tistory.com/45 [CSS] img src를 css로 수정하기 보통 img 태그를 쓸 때는 html 안에 아래와 같이 들어가게 됩니다...

모바일에서 a태그 또는 input 터치 시 하이라이트 효과가 나오는 경우가 있습니다. 이를 제거 하기 위해서는 -webkit-tap-highlight-color 를 사용합니다. input { -webkit-tap-highlight-color:transparent; /*ios 대응*/} input { -webkit-tap-highlight-color:rgba(0, 0, 0, 0); outline:none; /*android 대응*/} 단, div에서는 지원이 안됩니다.

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 위의 ..

css 핵이란? 브라우저의 구현 차이나 버그를 이용해 특정 브라우저만을 대상으로 css를 적용하는 법 크로스 브라우징을 위한 꼼수라고 생각하면 됩니다. 1, 스타핵 (star hack) 셀렉트 앞에 *html을 붙이면 IE6에서만 적용됩니다. 2, 언더스코어 핵 (underscore hack) 속성 가장 앞에 언더스코어(_)를 붙이면 IE6에서만 적용됩니다. 3, 해시 핵 (hash hack) 속성 앞에 #를 붙이면 IE6이하 버전에서만 적용됩니다. 4, 닷 핵 (dot hack) 속성앞에 닷(.)을 붙이면 IE6,7에서만 적용됩니다. 5, 속성핵 속성 값 뒷부분에 \0/IE8 를 붙이면 IE8 에서 적용이 됩니다. 속성 값 뒷부분에 \0/IE9 를 붙이면 IE9에서 적용이 됩니다. 속성값 뒷부분에 \0..

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