위 결과는 가로의 길이가 줄어들면 자동으로 아래로 내려 간다. 이거에 핵심 코드는 // 최대길이를 기준으로 하고 싶으면 max-width // 최소길이를 기준으로 하고 싶다면 min-width 으로 하면 된다. @media (max-width: 800px) { } 아래는 해당 결과값의 풀 코드이다. WEB HTML CSS JavaScript CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages a..

float float 속성은 요소의 위치를 잡을때, 아주 중요한 역할을 하는 스타일 속성이다. float속성을 사용 하지 않고 이미지와 텍스트를 단순히 배치 하게 되면 어떻게 표시 되는지 보자. 이미지는 인라인 요소이고, 단락은 블록 요소여서 아래와 같이 배치 된다. 그럼 이번에는, float: left 이용 하여 보자. 일반적으로는 어떤 요소든지 float 속성을 적용할 수 있다. float속성으로는 요소를 컨테이너의 왼쪽이나 오른쪽으로만 배치될 수 있다. 위쪽이나 아래쪽으로 float 할 수는 없다. z-index 이어 볼 내용은 z-index z-index속성은 요소의 스택 순서(즉, 요소가 다른 요소의 앞에 위치하느냐, 뒤에 위치하느냐)를 지정한다. 아래 코드와 함께 결과값을 보면 이해하기 쉬울거..

HTML으로 문서를 작성하고, 해당 문서의 위치 및 스타일은 CSS로 작성한다. 그렇다면, 요소의 크기는 무엇으로 결정하는가? width, height 속성으로 요소의 너비와 높이를 설정한다. 기준 위치는 무엇으로 결정하는가? 바로 position 속성으로 결정한다. CSS의 position 속성은 요소의 위치를 설정 방법을 나타낸다. 즉 '절대적인 위치' 설정이냐 아니면 '상대적인 위치' 설정이냐를 나타낸다. 즉, position속성을 설정하지 않으면, ( top, bottom, left, right) 속성을 아무리 설정해도 소용이 없다. CSS에는 기본적으로 4가지의 위치 설정 방법이 존재한다. 1️⃣ 정적 위치 설정(static positioning): 정상적인 흐름에 따른 배치 2️⃣. 상대 위치..

블록(block)요소: 화면의 한 줄을 전부 차지한다. 인라인(inline)요소: 한 줄에 차례대로 배치된다. 현재 줄에서 필요한 만큼의 너비만을 차지한다. ✅ 블록요소 블록요소는 브라우저의 한 줄을 모두 차지한다. 예를 들면, , , , , , , , , , 요소가 블록 요소이다. 즉 한 줄에 하나씩 배치된다. ✅ 인라인요소 인라인요소는 정상적으로는 한 줄 안에 차례대로 배치된다. 예를 들면, , , , , , , 요소가 인라인 요소이다.

태그는 "divide"의 약자로서, 논리적인 섹션으로 분리하는데 사용 되는 태그이다. 또한 는 블록 수준 요소이기 때문에 하나의 줄을 전부 차지한다. 요소는 인라인 요소로서 텍스트를 위한 컨테이너로 사용할 수 있다. 위 HTML를 실행하면 위와 같은 화면이 나온다. 정리하자면, 와 은 요소를 모아서 하나의 묶음으로 만든 후에 특정한 스타일이나 위치, 크기 등을 적용하는 경우에 많이 사용된다.

위 코드의 실행 결과값 .div_class:hover -> div 뒷 배경 설정을 해준다. .div_class에서 transition으로 배경의 색상이 천천히 바꿔주는 효과를 준다.