'frontend/CSS' 카테고리의 글 목록

단, 내가 구축하고자 하는 그리드는 뷰포트의 크기에 따라 줄어들거나 새로 생성되도록 해야 해. 내가 자바스크립트로 I/O 페이지를 구축한다고 치자. 내가 구축하고자하는 I/O 페이지 안에는 기본적으로 각각의 개별 컨턴츠의 '위치'를 파악할 수 있도록 그 기준이 되는 그리드를 (바탕으로) 가지고 있다고 치자. 그런 그리드를 구축하기 위해 CSS를 이용하는 게 좋니? 아니면 별도의 함수(javascipt)로 그리드 생성 함수를 따로 만드는 게 좋니? (단, 내가 구축하고자 하는 그리드는 뷰포트의 크기에 따라 줄어들거나 새로 생성되도록 해야 해.) Bard 그리드를 구축하기 위해 CSS를 이용하는 것이 좋습니다. CSS는 HTML 요소의 스타일을 지정하는 데 사용되는 언어로, 그리드를 쉽게 구축할 수 있는 다양한 기능을 제공합니다. 예를 들어, `display: grid` 속성을 사용하여 요소를 그리드.. 2023. 8. 2.

모듈화된 상태에서의 CSS 선택자 방법 index.html이 따로 작성된 header.html과 style.css 파일을 호출하고 있어. 내 질문은 이런 거야. header에 flexbox가 선언되었는데, 내가 테스트 해 보니, header { display: flex; } 이렇게 쓰는 것과 #headerContainer { display: flex;} 의 결과가 동일한데, 어느 작성법이 더 나은 작성법이야? chatGTP3.5 두 가지 작성법인 `header { display: flex; }`와 `#headerContainer { display: flex; }`는 결과적으로 동일한 효과를 가집니다. 그러나 두 방법은 사용하는 컨텍스트에 따라 선호되는 방법이 다를 수 있습니다. 이에 대한 간단한 설명은 다음과 같습니다: 1. `header {.. 2023. 7. 29.

텍스트든 이미지는 해당 컨텐츠를 컨테이너 중앙에 배치하려면 일단 flexbox를 선언한 다음. align-itmes와 justify-content를 이용한다. 그럼 이렇게 텍스트나 이미지가 중앙에 배치된다. 2023. 7. 28.

컨테이너 또는 박스에 컨텐츠를 맞추려면? ★ 부모 컨테이너의 사이즈(높이)를 지정한 다음 그 자식 컨테이너를 100%로 한 다음, 해당 컨텐츠(이미지)까지 비율로 맞춰줘야 함. 이렇게 실제 컨텐츠(이미지)까지 조정해야, 내가 원하는대로 박스 안에 컨텐츠가 들어맞게 되는구나. 너 이것도 모르는 아이니? chatGTP 사과드립니다. 이전에 제공한 답변에서 실수를 하였습니다. 확인해보니 주어진 코드에는 이미 `height: 100%;`를 사용하여 `.header1`과 `.header1 img`를 높이를 부모 요소인 `header`에 맞게 설정하고 있었습니다. 따라서 코드 상에서 이미지가 부모인 `.header1`의 높이를 딱 맞추도록 설정되어 있으며, 부모 요소인 `header`의 높이가 `10vh`로 설정되어 있기 때문에 이미지도 높이 `10vh`에 .. 2023. 7. 28.

왜 body에는 display: flex; 선언이 먹히지 않지? flexbox와 css-grid를 섞어 쓸 수 있지? chatGTP 예, Flexbox와 CSS Grid는 둘 다 레이아웃을 구성하는 강력한 CSS 기술이며, 필요에 따라 함께 사용할 수 있습니다. 각각의 기술은 다른 목적과 사용 사례를 가지고 있으며, 조합하여 복잡한 레이아웃을 구현하는 데 효과적으로 사용될 수 있습니다. Flexbox는 주로 1차원 레이아웃을 다루는데 사용되며, 한 줄 또는 한 열에 있는 요소들을 배열하는 데 적합합니다. 이것은 주로 행 또는 열에 따라 아이템을 배치하는 데 유용합니다. CSS Grid는 2차원 레이아웃을 다루는데 사용되며, 행과 열 모두에 대한 강력한 레이아웃 시스템을 제공합니다. 그리드 레이아웃은 보다 복잡한 그리드 기반의 디자인을 구현하는 데 사용될 수 있습니다... 2023. 7. 28.

