조금씩 천천히

7. Html forms ### label, input - input: type 에 따라 자동완성이 달라지기도 하고, 모바일의 경우 가상키보드의 레이아웃이 달라진다. 데스크탑은 입력값이 달라진다. - label: label 의 for 값과 input 의 id 에 동일한 값을 넣으면 label 을 선택시 input 에 포커스가 간다. Input 과 label 을 항상 연결해준다. ### fleldset, legend : form 내부에서 구역을 나눌 때 사용한다 - fieldset : form 을 그루핑 시켜 관심사가 묶여있는 여러 input 요소를 그루핑 할 때 사용 - legend: fieldset 으로 그루핑된 영역의 타이틀을 표시한다 ### button - button 의 기본 목적은 form 을 ..

오늘 읽은 범위 2장 의미 있는 이름 책에서 기억하고 싶은 내용을 써보세요. 변수나 함수, 클래스의 이름은 다음과 같은 굵직한 질문에 모두 답해야한다. 존재 이유는? 수행 기능은? 사용 방법은? 의도를 분명히 밝혀라 그릇된 정보를 피하라 - 그릇된 단서는 코드 의미를 흐린다. 의미 있게 구분하라 - 읽는 사람이 차이를 알도록 이름을 지어라 발음하기 쉬운 이름을 사용하라 검색하기 쉬운 이름을 사용하라 인코딩을 피하라 자신의 기억력을 자랑하지 마라 - 전문가 프로그래머는 명료함이 최고라는 사실을 이해한다. 그들은 자신의 능력을 좋은 방향으로 사용해 남들이 이해하는 코드를 내놓는다. 클래스 이름 - 클래스 이름과 객체 이름은 명사나 명사구가 적합하다. 동사는 사용하지 않는다. 메서드 이름 - 메서드 이름은 동..

오늘 읽은 범위 추천사 0.들어가면서 1. 깨끗한 코드 책에서 기억하고 싶은 내용을 써보세요. 품질은 하늘에서 뚝 떨어진 위대한 방법론이 아니라 사심 없이 기울이는 무수한 관심에서 얻어진다. 코드에 정직하고, 코드의 상태에 관하여 동료들에게 정직하고, 무엇보다도, 자기 코드에 대해서 자신에게 정직하라는 뜻이다. 연습해 연습! 오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요 그동안 일을 하면서 작성한 코드들은 내 자신에게 정직한 코드인가? 라는 생각이 들었다. 동작이 되는가에 초점이 맞춰진..개선따윈 하지 않은 지금 당장 내 눈앞에서만 돌아가는 코드만 작성해왔다. 그래서 위 세 문장이 가장 기억에 남는다. 한번 작성하고 잊어버린 코드들. 스스로 생각하기에도 만족하지 못하고 이정도 오류는 오류도 아니지..

6. Html table (tabular data) ### table: 표 요소 // 테이블의 기본 구조 표의 제목 표의 셀 // td의 개수는 다른 tr 의 td 개수와 항상 동일해야한다. 표의 셀 표의 셀 표의 셀 ### caption: 테이블의 제목, 설명을 나타낼때 사용하는 요소. 필수요소는 아니지만 가급적 작성하는 것이 좋다. 2020 넷플릭스 기대작 2020 넷플릭스에 업데이트 되는 콘텐츠를 제목, 작성일로 요약해보았습니다. 제목 작성일 안녕 조제, 호랑이 2020-12-31 ### thead, tbody, tfoot - 테이블 제목, 본문, 결과 영역. 순서는 상관 없으나 순서대로 작성하는 것이 좋다. 2020 넷플릭스 기대작 2020 넷플릭스에 업데이트 되는 콘텐츠를 제목, 작성일로 요약해..

