'display' 태그의 글 목록

[HTML&CSS] Block , Inline , Margin, Border, Padding, Flex

2023.05.31

[HTML&CSS] Block , Inline , Margin, Border, Padding, Flex ( UPDATE 2023 - 05 - 25 ) 블록과 인라인 블록은 한 줄을 온전히 차지한다. (옆에 못옴) 인라인은 한 줄 안에 같이 있다. 블록에 display: inline 을 하면 박스 속성을 유지하면서 옆에 다른 블록이 올 수 있다. 인라인에 display: block을 하면 블록처럼 한 줄을 온전히 차지한다. 인라인은 높이(height)와 너비(width)가 없다. 브라우저는 요소들에게 자체적으로 style을 주기도한다. (예를 들면, 원치않는 공간=margin) 블록은 박스이다. margin , border , padding 박스는 세 가지 특징이 있다. : margin,border,pad..

🌱 코린이를 위한 GUIDE/🗂️ OpenSource

13 CSS의 미디어쿼리를 사용해서 반응형 웹 페이지 만들기 (화면 크기에 따라 글씨 내용과 색깔이 달라져요)

2023.05.31

CSS의 미디어쿼리를 사용해서 반응형 웹 페이지 만들기 (화면 크기에 따라 글씨 내용과 색깔이 달라져요) CSS의 미디어쿼리를 이용해서 해상도에 따른 색상과 멘트의 변경을 코딩했다. 결과적으론, 두 가지 방식으로 코딩을 했다. 처음엔 무작정 헤딩을 하며 코딩을 했는데.. 완성하고 보니, 아쉬운 마음이 들었다. 왠지 이 것보다는 더 나은 구조로도 만들 수 있을 것 같았다. 결국, 두 번째에는 여러 자료를 구글링 해서 코드 구조를 개선할 수 있었다. display: inherit; 역시 아는 것이 힘이다. *내 노트북 해상도를 기준으로 만들었다. 실제 해상도와는 차이가 있다.😓 처음 작성한 코드 여러 화면 크기로 살펴보세요! 일반 PC 저해상도 PC 일반 태블릿 저해상도 태블릿 body { backgroun..

📚 지식 채우기/웹 (프론트엔드, 백엔드)

[웹] HTML의 블록(block) 과 인라인(inline) 요소

2023.05.30

HTML의 블록(block) 과 인라인(inline) 📌 HTML 요소의 타입📌 HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다. 대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됩니다. 1. 블럭(block)요소 하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소 2. 인라인(inline) 요소 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우가 다른 태그가 나란히 위치할 수 있는 요소 = 텍스트레벨 요소, 행 안의 일부분 3. 특징 및 주의점 블럭요소는 내부에 블럭요소와 인라인요소를 포함할 수 있습니다. 인라인요소는 내부에 블럭요소를 포함할 수 없..

[HTML&CSS] Block , Inline , Margin, Border, Padding, Flex

13 CSS의 미디어쿼리를 사용해서 반응형 웹 페이지 만들기 (화면 크기에 따라 글씨 내용과 색깔이 달라져요)

[웹] HTML의 블록(block) 과 인라인(inline) 요소

티스토리툴바