flexbox와 CSS grid -- 둘 중에 크로스플랫폼 차원에서 flexbox와 CSS grid -- 둘 중에 어느 게 더 적합한 레이아웃 빌딩 도구인가? Bard 크로스플랫폼 차원에서 flexbox와 CSS grid는 둘 다 레이아웃을 빌드하는 데 적합한 도구이지만, 각각의 장단점이 있습니다. flexbox는 1차원 레이아웃에 더 적합한 도구입니다. flexbox를 사용하면 요소를 수평 또는 수직으로 정렬하고, 요소의 크기를 조정할 수 있습니다. 또한, flexbox는 반응형 레이아웃을 생성하는 데 적합한 도구입니다. CSS grid는 2차원 레이아웃에 더 적합한 도구입니다. CSS grid를 사용하면 요소를 그리드에 배치하고, 요소의 크기를 조정할 수 있습니다. 또한, CSS grid는 복잡한 레이아웃을 생성하는 데 적합한 도구입니다. 크로스.. 2023. 7. 28.

[필기] CSS Grid │ 1분 코딩 (유튜브) https://youtu.be/eprXmC_j9A4?t=1177 px과 % 외에 쓸 수 있는 단위들 em (상위 요소의 폰트 크기) 부모 요소의 글꼴 크기가 16px이라면, 1em은 16px과 동일하며, 2em은 32px, 0.5em은 8px과 같이 계산됩니다. 중첩된 요소의 경우, 각 요소가 상위 요소의 글꼴 크기를 상속받아 크기가 계산됩니다. rem (루트 요소의 폰트 크기) 최상위 요소인 html 요소의 글꼴 크기에 따라 크기가 결정됩니다. 즉, rem은 루트 요소의 글꼴 크기를 기준으로 합니다. 예를 들어, 최상위 html 요소의 글꼴 크기가 16px이라면, 1rem은 16px과 동일하며, 2rem은 32px, 0.5rem은 8px과 같이 계산됩니다. rem은 중첩된 요소에 대해 상위 요소의 글꼴.. 2023. 7. 28.

[필기] CSS Flexbox │1분 코딩 (유튜브) 아래 글은 유튜브 의 강의와 chatGTP와의 문답을 기초로 작성된 것임. 1분 코딩 님의 CSS Flexbox와 CSS Grid, 한번에 정리! 가 보기 flexbox flexbox는 컨테이너(부모)한테 적용을 하면, 그 안의 자식 아이템들을 쉽게(=flexbox 규칙에 따라) 정리할 수 있다는 개념임. ('flex'의 사전적 의미는 "신축성 있는") display: flex; Flexbox에서는 부모 컨테이너를 "flex container"라고 하고, 이 안에 있는 자식 요소들을 "flex items"이라고 합니다. display: flex;를 부모 컨테이너에 선언하면 해당 컨테이너가 Flexbox 레이아웃 모드로 전환됩니다. Flexbox는 요소들을 수평 또는 수직 방향으로 유연하게 배치하기 위해 .. 2023. 7. 28.

[필기] 포지션 position │생활코딩 [css] position 속성에 대해 정리해 줘. chatGTP CSS의 기본 디폴트(position의 초기값)는 static입니다. 따라서 HTML 문서에서 position 속성을 별도로 지정하지 않으면 요소는 static 포지션으로 배치됩니다. `position`은 CSS의 속성 중 하나로, 요소를 배치하는 방법을 지정하는 데 사용됩니다. HTML 요소들은 문서 상에서 일반적인 흐름(normal flow: 좌 → 우, 상 →하)에 따라 배치되지만, `position` 속성을 사용하면 요소를 다른 위치로 이동시키거나 겹치게 배치할 수 있습니다. `position` 속성에는 다음과 같은 값들이 있습니다: 1. `static`: `position` 속성의 기본값이며, 요소를 일반적인 흐름에 따라 배치합니.. 2023. 7. 27.

