FE 8

[FE][06] HTML 개요: 요소, 속성, 태그, 내용, 속성

element요소(element), 속성="값", 요소의 내용(Contents) "h1요소"부모 요소, 자식 요소※ 들여쓰기(Indent), 내어쓰기(Outdent)로 구분한다.상위(조상) 요소, 하위(후손) 요소   태그시작 태그/열린 태그, 종료 태그/닫힌 태그빈(Empty) 태그종료(닫힌) 태그가 없는 Element※ XHTML 버전에서 엄격한 문법이 유입되기 시작해서 HTML5에서는 두 방식 모두 자용되고 있다. ※ 혹시 모를 오류를 방지하기 위해 빈 태그 뒤에 슬래시 붙이는 연습을 하자. * alt: 이미지의 이름(대체 텍스트/Alternate Text) input사용자가 데이터를 입력하는 요소(태그) 어떤 데이터 타입(type)을 입력받을 것인지를 속성으로 입력한다. 뭐 이런~ 태그들이 있다~

FE 2024.07.09

[FE][05] 브라우저 스타일 초기화, Emmet (자동완성)

브라우저 스타일 초기화브라우저에서 기본적으로 제공하는 css 스타일을  초기화하고 작업을 시작하는 것이 좋다.  reset.css.cdnSearch 'reset.css cdn' cdn.js.com or ★ jsdeliver.com 페이지로 접근 cdn이라는 css 파일에 원격 주소를 복사해서 사용   .min파일명.min.확장자와 같이 min(Minify 단어의 약어) 키워드는 파일이 난독화나 경량화되었다는 것을 의미한다. 간략하게 말해 원본의 css 파일을 용량이 가장 적은 형태로 압축시켜놓은 버전이라는 것이다. 우리가 외부에서 가져와 사용하는 플러그인, 라이브러리 등을 직접 수정할 상황은 매우 드물기 때문에 굳이 원본을 사용할 필요는 없다.  ※ Codepen 사이트에서는 브라우저 스타일을 어떻게 초..

FE 2024.07.09

[FE][04] <a>, 개발자 도구, codepen

src- script- img  단일 태그: ,   hrefhypertext reference 하이퍼링크표시할 텍스트 경로 참고경로1) 상대 경로- - ./- ../    ※ 상위 폴더로 이동 2) 절대 경로- http- https- /     ※ 최상위 경로(root)로 이동- //  ※ Setting에 들어가서 Tab Size를 설정할 수 있다.   예시 사이 heropy.blog   element.style은 CSS의 인라인 선언 방식으로 스타일이 삽입됩니다. 자세한 내용은 CSS 선언 방식 파트에서 다룸. 더보기CSS 선택자(Selector)는 CSS 스타일을 어떤 요소에 적용할지를 선택하는 일종의 규칙입니다.icons라는 요소는 UL이라는 태그는 class가 "icons"ul이라는 태그를 선택해..

FE 2024.07.07

[FE][03] HTML 이미지 출력, 경로

※ 프로젝트의 최상위 경로에(root 경로에) 'index.html' 파일이 존재해야 한다.  이미지를 출력하는 두 가지 방법alt : 대체텍스트 1) 파일  img src="./images/마시.png" alt="마시 그림">  2) 이미지 링크  img src="https://pbs.twimg.com/profile_images/1796687739087446016/jt7bgGhd_400x400.jpghttps://pbs.twimg.com/profile_images/1791247395365511168/QcmZ5kF-_400x400.jpg" alt="마시 그림">   경로1) 상대 경로- - ./- ../    ※ 상위 폴더로 이동 2) 절대 경로- http- https- /     ※ 최상위 경로(roo..

FE 2024.07.06

[FE][02] HTML 기본 태그

범위: Ch3-04 ※ 필기 위주로 하지 말기 (예쁘게 X, 알아보기 쉽게O)※ 머릿속에 집어넣는 것 우선 (암기 ★ ★ ★ ★ ★)※ 일단 쭉 1회독※ 모르는 건 돌려보고 자주 나오는 건 적기HTML해당 파일 어디서부터 어디까지 해석할 것인지 지정 HEAD 탭 이름 외부 문서를 가져와 연결할 때 사용(대부분 CSS 파일)  rel: 가져올 문서와의 관계href: 가져올 문서의 경로href   ./  Favicon(파비콘) : Favorite IconHTML Favicon을 적용할 때에는 이름을 'favicon'이러고 지정할 것 - favicon.ico - favicon.png - -     와 같이 JS 파일을 가져오기  - 외부에서 파일을 가져오는 link 태그의 역할2) ~코드~ 와 같이 HTM..

FE 2024.07.06

[FE][01] Visual Code 기본 세팅 및 단축키

1) Beauify정리된 코드 만들기 2) Auto Rename Tag태그 이름을 한 번에 변경 3) Live Server브라우저에 출력 No.단축키내용1  Ctrl + alt+ ; HookyQR.beautify 단축키(코드 예쁘게 정리)2  Ctrl + alt + S 프로젝트 내 전체 파일 저장3  Ctrl + B 사이드바(탐색기) 닫기4  Ctrl + P 이름으로 파일 검색 메뉴5  Ctrl + Shift + P 모든 명령 표시(에디터의 모든 명령에 접근)6  Ctrl + W 편집기 현재 탭 닫기7  Ctrl + H 찾기+바꾸기8 Alt + ↑코드 해당 줄을 윗줄과 바꿔치기(윗줄로 이동)9 Alt + ↓코드 해당 줄을 아랫줄과 바꿔치기(아랫줄로 이동)10  Alt + Shift + ↓ 코드를 아랫줄에..

FE 2024.07.06