이레

⭐️ flex 속성이란?flex는 Flexbox 레이아웃에서 요소가 부모 컨테이너 안에서 공간을 차지하는 방법을 지정하는 단축 속성입니다.flex는 다음 세 가지 속성을 조합한 것입니다:flex-grow: 요소가 남는 공간을 얼마나 많이 차지할지 결정flex-shrink: 컨테이너가 작아질 때 요소가 얼마나 줄어들지 결정flex-basis: 요소의 기본 크기를 설정flex: 로 구성되며, 값이 생략된 경우 기본값은 아래와 같습니다:flex: 0 1 auto; ⭐️ flex 속성의 구성 요소(1) flex-grow: 남는 공간 차지flex-grow는 컨테이너에 남는 공간이 있을 때, 요소가 그 공간을 얼마나 차지할지 결정합니다..container { display: flex; gap: 10px;}...

SCSS에서 mixin, include, 그리고 for문은 코드 재사용성과 유지 보수를 높이는 데 유용합니다. ⭐️ @mixin은 반복적으로 사용할 CSS 코드를 정의하는 데 사용됩니다.//구문@mixin 이름(매개변수들) { 스타일들;}//예시@mixin button-style($color, $size) { background-color: $color; font-size: $size; border: none; border-radius: 5px; padding: 10px 15px; cursor: pointer;} ⭐️ @include는 정의된 mixin을 실제로 적용할 때 사용합니다.//구문@include 이름(인수들);//예시.my-button { @include button-style(..

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