box model 의 inline 상태에서의 높이와 너비 조정 box model에서 inline 요소에 대해서는 width 와 height 가 적용되지 않나? Bard 네, 맞습니다. CSS box model에서 inline 요소에 대해서는 width와 height가 적용되지 않습니다. inline 요소는 한 줄에 표시되기 때문에 너비와 높이가 고정되지 않습니다. inline 요소의 너비와 높이는 콘텐츠의 크기에 따라 결정됩니다. 예를 들어, 다음 HTML 코드가 있습니다. This is an inline element. 이 코드에 다음 CSS 코드를 적용하면 `span` 태그가 빨간색으로 바뀝니다. span { color: red; } 그러나 `span` 태그의 너비와 높이는 설정되지 않습니다. `span` 태그의 너비와 높이는 콘텐츠의 크기에 따라 결정됩니다. .. 2023. 7. 27.

CSS selector cheat sheet [선택자] 출처https://welcm.uk/blog/css-selectors-cheat-sheet Welcm Learning Blog - CSS Selector Cheat Sheet Welcm Learning Blog - CSS Selector Cheat Sheet welcm.uk ※ CSS3에서 삭제되거나 변경된 선택자를 다시 확인할 필요가 있다. ※ 선택자는 뒤쪽에 나온 것을 우선적으로 적용한다. 선택자 예제 의미 .class .btn 클래스 이름이 "btn"인 모든 요소를 선택합니다. #id #myButton 아이디 이름이 "myButton"인 요소를 선택합니다. * * 모든 요소를 선택합니다. element h1 모든 요소를 선택합니다. element,element div, p → div, p:not(h1.. 2023. 7. 27.

selector의 기본 종류 html의 구역이나 아이템을 선택하는 방법을 간단히 요약해 줘. chatGTP HTML의 구역이나 아이템을 선택하는 방법은 CSS 선택자를 사용하여 다양하게 구현할 수 있습니다. 아래에는 간단히 요약된 세 가지 방법을 제시합니다: 1. 요소 선택자(Element Selector): - 가장 기본적인 선택자로, HTML 요소의 이름을 사용하여 스타일을 적용합니다. - 선택자에 HTML 요소의 이름을 그대로 사용합니다. 예를 들면 `div`, `p`, `h1`과 같습니다. - 모든 동일한 요소에 스타일이 적용되므로 주의하여 사용해야 합니다. 예시: div { /* div 요소에 적용할 스타일 */ } p { /* p 요소에 적용할 스타일 */ } 2. 클래스 선택자(Class Selector): - 클래스 .. 2023. 7. 27.

class, id 선택 [css] 선택자 class와 id의 차이에 대해 간단히 설명해. chatGTP CSS( Cascading Style Sheets)에서 선택자(class와 id)는 HTML 문서의 요소들을 스타일링하는 데 사용되는 중요한 도구입니다. 각 선택자는 문서의 특정 요소를 식별하고 해당 요소에 스타일을 적용할 수 있도록 도와줍니다. 1. 클래스 선택자: - 클래스 선택자는 동일한 스타일을 여러 요소에 적용할 때 사용됩니다. - 클래스 선택자는 마침표(`.`)로 시작하며, 그 뒤에 클래스 이름을 기입합니다. 예를 들면 `.my-class`와 같습니다. - HTML 문서에서 여러 요소가 동일한 클래스 이름을 가질 수 있으며, 클래스 이름은 중복 사용이 가능합니다. - 클래스 선택자를 사용하여 여러 요소에 동일한 스.. 2023. 7. 27.

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.

[필기] 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 기초 (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 기초 (1) CSS 문법 구조 ~의 ~을 ~어떻게 바꾸겠다. .. 이런 구조임. CSS 적용 순서 CSS 출처에 따라 적용에 우선 순위가 있다! 사용자 !important > 제작자 !important > 제작자 > 사용자 > 브라우저 순서가 바로 그것. 다만 !imortant 적용은 '폭포'의 흐름을 깰 수 있으니, 주의해서 사용해야 함. 선택하는 방식에는 이런 게 있다. (링크) 기본 (전체(*) / 타입 / 클래스 / ID / 속성) 그룹을 선택 결합해서 선택 (자손 / 자식 / 일반형제 / 인접형제) 몇 개 메모 전체 선택(*)는 초기화에 활용된다. id를 선택할 때는 앞에 #을 붙인다. 속성 선택자 : 태그의 구성 특징을 기술해서 선택하는(?) 방식 (짐코딩 설명 링크) [attribute]는 속성 이름이 .. 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.

한 부모 안에 있는 여러 아이템들의 공간 차지 비율을 조정 한 부모 안에 있는 여러 아이템들의 공간 차지 비율을 조정할 수 있는 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.

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.

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Mr. Coding

frontend/CSS40

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역