웹개발 스터디 : 3화 - HTML 태그 알아보기 1
리스트 태그와 이미지 태그, 하이퍼링크 사용하기
기본 웹개발 관련 상식을 검증하고, 웹개발 입문자들을 위한 자료용 문서입니다. 추후 부트스트랩과 워드프레스, 자바스크립트 프레임워크 등으로 연결되는 문서가 될 예정입니다.
문서 목록
1화 : https://brunch.co.kr/@clay1987/156
2화 : https://brunch.co.kr/@clay1987/157
3화 : https://brunch.co.kr/@clay1987/158
HTML 알아보기
HTML 기반 리스트 태그 (HTML Lists)
기본적으로 HTML은 문서 규격이라고 보면 된다. 그렇기 떄문에. 글을 쓸 때, 마치 단락을 조절하고 리스트 형태의 내용을 요약하듯이. 기존 문서 작성에 사용되는 여러 형태의 태그들 중. 정리된 형태의 리스트 규격도 직접 작성할 수 있다.
Ordered / Un ordered의 차이
숫자로 하나하나 순서를 세는것을 : Ordered list (ol)
그렇지않고 그냥 점으로 표기하는것을 : Un ordered list (ul)
OL : Ordered list
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
UL : unordered list
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
OL은 리스트가 늘어날수록 순차적으로 숫자가 1에서부터 하나씩 늘어나게되고.
UL은 좌측에 불레틴이라고 불리는 고정자가 반복해서 표기되는 형태다.
HTML 알아보기
HTML 에서 이미지 요소 사용하기 (HTML Image Elements)
HTML은 기본적으로 텍스트. 문서를 표기하기위한 방식이다. 그러나 추가적으로 태그를 더해서 - 이미지를 표현하는 방법도 존재한다. 다만 우리가 생각하는 것보다, 이미지를 올리는 방식은 그리 직관적이지 못하다. 일단 이미지를 끌어오는 위치와, 표현할 파일명과 규격. 또한 크기에대한 옵션을 차례로 선택해주어야하기 때문이다.
이미지를 사용할 때 쓰이는 <img> 는 변하지 않는 규격이고, 그 뒤에 src 방식과, 초록색 상태값은 상황에따라 변화하는 주소값에 가깝다. 특히 초록색의 주소값은, 인터넷에 올려져있는 그 어떤 이미지라 하더라도 고유한 주소값을 가진다. 간단히 말해서 - 웹 어디든 '올려놔야' 그 이미지가 주소값을 갖게되고, 그 주소값을 다시 불러다가 사용할 수 있다.
구글에서 이미지를 찾고, 그 이미지를 다시 복사할 경우도 마찬가지다. 해당 이미지가 올려져있는 곳에서 이미지 주소를 복사해오게된다. 네이버 블로그같은 경우는 첨부파일 주소값에 온갖 쓰레기같은 추가정보가 이것저것 붙게되므로, 가능하면 사용을 자제하는게 좋다. (심지어 텍스트가 엄청나게 깨져서 나온다.)
1. 이미지를 URL 기반으로 사용하기
포토버켓같은 사이트에서는 원하는 이미지를 올려놓고, 다시 원하는 공간에 URL을 붙여넣어 사용하기 용이하게 만든 사이트다. 물론 이 사이트는 유료서비스지만 무료로 사용할 수도 있다. 다만 이미지 업로드 최대치에 제한이 생긴다.
포토버켓에 가입 후, 이미지를 업로드해봤다.
업로드한 이미지를 확인해보면, 상세 페이지 내, 우측상단영역에 세가지 상태값이 나오는걸 알 수 있다.
1. Direct : 해당 사진의 관리페이지로 바로 접속할 수 있는 주소다.
2. HTML : HTML의 a 태그로 생성된 이미지 주소값이다. (A 태그 + Img 태그 두개가 쓰였다)
3. IMG : 이미지 URL 값이 써있는듯한데, 그다지 깔끔한 규격이 아니다.
여러가지 실험을 해봤지만, 1번. Direct로 이미지 주소만 복사하고. 다른 규격은 내쪽에서 만드는게 속이 편할듯하다.
img src= 이후 주소를 복사붙여넣기하고, 크기를 설정해 만들어낸 결과값2. 이미지를 HTML과 함께 폴더에 놓고 불러서 사용하기 (상대경로)
만약 다른곳에 이미지를 올려놓고싶지 않다면. 홈페이지 HTML 파일이 위치하는 폴더 상에 이미지를 올릴 수도 있다. 그 경우 해당 이미지와 HTML파일의 경로에 따라 주소값이 유동적으로 변화하게된다. 사실상 폴더구조를 그대로 사용하는 방식이기 때문에, 경로만 정확하게 지정해주면 된다.
HTML 파일의 위치
E 드라이버 > 프로젝트 폴더 > atom 폴더 > HTML_test 폴더 안에 있는 - HTML 파일의 경로
이미지 파일의 위치
E 드라이버 > 프로젝트 폴더 > atom 폴더 > HTML_test > img 폴더 안에 있는 - 테스트 이미지
HTML에서 이미지 파일의 경로
이미지 폴더는 HTML 폴더와 동일 경로에있다. 그러나 폴더 안에 있으니
img src"img/test_img.jpg" 라고 써주면 된다.
ALT = Alternative (대체 텍스트)
이미지 태그 속성에는 alt. 라는 부분이 있는데. 이미지가 어떤 오류료 표기되지않을때, alt에 해당하는 텍스트를 보여주게된다. 또한 해당 부분은 검색엔진 최적화 (SEO) 부분에서도 상당히 중요한 부분이니, 꼭 기억해두길 바란다.
alt = "이미지에 대한 설명값"
HTML 알아보기
HTML 링크와 앵커(닻) 태그 (HTML Link and Anchor tag)
HTML은 기본적으로 하나의 문서를 보여주는 것에서 끝나는게 아니라. 여러 문서를 연결시키는 데에 의미가 있다. 그렇기 때문에 그 핵심기능인 하이퍼링크와 링크와 앵커 (닻) 기능에 대해 알아두어야할 필요가 있다. 우리가 평소에 사용하는 웹사이트나, 모바일 페이지들도. 개별 메뉴는 모두 각자의 주소값을 갖고있고. 버튼을 누르면 해당 페이지로 이동하는 형태로 되어있다. 그러니 단순히 외부링크 외에도, 내부 페이지 이동 역시 이런 하이퍼링크의 개념이 들어가있다고 할 수 있다.
A태그와 href 방식을 함께 사용하기
이동하길 원하는 주소값을 넣어주고, 사람들에게 보여질 링크의 이름을 적어주면 된다.
<a href="주소값"> 링크의 이름 </a>
결국 모든 웹페이지는 링크와 글, 그리고 이미지와 영상 등으로 이뤄져있다. 그렇게 본다면 CSS를 통해 꾸미는 단계를 제외하고, 웹페이지를 만들기 위한 기본적인 내용들을 모두 배워나가고있는 셈이다. (웹페이지 만들기 참 쉽다!)
페이지와 페이지를 서로 이동할 수 있게 만들기 (Anchor)
HTML 파일의 이름을 알기쉽게 바꿔주고, 하나를 복사해봤다.이후 각각 페이지에 이름을 바꿔주면 링크를 통해 페이지를 이동할 수 있게 되었다. 이런 형태는 아주 기초적인 형태의 메뉴나 네비게이션 구조에 자주 사용되는 방식이다.
추후 저런 구조에 메뉴형식의 CSS를 부여하면, 나중에는 홈페이지의 메뉴 등을 만들어낼 수 있다.
우리가 자주 사용하는 서비스들도, CSS를 제거하면 정말 단순한 HTML 규격의 문서가 만들어진다. 사실상 웹페이지의 7~80%정도 되는 비주얼에 대한 부분은. CSS에서 완성되기 때문에. HTML에 있어서는 자주 사용되는 규격과 태그들만 알아두면 - 금방 다음 단계로 넘어갈 수 있다.
이 내용은 UI 디자인 연구소 - 단톡방의 내부인원들을 위해 만들어진 자료입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
