열정 실천

html 기본틀 ! + enter/ tap 코드 정렬 alt + shift + f 한줄 주석 ctrl + / 여러 줄 주석 alt + shift + a 다중 선택 alt 누른 상태로 선택 해당 커서가 있는 행 삭제 ctrl + shift + k 해당 커서가 있는 행 복사 & 붙여넣기 alt + shift + 방향키 일치하는 텍스트 찾기 ctrl + f 왼쪽 탐색기 창 on/off ctrl + b 해당 커서 행 전체 이동 alf + 위/아래 방향키

html의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정하는 display 속성을 가진다. display 속성의 값으로 inline과 block, 그리고 두 가지의 장점을 합친 inline-block이 있다. inline ✔ html 태그의 내용 만큼만 차지 ✔ 태그를 연달아 썼을 때 한 줄에 나타남 ✔ width, height로 크기 조절을 할 수 없음 ✔ 좌우 margin, padding만 적용 가능 (상하는 불가능) 📌인라인 태그 종류 , , , , block ✔ 해당 라인의 모든 너비를 차지 ✔ 태그 요소마다 줄을 바꿈 ✔ width, height, 상하좌우 margin, padding이 모두 가능 -> 레이아웃을 작업하는 요소로 적합 ✔ 내용과 별개로 자신의 영역을 가짐 📌블록 ..

OG 태그 특정 링크를 공유했을 때 위와 같이 썸네일 이미지, 제목, 설명 등의 내용을 볼 수 있다. 이는 Open Graph Protocol 인 OG 태그를 활용했기 때문이다. 이 OG태그는 공유한 링크로부터 웹 페이지의 특정 정보를 가져올 수 있게 한다. OG 태그는 head에 이러한 형식으로 작성한다. 하지만 이 태그를 사용하기 위해서는 해당 페이지가 배포가 되어있어야 가능하다!! 👇👇👇👇👇👇 Github Pages로 내 페이지 배포하기 1. Github Pages 원격 저장소 만들기 *Repositoy 이름 주의* Repository name : [계정명].github.io 2. 새로운 폴더 생성 후 html 파일 만들기 html 파일 이름은 반드시 index.html 로 해야한다! 3. Git ..

여러가지 태그의 종류 줄바꿈 문단구분 *parageaph 제목표현 *heading 수평 가로선 하이퍼링크 *hypertext reference 버튼 사진 여러 태그를 담는 컨테이너 역할 text를 분할하는 역할 , 순서 번호가 있는 리스트 , 순서 번호가 없는 리스트 입력칸 여러가지 태그의 사용법 줄바꿈 여는 태그와 닫는 태그 없이 단독으로 사용한다. [사용 예시] [결과] 문단구분 하나의 문단을 쓸 때 사용한다. (줄바꿈 포함!) [사용 예시] [결과] 제목표현 제목을 표현한다. h1부터 h6까지 크기가 다르다. [사용 예시] [결과] 하이퍼링크 하이퍼링크를 걸어주는 태그 1. 기본형 : => 원래 있던 창에서 이동 2. target 옵션 : => 새로운 창에서 링크 접속 3. 가짜 하이퍼링크 : =>..

html에서 주석달기 * 해당 라인 전체 주석처리하는 단축키 : ctrl [cmd] + / html 문서 기본 형식 웹 프론트엔드 개발 시작 : '이 문서의 종류는 HTML입니다' 라는 정보 (태그로 해당 html 문서를 감싸준다) : html 문서에 대한 설정 정보가 담김 : 웹 페이지 화면에 표시될 자료들이 담김 태그 1. 문서 일부에 정보를 부여한다. 2. 여는태그 와 닫는태그 를 활용하여 정보를 표현할 범위를 지정한다. 3. 범위가 필요없는 태그는 로 표현한다. 다양한 태그 종류 줄바꿈 문단 구분 *paragraph 제목 표현 *heading - ~ 하이퍼링크 -> *href : hypertext reference 버튼 사진 -> 여러 태그를 담는 컨테이너 역할 text를 분할하는 역할 , 리스트..