조금씩 천천히

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 : 페이스북에서 개..

안드로이드 디바이스를 크롬 개발자도구를 활용해서 디버깅 하는 방법. 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..

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

See the Pen slot machine by eunhye Park (@kurepark) on CodePen. 회사에서 사용해야할 일이 생겨서 만든 css slot machine 애니메이션. 해당 동작이 css로 가능할지 문의를 주셔서 실제 업무를 하기 전에 테스트로 만들어보았다. 만들기전에 대략 이런식으로 만들면 되겠지 싶었는데, 잘 안만들어져서 결국 구글의 힘을 빌렸다. 슬롯머신처럼 동작하지만 슬롯머신 디자인으로 사용할건 아니기에 불필요한 것은 만들지 않고 필요한 부분만 작업했다. transform 을 다시 공부하는 기회가 되었다. 3차원은 어렵다. 'li를 둥글게 굴려서 뱅글뱅글 돌리면 되지 않을까' 여기까진 생각이 닿았지만 막상 구현하는건 어려웠다..ㅎㅎ;; 아직 많이 부족함을 느꼈음..ㅠㅠ ..

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