![[ 생활코딩 ] 주요태그 - 이미지 - img](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FpuI2q%2FbtqwixTJxNP%2FWidNLbEl3khjsoq6s82rKk%2Fimg.jpg)
주요태그 - 이미지 - img 저작권 없는 이미지 제공 사이트 : pixabay 이미지 (img) 태그 - 목적 : 문서에 이미지를 포함합니다. - 등장시기 : HTML2 - 라는 형식으로 적습니다. - 닫는 태그가 필요 없습니다. - 크기를 변경하고 싶으면 태그 안에 width="200" height="300" 이라는 형식으로 적으면 됩니다. - alt="산이미지" 라는 alt 를 표시하면 이미지가 표시되지않을 때, 대체 텍스트로 제공해줍니다. 따라서 꼭 적어야 합니다. - 이미지에 마우스를 갖다놨을 때 도움말을 주고싶을 때 title="산이미지" 를 사용하여 줄 수 있습니다.
![[ 생활코딩 ] 주요태그 - 줄바꿈 - br](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbzHaT5%2FbtqwgBcnOX5%2F3pPBR8ao4HBvYO9Z90E65K%2Fimg.jpg)
주요태그 - 줄바꿈 - br 줄바꿈을 하고 싶을 때 p 태그를 써도 되지만, p 태그는 줄바꿈의 간격이 고정되어 있기 때문에 자유롭게 간격을 조정하고 싶을 때 br 태그를 사용합니다. br 태그 - 목적 : A forced line-break의 줄임말로 새로운 행에서부터 입력이 시작되도록 합니다. - 등장시기 : HTML2 - br태그는 그냥 줄바꿈이기 때문에 닫는 태그가 필요 없습니다. 하지만 단락을 표현하고 싶을 땐 태그를 써야합니다.
![[ 생활코딩 ] 주요태그 - 단락 - p](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FQYa4H%2Fbtqv8x0Ezls%2FPgcVK6p9yrl01KkgsxrkQ0%2Fimg.jpg)
주요태그 - 단락 - p HTML은 줄바꿈을 무시하기 때문에, 우리가 브러우저에게 어디서 부터 어디까지가 단락이라고 표시하고 싶을 때에는 시작하는 곳과 끝나는 곳에 p태그를 감싸주면 됩니다. 태그 - 목적 : paragraph의 줄임말로 단락을 표현할 때 사용합니다. - 등장시기 : HTML1
![[ 생활코딩] HTML의 변천사와 통계](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Ft8NUj%2Fbtqv7XZOl5T%2FgBkjK59ifHhIRJ0Sk5yGsk%2Fimg.jpg)
HTML의 변천사와 통계 태그들은 새롭게 늘어나기도 하고, 변경되기도 하며, 없어지기도 합니다. HTML 연대기 : 각 HTML 버전들의 태그들 리스트를 볼 수 있습니다. HTML 통계 : 태그들의 사용되는 빈도수를 볼 수 있습니다.
![[ 생활 코딩 ] 개발도구](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbDViaA%2Fbtqv7oRlDQr%2FP6f6jcgADZIFYcfCk1OGmK%2Fimg.jpg)
개발도구 HTML을 이용해서 웹 페이지를 만들 때 도와주는 전문화된 프로그램 종류 윈도우 : 메모장 Mac(맥) : Text Edit Atom(아톰) sublime text Bracket Atom(아톰) 설치 설명 Emmet 기능 : 코드 자동완성 기능 Emmet 기능 태그입력 + Tab : 꺾쇠()자동 완성 ol>li*4 + Tab : 순서형 리스트 완성 ctrl + alt + 오른쪽 화살표 (→) : 다음 편집 포인트(지점)로 워프
![[ 생활코딩 ] 웹사이트 만들기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcaxgKO%2Fbtqv8mZlLr7%2FpYp49zfH3Zb76VaRA60NCK%2Fimg.jpg)
웹사이트 만들기 연결된 웹사이트 만들기 index.html 파일 생성 링크 마련하기 ( 태그 사용) -> 각각의 링크 완성 index.html 을 다른이름으로 저장해서 각각 1,2,3,4.html로 생성 1,2,3,4.html 의 내용을 변경하고 저장