인파

You Can Become A

늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !

공부한 내용을 정리합니다
Mark Up/HTML

🏷️ 웹문서에 최적화된 독특한 HTML 태그 10가지

figure & figcaption 태그 이 태그들은 이미지, 동영상 과 같은 멀티미디어 콘텐츠의 캡션 및 기타 메타데이터를 추가하는 방법을 제공한다. 물론 이미지, 동영상을 표현하는데 적합한 , 태그들이 존재하지만, 이들을 태그로 한번 더 감싸주면, 웹 페이지의 접근성과 검색 엔진 최적화가 개선된다고 한다. 멀티미디어 콘텐츠에 대한 컨텍스트 및 추가 정보를 제공하여 사용자가 이해하기 쉽고 검색 엔진이 웹 페이지를 색인화할 수 있기 때문이다. 태그는 소스에 대한 제목 또는 설명과 같은 추가 정보를 제공하는 캡션(caption)으로써, 태그 내부 하단에 배치된다. World Map 당장 이곳 티스토리 블로그도 개발자도구를 살펴보면 이미지를 포스팅에 표시할때 엘리먼트를 사용한다는 걸 알 수 있다. mark ..

category_image
인파_
2023.03.10
(0)
Mark Up/HTML

🏷️ 스크립트 없이 구현 가능한 독특한 HTML 태그 9가지

