개발하세영

일상적으로 쓰이지는 않지만 코딩을 공부하며 자주 접하는 영어 단어들 무엇을 뜻하는지는 대부분 눈치로 알고 있으나 사과 = apple 처럼 바로 튀어나오지 못 하는 이 상황이 레퍼런스를 읽을 때 방해가 된다고 생각했다. 레퍼런스를 자주 읽는 습관을 들이겠다고 다짐 했기 때문에 (1). 이러한 단어들이 가리키는 바를 정확히 숙지하고 무엇보다 (2). 익숙해질 필요성을 느꼈다. 평소 알고 있다고 생각하던 단어들 까지도 정확히! 이해하는 것이 이 글의 목표이기 때문에 정말 사소한 것까지 하나하나 정리 할 예정이다. 분야를 가리지 않고 일단 무작정 기록한다. 목표를 이루는 것에서 멈추지 않고 나만의 표현으로 정리할 수 있다면 더할나위 없다. element (요소) HTML 문서나 웹 페이지를 이루는 개별적인 요소..

웹 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. 일반적..