2. FrontEnd/CSS

[CSS] 반응형 중단점

반응형 레이아웃을 표시하기 위한 디바이스를 구분하는 여러가지 방법들이 사용되고 있습니다. 대표적으로 1. CSS 미디어쿼리를 사용하는 방법, 2. 자바스크립트를 사용 어떤 것을 사용하더라도 반응형 레이아웃을 디바이스에 따라 구분하는 기준은 가로 너비 가로 너비에 따라 디바이스를 인식하고, 레이아웃을 거기에 맞춰 변경하는 것이 CSS 반응형 레이아웃의 기본 개념이다. 가로 너비를 기준으로 하는 것은 반응형 레이아웃에서 공통이지만, 디바이스 종류별 너비 값 기준은 제각각입니다. 별도로 정해진 표준이라는 것이 없기 때문에 업계에서 많이 사용하는 값을 기준으로 하기도 하고, 레이아웃 특징에 맞춰 개별적인 값을 정하기도 합니다. 영어로는 나누는 기준 해상도 위치를 중단점(Break point) 이라고 합니다. 중..

2024. 3. 7. 17:14

2. FrontEnd/CSS

[CSS] 반응형 사이트 만들기

▶️ 시맨틱 태그 원래 시맨틱태그가 들어오기 전(=HTML5이전)에는 다음과 같이 class를 지정하여 CSS를 했다고 한다. 하지만, HTML5부터는 시맨틱태그가 나와서 아래와 같은 의미없는 div들을 의미를 가진 명시된 태그가 나왔다. (지금까지 느낀바로는 시멘틱태그 = div+class이름 같다.) header -> 미디어쿼리 @media only all and (조건문) {실행문} 1 2 3 4 5 1️⃣ 유형1 header nav aside section footer 👍🏻 강의 자료 https://www.inflearn.com/course/%EB%B0%98%EC%9D%91%ED%98%95-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%..

2022. 9. 26. 11:58