본문 바로가기

HTML5

방구석 정보통 : VScode Prettier 사용하기 VScode 확장프로그램 Prettier Prettier는 문서를 저장할 때, 코드의 정렬을 자동으로 맞춰주는 VScode 확장프로그램입니다. 1. Prettier 설치하기 Extensions 탭에서 Prettier를 검색하여 install 합니다. 2. 옵션 셋팅 하기 Manage > Settings(단축키: Ctrl+,) 탭에서 editor: format on save를 검색하여 체크합니다. 이제 'Ctrl+S'로 정렬을 맞춰봅시다! 작동이 안되시나요? 그렇다면 3번으로 ⇩ 3. json 셋팅 하기 F1을 눌러 나온 검색 탭에서 json을 검색하여 open user setting 문서를 열어봅니다. "editor.formatOnSave": 의 설정이 true인지 확인합니다. 아니라면 true로 바꿔줍.. 2022. 9. 6.
구조 알아보기 : 블록 구조 / 인라인 구조/ 인라인블록 구조 블록 구조 / 인라인 구조 / 인라인블록 구조 HTMl의 요소들은 그 특성에 따라 블록 구조와 인라인 구조로 나뉘어집니다. 각 구조의 특성을 알고 적절히 사용하도록 합니다. > 블록(block) 구조 블록(block) 구조는 영역의 너비가 상위 영역의 전체 너비만큼 만들어져, 줄바꿈이 일어납니다. 블록 구조인 요소는 padding, margin 과 같은 여백 값이 적용됩니다. 기본 설정이 블록 구조인 태그는 div, p, h1~h6, ul, li, ol, table, form, section, footer 등이 있습니다. > 인라인(inline) 구조 인라인(inline) 구조는 영역의 너비가 텍스트 또는 컨텐츠의 너비만큼만 만들어져, 줄바꿈이 일어나지 않고 옆으로 나열됩니다. 인라인 구조인 요소는 pa.. 2022. 8. 21.
구조 관련 요소 알아보기 구조 관련 요소 html의 구조를 이루는 요소는 header, section, footer, article 등이 있습니다. 해당 요소들을 알맞게 배치하여 시멘틱 마크업에 활용하도록 합니다. 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 1. HTML문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색 등의 내용들을 포함할 수 있습니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 , 태그는 포함할 수 없습니다. 1. HTML문서에서 맥락이 같은 요소들을 주제별로 그룹화해주는 태그이며 섹션 주제에 대한 제목 요소(~)를 포함하는 것이 좋습니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다. 1. HTML문서의 푸터 영역을 의미하는 태그로 섹션 작성.. 2022. 8. 14.
웹 표준, 웹 접근성, 웹 호환성 알아보기 웹 개발자가 알아야 할 규칙 웹 페이지를 만들게 된다면 반드시 지키지는 않아도 지키면 좋은, 지킬수록 좋은 규칙들이 있다. 웹 표준, 웹 접근성, 웹 호환성이 이에 해당한다. 웹 표준이란? 웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미합니다. 왜 지켜야 할까? 1. 수정 및 운영관리가 용이합니다. 2. 접근성이 향상됩니다. 3. 검색엔진에 최적화 됩니다. 4. 파일 사이즈를 축소시켜, 서버 공간을 절약합니다. 5. 마크업을 효율적으로 할 수 있습니다. 6. 다른 브라우저에서의 호환 가능.. 2022. 8. 8.
기획 발표 자료 ppt 템플릿 출처(https://slidesgo.com/theme/indoor-gardens-infographics#search-gardening&position-4&results-13) 2022. 7. 25.
728x90

HTML이 적힌 썸네일 이미지
CSS가 적힌 썸네일 이미지
JAVASCRIPT가 적힌 썸네일 이미지

JAVASCRIPT

자세히 보기