본문 바로가기

분류 전체보기138

CSS 그리드 속성 리스트 chatGTP CSS 그리드 속성 리스트 CSS Grid는 다양한 속성을 제공하여 그리드 레이아웃을 세밀하게 제어할 수 있습니다. 아래는 CSS Grid의 주요 속성들을 분류하여 리스트업한 것입니다: 1. Grid Container 속성: - `display`: 그리드 컨테이너를 정의합니다. 값으로 `grid`를 사용합니다. - `grid-template-columns`: 열의 크기를 정의합니다. - `grid-template-rows`: 행의 크기를 정의합니다. - `grid-template-areas`: 그리드 템플릿 영역을 지정하여 그리드 아이템을 배치합니다. - `grid-template`: `grid-template-columns`, `grid-template-rows`, `grid-templa.. 2023. 7. 26.
드림코딩 CSS Grid 정리 영상 보며 필기하기 https://youtu.be/nxi1EXmPHRs `display: grid;`: 요소를 그리드 컨테이너로 설정합니다. 원하는 컨테이너에 "너 이제 그리드야"라고 지정해준다. (flexbox와 마찬가지로.) 부모 컨테이너 안에 있는 각각의 자식 요소들은 다 grid cell로 변환된다. 그래서 개발자는 grid 따로, grid cell 따로 속성을 지정해줄 수 있다. `grid-template-columns`: 가로로 몇 개를 넣을지, 사이즈는 얼마나 할 건지 지정 `grid-template-rows`: 세로로 몇 개를 넣을지, 사이즈는 얼마나 할 건지 지정 grid-template-columns: 100px 100px 100px; 가로로, 100px 만큼, 3개 나열 grid-template-rows.. 2023. 7. 26.
가장 큰 박스 위처럼 기본 문법만 작성해도 빈 페이지가 생성되는데, 이를 최-외곽 박스 1개가 생성되었다고 말할 수 있나? Bard 네, 맞습니다. HTML 문서에는 최외곽 박스(outermost box)가 하나 있습니다. 최외곽 박스는 HTML 문서의 전체 영역을 나타냅니다. 최외곽 박스의 너비와 높이는 HTML 문서에 포함된 콘텐츠의 크기에 따라 결정됩니다. chatGTP 맞습니다. 최외곽 박스는 태그에 의해 생성됩니다. 은 문서가 HTML5로 작성되었음을 선언하는 문서 유형 선언(Doctype)이지만, 최외곽 박스를 생성하지는 않습니다. 최외곽 박스는 에 의해 생긴 거라고 할 수 있나? 아니면 등으로 이뤄진 기본 문법에 의해 생긴 거라고 할 수 있나? chatGTP 최외곽 박스는 에 의해 생긴 거라고 할 수 있나.. 2023. 7. 26.
[필기] CSS 기초 (10) - CSS의 꽃 flexbox 정복하기 (드림코딩) Flexbox의 주요 속성 chatGTP Flexbox는 CSS의 레이아웃 모델 중 하나로, 요소들을 유연하게 정렬하고 배치하는 데 사용되는 기술입니다. 아래는 Flexbox의 주요 속성들에 대한 간단한 설명입니다: 1. `display: flex;`: Flexbox를 활성화하기 위해 부모 요소에 이 속성을 적용합니다. 이렇게 설정된 부모 요소는 Flex 컨테이너가 됩니다. 2. `flex-direction`: Flex 컨테이너 안의 아이템들의 배치 방향을 지정합니다. 값으로는 `row`, `row-reverse`, `column`, `column-reverse` 등이 있습니다. 3. `flex-wrap`: Flex 아이템들이 컨테이너 크기를 초과할 때, 줄 바꿈을 어떻게 할지를 결정합니다. `nowra.. 2023. 7. 26.
[필기] CSS 기초 (9) - 반응웹을 위한 미디어쿼리 미디어 쿼리(Media Query) chatGTP 미디어 쿼리(Media Query)는 CSS에서 사용되는 조건부 스타일링을 위한 기능으로, 뷰포트의 특정 속성에 따라 다른 스타일을 적용하는데 사용됩니다. 이를 통해 다양한 기기와 화면 크기에 대응하여 반응형 웹 디자인을 구현할 수 있습니다. 미디어 쿼리는 주로 CSS의 `@media` 규칙을 사용하여 정의하며, 아래에 주요한 미디어 쿼리 속성들을 정리해드리겠습니다: 1. `max-width`: - `max-width` 미디어 쿼리는 뷰포트의 최대 너비를 기준으로 스타일을 적용합니다. - 예를 들어, `@media (max-width: 768px) { ... }`는 뷰포트 너비가 768px 이하일 때에 스타일을 적용합니다. 2. `min-width`: -.. 2023. 7. 26.
[필기] CSS 기초 (8) - 반응웹을 위한 뷰포트 관련 속성 (크로스플랫폼) 뷰포트 관련 속성 chatGTP 뷰포트(Viewport) 관련 속성은 CSS를 사용하여 웹 페이지가 다양한 기기와 화면 크기에서 일관되게 보이도록 조정하는데 사용됩니다. 크로스플랫폼에서 웹 페이지를 일관되게 표시하기 위해 주로 다음과 같은 뷰포트 관련 속성들이 사용됩니다: 1. `width=device-width`: - `width=device-width`는 뷰포트의 너비를 기기의 화면 너비와 동일하게 설정합니다. - 이를 통해 모바일 기기에서도 뷰포트가 화면 너비에 맞추어지므로 모바일 디바이스에서의 레이아웃이 적절하게 표시됩니다. 2. `initial-scale`: - `initial-scale`은 페이지가 처음 로드될 때 초기 뷰포트의 배율을 지정합니다. - 일반적으로 `1.0`을 사용하여 기본 배율.. 2023. 7. 26.
[필기] CSS 기초 (7) - 반응웹을 위한 Animation `animation` 속성 실습 chatGTP `animation` 속성은 CSS에서 요소에 애니메이션 효과를 적용하는 데 사용되는 속성입니다. 애니메이션은 요소의 스타일을 시간에 따라 부드럽게 변화시켜 동적인 효과를 만들어줍니다. 주요한 속성들을 아래에 정리해드리겠습니다: 1. `animation-name`: - `animation-name` 속성은 적용할 애니메이션의 이름을 지정합니다. - `@keyframes` 규칙으로 정의한 애니메이션 이름을 사용합니다. - 예를 들어, `animation-name: slide-in;`는 `@keyframes slide-in { ... }`에서 정의한 애니메이션을 적용합니다. 2. `animation-duration`: - `animation-duration` 속.. 2023. 7. 26.
[필기] CSS 기초 (6) - 반응웹을 위한 Transform & Transition transform 속성 chatGTP `transform` 속성은 CSS에서 요소의 변형(이동, 회전, 크기 조절 등)을 적용하는 데 사용되는 속성입니다. `transform` 속성을 사용하면 요소를 다양한 방법으로 변형하여 웹 페이지의 다양한 효과를 구현할 수 있습니다. 주요한 변형 함수들을 아래에 정리해드리겠습니다: 1. `translate()`: - `translate()` 함수는 요소를 주어진 값만큼 이동시킵니다. - `translateX()`는 가로 방향으로 이동하고, `translateY()`는 세로 방향으로 이동합니다. - 예를 들어, `transform: translate(50px, 20px);`는 요소를 오른쪽으로 50px, 아래로 20px 이동시킵니다. 2. `rotate()`: - `.. 2023. 7. 26.
[필기] CSS 기초 (5) - 반응웹을 위한 가상 클래스 & 가상 요소 가상 클래스 짐코딩 강의 클릭 chatGTP 가상 클래스는 CSS에서 요소의 특정 상태나 위치에 스타일을 적용하는 데 사용되는 클래스입니다. 요소의 상태에 따라 스타일을 다르게 적용할 수 있으므로 다양한 시각적 효과를 만드는 데에 유용합니다. 대표적인 가상 클래스들을 아래에 정리해드리겠습니다: 1. `:hover`: - 요소가 마우스 포인터 위에 올라갈 때의 상태를 나타냅니다. - 주로 링크나 버튼에 사용하여 마우스를 올렸을 때 스타일을 변경하는 데에 사용됩니다. 2. `:active`: - 요소가 마우스로 클릭되었을 때의 상태를 나타냅니다. - 주로 버튼이나 클릭 가능한 요소에 사용하여 클릭될 때의 시각적 효과를 적용하는 데에 사용됩니다. 3. `:focus`: - 요소가 포커스되었을 때의 상태를 나타.. 2023. 7. 26.
[필기] CSS 기초 (4) `background` 서브속성 링크 chatGTP `background` 속성은 CSS에서 요소의 배경을 설정하는 데 사용되는 속성으로, 요소의 배경 색상, 이미지, 반복 등을 지정할 수 있습니다. `background` 속성에는 다양한 서브 속성들이 포함되어 있습니다. 주요한 서브 속성들을 아래에 정리해드리겠습니다: 1. `background-color`: - 요소의 배경 색상을 지정합니다. - 예를 들어, `background-color: #f0f0f0;`은 요소의 배경 색상을 연한 회색으로 설정합니다. 2. `background-image`: - 요소의 배경으로 사용할 이미지의 경로를 지정합니다. - 이미지 파일의 URL을 사용하여 배경으로 사용할 수 있습니다. - 예를 들어, `backgroun.. 2023. 7. 26.
[필기] CSS 기초 (3) - box-sizing : content-box와 border-box box-sizing 속성이 생긴 연유 생활코딩 강의 링크 박스 모델 기본 속성 chatGTP 박스 모델은 웹 페이지에서 요소(element)들이 차지하는 공간을 정의하는 CSS의 개념입니다. 간단히 말하면, 각 요소는 박스로 취급되며, 이 박스는 여백(margin), 테두리(border), 내용(content), 안쪽 여백(padding)으로 구성됩니다. 1. Content (내용): - 요소의 실제 내용이 들어가는 영역입니다. - 텍스트, 이미지, 비디오 등이 표시되는 부분입니다. 2. Padding (안쪽 여백): - 내용과 테두리(border) 사이의 여백 영역입니다. - 내용과 테두리 사이에 공간을 만들어 요소를 더 보기 좋게 만들거나, 요소 내부의 내용을 더욱 간격을 주어 표시할 때 사용합니다... 2023. 7. 26.
[필기] CSS 기초 (2) 구글 폰트 적용 방법 CSS에서 글꼴 속성 지정 font-family: 글꼴의 이름을 지정합니다. font-size: 글꼴의 크기를 지정합니다. font-weight: 글꼴의 굵기를 지정합니다. font-style: 글꼴의 스타일을 지정합니다. font-variant: 글꼴의 변형을 지정합니다. font-stretch: 글꼴의 스트레치를 지정합니다. line-height: 줄 간격을 지정합니다. letter-spacing: 글자 간격을 지정합니다. word-spacing: 단어 간격을 지정합니다. text-align: 텍스트의 정렬을 지정합니다. text-indent: 텍스트의 들여쓰기를 지정합니다. text-transform: 텍스트의 변환을 지정합니다. text-decoration: 텍스트의 장식을 .. 2023. 7. 26.
[필기] CSS 기초 (1) CSS 문법 구조 ~의 ~을 ~어떻게 바꾸겠다. .. 이런 구조임. CSS 적용 순서 CSS 출처에 따라 적용에 우선 순위가 있다! 사용자 !important > 제작자 !important > 제작자 > 사용자 > 브라우저 순서가 바로 그것. 다만 !imortant 적용은 '폭포'의 흐름을 깰 수 있으니, 주의해서 사용해야 함. 선택하는 방식에는 이런 게 있다. (링크) 기본 (전체(*) / 타입 / 클래스 / ID / 속성) 그룹을 선택 결합해서 선택 (자손 / 자식 / 일반형제 / 인접형제) 몇 개 메모 전체 선택(*)는 초기화에 활용된다. id를 선택할 때는 앞에 #을 붙인다. 속성 선택자 : 태그의 구성 특징을 기술해서 선택하는(?) 방식 (짐코딩 설명 링크) [attribute]는 속성 이름이 .. 2023. 7. 25.
[필기] HTML 기초 (3) 코딩을 위한 필수 사이트들 깃허브 MDN Semantics pixabay : 이미지 사이트 videvo : 소리 파일 사이트 flexbox froggy : 플렉스박스 연습하기 에 파비콘 넣는 방법 클릭 태그를 사용하는 방법 (중요) 클릭 더보기 base 태그를 사용하는 이유 chatGTP 물건을 사러 쇼핑 센터에 간다고 상상해봅시다. 그리고 그 쇼핑 센터에는 다양한 상점들이 있습니다. 여러분은 이 쇼핑 센터의 출구 주변에 있고, 어떤 상점에 들어가기 위해서는 어떤 출구로 나가야 할지를 결정해야 합니다. 이때, `` 태그는 마치 여러분이 있는 위치를 지정하는 표지판이라고 생각해볼 수 있습니다. 이 표지판을 보고 상점으로 가기 위해 어떤 출구를 선택해야 하는지 알 수 있게 됩니다. 여기서 쇼핑 센터는 웹 사.. 2023. 7. 25.
[필기] HTML 기초 (2) 코딩을 위한 필수 사이트들 깃허브 MDN Semantics pixabay : 이미지 사이트 videvo : 소리 파일 사이트 flexbox froggy : 플렉스박스 연습하기 input 태그 문법 : 타입에는 email, tel, address 등이 있는데 일종의 데이터 유효성 검사를 통해 특정 양식만 입력할 수 있게 되어 있음. 더 많은 type은 MDN 사이트에서 확인 가능 id는 필수는 아니지만 "id 값을 입력하는 것은 웹 개발에서 요소를 식별하고 조작하는 용이성과 웹 접근성 향상, CSS 스타일링 등 다양한 장점을 가져다줍니다. 따라서 가능하다면, 고유하고 의미 있는 id 값을 인풋 태그와 다른 요소에 할당하는 것이 좋"다고 한다. (출처: chatGPT) label 태그 input 태그, se.. 2023. 7. 25.
[필기] HTML 기초 (1) 코딩을 위한 필수 사이트들 깃허브 MDN Semantics pixabay : 이미지 사이트 videvo : 소리 파일 사이트 flexbox froggy : 플렉스박스 연습하기 환경설정 -비주얼스튜디오코드 설치 + 필요한 확장 프로그램 설치하기 링크 Emmet은 자주 쓰다 보면 익숙해질 것임 (외울 필요는 없음) 자주 쓰는 Emmet 몇 개 태그명을 치고 탭 또는 드롭다운 선택 : 해당 태그 생성 . (쩜)만 찍고 탭 : 자주 쓰는 div 태그 자동 생성 . (쩜)찍고 영숫자를 치면 : 영숫자 클래스명을 가진 가장 빈번하게 사용되는 div 태그가 생성 > 에 탭 (여러 번 가능) : 자식 노드 생성 (예) ol>ul>ol + 에 탭 : : 형제 노드 생성 * (별표) 숫자 엔터 : 같은 태그줄이 반복 생성.. 2023. 7. 25.
[강의정보] HTML/CSS 기초 - 짐코딩 https://youtu.be/S_tOP4W0u1Q?list=PLlaP-jSd-nK-ponbKDjrSn3BQG9MgHSKv 2023. 7. 25.
[강의정보] CSS 기초 -드림코딩, CSS 레이아웃 - 유노코딩 https://youtu.be/gGebK7lWnCk https://www.youtube.com/watch?v=DxwBN7vdr-A&list=PLFeNz2ojQZjso4ZJVeeMWR72l8s9V8Ym9 2023. 7. 25.
flexbox wrap & grow (feat. shrink) 먼저 알아두기 [css] flexbox 속성 중 wrap 기능에 대해 알려 줘. bard flexbox 속성 중 wrap 기능은 flex 컨테이너의 내부 요소가 한 줄에 모두 배치되지 않고, 너비가 모자라면 다음 줄로 넘어가서 배치되도록 하는 기능입니다. wrap 기능을 사용하지 않으면 flex 컨테이너의 내부 요소는 한 줄에 모두 배치됩니다. 이때 내부 요소의 너비가 flex 컨테이너의 너비보다 크면 overflow가 발생합니다. wrap 기능을 사용하면 flex 컨테이너의 내부 요소는 너비가 모자라면 다음 줄로 넘어가서 배치됩니다. 이때 overflow가 발생하지 않습니다. wrap 기능을 사용하려면 flex 컨테이너의 flex-wrap 속성에 wrap 속성을 지정합니다. 예를 들어 다음 CSS 코드.. 2023. 7. 25.
벡터와 래스터 그리고 직선과 점(픽셀) 벡터 방식과 레스터 방식을 초등학생한테 설명하듯 쉽게 설명해 줘. Bard 벡터 방식과 레스터 방식은 이미지를 표현하는 방식의 차이입니다. 벡터 방식은 점과 선으로 이미지를 표현하는 방식이고, 레스터 방식은 픽셀로 이미지를 표현하는 방식입니다. 벡터 방식은 이미지의 크기를 조정해도 선명도가 유지되는 장점이 있습니다. 예를 들어, 벡터 방식으로 그린 원형을 확대해도 원형의 모양이 유지됩니다. 하지만 벡터 방식은 이미지의 크기가 커지면 파일 크기가 커지는 단점이 있습니다. 레스터 방식은 이미지의 크기를 조정해도 선명도가 유지되지 않는 단점이 있습니다. 예를 들어, 레스터 방식으로 그린 원형을 확대하면 원형의 모양이 깨지거나 픽셀이 보일 수 있습니다. 하지만 레스터 방식은 이미지의 크기가 작으면 파일 크기가 .. 2023. 7. 25.
figma figma라는 사이트는 어떤 프로그래밍 언어로 구축된 거지? 웹 어셈블리도 활용되었더던데? 피그마 사이트의 프로그래밍 테크트리는 어떤 거야? chatGTP Figma는 React, TypeScript, Go로 구현되었으며, WebAssembly를 사용하여 성능을 향상시켰습니다. Figma는 웹 기반의 UI 디자인 도구로, 디자이너와 개발자가 협력하여 웹사이트, 모바일 앱, 데스크톱 앱의 UI를 디자인할 수 있습니다. Figma는 다양한 기능을 제공하며, 사용자의 필요에 따라 자유롭게 사용할 수 있습니다. Figma는 React, TypeScript, Go로 구현되었습니다. React는 웹 애플리케이션 개발에 사용되는 인기 있는 프레임워크이며, TypeScript는 JavaScript의 타입스크립트로, 코.. 2023. 7. 25.
이미지 편집기, Pure JavaSript, Febric.js, CSS Grid [웹 개발, JavaScript] 바닐라 JS로도 웹에서 작동하는 고성능의 이미지 편집기를 구축할 수 있나? 네, 바닐라 JavaScript(순수 JavaScript)를 사용하여 웹에서 작동하는 고성능의 이미지 편집기를 구축할 수 있습니다. JavaScript는 강력한 언어이며, 웹 브라우저에서 이미지 편집과 관련된 다양한 작업을 수행하는 데 사용할 수 있는 다양한 기능과 API를 제공합니다. 이미지 편집기를 구축하는 데에는 HTML5의 Canvas 요소와 JavaScript의 Canvas API를 활용하는 것이 일반적입니다. Canvas를 사용하면 이미지를 그리고, 조작하고, 필터를 적용하는 등 다양한 작업을 수행할 수 있습니다. 고성능 이미지 편집기를 구축하기 위해서는 몇 가지 고려해야 할 사항이 있.. 2023. 7. 25.
이미지 편집기 구축, 저렴한 API ? [JavaScript/웹 개발] 이미지 편집기를 아주 빠르게 구축하기 위해서, 사용할 수 있는 공개 API 중 가장 저렴한 비용으로 사용할 수 있는 건 뭐야? chatGTP [JavaScript/웹 개발] 이미지 편집기를 빠르게 구축하고 가장 저렴한 비용으로 사용하려면 Cloudinary와 Imgix 같은 이미지 처리 서비스를 고려해볼 수 있어요. 1. Cloudinary: - Cloudinary는 이미지 및 비디오 관리, 최적화, 편집을 위한 클라우드 서비스이며, 이미지 처리를 위한 다양한 API를 제공합니다. - 무료 요금제도 있어서 간단한 사용에는 비용을 지불하지 않고 사용할 수 있습니다. 물론 기능이 제한될 수도 있으니 필요한 기능에 대해 확인해야 합니다. 2. Imgix: - Imgix는 이미지.. 2023. 7. 25.
한 부모 안에 있는 여러 아이템들의 공간 차지 비율을 조정 한 부모 안에 있는 여러 아이템들의 공간 차지 비율을 조정할 수 있는 flexbox의 대표적인 속성에 대해 설명해. Bard 한 부모 안에 있는 여러 아이템들의 공간 차지 비율을 조정할 수 있는 flexbox의 대표적인 속성은 `flex-grow`, `flex-shrink`, `flex-basis`입니다. * `flex-grow`는 아이템이 부모 요소의 공간을 얼마나 차지할지 지정하는 속성입니다. `flex-grow: 1`을 지정하면 아이템은 부모 요소의 공간을 균등하게 차지합니다. `flex-grow: 2`를 지정하면 아이템은 부모 요소의 공간을 두 배로 차지합니다. * `flex-shrink`는 아이템이 부모 요소의 공간이 줄어들 때 얼마나 줄어들지 지정하는 속성입니다. `flex-shrink: 1`.. 2023. 7. 25.
4-2. 견적 의뢰서 제작 갈무리 테이블,탁자 책상 책장,책꽂이 수납장,서랍장 의자,벤치 침대 캠핑용 기타 맞춤제작 견적의뢰서 Level 옵션 보통/DIY 고급/짜맞춤 조립/분해형 선택 안 함 Finish 옵션 수성 마감 오일 마감 페인팅 마감 안 함 원하는 금액대 20만원 이하 30만원 이하 40만원 이하 50만원 이하 70만원 이하 90만원 이하 120만원 이하 150만원 이하 180만원 이하 230만원 이하 280만원 이하 330만원 이하 400만원 이하 500만원 이하 600만원 이하 700만원 이하 900만원 이하 1000만원 이하 기타 금액 마감 날짜 선택: 디자인 설명 목록 바닥글 copywrite ad1 ad2 ad3 ad4 /* 모든 구역의 가로 사이즈를 뷰포트 대비 75%로 설정합니다. */ /* .header, mai.. 2023. 7. 25.
flexbox, flex-grow 부모 공간 플렉스박스가 선언된 다음 그 부모 하위의 아이템 각각에게 가로 비율을 각각 조정하려면? Flexbox를 사용하여 부모 요소에 선언된 `display: flex;`는 그 부모 요소를 Flex 컨테이너로 만들어 자식 요소들을 Flex 아이템으로 배치합니다. Flex 아이템들은 기본적으로 가로로 배치되며, 각 아이템은 Flex 컨테이너의 가로 공간을 동등하게 분할합니다. 만약 부모 하위의 각 아이템들에게 서로 다른 가로 비율을 적용하려면 `flex-grow`, `flex-shrink`, `flex-basis`와 같은 Flex 속성을 사용할 수 있습니다. 이를 사용하여 각 아이템의 크기를 유연하게 조정할 수 있습니다. 예를 들어, 아래의 HTML과 CSS 코드에서는 부모 요소 `.flex-contai.. 2023. 7. 25.
위>오>아>왼 : feat. 12시 기준으로 시계방향 margin: 10px 2px 5px; : 이건 뭔 의미야? `margin: 10px 2px 5px;`은 CSS의 `margin` 속성을 사용하여 요소의 여백을 설정하는데, 시계방향 순서로 각 방향의 여백을 설정하는 것을 의미합니다. 각 숫자는 순서대로 위쪽(`top`), 오른쪽(`right`), 아래쪽(`bottom`), 왼쪽(`left`) 방향의 여백 값을 나타냅니다. - 위쪽(`top`) 여백: 10px - 오른쪽(`right`) 여백: 2px - 아래쪽(`bottom`) 여백: 5px - 왼쪽(`left`) 여백: 2px 따라서 위의 설정은 해당 요소의 위쪽 여백을 10px, 오른쪽과 왼쪽 여백을 2px, 아래쪽 여백을 5px로 설정하는 것을 의미합니다. 이렇게 네 방향의 값을 설정함으로써 다양한.. 2023. 7. 25.
Flexbox : CSS Grid [웹 개발] 웹 개발자들은 요즘 html 문서의 구조를 빌드하는데, flexbox를 많이 쓰니 아니면 CSS Grid를 많이 쓰니? chatGTP 2021년 기준으로 보면, 웹 개발자들은 HTML 문서의 구조를 빌드하는데 Flexbox와 CSS Grid를 모두 많이 사용합니다. 그러나 두 기술은 서로 다른 목적과 사용 사례를 가지고 있기 때문에, 개발자들은 상황에 따라 적절한 기술을 선택하여 사용합니다. 1. Flexbox: Flexbox는 1차원 레이아웃(주로 행 또는 열)을 만들 때 사용됩니다. 주로 아이템 간 공간 배분, 정렬, 순서 변경 등을 통해 유연한 레이아웃을 만들 때 유용합니다. 특히, UI 컴포넌트의 일련의 요소를 정렬하는 데 많이 사용되며, 반응형 디자인에 적합합니다. 2. CSS Gr.. 2023. 7. 25.
padding과 margin의 차이 chatGTP 내부와 외부는 요소를 기준으로 하는 상대적인 개념입니다. 이해를 돕기 위해 좀 더 자세히 설명하겠습니다. 1. 내부 (Internal) - `padding`: - 요소의 내부란, 요소의 테두리(border)와 실제 콘텐츠(content) 사이의 공간을 의미합니다. - `padding` 속성을 사용하여 요소의 내부 여백을 조정할 수 있습니다. - 즉, 내부 여백은 요소의 콘텐츠가 테두리로부터 얼마나 떨어져 있는지를 결정합니다. - 예를 들어, `padding: 10px;`은 요소의 테두리와 콘텐츠 사이에 10픽셀의 여백을 만듭니다. 2. 외부 (External) - `margin`: - 요소의 외부란, 해당 요소와 주변 요소 사이의 공간을 의미합니다. - `margin` 속성을 사용하여 요소.. 2023. 7. 25.
사라지고 나타나고~ : 미디어쿼리 뷰포트가 800px 이하일 때, ad-area, header, main, footer가 다 사라지고 article만 남게 하려면? chatGTP 이렇게 작성하세요. /* 뷰포트의 가로 너비가 800픽셀 이상일 때 .ad-area 요소를 보이게 하고, 800픽셀 이하일 때 .header, main, footer를 숨깁니다. */ @media (max-width: 800px) { .ad-area { display: none; } .header, .main, .footer { display: none; } } 왜 이렇게 안 쓰지? @media (max-width: 800px) { .ad-area, .header, .main, .footer { display: none; } chatGTP 예, 그렇게 쓰면 됩니.. 2023. 7. 24.

티스토리툴바