전체 글 93

빔캠프_OACSS 시리즈(1~3강)

1. CSS 선택자 우선순위 이모저모 같은 선택자 레벨에서 가상클래스(예. :hover)를 적용할 경우, 우선순위가 더 높아진다. 2. img요소 하단에 생기는 알 수 없는 빈 공간 파헤치기 이유: 이미지가 인라인 요소이기 때문에 인라인 기준점인 베이스라인 위로 배치가 된다. 그리고 알파벳 y 등 베이스라인을 넘는 텍스트 들이 있기 때문에 베이스라인 아래에도 공간(decender height)이 생긴다. 해결방법: 초기화를 해주어야 한다. 권장하지 않는 간단한 해결방법: 이미지가 인라인 요소라 발생하는 문제이기 때문에 display:block으로 바꾸어 준다. 하지만 나중에 의도치 않는 혼란이 발생할 수 있으므로 지양한다. 이유는 협업 시 보통 이미지는 인라인요소라고 생각하기 때문에 문제가 발생할 수 있..

독서의 종류

호준님께서 독서에는 여러 종류가 있다고 하시며 추천해주셨다. 각 공부 방법에 맞는 독서방법을 이용하면 공부의 효율을 극대화 할 수 있을 것이다. 예전에 나도 독서의 방법에 대해 나도 고민하며 정독과 통독의 구분하여 효과를 봤던 부분도 있는데, 이렇게 보니 아직 내가 모르는 독서법도 아직 많다. (가만 보면 호준님은 정말 공부에 대해 일가견이 있으신 분 같다!) 음독: 소리를 내며 읽는 것. 암기력에 도움이 됨. 정독: 한 권의 책을 뜻을 새겨가며 읽는 방법. 시험공부. 속독: 빠른 속도로 필요한 정보만을 파악하며 읽는 것. 흥미 위주의 책에 잘 어울림. 다독: 여러 책을 두루 많이 읽는 것. 교양과 지식 쌓기에 좋다. 묵독: 소리를 내지 않고 읽는 것. 내용을 깊이 새기는데 효과적. 편독: 좋아하는 분야..

잡담 2022.04.06

22.04.06_css 문제풀이 과제

아래 문제를 풀어보세요. Apple Mango Banana Melon Strawberry 위의 마크업에서 .a + li { background:red;} li + li + li { font-size:30px;} 어떤 li가 빨간배경? 어떤 li가 글자크기가 변경될까요? 그 이유는요? 정답 빨간배경: Banana Melon 이유: +는 인접 형제 셀렉터이다. 따라서 .a 요소의 바로 다음에 위치한 형제 요소인 부분에 스타일을 적용해준다. 따라서 a클래스인 망고와 바나나의 다음 li요소인 바나나 멜론이 각각 스타일의 적용을 받는다. 글자크기 변경: Banana Melon Strawberry 이유: 위와 같은 이유로, li의 다음 형제 요소인 li의 또 다음 형제 요소는 스타일의 적용을 받는다. 따라서 첫번째..

8일차_CSS(1)

더보기 시간표 09:00~12:00 CSS(1) 12:00~13:00 점심, 안경맞추기 13:00~18:00 CSS(1) 1. RESET CSS 1.1 왜 reset css가 필요한가? 브라우저 제작사들마다 각각 브라우저가 제공하는 요소의 기본 스타일이 모두 다릅니다. 1.2 대표적인 reset css 1.2.1 에릭 마이어의 reset css 기존 스타일을 모두 제거하는 적극적인 방법입니다. 인터넷에 에릭마이어 reset css라고 검색하면 나옵니다. 코드 더보기 /* reset.css */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, b..

모던 자바스크립트 Deep Dive 여정의 시작!!

