2025/02/28 2

[쉽게 배우는 H.C.J] Chapter 4 - Advanced CSS 추가 기능

1. Advanced CSS(CSS3)공식적으로 CSS3 모듈의 표준 규격이 존재하지 않아, 브라우저 벤더들이 독자적으로 자신들의 브라우저에 맞게 기능 구현 -> 벤더 프리픽스(vendor prefix)가 포함된 브라우저별 코드를 모두 나열해야 한다는 불편함 존재브라우저별 벤더 프리픽스를 알고 있어야 하고, 표준 규약은 브라우저별로 나열한 코드 마지막에 작성해 주어야 한다.모두 나열하기 힘들기 때문에 가장 많이 쓰는 브라우저 위주로 쓰도록 하자※ 대표적 벤더 프리픽스-ms-인터넷 익스플로러-o-오페라-moz-파이어폭스-webkit-크롬, 사파리 2. 테두리와 배경에는 border-radius, box-shadow, border-image, background-size 속성, 배경 이미지 중첩 기능 등이 ..

IT/Frontend 2025.02.28

[쉽게 배우는 H.C.J] Chapter 4 - 미디어 쿼리

1. 미디어 쿼리 : 미디어 및 화면의 크기에 따라 다른 스타일시트가 적용되도록 지원화면의 크기가 다르면 보이는 내용도 화면 크기에 맞게 보여야 함웹 사이트를 1개만 만들고 화면 크기에 따라 알맞게 자동으로 배치되거나 글자크기나 콘텐츠 크기 등을 자동으로 변환시킬 수 있도록 함 ==> "N스크린 대응"※ 반응형 웹 사이트 : 미디어 쿼리를 이용해 유동형 레이아웃을 구현한 것 사이트.2. 미디어 쿼리 사용법미디어 쿼리는 CSS로 구현된다.작성 순서는 태그에 공통적으로 적용할 내용, 특정 태그에만 적용할 내용, 그리고 마지막으로 미디어 쿼리를 기술함1) 작성 위치 : HTML 파일 속에 태그로 기술하거나, CSS 파일에 추가한다. 외부/내부 모두 여러 화면 크기에 대응해서 여러 개의 미디어 쿼리를 설정해준..

IT/Frontend 2025.02.28