조금씩 천천히

8. Html interactive content ### details, summary : 모든 브라우저에서 지원하지 않는다. 사용 전 브라우저 체크가 필요. -details : 열고 닫는 인터렉션이 가능. 토글되는 형태, open 속성을 사용하면 열린상태를 기본으로 보여준다.(기본값은 닫혀있음) - summary: style 작성시 transition 을 주면 인터렉션 적용이 가능하다. loading… 이미지 다운로드 중 사운드 다운로드 중 ### dialog : 윈도우상의 모달이 노출, 혹은 버튼을 통해 박스레이아웃이 노출되는 것을 브라우저의 기본 효과로 보여주는 요소(모달창과 비슷). 기본적으로는 노출이 되지 않기 때문에 버튼을 눌렀을때 노출을 시키거나 혹은 open 속성을 활용해야 노출이 가능하다..

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 을 ..

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. 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 에서도 사용됨 선언을 하지 않을 ..

https://kure0406.tistory.com/26 아이콘이 있는 버튼만들기 아이콘이 있는 버튼을 만드는 경우가 많다 하지만 만들때마다 아이콘을 이미지태그로 넣는 경우도 있고 버튼의 배경처리를 한다음 text-indent를 이용하기도 하는데 만들다보니 규칙도 없고 버튼 kure0406.tistory.com 과거에 작성한 글을 보다가 이불킥을 할만한 글을 발견했다. 취업하고 3개월때 작성한 글이었는데, 버튼 아이콘 정렬을 이렇게 고민했나 싶다. 지금 작업하라고 하면 이렇게 하지 않았을까.... 이전 글을 다시 읽어보니 당시에는 버튼 텍스트가 2줄로 떨어지더라도 아이콘이 가운데 정렬이 되어야 했던 것 같다. 생각해보면 버튼 텍스트가 2줄이 되면 디자이너님이 의도한 버튼 모양이 깨지는 것인데, 아이콘을 ..

태그란? 태그는 '' 를 사용하여 표현하고 ''안에 태그 이름이 들어간다. 시작하는 태그와 닫는 태그가 한 쌍을 이루는데, 닫는 태그에는 '/' 기호를 사용하여 구분해준다. 그리고 시작, 종료태그 사이에 웹에 표현할 내용을 적어준다. 제목을 표현하는 heading 태그 제목을 표현하는 heading 태그 요소(element)란 시작태그, 닫는태그, 콘텐츠를 포함한 전체를 요소라고 한다. 속성 속성은 태그에 추가적인 정보를 줄 때 사용한다. 실제 표시되는 컨텐츠에는 나타나지 않는다. 속성은 속성명과 속성값으로 이루어져 있으며 시작태그의 태그명 뒤에서 속성명="속성값"의 형태로 작성한다. 안녕하세요. html!! 안녕하세요. html!! // 태그명 뒤에 공백이 없음

자바스크립트30(https://JavaScript30.com) - day1 을 만들면서 알게 된 내용들 -코드는 깃헙에 올려놓았고 JavaScript30 의 내용을 fork한 후 각 DAY폴더에 mywork.html을 만들어 작업하고 있다(start.html, finished.html은 손대지 않기!!!) ##currentTime; The HTMLMediaElement.currentTime property gives the current playback time in seconds. Setting this value seeks the media to the new time. 모질라에서 제공하는 docs에는 위처럼 설명이 나와있다. 짧은 영어로 이해한 내용을 정리하면, 'currentTime을 사용해서 시..

아이콘이 있는 버튼을 만드는 경우가 많다 하지만 만들때마다 아이콘을 이미지태그로 넣는 경우도 있고 버튼의 배경처리를 한다음 text-indent를 이용하기도 하는데 만들다보니 규칙도 없고 버튼 속 텍스트의 길이가 바뀌거나 버튼의 width가 넓어질때 등등 유연하게 대응하지 못할 경우가 많았다 그래서 두가지 종류의 버튼을 다시 만들어 보았다 흰색 버튼은 버튼의 width가 고정되어있고 글자가 길어져서 버튼의 텍스트가 떨어지더라도 아이콘이 항상 가운데에 위치할 수 있도록 만든 것이다 보라색 버튼은 최소 width가 있는 상태에서 글자 텍스트가 길어지거나 width가 100%가 되더라도 아이콘이 항상 텍스트 옆에 붙어있는 상태로 만들어졌다 이미지처럼 흰색 버튼의 텍스트는 버튼의 width가 정해져있어 텍스트가..