#2.4~2.5
HTML 태그 중 'a'라는 태그가 있다.
anchor라는 의미로 링크를 입력하는 태그인데
내가 쓴 글에 링크를 걸어줘서 그 사이트로 이동할 수 있게 해주는 태그이다.
google이라고 쓰고 google 사이트 주소를 링크로 걸어놓으면 google이라는 글자를 누를때 사이트로 이동하는 것이다.
그냥 a만 쓰면 안되고 a 옆에 href라는 attribute를 쓰고 사이트 주소를 써줘야 링크가 걸린다.
attribute란 태그에 부가적인 정보를 추가하는 것이다.
href는 hyperlink reference 또는 HTTP reference 이다.
이동할 곳을 알려주는 attribute이다.
만약 애를 h1이랑 같이 쓰면 아무 효과가 없음.
a와 있어야 능력을 발휘한다. 그리고 꼭 띄어쓰기해주기.
'target'이라는 attribute도 있는데 기본값은 'self'인데, 이건 링크를 누르면 그 탭에서 이동이 되고, 'blank'로 바꿔주면 다른 탭에서 열리게 된다.(self와 blank 앞에 하단 바 써줘야함.)
'img'태그는 사진을 넣을 수 있는 태그!
얘는 자동으로 닫히는 태그(self closing-tag)라 따로 닫아주는 태그를 쓰지않아도 된다. 맨끝에 /만 넣어주자.
'src'라는 attribute와 함께 사용된다.
sorce라는 의미로 여기에 사진의 출처 사이트 등을 넣어주면 됨!
(최고심 너무 귀여워...)
꼭 사이트에 있는 사진이 아니어도 저장되어있는 것도 첨부 가능
사이트 주소 말고 이미지를 html파일이 저장되어있는 폴더에 저장한 다음 VScode에 드래그해서 옮겨준 다음 로고의 이름과 확장자만 넣어주면 된다.
다른 폴더에 있다면 이미지가 저장된 폴더/이미지이름.확장자 를 입력해주면 된다.
(ex. src="img/logo.jpg")
이제 Head에 대해 알아보자
웹사이트 탭 상단에 보면 사이트의 이름이 나오는데 이건 어떻게 해야할까?
HTML문서는 항상
!DOCTYPE html 로 시작해야한다.
이건 HTML 문서라는 걸 알려주는 태그이다.
그 다음은 HTML 태그를 달아주고 그 안에 작성을 해야 HTML 코드라는 걸 이해한다.
그 하위에는 Head와 body가 있다.
head 웹사이트의 환경을 설정하고
body는 컨텐츠를 보여준다.
head 하위에 title 태그를 달아서 써주면 그게 탭에 표시되는 웹사이트의 타이틀이 된다.
이 규칙을 따라야만 나중에 CSS와 JAVAscript를 썼을 때 아무 오류가 나지 않고 잘 작동할 것이다.
태그 밖의 내용은 정말 아무 의미가 없고 나중에 실제 웹사이트를 만들 때 오류의 원인이 되니 태그 안에 내용을 잘 기입할 것.
출처: 노마드코더 Nomad Coders '코코아클론'
사진출처: 최고심 트위터
