본문 바로가기

frontend81

[필기] 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.
한 부모 안에 있는 여러 아이템들의 공간 차지 비율을 조정 한 부모 안에 있는 여러 아이템들의 공간 차지 비율을 조정할 수 있는 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.
fieldset로 묶기와 section으로 묶기 차이 fieldset로 묶기와 section으로 묶기 차이 (시멘틱 차원에서..) 아이템을 ``로 묶는 것과 ``으로 묶는 것은 두 가지 다른 HTML 요소를 사용하는 방식입니다. 각각의 장단점은 다음과 같습니다: 1. ``으로 아이템 묶기: - 장점: - 시맨틱 의미: ``은 관련된 폼 컨트롤들을 하나의 그룹으로 묶는 시맨틱 태그입니다. 폼 요소들이 서로 관련되어 있음을 명확하게 표현할 수 있습니다. - 폼 요소들을 묶어서 사용자에게 관련 정보를 제공하고, 레이블을 사용하여 폼의 사용 방법을 더욱 명확하게 할 수 있습니다. - 단점: - 디자인 제어의 어려움: ``은 브라우저에 의해 기본적으로 스타일링되기 때문에 커스텀 디자인을 적용하기 어려울 수 있습니다. CSS를 사용하여 스타일을 변경해야 할 때 추가적.. 2023. 7. 24.
드롭다운 코드에 대해 간단히 설명해. 드롭다운 코드에 대해 간단히 설명해. 드롭다운(Dropdown)은 웹 페이지에서 사용자가 선택할 수 있는 옵션 목록을 보여주는 UI 요소입니다. 주로 ``와 `` 태그를 사용하여 구현됩니다. HTML 드롭다운 코드 예시: 과일 선택: 사과 바나나 오렌지 포도 위의 코드는 "과일 선택:" 라벨과 드롭다운 목록이 있습니다. 사용자는 드롭다운 목록을 클릭하면 사과, 바나나, 오렌지, 포도 중에서 하나를 선택할 수 있습니다. ``: 드롭다운 목록의 설명을 제공하는 레이블 요소입니다. `for` 속성을 사용하여 연결된 `` 요소를 지정합니다. ``: 드롭다운 목록을 생성하는 태그입니다. `id` 속성과 `name` 속성을 지정할 수 있으며, `` 요소들을 포함합니다. ``: 드롭다운 목록의 선택 옵션들을 정의하는.. 2023. 7. 24.
세로 블록들을 가로로 배치하는 방법 세로 블록들을 가로로 배치하는 방법 HTML에서 블록 요소들을 가로로 배치하는 가장 기본적인 CSS 속성은 `display`와 `float`입니다. 또한, Flexbox와 Grid Layout이라는 더 고급적인 레이아웃 방법들도 있습니다. 각각의 속성을 설명하겠습니다: 1. `display: inline-block;`: 이 속성을 사용하면 블록 요소들이 가로로 배열됩니다. `inline-block` 속성은 요소를 인라인 레벨로 취급하면서도 블록 레벨의 특징을 유지합니다. 따라서 높이와 너비를 지정할 수 있고, 가로로 배열할 수 있습니다. .block { display: inline-block; } 2. `float: left;` (또는 `float: right;`): `float` 속성은 요소를 좌우로 .. 2023. 7. 23.
언제 class를 쓰고 언제 id를 쓰는지 [html] 언제 class를 쓰고 언제 id를 쓰는지 아주 쉽게 가르쳐 줘 class와 id는 둘 다 HTML 요소에 스타일이나 스크립트 적용을 위해 사용되는 속성입니다. 그러나 그 용도와 사용 방법은 약간 다릅니다. 간단히 설명드리겠습니다: 1. class: `class` 속성은 하나의 HTML 요소에 여러 개의 클래스를 지정할 수 있으며, 동일한 클래스는 여러 요소에 적용할 수 있습니다. `class` 속성은 같은 스타일이나 동작을 여러 요소들에 적용하고 싶을 때 사용합니다. 예를 들어, 같은 스타일을 가진 여러 개의 버튼이나 목록 항목들에 동일한 클래스를 지정하여 스타일링을 통일할 수 있습니다. ```html 확인 취소 ``` ```css .primary-button { background-col.. 2023. 7. 23.
div는 큰 덩어리, section은 보다 구체적이고 분명한 덩어리 여러 개의 시맨틱 태그로 구성된 구역을 더 큰 논리적 단위로 묶기 위해서는 `` 태그를 사용하는 것이 일반적입니다. `` 태그는 논리적 그룹화를 위해 주로 활용되는 범용적인 블록 레벨 컨테이너이기 때문입니다. 예를 들어, 목차를 ``과 ``를 사용하여 구성하고, 각 목차 섹션을 나누기 위해 `` 태그를 사용한다면, 이러한 섹션들을 더 큰 논리적 단위로 묶기 위해 `` 태그를 활용할 수 있습니다. 이렇게 하면 해당 목차 섹션들이 하나의 단위로서 묶이게 됩니다. ```html 첫 번째 목차 섹션 항목 1 항목 2 두 번째 목차 섹션 항목 3 항목 4 ``` 위의 예시에서 `` 태그로 전체 목차를 감싸서 두 목차 섹션을 하나의 구역으로 묶었습니다. 이렇게 하면 스타일링이나 JavaScript로 해당 구역에 대.. 2023. 7. 23.
가로로 붙는 요소와 세로로 쌓이는 요소 https://youtu.be/Gy_T_fcnQYA?list=PLlaP-jSd-nK-ponbKDjrSn3BQG9MgHSKv chatGTP HTML 태그는 대체로 두 가지 유형으로 나눌 수 있습니다: 인라인(Inline) 요소와 블록(Block) 요소입니다. 인라인 요소는 한 줄에 나란히 표시되며, 너비와 높이가 적용되지 않습니다. 블록 요소는 새로운 줄에서 시작하고, 너비와 높이가 적용됩니다. 인라인 요소: 1. `` 2. `` 3. `` 4. `` 5. `` 6. `` 7. `` 8. `` 블록 요소: 1. `` 2. `` 3. ``, ``, ``, ``, ``, `` 4. ``, ``, `` 5. ``, ``, ``, `` 6. `` 7. ``, ``, `` 8. ``, `` 9. `` 상기한 태그는.. 2023. 7. 23.
스크립트 파일 분리 방법 문서를 분리하는 것은 코드의 가독성과 유지보수를 향상시키는데 도움이 될 수 있습니다. 일반적으로 코드를 각각의 역할이나 기능에 따라 분리하여 관리하면 코드의 복잡도가 낮아지고 코드 간의 의존성이 줄어들어서 코드의 유지보수가 용이해집니다. 문서를 분리하는 방법으로는 여러 가지가 있습니다: 1. 스크립트 파일 분리: 각 기능이나 역할에 따라 스크립트를 여러 개의 파일로 나누고, HTML 문서에서 ` ``` 2. 외부 스크립트 파일 링크: 스크립트를 외부 파일로 분리하고, HTML 문서에서 링크를 통해 스크립트를 가져오는 방법입니다. ```html ``` 3. 모듈화: 모듈을 사용하여 기능을 별도의 논리적 단위로 분리하는 방법입니다. ES6 이후의 JavaScript에서는 `import`와 `export` 키.. 2023. 7. 23.
`div`로 요소를 감싸는 것은 Q. 코린이 입장에서 질문! main 클래스 아래 바로 input 아이템을 두는 게 아니라 div로 input 아이템을 감싼 다음 두는 거야. 왜 이런 식으로 해야 하는지, 최대한 쉽게 설명해 줘. chatGTP 로 요소를 감싼 이유는 CSS에서 스타일을 적용하기 위해서입니다. CSS에서는 요소들을 선택하여 스타일을 적용하는데, 만약 그냥 요소에 스타일을 적용한다면 해당 요소의 스타일이 다른 요소들에 영향을 미칠 수 있습니다. 따라서 스타일을 적용하려는 요소를 로 감싸서 이 요소에 스타일을 적용하면, 다른 요소들에 영향을 미치지 않고 원하는 스타일을 적용할 수 있습니다. 쉽게 말해서 CSS에서 input 요소를 바로 지시하거나 찾을 수 없어서인가? chatGTP 정확히 맞습니다! CSS에서 스타일을 적용.. 2023. 7. 23.
vw와 vh의 차이는? vw와 vh의 차이는? `vw`와 `vh`는 뷰포트의 너비와 높이를 기준으로 하는 상대적인 단위입니다. 뷰포트(Viewport)란 사용자가 웹 페이지를 볼 때 실제로 보이는 영역을 말합니다. - `vw` (Viewport Width): 뷰포트의 가로 너비를 1로 기준으로 한 상대적인 단위입니다. 1vw는 뷰포트의 가로 너비의 1%에 해당합니다. 예를 들어, 뷰포트의 가로 너비가 1000px이라면 1vw는 10px이 됩니다. - `vh` (Viewport Height): 뷰포트의 세로 높이를 1로 기준으로 한 상대적인 단위입니다. 1vh는 뷰포트의 세로 높이의 1%에 해당합니다. 예를 들어, 뷰포트의 세로 높이가 800px이라면 1vh는 8px이 됩니다. 이러한 상대적인 단위인 `vw`와 `vh`는 반응형.. 2023. 7. 23.
섹션 사이의 간격을 만드는 방법 보호되어 있는 글 입니다. 2023. 7. 23.
뷰포트와 브라우저 창의 크기 chatGTP 뷰포트(Viewport)란 웹 페이지를 브라우저에서 실제로 보여지는 영역을 의미합니다. 뷰포트는 사용자가 웹 페이지를 스크롤하거나 확대/축소하는 등의 동작을 할 때 보여지는 영역을 말합니다. 일반적으로 뷰포트는 브라우저 창의 크기와 관련이 있습니다. 웹 페이지를 처음 로드할 때 뷰포트의 크기는 브라우저 창의 크기와 동일합니다. 하지만 사용자가 화면을 확대하거나 축소하거나, 스크롤을 하면 뷰포트의 크기가 변할 수 있습니다. 모바일 기기에서는 뷰포트의 개념이 더 중요합니다. 모바일 기기의 뷰포트는 모바일 화면의 크기를 의미하며, 데스크톱 브라우저보다는 작을 수 있습니다. 모바일 뷰포트의 크기는 웹 페이지가 모바일 화면에 잘 맞도록 반응형 디자인을 적용하거나 모바일 화면에 맞게 레이아웃을 조정하.. 2023. 7. 23.
폰트 설정 chatGTP 텍스트의 폰트를 조정하려면 CSS의 `font-family`, `font-size`, `font-weight`, `font-style` 등의 속성을 사용하여 스타일을 적용할 수 있습니다. 각 속성은 다음과 같이 사용됩니다: 1. `font-family`: 텍스트의 글꼴을 지정합니다. 여러 개의 글꼴을 지정할 경우 쉼표(,)로 구분하여 나열합니다. 브라우저가 첫 번째 글꼴을 지원하지 않을 경우, 두 번째 글꼴로 대체하며, 지정된 글꼴 중 브라우저에서 지원하는 첫 번째 글꼴을 사용합니다. 2. `font-size`: 텍스트의 글꼴 크기를 지정합니다. 기본 값은 `medium`으로, 상대적인 크기인 `em` 단위나 절대적인 크기인 `px`, `pt` 등의 단위를 사용하여 지정할 수 있습니다. 3.. 2023. 7. 23.
선택자 점(.)과 # 의 차이 CSS 스타일 부분에서 점(.)과 샵(#)은 서로 다른 선택자(selector)를 나타냅니다. 간단하게 설명하면 다음과 같습니다: 1. **점(.) - 클래스 선택자**: `.`을 사용하여 스타일을 적용할 HTML 요소의 클래스를 선택하는 선택자입니다. 클래스 선택자는 동일한 클래스 이름을 가진 여러 개의 요소에 스타일을 적용하는데 사용됩니다. 예를 들면, `.header`는 클래스 이름이 "header"인 모든 HTML 요소들에 스타일을 적용합니다. `header` 클래스를 가진 요소들은 ``와 같이 표시됩니다. 2. **샵(#) - 아이디 선택자**: `#`을 사용하여 스타일을 적용할 HTML 요소의 아이디를 선택하는 선택자입니다. 아이디 선택자는 유일한(id가 고유한) 요소에 스타일을 적용하는데 사.. 2023. 7. 22.
컨테이너을 만드는 html 태그의 종류들 컨테이너란? chatGTP 일반적으로 웹 개발에서 "container"라는 용어는 구역을 감싸는 역할을 하는 요소를 가리킵니다. 이런 "container" 역할을 하는 요소들은 주로 div 요소를 사용하여 구현합니다. chatGTP html 작성에서, 컨테이너를 생성하는 태그를 모두 나열하면? HTML에서 컨테이너 역할을 하는 태그들은 주로 요소들을 그룹화하거나 레이아웃을 조정하기 위해 사용됩니다. 아래는 컨테이너 역할을 하는 주요 HTML 요소들의 목록입니다: 1. ``: 가장 일반적으로 사용되는 컨테이너 요소로, 아무 의미가 없는 블록 레벨 요소입니다. 주로 스타일링이나 구역별로 요소들을 그룹화하는 데에 사용됩니다. 2. ``: 문서의 구획을 나타내는 데에 사용되는 블록 레벨 요소입니다. 주로 관련 .. 2023. 7. 22.
CSS style 적용의 3가지 방법 Bard CSS 스타일을 적용하는 3가지 방법은 다음과 같습니다. 1. 인라인 스타일 인라인 스타일은 HTML 태그에 `style` 속성을 사용하여 스타일을 적용하는 방법입니다. 인라인 스타일은 가장 간단한 방법이지만, 스타일을 적용할 수 있는 태그가 제한되고 유지 관리가 어려울 수 있습니다. 예: This is an inline style. 2. 내부 스타일 내부 스타일은 HTML 문서의 `head` 태그에 `style` 태그를 사용하여 스타일을 적용하는 방법입니다. 내부 스타일은 인라인 스타일보다 유지 관리가 쉽지만, 스타일을 적용할 수 있는 태그가 제한되고 여러 개의 HTML 문서에 동일한 스타일을 적용하기 어려울 수 있습니다. 예: This is an internal style. 3. 외부 스타일.. 2023. 7. 22.
특정 섹션을 페이지 우측에 위치하도록 하는 CSS 속성? 특정 섹션을 페이지 우측에 위치하도록 하는 CSS 속성? chatGTP 특정 섹션을 페이지 우측에 위치하도록 하는 CSS 속성은 `float`와 `clear`를 함께 사용하는 방법과 `position` 속성을 사용하는 방법 두 가지가 있습니다. 1. `float`와 `clear`를 사용하는 방법: ```css /* 우측 섹션을 float:right;로 설정하고, clear:right;로 float 영향을 제거합니다. */ .right-section { float: right; clear: right; } ``` 이 방법은 해당 요소를 우측으로 이동시키는 데 사용될 수 있지만, 주의해야 할 점은 부모 요소가 해당 섹션을 감싸도록 구조적으로 잘 설계되어야 합니다. 그렇지 않으면 다른 요소들과 겹칠 수 있습니.. 2023. 7. 21.
position 속성 [html] position 속성을 absolute로 하는 것과 relative로 하는 것의 차이는? chatGTP `position` 속성을 `absolute`와 `relative`로 설정하는 것은 웹 페이지에서 요소의 위치를 조정하는 데 사용되는 두 가지 기본적인 방법입니다. 이 두 속성의 차이점은 요소가 상대적으로 배치되는 기준점과 주변 요소들과의 상호작용에 있습니다. 1. `position: relative;` - 상대적인 위치 지정 방법입니다. - 요소가 원래 있어야 할 위치를 기준으로 위치를 조정합니다. - 다른 요소들과의 상호작용에서는 일반적인 문서 흐름에 따라 배치됩니다. - `top`, `right`, `bottom`, `left` 등과 함께 사용하여 요소의 위치를 조정할 수 있습니다. .. 2023. 7. 21.
section 태그가 추가된 이유 기존에도 header, main, footer, aside 가 있었는데, 굳이 왜 section 이라는 태그를 더 추가한 것인가? chatGTP 기존에도 ` 단독으로 사용된 section 태그 이것은 단독으로 사용된 section 태그입니다. 위 코드에서 `` 태그는 하나의 구획을 나타내지만, 의미적인 관점에서 다른 시맨틱 태그와 함께 사용하는 것이 더욱 적절하고 의미론적으로 풍부한 HTML 구조를 형성하는 데에 도움이 됩니다. 따라서 `` 태그를 사용할 때는 문서 구조를 명확히 이해하고, 다른 의미론적 태그와 함께 조합하여 사용하는 것이 권장됩니다. section 태그와 함께 header, main, article, footer, aside 태그로 구획을 나누는 코드를 작성해 봐. 아래 코드는 `` 태.. 2023. 7. 21.

티스토리툴바