You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🏷️ 웹문서에 최적화된 독특한 HTML 태그 10가지
figure & figcaption 태그 이 태그들은 이미지, 동영상 과 같은 멀티미디어 콘텐츠의 캡션 및 기타 메타데이터를 추가하는 방법을 제공한다. 물론 이미지, 동영상을 표현하는데 적합한 , 태그들이 존재하지만, 이들을 태그로 한번 더 감싸주면, 웹 페이지의 접근성과 검색 엔진 최적화가 개선된다고 한다. 멀티미디어 콘텐츠에 대한 컨텍스트 및 추가 정보를 제공하여 사용자가 이해하기 쉽고 검색 엔진이 웹 페이지를 색인화할 수 있기 때문이다. 태그는 소스에 대한 제목 또는 설명과 같은 추가 정보를 제공하는 캡션(caption)으로써, 태그 내부 하단에 배치된다. World Map 당장 이곳 티스토리 블로그도 개발자도구를 살펴보면 이미지를 포스팅에 표시할때 엘리먼트를 사용한다는 걸 알 수 있다. mark ..
🏷️ 스크립트 없이 구현 가능한 독특한 HTML 태그 9가지
이번 포스팅은 HTML5을 배우는데 있어 접하지 못한 독특한 엘리먼트들을 소개해 보는 시간을 가져볼 것이다. 기존의 태그와 자바스크립트를 조합하여 힘들게 구현해야 하는 컴포넌트들을 태그 하나로만 구현할수 있어, 비록 아주 자주 사용될 녀석들이 아니지만 한번 쯤 훑어보고 존재 정도만 머리에 각인시키고 있다면, 추후에 도움이 될 것이다. 각 요소의 속성 상세 스펙은 MDN을 참고하면 된다. progress 태그 progress 요소는 진행 정도를 나타내는 바를 만드는 태그이다. 주로 자신의 스킬 퍼센티지를 표기하거나 api 사용량을 표현하는데 자주 애용된다. 엘리먼트의 max 에 따른 value 속성값에 따라 bar의 게이지가 포함되는 원리이다. See the Pen progress by barzz12 (@..
🏷️ 에멧(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
🏷️ 메타(meta) 태그 종류 & 사용법
메타태그(meta tag) 란 하이퍼텍스트(Hyper text) 생성 언어 HTML 문서의 맨 위쪽에 위치하는 태그(tag)로 HEAD 태그 사이 또는 뒤에 있어도 되지만 반드시 BODY 태그 앞쪽에 위치해야 한다. 브라우저와 검색 엔진을 사용할 수 있도록 웹 문서의 정보를 포함하고 있다. 메타태그(meta tag)는 웹페이지(Web page)의 요약이므로 상당히 중요하다고 할 수 있다. 메타태그 속성에는 http-equiv, name, content 3가지 속성이 있다. http-equiv ="항목명" - 웹 브라우저 서버에 명령을 내리는 속성 - name 속성을 대신해 사용할수 있음 - html 문서가 응답 헤더와 함께 웹 서보로 부터 웹 브라우저에 전송되었을때만 의미를 가짐 - content..
📄 HTML 과 HTM 차이점
HTML & HTM 차이 웹 프로그래밍을 하다보면 html과 htm으로 마크업 언어 (Markup Language) 파일의 형식이 두가지가 있다. 같은 html인것 같긴 한데 확장자가 다르니 혹시 호환성 측면에서 문제가 되지 않을까 궁금하다. 하지만 사실 이 둘은 서로 같은 형식의 파일이다. 원래 명칭은 html이였으나 확장자로서 html대신 htm을 쓰는 이유는, 도스(MS-dos)와 Windows3.X 시절부터 확장자의 문자길이를 3글자로 제한했었기 때문에 당시엔 .htm이라고 썼었던 것이다. 그 영향에 따라서 현재는 HTML(HyperText Markup Language) 를 주로 풀로 쓰는 .html 를 주로 사용하지만, 예전 htm 의 관습과 호환성을 위해서라도 현재까지도 사용되고 있는 것 ..
🏷️ input 태그 파일 다중 선택하기
input file 태그 파일 다중 선택 여러개의 파일을 선택하기위해선, 보통 input 태그를 여러번 써주는 것이 일반적이다. 하지만 파일을 동시에 한꺼번에 선택해야 할때 그 방법을 소개해본다. PC에서 파일 다중 선택 해당 input 태그에 multiple 속성을 사용하면 된다. MOBILE에서의 다중 선택 PC에서 파일을 업로드하는 경우에는 자신이 업로드할 파일을 한 폴더에 몰아서 여러개의 파일을 등록할 수 있지만 모바일의 경우에는 현실적으로 이렇게 하기가 힘들다. 그래서 모바일의 경우에는 업로드하려는 파일이 각각 다른 폴더에 있다면 여러개의 input태그를 생성하여 처리할 수 있다. 혹은 자바스크립트 라이브러리를 통해 모바일 환경에서도 컴퓨터 처럼 다중 파일 선택 기능을 구현할 수 있다. 예를들어..
🏷️ 폼(Form) 태그 양식 & 종류 - 한방 정리
폼(Form) 양식 HTML 에선 브라우저의 내장 요소를 사용하여 웹 양식에 대한 지원을 제공한다. 예를들어 우리가 특정 사이트에 로그인 할때 아래와 같이 계정 아이디와 비밀번호를 입력하는 화면을 수도 없이 많이 봤을 것이다. 이처럼 텍스트 필드, 암호 필드, 확인란, 라디오 버튼, 제출 버튼, 메뉴 등과 같은 컨트롤을 포함한 양식 통, 서버로 나의 아이디, 비밀번호를 입력해서 보내 서버의 데이터베이스에 내 정보가 있고, 이것이 일치하면 로그인이 처리되게 된다. 꼭 회원가입 / 로그인 뿐만 아니라 이렇게 주문을 하기 위해 배송지 정보를 기재하고 제출하는 것도 마찬가지이다. 이렇게 웹페이지에서 내 정보를 서버로 보내거나 혹은 서버로 보내지 않더라도 자체 웹페이지에서 사용자와 상호작용을 하기 위해 입력값이나..
🏷️ HTML 시맨틱(Semantic) 태그의 쓰임새
시맨틱 태그 (Semantic Tag) 사람이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록(=의미가 통하는, semantic) 만든 태그들이다. semantic 태그가 나오기 이전 아래 그림과 같이 태그로 일일히 위치 범위를 지정하고 각 태그의 class 명으로 이 요소의 역할을 명시해야 했지만, semantic 태그를 이용하면 태그 이름에서 이 엘리먼트의 위치와 역할을 단번에 알 수 있기 때문에 좀 더 모던하다고 말할 수 있는 것이다. 시맨틱 태그 구성 요소 시맨틱 웹을 위한 태그 설명 header 페이지의 머리글, 제목, 로고, 메뉴, 검색 관련, 유틸, 작성자의 이름 등등으로 구성 nav 페이지의 내비게이션 영역. (사이트 내, 외부로 이동). 메뉴, 목차, 색인 등등 mai..
🏷️ 비슷해 보이는 <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랑 거의 같다고 보면 된다. ..
🏷️ id / class / name 태그 속성 차이 & 사용처
id / class / name 속성 비교 id 속성 - 고유한 식별을 목적으로 하는 경우 사용 class 속성 - css 쿼리문 밑 재사용을 목적으로 하는 경우 사용 name 속성 - form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성 id 속성 1. 고유 영역 식별자 document.getElementId()를 통해 고유 영역을 참조할 수 있습니다. 프론트엔드 개발 뉴스 ... 프론트엔드 개발 히어로즈 ... 2. Label과 input 컨트롤을 연결하기 위한 식별자 이메일 3. 표와 표 설명을 연결하기 위한 식별자 표 설명(요약) 표 제목 ... class 속성 1. 여러 영역에서 중복 정의를 허용하여 재사용이 가능한 식별자 읽기 읽기 요소의 유형과 상관 없이 clas..
🏷️ ＆nbsp /＆amp /＆lt /＆gt /＆quot 기호 의미
＆nbsp /＆amp /＆lt /＆gt /＆quot 가끔 HTML문서에 텍스트를 작성하고 웹으로 확인하면 꺽쇠 로 둘러싸인 부분은 표기가 되지 않는 경우가 있다. 그 책의 제목은 이다. 와 같이 입력하면, 아래와 같이 꺾쇠 괄호부분은 없어진 채로 웹페이지에 보여지게 된다. 그 책의 제목은 이다. 이는 HTML이 꺽쇠 안에 들어 있는 것을 기본적으로 내용이 아닌 '태그'로 해석하기 때문이다. 그래서 &문자를 이용해서 특수 문장 부호를 html 문서가 인식하게끔 표현 해줘야 하는데 사용되는 것으로 보면 된다. ” ” : 공백(스페이스 한 칸)을 의미 < 부등호() & 앰퍼샌드(&) 기호 " 쌍따옴표(“) # sharp(#) ' 따옴표(‘) HTML 특수 문자 리스트 다음은 특수한 문자..
🏷️ HTML 태그</> 종류 총모음
태그 모음 요약표 html 태그들을 표로 정리한 요약표 이다. 표의 태그 링크를 누르면 예시 코드 페이지로 이동된다. 태그 설명 주석(comment)을 정의함. 해당 문서(document)의 타입을 정의함. 다른 콘텐츠와 연결되는 하이퍼링크(hyperlink)를 정의함. 축약형(abbreviation)이나 머리글자로만 된 단어(acronym)를 정의함. 머리글자로만 된 단어(acronym)를 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 요소를 사용함. 문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 명시함. 문서에 포함되는 애플릿(웹 페이지에 포함되어 작은 기능을 수행하는 프로그램)을 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 요소나 요소를 사용함. 이미지 맵(image-..
