2. FrontEnd/CSS

[CSS] display 개념 및 속성

display display 속성은 요소의 표시 방법을 지정하여 웹 페이지의 레이아웃을 제어하는 데 중요한 역할을 합니다. 적절한 display 속성 값을 사용하여 요소를 올바르게 배치하고 웹 페이지의 디자인을 제어할 수 있습니다. display 속성의 개념 display 속성은 CSS에서 요소의 표시 방법을 지정하는 데 사용되는 속성입니다. display 속성은 요소를 블록(block), 인라인(inline), 인라인-블록(inline-block), 그리드(grid), 플렉스(flex)가 있다. display 속성의 속성값 block : 요소를 블록 수준 상자로 표시합니다. 요소는 새로운 줄에서 시작하며, 가능한 최대 가로 너비를 차지하고 수직으로 쌓입니다. 블록 요소는 width, height, ma..

2024. 3. 25. 15:50

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