html
rel 속성 - noopener, noreferrer, nofollow
HTML의 a tag에 rel이라는 속성을 보신적이 있으실 겁니다. a tag는 보통 href에 target=”_blank” 같은 속성만 사용해보고 rel 속성에 대해 잘 모르는 경우가 대부분입니다. 저도 이번에 HTML을 작성하면서 “이 rel 속성의 역할은 뭘까?” 라는 생각이 들어 찾아봤습니다. rel 속성 rel 속성은 현재 HTML 문서와 링크된 두 문서 사이의 관계를 명시하는 데 사용됩니다. 이 속성은 href 속성과 함께 사용되며, 검색 엔진은 이를 통해 링크에 대한 추가 정보를 파악할 수 있습니다. rel 속성은 주로 (하이퍼링크), (외부 스타일시트 연결), (이미지 맵 영역), (폼 제출) 태그와 함께 사용됩니다. : 링크를 표현하는 태그입니다. 예시 링크 : 외부 스타일시트를 연결하는..
Shadow DOM - DOM을 캡슐화 하자!
Shadow DOM이란? 웹 페이지의 DOM 트리 안에 또 다른 독립되는 DOM 트리를 생성하는 방식입니다. Shadow DOM을 이용하면 웹 페이지 내의 요소들을 잘 캡슐화하여 외부에서의 접근 제한하고, 컴포넌트 간의 의존성을 관리할 수 있습니다. 우리가 많이 사용하는 input, button, video.. 등등 html 요소들이 shadow DOM으로 만들어진 요소들입니다. 이런 요소는 이미 기능, 동작, 모양, 스타일 등등 이미 만들어져 있는 템플릿이라고 볼 수 있습니다. 많은 div, span 등 그리고 내부 스크립트와 스타일 등을 결합하여 캡슐화하면 이렇게 shadow DOM을 만들 수 있습니다. 기본으로 제공하는 이런 html 요소 뿐만 아니라, 우리도 shadow DOM을 만들 수 있습니다..
Tables Generator - HTML과 Markdown 테이블 쉽게 만들기
본 글은 HTML과 Markdown을 사용하시는 분들에게 좀 더 쉬운 표 만드는 방법을 알려드리기 위한 포스팅입니다. HTML이나 Markdown을 사용하시다 보면 표 만드는 것이 얼마나 귀찮은지 알 수 있습니다. 저는 HTML은 쉽게 코딩으로 표를 작성할 수 있지만, Markdown은 건들기도 귀찮습니다. 깃허브에서 md 파일을 작성해 보셨나요? 그럴때 Tables Generator가 유용합니다. Tables Generator를 사용하면 에디터 없이 쉽게 표 작성하고 깃허브 md 파일에 표를 쉽게 작성이 가능합니다. Tables Generator https://www.tablesgenerator.com/
[HTML] 웹 컬러 도구 사이트
CSS로 웹을 디자인하면 색감에 대해 고민을 많이 하게 됩니다. 어떤 색이 예쁜 색인지, 어떤 색이 잘 보이는 색인지 잘 모를 때가 많습니다. 이번에 소개할 사이트 3가지는 html의 네임드컬러, RGB코드, Hex코드, Hsl코드 등 쉽게 정보를 얻을 수 있고, 색 선택에 도움을 주는 사이트입니다. ✅ 이 포스팅은 더 좋은 정보가 있으면 갱신하는 사이트입니다. 만약 소개드린 사이트 이외 좋은 내용 있어서 덧글로 알려주신다면 감사드립니다. w3schools HTML Color Picker www.w3schools.com/colors/colors_picker.asp HTML Color Picker Selected Color: Black Text Shadow White Text Shadow www.w3sch..
[웹디자인] 내 사이트에 아이콘을 쉽게 넣자. Font Awesome
웹디자인을 하면서 여러 그림과 아이콘이 필요할 때가 있습니다. 예쁜 사이트를 디자인하려면 아이콘은 필수니까요. 그리고 요즘은 심플하고 모던한 디자인을 선호하기 때문에 픽토그램을 많이 활용합니다. 하지만 웹디자인에 아이콘을 넣으려면 어떻게 해야할까요? 일반적으로 태그를 이용하여 이미지를 불러와서 사용합니다. 그렇다면 수많은 아이콘 파일들을 서버에 저장해야 하죠. 그리고 나에게 필요한 아이콘을 찾아야 한다면? 아이콘 이미지를 찾기 위해 열심히 인터넷을 모험하게 될 것입니다. 웹디자인보다 검색에 시간을 더 많이 투자하겠네요. 하지만 Font Awesome을 사용하면 빠르고 쉽게 아이콘을 찾아 사용할 수 있습니다. fontawesome.com/ Font Awesome The world’s most popular..
[HTML/CSS/JAVASCRIPT] 프론트엔드 개발 및 웹 디자인에 도움되는 사이트 10가지
codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 1. CodePen 아주아주 유명한 사이트라서 모르는 사람이 없을 정도지만, 예쁜 웹디자인을 위해서 아주 도움되는 사이트이기 때문에 넣었습니다. CodePen에선 다양한 예시들을 프로 개발자들이 만들고 공유하는 사이트입니다. 웹 디자인을 할 때, 예쁜 체크박스, 토글, 드롭다운 등을 추가하고 싶다면 여기 CodePen에 들어가세요. 사용하고 있는 프레임워크..
HTML Entity Tag Table
HTML 특수문자 코드표. HTML 엔터티 태그표 HTML Entity Tag Table 자주 사용하게 되어서 저장겸 포스팅 하게 되었습니다. 출처 : egloos.zum.com/keep/v/1030642 숫자표현 문자표현 표현문자 설명 - - - 사용하지 않음 - space 수평탭 - space 줄 삽입 - - - 사용하지 않음 - space 여백 ! - ! 느낌표 " " " 따옴표 # - # 숫자기호 $ - $ 달러 % - % 백분율 기호 & & & Ampersand ' - ' 작은 따옴표 ( - ( 왼쪽 괄호 ) - ) 오른쪽 괄호 * - * 아스트릭 + - + 더하기 기호 , - , 쉼표 - - - Hyphen . - . 마침표 / - / Solidus (slash) 0-9 - 0 - 9 0부..