html 문서 작성 기초 (a태그, 이미지태그)

html 문서를 다른 페이지로 이동할 수 있도록 연결시켜주는 a태그와 이미지를 입력하는 이미지태그를 배웠다. 

본격적으로 들어가기 전에 다른 웹사이트를 예시로 html을 볼 수 있도록 F12 키를 누르거나 창에서 오른쪽 클릭하여 검사에 들어가 본다. 이렇게 개발자 도구를 열면 해당 웹사이트에 html을 볼 수 있다. 
태그들이 엄청나게 많은데 배울수록 이 태그가 무슨 태그인지 다 알 수 있는 날이 오기를 바란다. 

VSCode를 실행하고 새로운 폴더를 만들어 넣은 뒤에 html 새 파일을 하나 만든다. 

익숙하지 않아서 새 파일 만들 때 헷갈릴 수도 있지만 꼭 확장자. html 써주도록 한다! 
(블로그를 작성하는 지금, 일주일 정도 지나니까 꽤 익숙해졌다)

 

[ 하이퍼 링크를 걸어주는 <a>태그 ]
a태그는 앵커의 약자로 글자 또는 이미지를 통해 해당 페이지로 연결해주는 태그.
반드시 href속성을 이용해 연결하고자 하는 사이트의 주소나 페이지의 주소를 연결해줘야 한다.

a 태그

<기본형>
<a href="링크 또는 파일경로 등" target="페이지 전환 시 보여주는 방식" title="링크 설명"></a>
<a href="링크 또는 파일경로 등" target="_blank">는 새창 열기

[ href의 속성값과 기능 ]
1. 일반적인 사이트 링크 : http로 시작하는 링크 주소를 입력하면 해당 사이트로 이동함.
2. 파일명.html : 해당 html 파일로 연결해줌. 이때 절대경로나 상대경로를 이용해야 함.
3. mailto:이메일 주소 : 해당 이메일 주소로 이메일을 보낼 수 있게 아웃룩이 연결됨.
4. tel:전화번호 : 링크룰 클릭하면 컴퓨터에 연결된 인터넷 전화 또는 모바일에서 전화를 걸 수 있음.
5. sms:전화번호 : 링크를 클릭하면 모바일에서 문자를 보낼 수 있음.
6. # : 당장 연결할 링크가 없는 경우 임시로 링크를 걸어주는 속성값.

 

그리고 연결해주는 파일 경로는 절대 경로와 상대 경로가 있다.

 

[ 절대경로 ]
하향 경로 방식이라고도 함. 파일들을 모두 감싸고 있는 전체 작업폴더인 /(root)폴더를 기준으로 원하는 파일까지 모든 파일 경로를 써서 나열하는 방식이다. 위의 a태그 이미지에서 맨 밑 'link로 이동하기'에서 사용한 방식이다.
예를 들어, 작업폴더 안에 sub폴더가 있고, sub폴더 안에 sub01.html 파일이 있다면 sub01.html을 연결하고자 할 때 href="/sub/sub01.html"이라고 명시하여 연결할 수 있다.
단, root로 부터 시작하여 모든 폴더경로와 파일명이 드러나므로 보안에 취약하다는 단점이 있다.
        
- 맨 앞의 / : root. 파일 전체를 묶고 있는 프로젝트 폴더. = 최상위 폴더
- / : ~~폴더 안에라는 뜻.
ex) href="/sub/sub01.html"
=> 최상위 폴더 안에 서브 폴더 안에 sub01.html파일을 연결한다.
            
[ 상대경로 (*실무에서 많이 사용하는 방법) ]
상향 경로 방식. 현재 작성하고 있는 파일을 기준으로 연결하고자 하는 파일까지를 기호로 나타내며 표현하는 방식이다. 폴더 경로를 기호로 표현하기 때문에 절대경로에 비해 폴더 경로 노출 우려가 적어 보안에 더 유리하여 많이 쓰는 방식이다.

 

- / : root. 최상위 폴더
- ./ : 현재 폴더. 지금 작성하고 있는 파일이 담긴 폴더를 뜻함.

- ../ : 한 폴더 위로. 상위폴더를 뜻함.

 

폴더 안에 여러 폴더와 파일을 만들어 놓고 연결 시켜 주는 연습을 했는데 ./ ../ 경로가 아래 이미지 처럼 자동으로 경로가 띄워짐에도 조금 헤맸었다. 심지어 ../ 경로보다 한단계 더 상위폴더는 .../인줄 알았다..;;

 

아직 복잡한 경로 찾는데는 조금 생각할 시간이 필요하긴 하지만 점차 익숙해져 가는 중이다.

상대경로로 작성

 

---

 

그리고 또 빠져서는 안되는 이미지를 연결시켜 주는 이미지 태그이다.

이미지태그

[ 이미지태그 ]
이미지를 불러오는 태그. inline-block 속성의 대표 태그로 여러 개를 출력하면 이미지가 가로로 출력되고, 이미지 사이에 공백 1칸이 생긴다.
이미지는 이미 사각형의 형대를 가지고 있기 때문에 너비 높이를 조절할 수 있고 이미지를 불러올 때에는 src속성에 이미지 경로를 절대경로나 상대경로로 불러 올 수 있다.
그리고 alt 속성을 이용하여 간단한 이미지 설명을 넣어주어야 한다.(= 웹표준 문법)
alt에 쓰여진 값은 화면 낭독기를 통해 시각장애인들에게 해당 이미지를 설명하기도 하고 이미지 경로가 틀렸을 경우 해당 이미지가 어떤 이미지인지 파악하는 용도로 사용된다.
또한 width와 height 속성을 이용해 이미지의 사이즈를 조절할 수 있는데, 이 때 이미지비율을 정비율로 조절하고 싶다면 width만 사용하는 것이 좋다.
width와 height의 값은 숫자를 입력하면 되고, px단위일 경우 단위는 생략하고 숫자만 입력한다.
px이외의 단위를 입력하고자 하는 경우에는 단위까지 함께 작성해주어야 한다.

<기본형>

<img src="이미지 경로" alt="이미지 설명" width="숫자"/ height="숫자"/>

alt는 시각장애인 들을 위한 설명도 되므로 반드시 써야 웹 표준이 되고 이미지 경로가 틀렸을 경우 해당 이미지가 어떤 이미지인지 파악하는 용도이다.

 

 

그리고 한 가지 더, 엑박이라고 엑스 표시가 아니라 요즘은 저런 로고로 뜬다.

이미지 경로 틀린 경우