Happy coding

세상에는 다양한 서비스들이 존재하며, 각각의 다양성과 복잡성이 공존한다. 마찬가지로 그것을 코드로 표현하려고 한다면 조금 더 명확한 의미를 부여하여 전달하는 것이 필요하다. 쓰임새에 맞게 적절한 의미와 elements를 가지고 HTML 문서를 작성하면 웹 접속 장비에서도 해석이 수월해진다고 한다. 이번 시간에는 HTML 을 조금 더 의미있게 작성하기 위해 role 이라는 속성에 대해서 알아보자! role은 웹 접근성을 위해 나왔으며 위젯, 구조 및 동작에 대한 의미 정보를 올바르게 전달을 하기 위해 나왔습니다. 즉 elements의 확장 개념으로 좀 더 명확한 구조와 의미를 부여하는 역할을 합니다. 참조 이미지: https://www.w3.org/TR/wai-aria-1.1/ Role은 아래의 카테고리를..

이번에는 모바일에서 헤더 색 변경하는 방법에 대하여 알아보겠습니다.저는 헤더 색은 기존 맨위에 있는 색에 따라 변경되는 줄 알았는데 찾아보니 직접 변경할 수 있다는 사실을 알게되었습니다. 1. Chrome, Firefox OS, Opera 색 변경 태그를 영역에 추가시켜주면 됩니다. 2. IOS Safari 색 변경위와 똑같이 태그를 영역에 추가시켜주면 됩니다. content 속성에 아래와 같은 옵션을 넣을 수 있습니다. 옵션 1 : default - 기본 스테이터스 바 옵션 2 : blue - 파랑으로 색 변경 (모든 색 가능) 옵션 3 : blue-translucent - 투명한 파랑색으로 변경 (모든 색 가능) 이상으로 오늘 포스터는 마치겠습니다 다들 즐거운 해피코딩 하세요 ~

HTML 태그 정리 Documnet Wrapper(문서 바깥)(X)HTML 버전을 나타냄HTML 문서페이지 정보페이지 컨텐츠 Comment (주석) HTML안에 주석을 나타냄 Page Information (페이지 정보)태그정의사용기본 URL- 문서에 포함된 모든 상대 URL들의 기준 URL을 나타냄META 정보- META 관련 요소들로 나타내어질 수 없는 메타데이터를 나타냄페이지 제목- 브라우저의 타이틀 바나 페이지의 탭에 보여지는 문서의 제목을 정의함관련 자원- 현재 문서와 외부 리소스와의 관계를 명시스타일 자원- HTML의 일부에 대한 스타일 정보를 포함스크립트 자원- (x)HTML 문서내에 실행 가능한 스크립트를 포함하거나 참조 Document Structure (문서 구조)태그정의사용Displa..

HTML 태그 정리 Text Markup (텍스트 마크업)태그정의사용Display해당 내용의 중요함을 나타냄- strong을 중첩하면 중첩할 수록 중요하다고 할 수 있음 - 브라우저에서 자동 font-weight가 bold처리 됨Inline-Block텍스트를 굵게 장식하는 스타일 요소- 키워드를 부각하기 위해 사용 - 의미가 크게 없으므로 강조를 하기위한 목적으면 em, 중요성을 목적으로 하면 strong, 텍스트를 부각하려면 mark를 사용Inline-Block하나의 문서 내에 다른 문맥과의 관련성을 나타내기위해 마킹되거나 하이라이트 텍스트 표현- 검색어와 매칭되는 부분을 하이라이팅 하기 위해 사용 - 특정 부분의 주의를 끌기 위해 사용 - 브라우저에서 자동 Background 효과가 처리 됨Inlin..

HTML 태그 정리 List Markup (리스트 마크업)태그정의사용Display순서가 있는 목록을 나타냄- 보통 요소를 포함하고 있고 의 value 속성 값을 통해 목록 아이템의 순번을 지정 - reversed, start, type의 속성들이 있음 - 브라우저에서 자동으로 아라비아 숫자로 표현Inline-Block순서가 중요하지 않은 목록을 나타냄- 보통 요소를 포함하고 있음 - 브라우저에서 자동으로 블릿으로 표현Block목록을 나타냄- 부모가 이면 순서가 있는 값을 가지고, 부모가 이면 순서가 없는 값을 가짐lnline-Block용어, 설명 그룹에서 설명, 정의, 값을 나타냄- 용어를 정의 하는 요소와 용어를 설명하는 요소를 포함Block요소의 용어, 설명 그룹에서 용어나 이름을 나타냄- 의 하부 ..

HTML 태그 정리 Tables (테이블) 1. 정의데이터를 표의 형태로 나타냄 2. 사용요소를 레이아웃 목적으로 사용하면 안됨 속성은 여러가지가 있지만 MDN에서는 태그 안에 속성을 사용하기 보다는 CSS을 이용한 스타일링 하는 것을 추천 3. DisplayBlock 1. 정의요소의 Header행을 그룹화 하기 위해 지정 2. 사용, , 다음에 기술보통 요소를 포함 3. DisplayInline-Block 1. 정의요소의 데이터행을 그룹화하기 위해 지정 2. 사용, , , , 다음에 기술 3. DisplayInline-Block 1. 정의요소의 푸터행을 그룹화하기 위해 지정 2. 사용보통 요소를 포함, , 다음에 기술 요소 다음에 이전에 기술 3. DisplayInline-Block 1. 정의요소의 제..

HTML 태그 정리 Common character entities문자설명Entity nameEntity NumberSpace &#160Greater than>>&Ampersand&&"Double quotation mark""’Single quotation mark&aposl'@“AT” SYMBOL@@!Exclamation!!#Number##$Dollar$$%Percent%%&Ampersand&&(Left parenthesis(()Right parenthesis))[Left Square bracket[[]Right Square bracket]]?Question??=Equals==,Comma&comma..

HTML 태그 정리 Core Attributes (공통 속성) 1. id고유 한 요소를 식별 하기 위해 사용하며 id에 해당하는 요소를 참조하기 위해 CSS와 Javascript에서 사용가능함1 HARIBO 2. class여러개 해당하는 요소가 동일한 값을 가질수 있게 하며 css 요소를 참조하는데 사용1 2 3 HARIBO KEYBOARD MOUSE 3. title요소에 제목을 추가할 수 있으며 모든 브라우저는 요소가 겹쳐서 표시되거나 포커스가 있을 때 이 속성 값을 표시 4. style요소에 스타일을 적용할 수 있으며 요소 안에는 CSS 코드를 사용1 글자색은 노랑이며 백그라운드 색은 블랙 style 요소는 되도록 HTML안에 사용하지 않는 것이 좋으며 직접 .css파일을 추가하여 style을 주는 ..