UserDonghu's Note

1. div & span div 콘텐츠 분할 요소. 여러 태그들을 그룹핑 하기 위한 태그. 블록 요소. CSS로 스타일을 주기 전에는 콘텐츠나 레이아웃에 어떠한 영향도 주지 않음. span 인라인 요소. div와 마찬가지로 CSS로 스타일 주기 전에는 콘텐츠나 레이아웃에 어떠한 영향도 주지 않음. 2. Sections header 소개 및 탐색에 도움을 줌. 회사명, 제목, 로고, 검색 폼 등 요소 포함. head 태그와 혼동 주의. 헤더를 중첩 사용하거나 헤더 안에 푸터 사용 X nav navigation bar. 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크. 메뉴, 목차, 브레드크럼 등으로 사용. 페이지의 주요 탐색 링크를 위한 태그. 하나의 웹페이지에 여러 개의 nav 태그를 가질 ..

block 부모 요소의 전체 공간을 차지해서 블록을 만든다. 언제나 새로운 줄에서 시작, 좌우 양측으로 최대한 늘어나 가능한 모든 너비 차지. 이전 이후 요소 사이에서 줄 바꿈 일어남. 페이지의 구조적 요소를 나타낼 때 사용. width, height 크기를 지정할 수 있고, padding, border, margin 속성을 사용할 수 있음. ex) div, p, form 등 블록 요소는 인라인 요소 안에 중첩 X, 인라인 요소는 블록 요소 안에 중첩 O 예외) 인라인 a태그의 경우 중첩 가능 블록요소 안 인라인요소 중첩 가능 인라인요소 안 블록요소 중첩 불가능 inline 항상 블록 레벨 요소 내에 포함. 컨텐츠에 따라 할당된 공간만 차지. 문장, 단어 같은 작은 부분에 대해서 적용. 새로운 줄을 만들..

VSC 에서 ! + tab 을 누르면 기본적인 html구조가 나옴. 이 문서는 html Living Standard 문서 라는 의미. html태그는 HTML문서의 루트, 최상단 요소. lang 속성을 통해 페이지의 주 언어가 무엇인지 설정 ex) lang="ko", lang="ko-KR" 기계가 식별할 수 있는 문서 정보 담는곳. 검색엔진을 위한 다양한 정보들이 담기는 곳. meta 어떤 목적을 위해 만들어진 데이터 검색엔진은 메타정보를 살펴보고 다양한 정보를 가져감. charset 문자 코드의 종류를 설정. utf-8은 국제적인 코드 규약. 전세계적인 언어를 지원 viewport width : 뷰포트의 너비를 제어. width=600 처럼 픽셀값으로 지정 가능. initial-scale : 페이지가 처..

HTML은 요소(Elements)로 구성되어있다. 태그 (Tag) 어떤 표시를 하기 위해 붙인 꼬리표 기본적으로 시작 태그 종료 태그 의 쌍으로 구성되어있다. 웹의 대표적인 기술 HTML/CSS/JS 요소의 포함 HTML은 요소 안에 다른 요소가 들어갈 수 있다. HTML은 요소 안에 다른 요소 가 들어갈 수 있다. 주의) HTML의 경우, 오류를 알려주지 않고 웹브라우저가 임의로 결과를 보여줌. -> '웬만한 오류는 알아서 처리해준다.' 의도치 않은 화면이 나올 수도있으니, 마크업 검사 필수. https://validator.w3.org < 마크업 검사 사이트. 빈요소 / 셀프 클로징 닫는 태그가 없는 태그 존재. 주석 프로그램 동작에 영향을 미치지 않음. 설명하는 글을 적어두는곳. 매우 중요한 기밀 ..

(★) live server (추천) : 서버 구동 korean : 한국어 패키지 prettier (추천) : 자동 정렬 Material Icon (추천) : 아이콘 꾸미기 Material Theme : 테마 꾸미기 (★) rainbow csv (추천) : CSV 잘 보이도록 Visual Studio IntelliCode : 자동완성 bracket pair colorizer : 괄호 다르게 (★) auto rename tag (추천) : 태그 닫기 자동 수정 css peek : css 확인 css navigation : html에서 연결된 css 바로 확인 font awesome auto-complete : 폰트 어섬 아이콘을 실시간으로 미리 보여줌 html css support : css에서 자동 확인..

1. ⌘ + P로 명령 팔레트 열기 2. >snippet 이라고 입력, 사용자 코드 조각 구성 3. 원하는 언어 선택 4. json파일 열어서 설정 ex)html.json 5. https://snippet-generator.app 에서 만들어서 복사 붙여넣기. 주의) { }중괄호 안에 복사한 스니펫 붙여넣기 6. 커서 위치 순서 지정(탭 했을때 다음으로 넘어가는 순서)하려면 $번호 ex) $1, $2

• 모든 단축키 : ⌘ + K + S • Settings : ⌘ + , (오른쪽 상단에 Settings.json file open으로 좀 더 다양한 커스터마이징 가능) • Sidebar : ⌘ + B • Terminal : ⌃ + ` (백틱, 틸트, 템플릿리터럴) • Command palette : ⌘ + ⇧ + P, F1 • 동시 선택 : ⌘ + D (2번 입력, ⌘ + ⇧ + D와 같은 역할) • 동시 수정 : ⌘ + ⌥ + 방향키(상, 하), ⌘ + Click, ⌘ + ⇧ + Drag, ⌥ + ⇧ + i • Quick Open : ⌘ + P • 문장의 양 끝 : Home / End • 코드의 양 끝 : ⌘ + Home / ⌘ + End • 복사 / 붙여넣기 : ⌘ + C / ⌘ + V / ⌥ + 방..

DNS : Domain Name Server Server : 정보를 Serving 해주는 기기 Dos : ex) 1초에 5번 이상 질문 -> 너 해커 DDos : ex) 1초에 4번씩 1만대의 컴퓨터로 공격 www.naver.com : 도메인, URL (이름) 22.130.195.200 : IP (주소) 22, 23, 80, 443 ... : PORT (문) IP도 그렇고 PORT도 그렇고 사용하지 않는곳은 닫아두기. 특히 Admin Page. 223.130.195.XXX -> IP Scan 223.130.195.200:0 ~ 500000 -> PORT Scan