4. Text-level semantics Html 요소 내에서 텍스트로 취급되는 요소들 텍스트 사이에서 텍스트로 취급되는 요소 ### a 요소 - html 내에서 하이퍼텍스트(링크)를 생성할 때 사용하는 요소. Href 속성은 필수가 아님. 활성화/비활성화 상태를 나타낼때 href 속성을 넣었다 뺄 수 있다. A 내부에는 a 태그를 넣을 수 없다.(= 인터렉티브 콘텐츠 내에는 다른 인터렉티브 콘텐츠를 넣어서는 안된다. ) - a 요소의 해시링크 : href 와 id 의 해시링크를 연결해주는 것 ### em, strong 요소 - 강조를 나타내는 요소 - strong : 조금 더 강한 강조, warning, attention , 꼭 봐야해! 같은 느낌, 주의하세요 느낌 - em : 보편적인 강조. ###..

1일차. 클린코드 구매인증!

1. Document metadata - head 내부에 들어가는 주요 요소들 ### Meta 요소 - 해당 문서 혹은 애플리케이션의 메타데이터를 담는 요소 1. Charset - 문자 인코딩을 어떻게 할 것인지 결정 - Utf-8 : 전세계 언어 대부분을 지원 - euc-kr : 한국어와 영문을 지원 2. Viewport - 모바일 브라우저에서 화면을 어떻게 노출시킬 지 - 뷰포트가 없으면 모바일 브라우저에서 화면 렌더링이 이상하게 동작함 3. Seo 에 도움을 주는 메타데이터 - description : 사이트에 대한 정보 // description 이 없으면 웹페이지의 body 요소의 첫번째 의미있는 요소를 긁어가진다. 4. 소셜메타데이터 // open graph protocol : 페이스북에서 개..

Html lang=“ko” // 랭귀지코드 -> 작성하는것이 접근성 측면에서 좋다. Html 자식요소로는 head, Body 만 온다. Head // 다른 문서나 머신에게 문서에 대한 정보를 제공하는 데이터(메타 데이터)를 작성 Head 요소 내부의 필수적인 요소 3가지 Title // 문서 제목 Meta charset=“utf-8” // 작성을 안하면 특정 언어가 깨지게 된다. Meta name=“viewport” // 뷰포트, 문서 랜더링시 어떤 방식으로 랜더링 될지 결정하는 스펙, 주로 모바일에서 자주 사용 Body // 문서의 핵심 내용, 기본적으로 사용자 눈에 보인다 Doctype 문서의 타입과 버전을 나타낼때 사용, 항상 해당문서의 첫번째 줄에서 작성, svg 에서도 사용됨 선언을 하지 않을 ..

안드로이드 디바이스를 크롬 개발자도구를 활용해서 디버깅 하는 방법. macOS 를 사용하기 때문에 아이폰 화면은 xcode 의 시뮬레이터를 활용해서 디버깅을 하게 되는데, 안드로이드 디바이스의 경우는 실물 기기를 활용해서 디버깅을 하고 있다. 필요한 것은 안드로이드 디바이스, 연결케이블, pc, 크롬브라우저! 간단하다. 디바이스와 pc를 케이블로 연결 한 후, 안드로이드 디바이스 > 설정 > 개발자옵션 > USB 디버깅을 on으로 변경해준다. 그럼 위 이미지처럼 디버깅을 허용할지 물어보는 팝업이 뜬다. 당연히 '허용' 그리고 크롬 브라우저에서 개발자도구를 연 다음 console > more tools > remote devices 를 선택하게 되면 하단 콘솔창 옆에 리모트 디바이스 창이 뜬다. 여기서 c..

꽤 오래전에 작업했던 pc 마크업에서 발견했던 이슈. a태그 안에 a태그를 중첩해서 사용할 수 없기 때문에 a 태그를 absolute position 으로 띄워서 작업하는 경우가 종종 있는데, ie 하위 브라우저에서 선택영역이 잡히지 않는 이슈가 있었다. See the Pen absolute link not work in IE by eunhye Park (@kurepark) on CodePen. 위처럼 디자인상 선택영역 안에 선택영역이 있을 경우에 a.outer 처럼 absolute 로 띄운 후 덮어쓰는 경우가 있는데, 크롬 브라우저나 최신 ie11에서도 잘만 잡히던 선택 영역이 ie10 이하 브라우저에선 텍스트 부분이 선택되지 않는 이슈가 있었다. codepen으로 확인하려고 했으나 codepen과 j..