개발하세영

사전캠프 기간에 지급된 강의지만 저는 본과정 직전에 합류했기 때문에 천천히 따라가고 있는 중입니다! 내일배움캠프: Node.js_4기 사전캠프 TIL 웹브라우저의 작동 원리 나(=클라이언트)는 서버에 네이버를 띄워달라고 요청한다 여기서 말하는 요청이란 https://www.naver.com/ 를 검색창에 입력하는 방식 그럼 서버는 나에게 미리 준비한 네이버의 코드들을 구현해서 보여준다 HTML 기초 HTML이란? 웹에서 보여지는 부분의 뼈대를 작성할 수 있는 언어 안에는 눈에 보이지 않는 정보들을 담는다 안에는 눈에 보이는 부분(웹페이지의 내용)들을 작성한다 로그인 페이지 아이디, 비밀번호를 입력해주세요 ID: PW: 로그인하기 .hml 파일 생성 -> html:5 혹은 ! 이용하여 기본코드 자동완성 ..

웹 UI 개발 코칭스터디 1기/미니 프로젝트 개념강의 | 7. 레이아웃 - 6) 속성 - position position 속성을 사용해 아래의 화면을 구현하고자 합니다. 아래의 화면에서 볼 수 있듯이 스크롤을 내려도 상단바는 움직이지 않는데요, (페이스북의 상단바를 생각하면 쉽습니다) 지금까지 배운 내용들을 종합하여 빈칸의 코드를 작성해주세요. 결과) 코드) position header { position: __(1)__; top: __(2)__; left: 0; right: __(3)__; height: 75px; padding: 1 __(4)단위__; color: white; background: teal; } h1, p { margin: 0; } body, html { height: 200%; } ..

웹 UI 개발 코칭스터디 1기/미니 프로젝트 개념강의 | 6. 폰트, 텍스트 - 14) 속성 - 단어 관련 속성 word-wrap 속성을 이용해서 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정할 수 있습니다. 즉, 아래과 같이 문장이 긴 경우라면 문장이 영역을 벗어나 표현되는 경우가 발생합니다. 위의 결과를 나타내는 코드가 아래와 같을 때 1번에 들어갈 수 있는 코드를 작성해주세요. * word-wrap 이 아닌 다른 추가적인 속성을 생각해보세요!! word-wrap p { width : 400px; padding: 5px; background-color : #ddd; word-wrap : normal; ____________(1)_____________ } loremipsumdolorloremipsu..

웹 UI 개발 코칭스터디 1기/미니 프로젝트 개념강의 | 5. 단위, 배경, 박스모델 - 6) 속성 - border CSS의 속성 중 border 속성은 테두리를 그려주는 속성입니다. 아래의 형태를 갖는 테두리를 만드기 위해서는 style속성을 어떻게 작성해야 할까요? 빈칸에 들어갈 수 있는 알맞은 코드를 작성해주세요. 조건은 아래와 같습니다. 1) 테두리의 굵기는 20px 입니다. 2) 테두리의 색상은 검정색입니다. 3) 두 줄의 검정색 테두리를 갖습니다. css border 속성 실습 6번) border 축약형 관련 문제입니다. border 축약형은 아래와 같은 구조를 가집니다. border: [-width] [-style] [-color]; [-width]: 테두리의 굵기를 결정합니다. [-styl..

웹 UI 개발 코칭스터디 1기/미니 프로젝트 개념강의 | 4. CSS 이해하기 - 6) 문서 구조 관련 선택자 DOM의 요소들은 다양한 방법으로 셀렉트할 수 있습니다. 자바스크립트의 document.querySelector() 메서드도 이러한 방법 중 하나입니다. 가령 아래와 같은 구조를 갖는 HTML에서 document.querySelector("#box") 코드를 작성한다면 id가 box인 태그를 셀렉트할 수 있습니다. boostcourse cs 위의 구조를 갖는 HTML에서 boostcourse을 셀렉트하기 위해, 어떻게 코드를 작성할 수 있을까요? 빈 칸에 들어갈 수 있는 알맞은 코드를 작성해주세요. document.querySelector("#box span ") 5번) 정답 선택자 강의를 통해..

웹 UI 개발 코칭스터디 1기/미니 프로젝트 개념강의 | 3. 콘텐츠모델, 시멘틱마크업, 블록&인라인 - 3) HTML5 시멘틱 요소 태그는 블록레벨 태그이며 태그는 인라인레벨 태그라는 차이점이 존재합니다. 의미론적인 웹(Semantic Web)을 개발하기 위해서는 혹은 태그들로만 레이아웃을 구성하는 것이 아니라 다양한 시멘틱 태그들을 사용해야 합니다. 아래의 코드는 '홈페이지 하단'에 존재하는 '주소와 같은 연락 정보'를 나타내고 있습니다. 반복적으로 태그가 쓰였다는 점을 문제점으로 볼 수 있죠. (1)과 (2)번에 쓰인 태그들을 적절한 시멘틱 태그들로 바꿔보세요. ----> (1) ----> (2) 회사 정보 서울시 강남구 역삼동 Tel : (02)123-4567 | Fax : (02)123-4567..

웹 UI 개발 코칭스터디 1기/미니 프로젝트 개념강의 | 2. HTML 태그 - 13) 폼 요소 - 4 해당 강의에서 배운 내용을 바탕으로 아래와 같이 이메일 발송 페이지를 만들어보세요. 코드 작성 조건은 다음과 같습니다. 1) '받는 사람'은 태그로 구성하며, 의 for 속성의 값은 "receiver"입니다. 2) 체크를 하거나 체크를 풀 수 있는 버튼입니다. 3) id가 important인 태그와 연결된 의 for속성입니다. 4) 100열 30행의 입력이 가능한 textarea 입니다. 5) 적합한 type 속성 값을 넣는다면 태그 안의 모든 입력 값들이 지워지는 기능을 구현할 수 있습니다. 결과) 코드) 이메일 메일 정보 _________________________(1)_______________..

웹 UI 개발 코칭스터디 1기/미니 프로젝트 개념강의 | 2. HTML 태그 - 9) 테이블 요소 - 2 테이블을 구성하는 방법에는 강의에서 학습한 내용 외에 다른 방법도 있습니다. 다음 빈 칸을 채워 아래와 같은 결과가 나올 수 있도록 코드를 작성해보세요. 결과) 코드) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 충청남도 특산물 태안 대하 서산 굴 부여 수박 토끼 인삼 아산 표고버섯 포도 쌀 토마토 Colored by Color Scripter cs 1. 2. 3. 3. 2번) 정답 rowspan과 colspan을 사용해 다양한 테이블 레이아웃을 구성할 수 있습니다. rows..

웹 UI 개발 코칭스터디 1기/미니 프로젝트 개념강의 | 1. HTML 이해하기 - 4) HTML 문법 - 태그 - 1 HTML은 태그들의 집합이며, 태그는 HTML에서 가장 중요하고 기본이 되는 규칙입니다. 대부분 태그들은 시작태그와 종료태그로 이루어져 있지만, 종료태그가 없는 단일 태그(빈 태그)도 존재합니다. 단일 태그들에는 어떤 태그들이 있는지 아래의 답안을 채워보세요. 1. Break의 약자로, 줄을 바꿀 수 있는 태그입니다. : 2. Horizontal Rule의 약자로, 수평선을 그릴 수 있는 태그입니다. : 3. image의 약자로, 이미지를 담을 수 있는 태그입니다. : 4. 일반적으로 태그 안에서 쓰이며, meta data를 정의하며 문서 그 자체를 설명하는 태그입니다. : 5. 일반적..