26-하반기 제3회 웹 스터디(Farm System - Union): 동끼리 정기 모임

About this offer

9/28 모임 목차: 1. 교재 06-1 ~ 06-2 2. 교재 07-1 & 07-3 3. 교재 08-1 ~ 08-3 이번주 스터디는 교재 기준 6~8챕터 내용을 가지고 개인 공부와 스터디를 진행하였습니다. 아래 코드는 프로젝트에 연계할 저만의 독창적인 실습 코드입니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>동끼리: 점심 메뉴 추천 - 3회차</title> <!-- style은 head 사이에, style은 대상 기기에 맞게(pc, 폰 등) CSS만 바꿔 주는 것 --> <style> button { width: 155px; height: 40px; background-color: orangered; color: rgb(32, 13, 13); padding: 10px 20px; margin: 10px; border: 3px solid #ccc; /* 밝은 회색 */ border-radius: 10px; } </style> <link rel="stylesheet" href="외부 스타일 시트(6챕터).css"> <link rel="stylesheet" href="외부 스타일 시트(7챕터).css"> <link rel="stylesheet" href="외부 스타일 시트(8챕터).css"> </head> <body> <h1>학교 주변 점심 메뉴</h1> <hr> <h3>뭘 먹어야 맛있는 걸 먹었다고 소문이 날까?</h3> <form> <fieldset> <!-- fieldset: 폼 안의 입력 항목들을 묶는 태그 --> <legend><strong>점심 메뉴 카테고리</strong></legend> <!-- legend: fieldset의 제목 --> <label for="menu"><b>메뉴를 선택하세요:</b></label> <!-- label: 입력란 가까이 표시하는 텍스트 --> <select id="menu" name="menu"> <!-- select: 드롭다운 메뉴, option: 선택 항목 --> <button type = "submit" value="한식">한식</button> <option value="한식">한식</option> <!-- value: 서버로 보내 줄 선택 항목의 값 --> <option value="중식">중식</option> <option value="일식">일식</option> <option value="양식">양식</option> <option value="분식">분식</option> </select> <br> <br> <button type = "submit">랜덤 추첨</button> <!-- 랜덤 추첨 버튼 크기 키우기? --> <br> <br> </fieldset> </form> <p>너무 맛있는 게 많아 메뉴 고르기가 어렵다면 <b><span class="accent bg">랜덤 추첨</span></b> 버튼을 눌러 보세요!</p> <!-- p 태그 안에 accent와 bg 클래스 사용 --> <div id="container"> <!-- div는 여러 요소를 하나로 묶는 태그 --> <h5>추천 메뉴: <span class="accent">한식</span></h5> </div> <br> <button type = "submit">한식 랜덤 추첨</button> <!-- 랜덤 추첨 버튼 크기 키우기? --> <h6 class = "justify"> <b>즐거운</b> 식사 시간 되세요!</h6> <!-- h6 태그 안에 justify 속성 사용 --> <p> <span style = "text-decoration: underline">필동면옥</span> &nbsp; <span style = "text-decoration: overline">overline</span> &nbsp; <span style = "text-decoration: line-through">남도복국 장충동점</span> </p> <br> <div class = "box1"><strong>양식</strong></div> <br> <div class = "box2"><strong>중식</strong></div> <br> <div class = "box3"><strong>일식</strong></div> <br> <div class = "box4"><strong>분식</strong></div> <br> <div class = "box5"><strong>뭐 먹을래</strong></div> <hr> <p class = "shadow1">그림자1</p> <p class = "shadow2">그림자2</p> <p class = "letter-spacing">글자 간격 조절</p> </body> </html> 위 코드에 언급된 외부 스타일 시트 세 개는 다음과 같습니다. /* 웹 문서마다 똑같은 내부 스타일 시트를 매번 반복적으로 기입해서 쓸 수는 있겠지만, 서버 공간은 물론 문서를 내려받는 시간까지 낭비하기 때문에, 외부 스타일 시트 파일로 따로 저장하고, html 코드 작업창에 연결한다. head와 /head 사이에 <link rel="stylesheet" href="외부 스타일 시트.css">를 붙여넣어 외부 스타일 시트를 연결. 이때, 외부 스타일 시트는 대상 기기에 맞게 CSS만 바꿔 주는 것이 좋음. */ h1 { text-align: center; /* 텍스트 정렬 - 가운데 */ color: maroon; /* 글자 색상: 짙은 적갈색 */ padding: 10px; /* 테두리 안쪽 여백 */ margin: 10px; /* 테두리 바깥쪽 여백 */ border: 2px solid black; /* 테두리 두께, 선 종류, 색상 */ border-radius: 10px; /* 테두리 둥글게 */ background-color: orange; } h3 { color: blue; /* 글자 색상: 파랑 */ width: fit-content; /* 글자 크기만큼 너비 */ padding: 5px; /* 테두리 안쪽 여백 */ margin: 10px; /* 테두리 바깥쪽 여백 */ border-radius: 10px; /* 테두리 둥글게 */ background-color: lightblue; } /* 같은 스타일 규칙 사용 시 선택자를 나열해서 한 번에 나타낼 수 있음 */ p, h5 { text-align: left; /* 텍스트 정렬 - 오른쪽 */ } /* 클래스 선택자는 .으로 시작해서 나타냄. 사용자가 임의 */ .accent { color: red; /* 글자 색상: 빨강 */ font-weight: bold; /* 글자 굵기: 굵게 */ } .bg { background-color: yellow; /* 배경 색상: 노랑 */ } /* id 선택자는 #으로 시작해서 나타내고, 문서에서 한 번만 적용 가능*/ #container { margin: 0 auto; /* 좌우 여백 자동 */ padding: 10px; /* 테두리 안쪽 여백 */ border: 1px solid gray; /* 테두리 두께, 선 종류, 색상 */ border-radius: 10px; /* 테두리 둥글게 */ background-color: lightgray; /* 배경 색상: 연한 회색 */ } p { font-style: normal; /* 글자체 - 일반체 */ font-family: "맑은 고딕", 돋움; /* 글자체 지정 */ font-size: 16px; /* 글자 크기 지정 */ font-weight: normal; /* 글자 굵기: 보통 */ color: rgba(0, 0, 0, 0.75); /* 글자 색상 지정 */ } h1 { font-size: 35px; /* 글자 크기 지정 */ line-height: 0.8; /* 줄 간격 지정. 글자 크기(35px)의 0.8배(35*0.8=28px)라는 뜻. */ margin: 0; /* 기본 여백 제거 */ padding: 20px; /* 내부 여백 지정 */ } h3 { line-height: 10px; /* 줄 간격 지정. 크기는 10px. */ margin: 0; /* 기본 여백 제거 */ padding: 10px; /* 내부 여백 지정 */ } /* 그림자 클래스 */ .shadow1 { color: red; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 그림자 효과 지정. 나열된 순서: 가로거리,세로거리,번짐정도,색상 지정 */ } .shadow2 { color: blue; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 그림자 효과 지정. 나열된 순서: 가로거리,세로거리,번짐정도,색상 지정 */ } /* 텍스트 대소문자 문자 변환 */ .capitalize { /* 첫 글자만 대문자로 변환 */ text-transform: capitalize; } .uppercase { /* 모든 글자를 대문자로 변환 */ text-transform: uppercase; } .lowercase { /* 모든 글자를 소문자로 변환 */ text-transform: lowercase; } .fullwidth { /* 모든 글자를 전각(가로세로 비율이 동일한 문자)으로 변환 */ text-transform: full-width; } /* 글자 간격 조절 */ .letter-spacing { letter-spacing: 2px; /* 글자 간격 조절(px말고 em도 사용 가능) */ } /* 블록 레벨 요소 : 혼자 한 줄을 다 차지하는 요소. ex. <p>, <h1> ~ <h6>, <div> */ /* 인라인 레벨 요소 : 한 줄을 다 차지하지는 않는 요소. ex. <span>, <a>, <strong> */ /* 위 두 가지 다 '박스 모델 요소'라고 부름. */ /* box width,height,border 두께,padding */ .box1 { width: 500px; /* 고정 너비 */ height: 150px; /* 고정 높이 */ border: 2px solid black; /* 테두리 두께, 선 종류, 색상 */ padding: 10px; /* 테두리 안쪽 여백 */ } .box2 { width: 65%; /* 가변 너비: 브라우저 창 크기에 따라 바뀜 */ height: 150px; /* 고정 높이 */ border: 2px solid black; /* 테두리 두께, 선 종류, 색상 */ padding: 10px; /* 테두리 안쪽 여백 */ } .box3 { width: 400px; /* 고정 너비 */ height: 150px; /* 고정 높이 */ border: 2px solid black; /* 테두리 두께, 선 종류, 색상 */ padding: 10px; /* 테두리 안쪽 여백 */ } .box4 { width: 65%; /* 가변 너비: 브라우저 창 크기에 따라 바뀜 */ height: 150px; /* 고정 높이 */ border: 2px solid black; /* 테두리 두께, 선 종류, 색상 */ padding: 10px; /* 테두리 안쪽 여백 */ } .box5 { width: 700px; /* 고정 너비 */ height: 150px; /* 고정 높이 */ border: 2px solid black; /* 테두리 두께, 선 종류, 색상 */ padding: 10px; /* 테두리 안쪽 여백 */ } /* box sizing, shadow */ .box1 { box-sizing: border-box; /* 테두리와 안쪽 여백을 포함한 너비, 높이 */ box-shadow: 10px 10px 5px gray; /* 그림자: 수평, 수직, 흐림 정도, 색상 */ } .box2 { box-sizing: content-box; /* 테두리와 안쪽 여백을 제외한 너비, 높이 */ } .box3 { box-sizing: border-box; /* 테두리와 안쪽 여백을 포함한 너비, 높이 */ box-shadow: 10px 10px 5px gray; /* 그림자: 수평, 수직, 흐림 정도, 색상 */ } .box4 { box-sizing: border-box; /* 테두리와 안쪽 여백을 포함한 너비, 높이 */ } /* border-style, border-width, border-color, border-radius */ .box1 { border-style: dashed; /* 테두리 종류 지정: 파선 */ border-width: 2px; /* 테두리 두께(위아래양옆 모두 2px) */ border-right-color: blue; /* 테두리 색상 지정 */ border-top-left-radius: 10px; /* 좌측 상단 테두리 둥글게 */ } .box2 { border-style: dotted; /* 테두리 종류 지정: 점선 */ border-width: 10px 5px 3px 1px; /* 테두리 두께(위 오 아래 왼 순서) */ border-top-color: red; /* 테두리 색상 지정 */ border-bottom-right-radius: 10px; /* 우측 하단 테두리 둥글게 */ } .box3 { border-style: double; /* 테두리 종류 지정: 이중선 */ border-width: thick thick thin; /* 테두리 두께(위 오 아래 순서, 왼의 속성값이 없는데, 이럴 때는 마주보는 오를 따라감.) */ border-left-color: red; /* 테두리 색상 지정 */ } .box4 { border-style: groove; /* 테두리 종류 지정: 홈 모양 */ border-width: thick thin; /* 테두리 두께 */ border-bottom-color: orange; /* 테두리 색상 지정 */ } /* margin 속성 */ .box1 { margin: 10px; /* 상하좌우 여백 */ } .box2 { margin: 10px 20px; /* 상하, 좌우 여백 */ } .box3 { margin: 10px 20px 30px; /* 상, 좌우, 하 여백 */ } .box4 { margin: 10px 20px 30px 40px; /* 상, 우, 하, 좌 여백 */ } .box5 { margin: 10px auto; /* 상하 여백 10px, 좌우 여백 자동 이 방법을 쓰면 웹 문서를 중앙에 배치할 수 있음 */ } 1. 06-1 ~ 06-2 위와 같이 6챕터에서 필요한 내용들을 공부하며, 스터디원들에게 낼 퀴즈를 아래와 같이 만들어 보았습니다. 다음 스터디 때부터 매회 퀴즈를 만들 때마다 규칙을 정했습니다. 아예 0부터 시작해서 새로운 것을 만드는 것이 아니라, 지난주에 만들었던 것에서 추가로 얹어서(혹은 약간의 수정 후 얹기) 퀴즈를 제작하면서, 출제자도 보다 편하게 문제를 만들고, 풀어보는 학우들도 진입장벽이 높지 않도록 하기로 정하였습니다. 제가 저번주에 만든 문제들에서 6챕터 내용을 얹은 코드는 다음과 같습니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3회차 스터디 퀴즈(최수원)</title><style> h1 { color: maroon; /* 글자 색상: 짙은 적갈색 */ padding: 10px; /* 테두리 안쪽 여백 */ margin: 10px; /* 테두리 바깥쪽 여백 */ border-radius: 10px; /* 테두리 둥글게 */ background-color: orange; width: 190px; /* 너비를 30%로 설정 */ } p { text-align: left; /* 텍스트 정렬 - 왼쪽 */ color: black; /* 글자 색상: 짙은 적갈색 */ padding: 10px; /* 테두리 안쪽 여백 */ margin: 10px; /* 테두리 바깥쪽 여백 */ border: 2px solid black; /* 테두리 두께, 선 종류, 색상 */ border-radius: 10px; /* 테두리 둥글게 */ background-color: pink; /* 배경색: 연한 분홍색 */ } </style> </head> <body> <h1>06 챕터 퀴즈</h1> <h2>최강전전</h2> <p> 왜 전전은 <b>최강전전</b>이라 불리는 것인가. <br> 전자전기공학부는 <em>공과대학 대표 학과(?)</em>로 취업이 잘되기로 유명하다. <br> 트랙도 정말 다양해서듣고 싶은 과목을, 골라 들을 수 있다고 생각할 수는 있다. <br> 하지만 올해는.. 교수님들의 대거 연구년 풍년으로 인해 학생들의 아우성이 터져나오고 있다. </p> </head> </body> </html> 2. 교재 07-1 & 07-3 7챕터 내용을 추가해서 제작한 퀴즈는 아래와 같습니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3회차 스터디 퀴즈(최수원)</title> <style> h1 { color: maroon; /* 글자 색상: 짙은 적갈색 */ padding: 10px; /* 테두리 안쪽 여백 */ margin: 10px; /* 테두리 바깥쪽 여백 */ border-radius: 10px; /* 테두리 둥글게 */ background-color: orange; width: 190px; /* 너비를 30%로 설정 */ } .shadow1 { color: black; text-shadow: 4px 4px 4px red; /* 그림자 효과 지정. 나열된 순서: 가로거리,세로거리,번짐정도,색상 지정 */ } form { padding: 10px; /* 테두리 안쪽 여백 */ margin: 10px; /* 테두리 바깥쪽 여백 */ border: 2px solid black; /* 테두리 두께, 선 종류, 색상 */ border-radius: 20px; /* 테두리 둥글게 */ } </style> <h1>07 챕터 퀴즈</h1> <h2>맥북 주문하기</h2> <form> <fieldset class = "shadow1"> <legend><strong>맥북 주문하기</strong></legend> <label for="macbook"><strong>맥북 모델</strong>을 선택하세요:</label> <select id="macbook" name="macbook"> <option value="맥북에어">맥북에어</option> <option value="맥북프로">맥북프로</option> </select> <br><br> <label for="color"><strong>색상</strong>을 선택하세요:</label> <select id="color" name="color"> <option value="실버">실버</option> <option value="스페이스그레이">스페이스그레이</option> <option value="그래파이트">그래파이트</option> </select> <br><br> <label for="storage"><strong>저장 용량</strong>을 선택하세요:</label> <select id="storage" name="storage"> <option value="256GB">256GB</option> <option value="512GB">512GB</option> <option value="1TB">1TB</option> </select> </fieldset> </form> </head> </body> </html> 3. 교재 08-1 ~ 08-3 8챕터 내용을 추가해서 제작한 퀴즈는 아래와 같습니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3회차 스