728x90 300x250 SMALL Front-end313 비주얼 스튜디오 코드 라이브 서버 크롬 연결 1. File > Preferences 2. Settings 3. Extensions > Live Server config > Custom Browser > chrome로 변경 2024. 10. 11. 마진 병합 : 인접 요소 마진이 함께 적용되는 문제 해결 문제 시나리오 html css.parent { background-color: lightgrey; height: 150px;}.child { margin-top: 20px; background-color: lightblue; height: 100px; width: 100px;} 이 경우 .child 요소 상단에만 20px의 마진을 기대 했지만의도와 다르게 .parent 요소도 내려가게 된다. 이유.paert 요소 상단 마진과 병합이 된다. 마진 병합은 css 레이아웃 엔진이 블록 요소의 수직 간격을 보다 직관적으로 처리하기 위해 설계되었다.이 개념은 요소 간의 중복된 마진을 줄이고 더 깔끔한 레이아웃을 생성하는데 도움된다. 하지만 이것이 예상치 못한 문제를 야기함.. 2024. 7. 10. textarea placeholder 안나오는 이유 textarea placeholder 안나오는 이유는 textarea 사이에 공간이 들어가있기 때문이다. 아래예시를 확인해보면 textarea를 붙여서 써준 경우에는 placeholder가 잘 나오는걸 확인할 수 있다. 2024. 1. 20. @supports 최신 브라우저에만 스타일 적용하기 '@supports'는 css 조건부 규칙 중 하나로, 특정한 css속성이나 값이 브라우저에서 지원되는지 여부를 확인하는데 사용된다.이를 통해서 특정 스타일을 지원하는 최신 브라우저에만 스타일을 적용하거나, 그렇지 않은 경우에는 대체 스타일이나 처리를 정의할 수 있다. @supports (condition) { /* condition이 참일 때 적용되는 스타일 */ } 여기서 condition은 특정한 css 속성이나 값의 지원여부를 확인하는 조건을 나타낸다. 만약 조건이 참이면 괄호 안의 스타일이 적용되고, 그렇지 않으면 무시된다 예시 리스트 아이템 1 리스트 아이템 2 현재 브라우저가 (background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rg.. 2024. 1. 6. 이전 1 ··· 19 20 21 22 23 24 25 ··· 79 다음 728x90 반응형 LIST
