728x90 프론트엔드/HTML5 [HTML] 볼륨 조절 효과 만들기 feat. input type="range" [HTML] 볼륨 조절 하는 것 같은 태그 만들기 feat. input range 해당 효과를 input에 타입만 range로 하면 될것을 예전 포트폴리오 만들적에 이렇게 간단한걸 css 와 javascript 로 하나하나 순수 구현했던 기억이 난다 ⭐️ 기본 형태 ⭐️ 샘플 예제 🌈 출력 결과 2021. 8. 14. [HTML / Favicon] 파비콘 만들기 및 적용 방법! (브라우저 탭아이콘) [HTML / Favicon] 파비콘 만들기 및 적용 방법! 기본 형태 1. 파비콘 [favicon] 만들기 아래 웹 페이지에 접속 > icons 탭 클릭 > 원하는 아이콘 선택 후 다운로드 버튼 클릭 (svg 다운) https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 2. 다운 받은 SVG 파일을 PNG로 변환 아래 웹 페이지에 접속 > SVG to PNG 탭 클릭 > 아이콘 드래그 & 드랍 후 변환 (PNG 다운) https://svgtopng.com/ Co.. 2021. 6. 9. [HTML5] Data 속성 (Data Attribute) HTML5 Data-* 속성 Data Attribute HTML5에서 data-* 속성 은근 사용 빈도가 높다. data-* 속성은 거두절미하고 태그에 간략한 데이터를 저장하는 것이다. HTML5 이전에는 Html 문서 내에 데이터를 저장하기위해 태그를 안보이게하고 해당 태그에 밸류값을 넣어놓고 사용하는 등 여러가지 핵스러운 방법이 동원되었는데, data-*속성을 사용하면 간결한 코드에 유지보수가 용이해지고 자바스크립트를 통한 데이터 접근이 간단해진다. 사용 방법은 아래와 같이 간단하다. HTML 태그 내 데이터 속성 사용 Javascript에서 데이터 추출 const element = document.querySelector('...'); const data = element.dataset.데이터속성이.. 2021. 3. 13. [Html] 시멘틱 태그 semantic tag Html 에서 Semantic tag란 ? 태그의 이름 자체에 의미가 담겨있는 태그를 뜻한다. Header , Main, Footer 이라는 이름의 태그를 보면 어떤 용도의 태그인지 대충 상상이 된다. 사용 용도↓ 규모가 되는 홈페이지의 Html 소스를 보면, 시멘틱 태그만으로 해당 구조를 파악하기 위해서 사용한다. 시멘틱 태그 목록↓ 태그 이름 사용 용도 header Html 텍스트 상단 부를 의미 main Main 섹션 의미 footer Html 텍스트 하단 부를 의미 section 문서의 섹션을 구분 (서로 관계 있는 문서 분리) nav 내부 링크 리스트가 있는 경우 사용 article 하나의 컨텐츠를 구분짓기 위해 사용 (예 : 뉴스기사, 블로그 글, 포럼 글) aside 위 모든 섹션에 해당 되.. 2021. 2. 6. [Html] 기본 구조 - 태그와 엘리먼트 개념 Tag / Element Html은 HyperTextMarkupLanguage 의 약자로 프로그래밍 언어가 아닌 웹 개발시 웹페이지의 구조를 표현 하는 마크업 언어이다. 쉽게말해서, 웹개발자와 브라우저 사이에 의사 소통할수 있는 언어이다. 웹개발자 브라우저 우선 html을 출력부터 해보자. 메모장을 새로 만들기 하여, 다른 이름으로 저장하기를 누르고, 파일 이름을 index.html로 저장한다. index.html 파일을 만들었다면, 아래 예제를 실행해보기를 권장한다. 샘플 예제 ↓ 웹 개발자가 "메모를 메모하다"라는 문장을 브라우저에게 문장이라고 이야기해주려면, 아래와 같은 소스를 작성해야한다. 사용 태그 : p 메모를 메모하다 소스 작성을 완료 하였다면, 파일을 저장하고 더블클릭하여 실행하여, 웹페이지에서 출력 결과를 확인한.. 2021. 2. 3. 이전 1 다음 728x90
