Happy coding

@mixin 은 Sass 언어 전체에서 가장 많이 사용되는 기능 중 하나이며, 재사용성과 DRY(반복을 하지 마라) 컴포넌트의 핵심이다. 버튼, 아이콘 등을 Class로 만들어 놓고 필요한 태그 스타일링에 따라 클래스를 추가로 넣어주는 경우가 있었는데 @mixin 을 사용하면 이러한 부분들을 손쉽게 반복적인 작업을 할 수 있다. mixin 을 선언할 때는 @mixin 지시자를 사용하며, 적용 시 @include 지시자를 사용한다. 선언 및 적용 Sass // 버튼 스타일링 // @mixin 선언 @mixin button { border-color: #eaeaea; border-width: 1px; cursor: pointer; padding: 0.75em 1em; height: 50px; text-ali..

세상에는 다양한 서비스들이 존재하며, 각각의 다양성과 복잡성이 공존한다. 마찬가지로 그것을 코드로 표현하려고 한다면 조금 더 명확한 의미를 부여하여 전달하는 것이 필요하다. 쓰임새에 맞게 적절한 의미와 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 - 투명한 파랑색으로 변경 (모든 색 가능) 이상으로 오늘 포스터는 마치겠습니다 다들 즐거운 해피코딩 하세요 ~

Flexboxflex의 유연성을 뜻하며 요소들을 자유자제로 위치시키는 뜻입니다.새롭게 CSS3 명세에 반영된 레이아웃 모듈이며, 요소들이 수용된 공간을 어떻게 효과적으로 채워나갈지에 대해 고민하다가 만들어진 새로운 레이아웃 방식 Flex Container - 부모 display그릇에 해당하는 부모 요소 (display: flex 혹은 display: inline-flex로 선언).flex-container { display: flex } flex-direction컨테이너 안에 위치하는 자식 요소에 어떤 방향성을 줄 것인지 결정.flex-container { display: flex; flex-direction: row; }row : 기본 값. 아이템이 수평방향(행)으로 흐르며, 방향성은 좌에서 우row-..

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. 정의요소의 제..