목록Front-End (웹)/HTML (17)
EverGiver
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/btQDW3/btrLPcHnrQL/sKZ5KUeKWWXiuOlfKXgVk0/img.png)
태그 이미지를 출력해주는 태그 - alt = "" º 평소에는 보이지 않는다. º 여러가지 오류로 인해서 혹시나 이미지가 출력하지 않는 상황일 때 이미지를 대신해서 설명으로나마 보여주기 위해 사용한다. º 작성하지 않아도 이미지를 출력하는데 아무런 지장이 없다. img 경로 - 상대경로 : 상대적으로 이미지를 찾는 방법 (내가 이미지 파일을 갖고 있으면 그 파일을 그대로 불러와서 출력하는 방식) º 장점 1. 이미지 파일을 가지고 있는 이상 절대로 사라질 일이 없다. 2. 인터넷이 연결되어 있지 않아도 상관없다. º 단점 1. 이미지를 일일이 들고 다녀야 한다. - 상대경로 찾는 방법 (HTML 파일이 있는 위치를 기준으로 찾는다) 1. HTML 파일과 사진이 같은 위치에 있으면 2. 다른 폴더에 사..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Ltc6N/btrLWm3bynx/tevDyCiicK7ldKJt99cdC0/img.png)
태그 텍스트 또는 이미지 하이퍼링크 태그 : 웹페이지의 이동 사용 시 주의사항 - 반드시 https / http 구문은 무조건 있어야 한다. 새창에서 연결 - 경로 옆에 target="_blank" 입력 네이버1 네이버2 네이버3 네이버4
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/pRghq/btrLNwGgzhM/TgpyPBjPtnk3kbwikDpCk0/img.png)
텍스트 태그 기본 틀 → '이 파일이 html파일 입니다'라고 선언해주는 명령어 → '이 파일이 한국어로 베이스로 작업한다'라고 선언해주는 명령어 → html태그들을 작성해주는 실질적인 공간 여기안에다가 작성 태그 (제목 태그) - 특징 1. 사용하면 글씨가 굵어지는 특징이 있다. 2. 태그 이름 옆에 숫자가 붙는다. 3. h1 ~ h6까지만 있다. ☆ h1 = 웹사이트의 가장 큰 제목(로고) ☆ h2 = 웹사이트의 가장 큰 메뉴 ☆ h3 ~ h6 = 가장 큰 메뉴를 보조해주는 메뉴 4. 숫자가 높아질수록 글씨 크기가 작아진다. 태그 (문단 단락 태그) : 기사 등에서 본문의 내용이 달라질 때 문단을 나눠주기 위해 사용하는 태그 - 특징 1. html에서는 스페이스바는 딱 한 칸만 인식이 된다. → ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/BJzAi/btrLR7ZOMVw/UW5mAIXOGEUCXXEDkJIwhK/img.png)
기본적인 단축키 - 새 파일 만들기 : ctrl + n - 저장하기 : ctrl + s (저장할 때 파일 이름은 반드시 index.html으로 저장) - 글자 크기 조절 : ctrl + + / ctrl + - - 코딩 출력 : ctrl + alt + p 특징 - 새로 작성하거나 기존 내용을 수정하면 왼쪽 현재 파일에 동그라미 생성 시 저장이 되지 않았다는 의미 - 화면 출력 시 오른쪽 전기 모양 아이콘 클릭 혹은 단축키(ctrl + alt + p) 활용 - 버튼은 한 번만 클릭하면 된다. - 결과 화면이 출력된 경우 전기 모양에 주황색 빛이 나타나며, 수정사항을 저장만 해주면 바로 결과 화면으로 등록해 준다. - 실시간 미리 보기 에러가 발생한 경우, 내가 저장한 파일을 그냥 열어주자. 최근에는 그냥 v..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bjgHr9/btrLQnBP4nz/cJMIz3IiVb5wK0kg72SrqK/img.png)
사용 프로그램 brackets 사용 다운로드 https://github.com/adobe/brackets/releases/tag/release-1.14.2 Release Release 1.14.2 · adobe/brackets Brackets 1.14.2 is here! This release is targeted for Mac and Windows users only. Open File in external Applications: Brackets now offers support to open file of any arbitrary type with external ap... github.com 맥 환경 : Brackets.Release.1.14.2.dmg 사용 윈도우 환경 : Brackets.Rel..