본문 바로가기

말하는나무 PR. Mahannamu19

retry 1 - content와 aside(=ad)를 나누고 flexbox를 적용 가장 큰 덩어리를 본문(content)와 우측 광고가 실릴 부분 ─ 이렇게 2개로 나눔. DOCTYPE html> Custom-made Request Form 내용 광고 CSS에서 플렉스박스를 적용하면, 디폴트인 가로로 배열됨. content width를 뷰포트의 75%로 지정. .total { display: flex; } .content { border: 1px solid black; width: 75vw; } 2023. 7. 29.
전체 구획 및 logo 부분, 중앙 정렬 및 간격 주기│의뢰서 단계별 갈무리 1-2 종류 선택 테이블,탁자 책상 책장,책꽂이 수납장,서랍장 의자,벤치 침대 캠핑용 기타 스타일 선택 클릭 맞춤제작 견적의뢰서 메인1 메인2 메인3 메인4 메인5 디자인 디자인 상세 버튼들 푸터1 푸터2 푸터3 광고1 광고2 광고3 광고4 광고5 body { background-color: rgb(221, 230, 221); } .total { display: flex; } .content { display: grid; width: 75vw; /* 주요 컨텐트 사이즈를 뷰포트의 75%로 줄임 */ } .request { border: 1px solid gray; } header { display: flex; height: 10vh; font-size: 1.8vw; } .header > * + * { margi.. 2023. 7. 28.
의뢰서 단계별 갈무리 1 페이지의 전체적인 구획을 나누되, 시멘틱 측면을 고려하여 heade, main, article, nav, footer, aside 같은 태그를 사용한다. 헤더1 헤더2 헤더3 헤더4 헤더5 메인1 메인2 메인3 메인4 메인5 디자인 디자인 상세 푸터1 푸터2 푸터3 광고1 광고2 광고3 광고4 광고5 그 다음 전체(total)에 플렉스박스를 선언해서 가로로 큰 덩어리가 두 블록으로 생성되도록 함. .total { display: flex; } 2023. 7. 28.
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.
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.
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.
오류를 바로잡은 코드인데, 내가 바라는 모양이 아니다. 몇 군데 오류를 바로잡은 코드인데, 내가 바라는 모양이 아니다. 맞춤제작 견적 의뢰서 이름 이메일 전화번호 주소 종류 선택 좌탁,식탁,테이블 책상 책장,책꽂이 수납장,서랍장 의자,벤치 침대 캠핑용 기타 스타일 선택 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.
헤더 부분 - 우상단 명령 버튼들 추가 우측 상단의 명령 버튼 5개 삽입하기 (헤더 섹션3 안에) 맞춤제작 견적 의뢰서 Custom-made Quotation Request 2023. 7. 23.
헤더 부분 - 기본 "header"라는 이름의 class 섹션을 생성하고 그 안에 3개의 섹션을 넣음. 맞춤제작 견적의뢰서 2023. 7. 23.
빌드 테스트 1 1. 일단 header 섹션을 생성한 다음 그 안에 말하는나무 로고를 넣음. Q. 로고 이미지는 header 섹션 안에 있는 게 맞나? (의미론적으로?) Bard 네, 아래 코드의 로고 이미지는 header 섹션 안에 있는 것이 맞습니다. HTML5에서 header 태그는 웹 페이지의 머리글을 나타내는 태그입니다. 따라서, 로고 이미지는 웹 페이지의 머리글에 속하는 것으로 볼 수 있습니다. 2. 생성된 헤더 섹션이 잘 보이게 회색 테두리를 넣고, 헤더 이미지가 헤더 섹션에 딱 맞도록 사이즈를 설정함. Q. id 식별자명을 내 마음대로 'logo'라고 썼는데, 별 상관 없지? 네, 아래 코드에서 id 식별자명을 내 마음대로 logo라고 썼는데, 별 상관 없습니다. id 식별자명은 HTML 요소를 식별하는 .. 2023. 7. 22.
logo 부분 (2) [html] 이미지를 업로드하면 화면에 출력되는 태그? Bard HTML에서 이미지를 업로드하면 화면에 출력되는 태그는 태그입니다. 태그는 이미지를 웹 페이지에 삽입하는 데 사용됩니다. 태그에는 다음과 같은 속성이 있습니다. src 속성: 이미지 파일의 URL을 지정합니다. (src는 source의 약자입니다.) alt 속성: 이미지의 대체 텍스트를 지정합니다. 이미지가 로드되지 않을 때 대체 텍스트가 표시됩니다. width 속성: 이미지의 너비를 지정합니다. height 속성: 이미지의 높이를 지정합니다. img 태그로 올려진 이미지 위에 커서가 나타나면 [이미지 삭제 버튼]과 [이미지 교체] 버튼이 나타나도록 하려면 JS를 써야 하지? Bard 네, img 태그로 올려진 이미지 위에 커서가 나타나면 .. 2023. 7. 22.
logo 부분 로고 박스의 사이즈 브라우저 뷰포트 가로 사이즈의 5%로 해서 뷰포트가 줄어들면 줄어드는 비율대로 박스도 줄어들게 만들어. chatGTP 내가 그린 '삭제 버튼'을 삽입해. 그리고 그 버튼을 클릭하면 로고가 사라지도록 코드를 작성해 봐. chatGTP 로고 이미지 로고가 삭제되면 '삭제 버튼'도 사라지게 해 봐. chatGTP removeBtn.addEventListener('click', function () { logo.style.display = 'none'; // 로고 박스를 숨기는 스타일 적용 removeBtn.style.display = 'none'; // 삭제 버튼을 숨기는 스타일 적용 }); 어떤 객체 위에 커서가 다가가면 다른 명령 버튼이 등장하게 만들려면? (javascriipt) 명령.. 2023. 7. 22.
이미지(로고) 삽입 사용자가 이미지를 삽입할 수 있는 작은 박스를 작성해봐. 사용자가 이미지를 삽입할 수 있는 작은 박스를 작성해봐. 1. 박스 크기는 가로 200px 세로 200px이며 테두리는 옅은 회색이고 내부 바탕색은 흰색이야. 2. 박스에 커서가 다가가면 '새로운 로고 등록하기'라는 글자 나타나는데 글자가 나타난 이후 박스 안쪽을 클릭하면 사용자의 PC 탐색 창이 나타나서 이미지 찾기 및 업로드가 가능하다. 가로 세로 300 px 이하 사이즈만 업로드 가능하도록 만든다. 3. 이미지(=로고)가 업로드되면 박스의 회색 테두리는 투명으로 바뀐다. 4. 이미지(=로고)이 이미 업로드된 상태에서는, 사용자가 이미지를 3초 이상 롱클릭하면 팝업 창이 나타나면서 [새 로고로 교체] 버튼과 [이 로고 삭제] 버튼 중에 어느 하.. 2023. 7. 20.
원목 맞춤제작 견적 의뢰서 페이지 구축 새 디자인 원목 맞춤제작 견적 의뢰서 페이지 구축 개발 첫 단추로써, 대략 어떤 형태가 되어야 할 지 다시 그려봤다. (Google Sheets로.) HTML, CSS, JavaScript, 여러 API를 활용해서 되도록 빠르게 빌드하고, 주석을 충분히 많이 달도록 해서, 계속적인 학습이 이뤄지도록 한다. 각 요소별 동작방식을 간단히 시뮬레이팅해보면 이렇다. 로고와 타이틀은 사용자에 의해 삭제 및 교체 가능하게 만든다. 타이틀은 다른 이름을 입력할 수 있게 하되 삭제는 불가능하게. 의뢰자 / 받을 주소 / 이메일 / 전화번호는 '데이트 유효성 검사'를 적용. 아이템 종류는 팝업창의 '트리뷰' 형태로 선택 가하도록. 원하는 스타일은 슬라이드뷰 방식을 통해 선택 가능하도록. (각 스타일별 대표 이미지와 간단한 설명이 .. 2023. 7. 19.
텍스트 편집기, 이미지 편집기 따로 글자 크기와 서체를 선택할 수 있고, 진하게 / 기울이기 / 언더바 / 글자색 / 글자 배경색을 선택할 수 있으며, 글자 위치를 좌측 / 가운데 / 우측으로 옮기도록 조정할 수 있고, 간단한 표를 생성해서 삽입할 수 있고, 링크 삽입, 목록 삽입, 파일 삽입이 가능한 이미지 편집기 겸 글(텍스트) 편집기를 JavaScript로 구축해서 사용자가 편집 완료 후 이메일을 통해 다른 사람에게 송달할 수 있도록 하려 한다. 이 편집기를 가볍고 빠르게 구축하려면? chatGTP 가볍고 빠르게 구축하기 위해 다음과 같은 접근 방식을 사용할 수 있습니다: 기본 텍스트 에디터 구축: 가장 간단한 방법은 JavaScript와 HTML을 사용하여 기본 텍스트 편집기를 만드는 것입니다. 사용자가 텍스트를 입력하고 서식을 적.. 2023. 7. 19.
[웹 개발] 팝업 창 형식으로 주문서 폼을 개발하려고 해. [웹 개발] 팝업 창 형식으로 주문서 폼을 개발하려고 해. chatGTP 팝업 창 형식의 주문서 폼을 개발하는 것은 웹 개발에서 일반적인 작업입니다. 팝업 창을 사용하여 사용자가 주문 정보를 입력하고 제출할 수 있도록 할 수 있습니다. 다음은 팝업 창 형식의 주문서 폼을 개발하는 데 도움이 될 수 있는 몇 가지 단계입니다. HTML 구조 작성: HTML을 사용하여 주문서 폼의 기본 구조를 작성합니다. 일반적으로 `` 요소를 사용하여 폼을 만들고, `` 요소를 사용하여 입력 필드를 추가합니다. 팝업 창으로 표시되는 폼을 만들기 위해 필요한 추가적인 요소를 고려할 수도 있습니다. CSS 스타일링: CSS를 사용하여 주문서 폼을 디자인하고 스타일링합니다. 폼 요소의 배치, 크기, 색상 등을 조정하여 사용자가 .. 2023. 7. 18.
견적서 양식 웹페이지를 만들려고 한다. 어떻게 해야 할까? 나는 목공 공방을 운영하고 있어. JavaScript를 이용하여 견적서 양식 페이지(=웹페이지)를 만들려고 한다. 그 페이지에 손님이 방문하면 주어지는 질문에 답하면서 빈 칸을 채운 후, 나(=공방운영자)에게 해당 견적 의뢰서가 송달되게 만들 거야. 이 프로젝트를 성공시키려면, 어떻게 해야 할까? chat.GTP 목공 공방에서 견적서 양식 페이지를 만들어 손님들이 질문에 답하고 견적 의뢰서를 보낼 수 있는 웹페이지를 개발하려는 경우, 다음과 같은 단계를 따를 수 있습니다. 1. 요구사항 정의: 프로젝트의 목표와 요구사항을 명확히 정의합니다. 어떤 정보를 수집해야 하며, 어떤 질문과 양식이 필요한지를 파악합니다. 2. 웹 개발 기술 선택: JavaScript를 사용하여 웹페이지를 개발할 예정이므로, 기본적.. 2023. 7. 16.

티스토리툴바