드디어 구매! 프로그래밍 언어 책을 보면 동물 그림으로 만들어진 책이 꽤 많다. 흔히들 말하는 코뿔소, 도마뱀 등이다. 나는 오늘 드디어 그중에서 도마뱀 책인 "모던 자바스크립트 Deep Dive"책을 구매했다! https://book.naver.com/bookdb/book_detail.nhn?bid=16710547 모던 자바스크립트 Deep Dive 269개의 그림과 원리를 파헤치는 설명으로 ‘자바스크립트의 기본 개념과 동작 원리’를 이해하자!웹페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도로 태어난 자바스크립트는 과도 book.naver.com 멋쟁이 사자처럼에서 같은 팀인 팀원들 중 몇 분이 이 책으로 스터디를 하자고 하였다. 이때 아니면 내가 언제 이 책을 도전해볼까 싶어 바로 구매를 하..

스타트업 A to Z_ 이호준 강사님

나는 개인적으로 숲을 보며 그림을 그리며 "왜?"라는 궁금증이 해소가 되어야 동기부여가 되는 타입이다. 스타트업도 항상 궁금한 곳이였다. 도대체 스타트업은 어떻게 세워지는 것인가? 시리즈A가 무엇이고 투자는 어떻게 받는 것인가? 추후 나중에 내가 스타트업을 창업하게 될 지 아직은 미지수이지만, 언젠가 나도 뜻이 많는 친구들이 있다면 창업을 해보고 싶은 로망이 있다. 다들 그런 로망 하나쯤은 있지 않나요? 혹시 내가 나중에 취업을 하더라도, 대표의 입장에서 바라보는 회사를 조금이라도 이해할 수 있다면, 분명 대표의 가려운 부분을 긁어줄 수 있는 센스있는 직원이 될 수 있을 것이다. 그렇다면 스타트업은 어떻게 설립되며 어떻게 운영되는가? 스타트업 창업 - 대표 != 법인. 공동창업자가 있을 경우 주식을 나눠..

22.04.05_달력 만들기

을 이용하여 달력을 만들어보자! 오늘 배운 을 이용하여 달력을 만들어보았다. 현재 일 수를 하나하나 적어넣는 방식으로 만들었다. 3월 부터 일수를 하나하나 지정하는 것이 너무 불필요한 것처럼 느껴져서 작업하지 않았다. 나중에 JS나 React를 이용하면 훨씬 쉽게 달력을 만들 것 같으니, 테이블을 HTML Tag로 만들 수 있는지에 집중하는 것이 효율적일 듯 하다. HTML코드 더보기 2022 Act as if it were impossible to fail 실패가 불가능한 것처럼 행동하라 1 SUN MON TUE WED THU FRI SAT 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 2 SUN M..

7일차_HTML Living Standard (3)

더보기 시간표 09:00 ~ 11:50 HTML Living Standard (3)_table 12:00 ~ 13:00 점심시간 13:00 ~ 18:00 HTML Living Standard (3)_마무리 / CSS 지난과제 구글폼 작성 HTML 구조를 살펴주는 웹페이지 The W3C Markup Validation Service The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website. valid..

HTML&CSS 웹사이트 개발과 디자인 기초_7장 폼(Form)

7. 폼(Form) 전통적으로 '폼'이라는 용어는 정보를 기입하는 부분이 있는 인쇄된 문서를 의미한다. 폼 컨트롤이란? 사이트 방문자로부터 정보를 수집하는데 사용되는 다양한 입력 유형. 예) 텍스트 입력: 텍스트 입력(한 줄), 패스워드 입력, 텍스트 영역(여러 줄) 선택: 라이도 버튼, 체크박스, 드롭다운 박스 폼 전송: 전송 버튼, 이미지 버튼 파일 올리기: 파일 업로드 폼의 동작 방식 1. 사용자가 폼을 입력한 후에 버튼을 누르면 정보가 서버에 전송된다. 2. 각 폼 컨트롤의 이름은 사용자가 입력하거나 선택한 값과 함께 서버에 전송된다. 3. 서버는 PHP, C#, 자바 같은 프로그래밍 언어를 이용하여 정보를 처리한다. 대부분 정보는 DB에 저장된다. 4. 서버는 수신한 정보를 토대로 브라우저로 보..