이번 포스팅은 HTML5을 배우는데 있어 접하지 못한 독특한 엘리먼트들을 소개해 보는 시간을 가져볼 것이다. 기존의 태그와 자바스크립트를 조합하여 힘들게 구현해야 하는 컴포넌트들을 태그 하나로만 구현할수 있어, 비록 아주 자주 사용될 녀석들이 아니지만 한번 쯤 훑어보고 존재 정도만 머리에 각인시키고 있다면, 추후에 도움이 될 것이다. 각 요소의 속성 상세 스펙은 MDN을 참고하면 된다. progress 태그 progress 요소는 진행 정도를 나타내는 바를 만드는 태그이다. 주로 자신의 스킬 퍼센티지를 표기하거나 api 사용량을 표현하는데 자주 애용된다. 엘리먼트의 max 에 따른 value 속성값에 따라 bar의 게이지가 포함되는 원리이다. See the Pen progress by barzz12 (@..

category_image
인파_
2023.03.08
(0)
Mark Up/HTML

🏷️ 에멧(Emmet) 문법 모음 - 한눈에 정리

Emmet (에밋) 에밋은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다. 원래 젠코딩으로 부르다가 에밋으로 이름을 변경했다. 매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해 준다. 이처럼 에밋을 사용하면 HTML & CSS의 작업 속도를 엄청나게 향상시킬 수 있다. VSCode는 emmet을 기본적으로 지원하고 Tab키를 통해 사용한다. HTML 태그 emmet 자식(하위) 요소 > div>ul>li 형제 요소 + div>p+span 올라가기 ^ div>ul>li^p+a div>ul>li^^div 반복하기 * div>ul>li*3 그룹화 () div>(header>ul>li*2)+footer

category_image
인파_
2022.11.26
(0)
Mark Up/HTML

🏷️ 메타(meta) 태그 종류 & 사용법

​메타태그(meta tag) 란 하이퍼텍스트(Hyper text) 생성 언어 HTML 문서의 맨 위쪽에 위치하는 태그(tag)로 HEAD 태그 사이 또는 뒤에 있어도 되지만 반드시 BODY 태그 앞쪽에 위치해야 한다. 브라우저와 검색 엔진을 사용할 수 있도록 웹 문서의 정보를 포함하고 있다.​ 메타태그(meta tag)는 웹페이지(Web page)의 요약이므로 상당히 중요하다고 할 수 있다. 메타태그 속성에는 http-equiv, name, content 3가지 속성이 있다. http-equiv ="항목명" ​ - 웹 브라우저 서버에 명령을 내리는 속성 - name 속성을 대신해 사용할수 있음 - html 문서가 응답 헤더와 함께 웹 서보로 부터 웹 브라우저에 전송되었을때만 의미를 가짐 - content..

category_image
인파_
2022.11.04
(0)
Mark Up/MarkDown

🏷️ html 테이블을 마크다운 으로 간단 변환하기

tableconvert 이미 만들어진 html의 내의 내용들을 마크다운 테이블 문법으로 그대로 옮기는 방법이 없을까 해서 구글링해본 결과, 괜찮은 변환 사이트를 알게 되어 소개해 본다. 이제 더이상 일일히 테이블 내용을 복사 * 붙여넣기 하는 노가다를 하지말고 스마트하게 작업해보자. Convert HTML Table to Markdown Table - Table Convert Online This converter is used to convert HTML Table into Markdown Table. it's also easy to make, create and generate Markdown Table online via Table Editor. tableconvert.com followerId f..

category_image
인파_
2022.07.10
(0)
Mark Up/HTML

📄 HTML 과 HTM 차이점

HTML & HTM 차이 웹 프로그래밍을 하다보면 html과 htm으로 마크업 언어 (Markup Language) 파일의 형식이 두가지가 있다. 같은 html인것 같긴 한데 확장자가 다르니 혹시 호환성 측면에서 문제가 되지 않을까 궁금하다. ​하지만 사실 이 둘은 서로 같은 형식의 파일이다. ​원래 명칭은 html이였으나 확장자로서 html대신 htm을 쓰는 이유는, 도스(MS-dos)와 Windows3.X 시절부터 확장자의 문자길이를 3글자로 제한했었기 때문에 당시엔 .htm이라고 썼었던 것이다. 그 영향에 따라서 현재는 HTML(HyperText Markup Language) 를 주로 풀로 쓰는 .html 를 주로 사용하지만, 예전 htm 의 관습과 호환성을 위해서라도 현재까지도 사용되고 있는 것 ..

category_image
인파_
2022.03.26
(0)
Mark Up/MarkDown

🏷️ 마크다운 emoji 이모티콘 사용하는 방법

마크다운 Emoji 이모티콘 마크다운을 이용해 이모티콘을 표현가능 하다. 깃허브도 문제없이 적용가능 하다. 마크다운 문법에 : : 사이에 이모티콘명을 넣으면 자동으로 인식된다. :rocket: GitHub supports emoji! # :+1: ## :sparkles: * :camel: 1. :tada: :rocket: :metal: 마크다운 이모지 종류 표 아래 표를 참고해도 되고 아래 사이트에서 참고해도 좋다. Emoji Cheat Sheet Emoji codes used by GitHub, Basecamp, Slack and other services. Searchable. With emoji meanings. www.webfx.com People :bowtie: 😄 :smile: 😆 :laugh..

category_image
인파_
2021.11.23
(0)
Mark Up/MarkDown

🏷️ 마크다운(MarkDown) 작성 문법 💯 총정리

마크다운 (MarkDown) 이란 마크다운(MarkDown)은 산문을 읽고, 쓰고, 편집하기 쉬운 목적으로 만들어진 문서 작성을 위한 형식으로 사용되며 문법이 간결하고 HTML삽입이 가능합니다. 이때 마크다운을 작성한 문서의 표현 방식은 CSS의 설정에 따라 달라집니다. 그래서 본 강좌는 깃헙 마크다운 css 기준으로 진행합니다. 따라서 밸로그 마크다운 프리뷰와 약간의 차이가 있을 수도 있습니다. [ 마크다운 장점 ] 문법이 간결하고 쉽다. 마크다운은 모든 것에 사용할 수 있습니다. (웹 사이트, 문서, 메모, 기술 문서 등) 마크다운은 지원하는 플랫폼이 많습니다. ( Github, Discord 등) 마크다운은 대부분의 환경에서 편집, 작성이 가능합니다. (메모장에서도 가능) 텍스트로 저장되기 때문에 ..

category_image
인파_
2021.11.23
(0)
Mark Up/HTML

🏷️ input 태그 파일 다중 선택하기

input file 태그 파일 다중 선택 여러개의 파일을 선택하기위해선, 보통 input 태그를 여러번 써주는 것이 일반적이다. 하지만 파일을 동시에 한꺼번에 선택해야 할때 그 방법을 소개해본다. PC에서 파일 다중 선택 해당 input 태그에 multiple 속성을 사용하면 된다. MOBILE에서의 다중 선택 PC에서 파일을 업로드하는 경우에는 자신이 업로드할 파일을 한 폴더에 몰아서 여러개의 파일을 등록할 수 있지만 모바일의 경우에는 현실적으로 이렇게 하기가 힘들다. 그래서 모바일의 경우에는 업로드하려는 파일이 각각 다른 폴더에 있다면 여러개의 input태그를 생성하여 처리할 수 있다. 혹은 자바스크립트 라이브러리를 통해 모바일 환경에서도 컴퓨터 처럼 다중 파일 선택 기능을 구현할 수 있다. 예를들어..

category_image
인파_
2021.11.03
(0)
Mark Up/HTML

🏷️ 폼(Form) 태그 양식 & 종류 - 한방 정리

폼(Form) 양식 HTML 에선 브라우저의 내장 요소를 사용하여 웹 양식에 대한 지원을 제공한다. 예를들어 우리가 특정 사이트에 로그인 할때 아래와 같이 계정 아이디와 비밀번호를 입력하는 화면을 수도 없이 많이 봤을 것이다. 이처럼 텍스트 필드, 암호 필드, 확인란, 라디오 버튼, 제출 버튼, 메뉴 등과 같은 컨트롤을 포함한 양식 통, 서버로 나의 아이디, 비밀번호를 입력해서 보내 서버의 데이터베이스에 내 정보가 있고, 이것이 일치하면 로그인이 처리되게 된다. 꼭 회원가입 / 로그인 뿐만 아니라 이렇게 주문을 하기 위해 배송지 정보를 기재하고 제출하는 것도 마찬가지이다. 이렇게 웹페이지에서 내 정보를 서버로 보내거나 혹은 서버로 보내지 않더라도 자체 웹페이지에서 사용자와 상호작용을 하기 위해 입력값이나..

category_image
인파_
2021.09.27
(0)
Mark Up/HTML

🏷️ HTML 시맨틱(Semantic) 태그의 쓰임새

시맨틱 태그 (Semantic Tag) 사람이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록(=의미가 통하는, semantic) 만든 태그들이다. semantic 태그가 나오기 이전 아래 그림과 같이 태그로 일일히 위치 범위를 지정하고 각 태그의 class 명으로 이 요소의 역할을 명시해야 했지만, semantic 태그를 이용하면 태그 이름에서 이 엘리먼트의 위치와 역할을 단번에 알 수 있기 때문에 좀 더 모던하다고 말할 수 있는 것이다. 시맨틱 태그 구성 요소 시맨틱 웹을 위한 태그 설명 header 페이지의 머리글, 제목, 로고, 메뉴, 검색 관련, 유틸, 작성자의 이름 등등으로 구성 nav 페이지의 내비게이션 영역. (사이트 내, 외부로 이동). 메뉴, 목차, 색인 등등 mai..

category_image
인파_
2021.09.27
(0)
Mark Up/HTML

🏷️ 비슷해 보이는 <p> <div> <span> 태그 차이점

태그 ​ ​ : div 태그는 body 문서 안에서 각 영역의 세션을 구분 정의 한다. : 구역을 나누는 태그. 가로줄 전체를 다 차지. 너비가 100% Layout 구조 틀을 만들고 CSS를 통해 위치 및 layer을 구분등 HTML요소의 컨테이너 역활을 한다. 또한 javascript를 통해 특정 작업을 수행하고 여러 유형의 동적인 효과를 줄수도 있다. 제목 단락 설명... : 일반적으로 텍스트에 색칠, 크기, 좌우간격을 조절하는데 사용된다. : css속성 inline 이 자동으로 적용되어있다. My mother has blue eyes and my father has dark green eyes. ​ : 문단(paragraph) 텍스트 절을 기재할때 사용된다. : div랑 거의 같다고 보면 된다. ..

category_image
인파_
2021.09.26
(0)