본문 바로가기

분류 전체보기138

fieldset로 묶기와 section으로 묶기 차이 fieldset로 묶기와 section으로 묶기 차이 (시멘틱 차원에서..) 아이템을 ``로 묶는 것과 ``으로 묶는 것은 두 가지 다른 HTML 요소를 사용하는 방식입니다. 각각의 장단점은 다음과 같습니다: 1. ``으로 아이템 묶기: - 장점: - 시맨틱 의미: ``은 관련된 폼 컨트롤들을 하나의 그룹으로 묶는 시맨틱 태그입니다. 폼 요소들이 서로 관련되어 있음을 명확하게 표현할 수 있습니다. - 폼 요소들을 묶어서 사용자에게 관련 정보를 제공하고, 레이블을 사용하여 폼의 사용 방법을 더욱 명확하게 할 수 있습니다. - 단점: - 디자인 제어의 어려움: ``은 브라우저에 의해 기본적으로 스타일링되기 때문에 커스텀 디자인을 적용하기 어려울 수 있습니다. CSS를 사용하여 스타일을 변경해야 할 때 추가적.. 2023. 7. 24.
3. 드롭다운을 삽입하고, 버튼 부분의 사이즈를 조절, 그리고 뷰포트 기준으로 아이템들이 줄어들다가 800px 이하에서 header, main, ad-area가 사라지게 함. HTML 맞춤 좌탁,식탁,테이블 책상 책장,책꽂이 수납장,서랍장 의자,벤치 침대 캠핑용 기타 견적 의뢰서 의뢰자 정보 원하는 스타일 제작수준 마감방법 원하는 금액대 원하는 마감일 디자인 설명 목록 바닥글 copywrite ad1 ad2 ad3 ad4 CSS /* 모든 구역의 가로 사이즈를 뷰포트 대비 75%로 설정합니다. */ /* .header, main, article, footer 모두 75vw 너비를 가지도록 스타일을 적용합니다. */ .header, main, article, footer { width: 75vw; } .header { display: flex; /* 아이템들을 가로로 배열합니다. */ justify-content: space-between; /* 아이템들 사이의 간격을 최대로 .. 2023. 7. 24.
드롭다운 코드에 대해 간단히 설명해. 드롭다운 코드에 대해 간단히 설명해. 드롭다운(Dropdown)은 웹 페이지에서 사용자가 선택할 수 있는 옵션 목록을 보여주는 UI 요소입니다. 주로 ``와 `` 태그를 사용하여 구현됩니다. HTML 드롭다운 코드 예시: 과일 선택: 사과 바나나 오렌지 포도 위의 코드는 "과일 선택:" 라벨과 드롭다운 목록이 있습니다. 사용자는 드롭다운 목록을 클릭하면 사과, 바나나, 오렌지, 포도 중에서 하나를 선택할 수 있습니다. ``: 드롭다운 목록의 설명을 제공하는 레이블 요소입니다. `for` 속성을 사용하여 연결된 `` 요소를 지정합니다. ``: 드롭다운 목록을 생성하는 태그입니다. `id` 속성과 `name` 속성을 지정할 수 있으며, `` 요소들을 포함합니다. ``: 드롭다운 목록의 선택 옵션들을 정의하는.. 2023. 7. 24.
2. 로고 이미지를 삽입함 img 태그로 "말하는나무 로고"를 넣었더니, header 아이템들이 다시 세로로 배열되어 버리는데? chatGTP header 아이템들이 세로로 배열되는 것은 "말하는나무 로고" 이미지가 header 내부의 다른 요소들과 함께 세로로 정렬되기 때문입니다. 이를 방지하기 위해서 "말하는나무 로고" 이미지에 대한 스타일을 수정해야 합니다. 아래와 같이 "말하는나무 로고" 이미지에 대한 스타일을 추가하면 이미지가 header 내부에서 수직 정렬되지 않고, 다른 아이템들과 가로로 배열될 수 있습니다. /* 로고 이미지의 스타일 설정 */ .logo-area img { max-width: 120px; /* 로고 이미지의 최대 너비를 120px로 제한합니다. */ height: auto; /* 이미지의 높이를 자.. 2023. 7. 24.
1. 덩어리별로 구역을 나눔 로고 에어리어 맞춤 가구종류 견적 의뢰서 버튼들 의뢰자 정보 원하는 스타일 제작수준 마감방법 원하는 금액대 원하는 마감일 디자인 설명 목록 바닥글 광고들 문서를 큰 덩어리 몇 개로 나누되, 가급적 시멘틱 태그를 사용함. 따라서 위 코드는 로고, 문서 제목, 명령 버튼이 위치한 header 구역 의뢰자 정보, 가구 스타일, 제작방식 및 마감방법, 원하는 금액대와 마감일을 설정할 수 있는 main 구역 원하는 디자인을 삽입, 수정할 수 있는 article 구역 (그 안에 설명 목록 포함) 바닥글 (footer) 광고글 (aside) 로 구성함. 아래는 코드 실행 모습 결국 내가 쓴 태그는 전부 '블록' 요소였던 건가. display: flex; /* 아이템들을 가로로 배열합니다. */ justify-cont.. 2023. 7. 24.
이 코드만으로 14개의 섹션(구역)이 생성된 거지? 위와 같은 코드를 작성하면, 이 코드만으로 14개의 섹션(구역)이 생성된 거지? chatGTP 네, 맞습니다. 위의 코드는 ``, ``, ``, ``, ``, 그리고 `` 태그를 사용하여 14개의 섹션(구역)을 생성한 것입니다. 이 코드에서 `` 요소가 5개, `` 요소가 5개, `` 요소가 1개, `` 요소가 1개, `` 요소가 1개, 그리고 `` 요소가 1개 총 14개의 섹션을 정의하고 있습니다. 이러한 방식으로 HTML 문서의 구조를 설계하면, 각각의 요소들이 의미론적으로 적절하게 분리되고 스타일링이나 스크립트 적용 등이 용이해집니다. 이렇게 구분된 섹션들은 웹 페이지의 구조를 명확히 표현하고 가독성을 높이는 데 도움이 됩니다. 필요한 섹션들을 적절히 사용하여 웹 페이지를 구성하는 것이 중요합니다... 2023. 7. 23.
세로 블록들을 가로로 배치하는 방법 세로 블록들을 가로로 배치하는 방법 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.
오류를 바로잡은 코드인데, 내가 바라는 모양이 아니다. 몇 군데 오류를 바로잡은 코드인데, 내가 바라는 모양이 아니다. 맞춤제작 견적 의뢰서 이름 이메일 전화번호 주소 종류 선택 좌탁,식탁,테이블 책상 책장,책꽂이 수납장,서랍장 의자,벤치 침대 캠핑용 기타 스타일 선택 Level 옵션 고급/짜맞춤 조립/분해 가능 보통/DIY 선택 안 함 Finish 옵션 수성 마감 오일 마감 가능 페인팅 마감 안 함 .header { border: 1px solid gray; width: 75vw; height: 7vh; min-height: 30px; display: flex; padding: 10px; align-items: center; /* 세로 방향 정중앙 정렬 */ box-sizing: border-box; max-height: 60px; /* 최대 높이를 60p.. 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.
SNS 사용자들의 일반적인 사용 목적이 뭐라고 생각하냐? [웹 개발, HTML] header, main, article, footer, aside, figuer 같은 섹션 태그들을 사용하면 시멘틱 차원에서 유리하다고 했잖아. 그런데 facebook, twiter, instagram 같은 SNS의 포스트나 글은 대부분 섹션 태그가 적용되지 않았을 거잖아? chatGTP 맞습니다, HTML5에서 도입된 header, main, article, footer, aside, figure 등과 같은 시멘틱 태그들은 웹 개발에서 의미론적인 구조를 나타내는 데 유리합니다. 이러한 시멘틱 태그들을 사용하면 웹 페이지의 구조와 의미를 더 명확하게 전달할 수 있고, 검색 엔진 등에서 페이지를 이해하고 인덱싱하는 데도 도움이 됩니다. 또한 웹 접근성 측면에서도 좋은 사용성을 제공합.. 2023. 7. 23.
헤더 부분 - 우상단 명령 버튼들 추가 우측 상단의 명령 버튼 5개 삽입하기 (헤더 섹션3 안에) 맞춤제작 견적 의뢰서 Custom-made Quotation Request 2023. 7. 23.
헤더 부분 - 기본 "header"라는 이름의 class 섹션을 생성하고 그 안에 3개의 섹션을 넣음. 맞춤제작 견적의뢰서 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.
여러 줄 동시 선택 방법 Ctrl + Alt + (↑, ↓) Shift + Alt + 마우스 드래그 2023. 7. 22.
컨테이너을 만드는 html 태그의 종류들 컨테이너란? chatGTP 일반적으로 웹 개발에서 "container"라는 용어는 구역을 감싸는 역할을 하는 요소를 가리킵니다. 이런 "container" 역할을 하는 요소들은 주로 div 요소를 사용하여 구현합니다. chatGTP html 작성에서, 컨테이너를 생성하는 태그를 모두 나열하면? HTML에서 컨테이너 역할을 하는 태그들은 주로 요소들을 그룹화하거나 레이아웃을 조정하기 위해 사용됩니다. 아래는 컨테이너 역할을 하는 주요 HTML 요소들의 목록입니다: 1. ``: 가장 일반적으로 사용되는 컨테이너 요소로, 아무 의미가 없는 블록 레벨 요소입니다. 주로 스타일링이나 구역별로 요소들을 그룹화하는 데에 사용됩니다. 2. ``: 문서의 구획을 나타내는 데에 사용되는 블록 레벨 요소입니다. 주로 관련 .. 2023. 7. 22.
빌드 테스트 1 1. 일단 header 섹션을 생성한 다음 그 안에 말하는나무 로고를 넣음. Q. 로고 이미지는 header 섹션 안에 있는 게 맞나? (의미론적으로?) Bard 네, 아래 코드의 로고 이미지는 header 섹션 안에 있는 것이 맞습니다. HTML5에서 header 태그는 웹 페이지의 머리글을 나타내는 태그입니다. 따라서, 로고 이미지는 웹 페이지의 머리글에 속하는 것으로 볼 수 있습니다. 2. 생성된 헤더 섹션이 잘 보이게 회색 테두리를 넣고, 헤더 이미지가 헤더 섹션에 딱 맞도록 사이즈를 설정함. Q. id 식별자명을 내 마음대로 'logo'라고 썼는데, 별 상관 없지? 네, 아래 코드에서 id 식별자명을 내 마음대로 logo라고 썼는데, 별 상관 없습니다. id 식별자명은 HTML 요소를 식별하는 .. 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.
logo 부분 (2) [html] 이미지를 업로드하면 화면에 출력되는 태그? Bard HTML에서 이미지를 업로드하면 화면에 출력되는 태그는 태그입니다. 태그는 이미지를 웹 페이지에 삽입하는 데 사용됩니다. 태그에는 다음과 같은 속성이 있습니다. src 속성: 이미지 파일의 URL을 지정합니다. (src는 source의 약자입니다.) alt 속성: 이미지의 대체 텍스트를 지정합니다. 이미지가 로드되지 않을 때 대체 텍스트가 표시됩니다. width 속성: 이미지의 너비를 지정합니다. height 속성: 이미지의 높이를 지정합니다. img 태그로 올려진 이미지 위에 커서가 나타나면 [이미지 삭제 버튼]과 [이미지 교체] 버튼이 나타나도록 하려면 JS를 써야 하지? Bard 네, img 태그로 올려진 이미지 위에 커서가 나타나면 .. 2023. 7. 22.
웹, 3D 웹에서 사용 가능한 3D 모델링 또는 설계 툴은? Bard 네, 방금 소개한 것들은 모두 API를 제공합니다. API 사용료는 각 도구마다 다릅니다. Tinkercad: 무료 SketchUp: 무료 (개인용), 유료 (기업용) Blender: 오픈 소스 (무료) Onshape: 무료 (개인용), 유료 (기업용) Fusion 360: 무료 (학생 및 스타트업), 유료 (기업용) 각 도구의 API 사용료에 대한 자세한 내용은 해당 도구의 웹사이트에서 확인할 수 있습니다. Tikercad와 Onshape는 웹 프로그램이잖아? Bard 네, 맞습니다. Tikercad, Onshape는 클라우드 기반 3D CAD 소프트웨어입니다. 웹 브라우저에서 사용할 수 있으므로 어디서나 사용할 수 있습니다. Onshape는 .. 2023. 7. 22.
logo 부분 로고 박스의 사이즈 브라우저 뷰포트 가로 사이즈의 5%로 해서 뷰포트가 줄어들면 줄어드는 비율대로 박스도 줄어들게 만들어. chatGTP 내가 그린 '삭제 버튼'을 삽입해. 그리고 그 버튼을 클릭하면 로고가 사라지도록 코드를 작성해 봐. chatGTP 로고 이미지 로고가 삭제되면 '삭제 버튼'도 사라지게 해 봐. chatGTP removeBtn.addEventListener('click', function () { logo.style.display = 'none'; // 로고 박스를 숨기는 스타일 적용 removeBtn.style.display = 'none'; // 삭제 버튼을 숨기는 스타일 적용 }); 어떤 객체 위에 커서가 다가가면 다른 명령 버튼이 등장하게 만들려면? (javascriipt) 명령.. 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.

티스토리툴바