반응형 개발 공부/publishing8 시맨틱 태그란? 기본 개념부터 기능 태그까지 Semantic Tags를 알아보자! 시맨틱 태그?프로그래밍에서, 시맨틱은 코드 조각의 '의미'를 나타냅니다. 이 HTML 엘리먼트가 가진 목적이나 역할은 무엇일까요?많은 의미적 HTML 태그는 페이지의 레이아웃을 전달하게 됩니다.이러한 "구조적" 태그는 HTML4가 HTML5로 업그레이드되었을 때 도입되었으며,일반적으로 의미적 HTML5 태그 또는 의미적 HTML5 요소라고도 합니다. 시맨틱 태그 (Semantic Tags) 종류는 다음과 같습니다.시맨틱 태그 (Semantic Tags) 종류header헤더 태그는 페이지 상단에 위치하며 로고나 제목 등이 포함 navNavigation의 약자로 탐색 링크 즉 메뉴 링크를 모아놓은 영역을 말하며 태그 내에서 사용하기도 하고, 보조 탐색 태그로도 일반적으로 사용합니다.mainmain헤더와.. 2024. 10. 7. html 링크 연결 방법 정리 ( a 태그, button 태그 ) 코딩을 하다보면 링크 연결해야 할 일이 많은데요!대표적으로 a태그와 button태그가 있습니다. 생각보다 button 태그 경로 입력하는게 잘 안외워지네요;;; 1. a 태그태그 페이지의 이동, 페이지 내의 다른 영역으로의 이동 등 상호작용이 필요할 경우 사용됩니다.a 태그 링크 연결 속성값절대 주소(absolute URL) href="https://code-ruach.tistory.com"상대 주소(relative URL)href=“/lecture/logo.png”같은 페이지 내 연결에서 (id) href=“#top” ( 위치로 이동 됨)스크립트href=“javascript:alert(‘안녕하세요!’)” 2. button 태그단순 클릭 이벤트, form요소에 입력된 내용을 서버로 전송할 때 사.. 2024. 10. 6. 자바스크립트로 다국어 언어 적용하기 (with copilot) 자바스크립트를 이용해서 영어, 한국어 등 언어를 설정하면 모든 화면에서 적용되도록전역 상태로 관리하기 위해 copilot과 함께 코딩을 해보겠습니다. ..프롬프트 :list.html, setting.html, language.js 파일을 만들어주고,setting.html 파일에서 영어와 한국어 중 사용할 언어를 선택하면list.html화면에도 적용시켜줘list.html setting.html 개인 설정 English 한국어 language.jsi18next.init({ lng: 'en', debug: true, resources: { en: { translation: { title:.. 2024. 7. 15. 무료 움직이는 애니메이션 아이콘 사용하기 (feat.lordicon) lordiconhtml에 쉽게 사용 가능한 무료 애니메이션 아이콘 사이트!움직이는 아이콘을 html에 삽입해 봅시다! 더브레드블루 발효종 순수 통밀빵 2개입 (냉동)COUPANGwww.coupang.com1. 로드아이콘 사이트에 접속하기 21,500+ animated icons - LordiconLordicons work seamlessly with your project, responding to a range of interactions - whether in, hover, morph, loop, or more.lordicon.com 2. 애니메이션 아이콘 선택하기- 원하는 아이콘을 클릭하면 오른쪽 패널에서 아이콘 컬러를 변경, 일러스트 선두께 및 동영상 스타일을 변경할 수 있습니다.- 사용할 리.. 2024. 7. 14. 즐겨찾기 / 퍼블리싱 작업에 폰트 적용 폰트어썸 사이트로 종결! (무료폰트, 자세한 라이센스 범위까지 한번에 확인) 매번 폰트 찾아서 임베딩 시키기 바빴는데여기로 해결하면 될 것 같다웹 폰트 사용하기에서 CSS 설정하기, Link 방식, Import 방식, Font-face 방식총 4가지 모두 사용가능합니다.원하는 폰트를 바로 다운로드 가능하며,라이센스 사용 범위까지 한눈에 확인하실 수 있습니다. 폰트 어썸웹 폰트 사이트입니다.wess.tistory.com 2024. 6. 26. 무료 아이콘 / 아이콘 저장소 서비스 폰트어썸 사용해보기 ( 설치없이 벡터 아이콘 사용 가능 ) 오픈 소스 프로젝트 사이트를 통해서 코딩 시 벡터 아이콘을 무료로 사용해 보기 클론 코딩 할때 좋습니다.아이콘 원본 없이 사용하기 이름은 폰트어썸인데.. 아이콘을 사용하기 위한 오픈 프로그램입니다.폰트어썸font awesome Font AwesomeThe internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.fontawesome.com 1. 폰트어썸 사이트 가입하기폰트어썸 사이트 접속 -> 무료 사용 클릭 -> 이메일주소 입력 -> 메일확인 -> 비밀번호 입력 -> 개인정보입력 -> 끝 -> 메인에서 start for f.. 2024. 6. 20. CSS 네이밍 / CSS 클래스 네임 방법론 BEM 알아보기 1. BEM이란?Block, Element, Modifier를 뜻합니다 보통 클래스 네임을 정할때 사용하는 방법론 중에 하나로BEM은 기본적으로 ID를 사용하지 않고, class명만을 사용합니다.즉, 어떤 목적인가에 포커스가 맞춰져 있습니다.개발, 디버깅, 유지보수를 위해 가능한 한 명확하게 네이밍 하는 것이 목표입니다.모든 것이 클래스이고 중첩된 것은 없어야 합니다. 2. BEM 네이밍 장점- 목적과 기능을 명확히 전달한다- css만으로 구조를 알 수 있다. (sass, scss와 사용하기 편하다)- css 명시도를 항상 낮은 수준으로 유지하기 때문에 구체성으로 인한 코드의 길어짐을 방지할 수 있다.- 높은 재사용성과 대규모 css를 효율적으로 관리할 수 있다 3. BEM 사용법BEM의 class명은.. 2024. 5. 2. CSS 네이밍 / CSS 표기법 kebab-case, snake_case, camelCase, PascalCase 알아보기 1. 표기법의 필요성 프로그램밍 언어 가이드라인으로 공통된 표기법이 있습니다개발자들이 개발하는데 있어서 코딩컨벤션이 존재하여 일관된 코딩스타일을 위해 필요하며생산성을 높힐 뿐 아니라 코드 분석에 대한 이점을 가질 수 있습니다. 2. 표기법의 종류kebab-case케밥 케이스단어 사이를 대시(-)로 구분하며모든 단어가 소문자로 구성꼬챙이 꽂은 것과 비슷해서 케밥으로 사용snake_case스네이크 케이스언더바(_)가 들어 있는 표현방식뱀처럼 생겼다고 하여 붙여지며 모든단어의 문자가 소문자 or 대문자로 사용프로그래밍 언어 중Python, Ruby, Rust, Go 등이 변수와 함수 이름을 snake_case로 권장하고 있음camelCase카멜 케이스첫 글자는 소문자이며 중간글자들은 대문자로 진행 이 모습이 .. 2024. 4. 30. 이전 1 다음 반응형
