Write and Make

구글 폰트를 적용하는 방법이다. 1. 구글폰트 사이트에 접속한다. https://fonts.google.com/ 접속하면 여러가지 폰트들이 있다. 하나의 폰트를 선택하고 다운로드 혹은 웹에서 사용할 수 있는 웹폰트를 적용해본다. 2. 폰트 적용하기(폰트 확인하ㄱ 예시로, Language 애서 한국어 를 선택하고 리스트된 폰트 중 하나를 선택한다. 해당폰트의 Glyphs 탭에서는 지원언어를 확인할 수 있고, 언어별 폰트 미리보기가 가능하다. Type tester 탭에서는 폰트를 미리 타이핑 해볼 수 있다. 3. 폰트 다운로드 Get font 버튼 클릭! 여기서는 폰트가 설치되어있지 않아도 폰트를 적용할 수 있는 웹폰트 방식으로  설치를 해본다. 즉, 유저의 PC에 해당 폰트가 없어도 링크방식으로 해당 폰트를 사용할 수 있다.  <>Get embeded code 를 선택한다. 브라우저 웹폰트를 적용하기 위해서 Web 탭에 link, @import 둘중 하나를 선택한다. 여기서는 link 로 진행한다. 4. 웹 폰트 적용하기 - link 요소는 head 태그 사이에 붙여넣고, CSS 스타일은 <style>태그를 만들어서 붙여넣는다. 여기서 스타일시트는 내부스타일시트 방식을 사용했다. 상황에 따라 외부스타일시트 방식을 사용할 수도 있다. <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > web font </ title >   < link rel = "preconnect" href = "https://fo

audio 태그에 이어서 이번 시간은 video 태그에 관해서 다루어 본다. video 태그는 영상을 재생 해주는 태그 이다. 사용법은 하기와 같다. src 속성은 : 재생될 영상 파일의 위치를 나타낸다. 위 코드에서는 video 라는 폴더를 별도로 만들어서 rose 라는 영상을 넣어두었다. controls 속성 : audio 태그와 마찬가지로 영상 컨트롤 바가 나타나도록 하는 속성이다. 이 속성이 없으면 영상재생 되지 않기에, 꼭 해당 속성을 넣어서 사용자가 영상을 제어할 수 있게 만들어 주어야 한다. 해당코드를 실행한 웹 페이지 결과이다. 재생 버튼을 클릭하면 영상이 잘 플레이 된다. 영상의 크기는 기본적으로 영상의 기본 사이즈 로 나온다. 크기를 조정하고 싶다면, 가로, 세로 속성값을 추가해야 한다. width 와 height 속성을 추가했고, 사이즈 값을 설정 했다. 해당 사이즈는 숫자는 pixel 을 의미한다.  참고로, 속성 값은 태그 안에서 순서 가 없기에 원하는 위치에 적어주면 된다 그리고, 속성을 적을때는 콤마는 생략한다. (콤마를 넣으면 오류가 발생) 웹 페이지에서 확인해보면 영상의 사이즈가 조절됨을 확인 할 수 있다. 영상파일 역시 브라우저에서 인식할 수 있는 포맷이 있다. MP4, WebM,Ogg 파일이다. 현재 사파리 브라우저에서는 ogg 가 공식적으로 지원되지  않음을 확인 할 수 있다. 비디오 태그 사이 즉, 비디오 콘텐츠 부분에는 source 라는 태그를 삽입할 수 있다. 이 역할은 해당 브라우저가 특정 비디오 파일 포맷을 지원하지 않을 경우 그 다음 비디오 파일을 실행하라는 의미이다. 비디오 태그 에는 controls 과 크기만 적어주고, source 에 순차적으로 실행될 비디오 파일의 포맷을 기재한다. 위 코드에서는 처음 ogg 를 실행하고, ogg 가 지원하지 않는다면 mp4를 실행하라는 뜻이다. mp4 마저 지원하지 않을때는 오류내용을 텍스트로 보여주는 코드이다. 물론, source 태그가 없이 비디오 태그만으로도 비디오

audio 태그 역시 웹 페이지에서 많이 사용되는 태그 중 하나이다. 사운드를 재생해주는 태그 이다. 태그 사용법은 이와 같다. src : 사운드 파일의 위치를 적는다. 이렇게만 하고 실행을 하면, 웹 페이지에는 아무런 화면 도 사운드도 재생되지 않는다. 필수 속성을 하나 더 줘야 한다. 바로, controls 이다.  controls : 사운드 컨트롤 바를 나타낸다. 웹 페이지 에서 결과를 확인 하면 컨트롤 재생바 가 나오고 재생 버튼을 클릭 시 사운드가 재생된다. audio 태그에서 주의할 점은 바로 사운드 포맷의 지원 유무 이다. 브라우저 별로 어떤 파일을 지원하는 지 외울 필요는 없다. 인터넷으로 검색하여, 브라우저 별 지원 파일을 확인 만 하면 된다. Mp3, WAV, OGG 3개의 파일이 사용된다. 다른 파일들도 브라우저에 따라 실행은 되나, 호환성을 생각하여 위 3개의 파일 포맷을 사용하는 것이 가장 좋다. 감사합니다.

웹 페이지에서 텍스트 를 강조하는 태그에는 em 태그 가 있다 strong 태그 가 굵은 글씨체 였다면, em 은 em 콘텐츠 를 이태릭 체로 꾸며준다. em 은 참고로 emphasize(강조하다) 의 약자이다. 강조하고 싶은 텍스트에 em 태그를 사용한다. em요소는 열린태그 와 콘텐츠 텍스트 그리고 닫힘 태그로 구성된다. 웹페이지에서 결과를 확인 해보자. em element(요소) 가 이태릭 체로 display되고 있다. 보이는 것 외에도 SEO 로봇 및 브라우저 역시 해당 텍스트를 storng 처럼 강조된 텍스트로 인식한다. 텍스트 강조를 위해서 strong 및 em 태그를 사용하는 것이 좋다. 감사합니다.

strong 태그는 말 그대로 강조를 뜻합니다. strong 태그의 콘텐츠는 웹 페이지에서 굵은 글씨로 표현되며, 웹 브라우저에게 중요한 텍스트 임을 강조하는 의미를 내포한다. 그에 반해, b 태그는 bold 의 약자로 글자가 굵은 볼드체로 보여줍니다. 다만 중요한 텍스트임을 강조하지는 않는다. 그렇기에 브라우저는 단지 해당 텍스트를 그저 볼드체로만 인식한다. 강조됨을 표현하고 싶을때는 strong 태그를 사용해야 한다. 예제 와 결과 화면이다. 웹페이지 상으로는 둘다 볼드체 이기에 구별이 어렵지만 SEO를 판별하는 로봇 들이나 브라우저 엔진은 strong 콘텐츠(내용) 부분을 강조하는 텍스트 라고 인식 한다. 감사합니다.

 앞서 다룬 a 태그 와 img 태그를 활용하면, 이미지를 클릭했을때 특정 사이트로 이동(하이퍼링크) 하게 만들 수 있다. 웹 페이지들에서 정말 많이 사용되는 기능 중 하나 이다. 코드는 a 태그가 img 태그를 감싸는 구조로 부모 자식 관계가 형성된다. 예제에서는 a 태그의 href 속성이 네이버를 가리키고 있고, target 속성으로 새탭에서 웹페이지가 열리도록 했다. img 태그는 이미지를 가지고 오며, 대안 텍스트 와 툴팁 도 제공한다. 결과 화면이다. 이미지를 클릭하면 새로운 탭에 네이버 페이지가 열린다. 앞서 배운 a 태그 와 img 태그 만으로도 재미있는 웹 페이지의 기능이 구현된다. 어떠한 장비 도 필요치 않고 오직 컴퓨터 만 있으면 바로 브라우저에서 결과값을 확인 할 수있으니 재미있다. 이것이 바로 HTML 의 장점이기도 하다. 감사합니다.

img 태그는 웹문서에 이미지를 나타내는 태그 입니다. img 태그는 기본 속성으로 src 와 alt 를 가진다. VSC 에디터를 사용하면 img 만 입력 후 탭을 하게되면 자동 완성 기능에 의해서 기본 속성들이 입력됨을 알 수 있다. src : 이미지 경로 위치를 나타냄 alt : alternative text 를 의미하며, 사진이 특정 이유로 나오지 않을경우 alt 속성으로 설정한 텍스트가 웹 브라우상에 표기된다.  * 이미지 경로 오류 로 alt 텍스트가 표기된 모습                                                        그리고, 시각장애인 음성 기능을 사용할때는 alt 텍스트를 음성으로 읽어주기 때문에  alt 속성 도 꼭 기재하는 것이 좋다. src, alt 둘다 잘 기재하는 것이 SEO 검색에도 높은 점수를 받을 수 있다. 어찌보면 HTML 태그 속성의 가장 기본적인 성격대로를 사용하는 것이 SEO 검색 봇들에게 검색이 잘 되는 문서가 될 수 있다. 웹 페이지를 만드는 이유는, 어찌되었든 많은 이들에게 정보를 전달하기 위함이 아닌가? 완성된 img 엘리먼트의 모습이다. 브라우저에서는 사진을 보여준다. 추가로 title 속성을 추가하면 툴팁 박스에 이미지를 설명할 수 있는 텍스트를 넣을 수 있다. 마우스로 가져가면 툴팁박스가 보이게 된다. 툴팁 박스는 하기 a 태그 사용법 과 예제 포스팅에서 확인 할 수 있다. 감사합니다. a 태그 사용법 과 예제

인터넷을 활용한 웹 서핑을 하다보면, 이 웹페이지에서 저 웹페이지로의 이동을 자주하게 된다. 수많은 웹 페이지가 옹기종기 연결되어있다. 웹(web) 이란 단어자체가 거미줄 처럼 엉켜있음을 이야기 한다. 다른 웹페이지로의 이동을 할수 있게 만들어 주는 태그가 바로 a 태그 이다. 어찌보면 HTML 태그 중 심플하지만 가장 강력한 기능을 가지고 있는 태그 라 할 수 있다. a 태그의 사용법에 대해서 알아본다. a태그는 다른 태그와는 조금 다르게 필수 속성값을 가진다. 바로 herf 이다. <a herf="" > </a> :   herf 라는 속성은 hypertext reference 의 약자로 이동할 웹 URL 주소를 속성 값으로 가지며, herf 속성이 세팅되어야지만 이동하고 싶은 URL로 이동이 가능하다. a 태그 혼자서만 웹 페이지 이동은 불가하다. 코드 구현 과 그에 따른 결과는 하기와 같다. 결과 화면 하이퍼링크 가 생겼다. 해당 하이퍼링크 를 누르면 설정한 URL로 이동하게 된다. 여기서는 네이버 이다. 다만, 해당 탭에서 네이버 페이지로 변환 된다. 기존 웹 페이지는 사라진다. 만약 다른 탭에서 열리게 하고 싶다면, 하기 속성을 추가하면 된다. 바로, target 속성이다. VSC에서 지원해주는 자동완성을 보면 target 속성 값은 총 4가지가 지원된다. 이중 _blank 가 가장 많이 사용된다. 다른 속성은 사용될 일이 잘 없다. 필요하다면 해당 속성들을 웹 검색으로 하나씩 테스트 해보는 것이 HTML태그 공부하는 것에 유리 하다. target 속성으로 _blank 값을 설정하면, 새 탭에서 설정한 URL이 열린다. 우리가 원했던 결과 물이다. 새탭에서 열린 네이버 페이지 사용빈도 가 높은 속성이 하나 더 있다.  바로 title 이다. 기존 예제에 title 속성을 추가했다. title 은 추가 설명글 로 이해하면 된다. a 엘리먼트의 컨텐츠 요소에 "네이버로 이동하기" 란 텍스트 가

ol 태그는 ordered list 의 약자로 순서가 있는 리스트(목록) 을 만든다. 웹페이지의 결과값은 아래와 같다. 4개의 항목이 만들어 졌고, ul 태그와는 다르게 기호가 아닌 숫자로 순서를 표기하고 있다. ol 태그의 특성을 잘 나타내고 있다. 위 결과를 만들기 위한 예제 코드는 다음과 같다. body 태그 안에 ol 태그를 정의 하고 내부에 li 태그를 사용했다. li 태그는 목록(항목)들을 만들어 낸다. 즉, ol 태그 혼자서만 사용이 불가하고 li 태그와 같이 리스트가 만들어 지는 구조이다. ol : 순서있는 목차를 만들거야 li : 각 아이템(항목) 을 만든다. 이렇게 웹 브라우저에게 개발자가 명령을 던지는 거와 같다. ul 태그와 비교해서 공부해보면 손쉽게 이해가 가능하다. 감사합니다.  Ul 태그 사용법 과 예제

웹 페이지 에서 목록(list) 등을 표현할때 사용되는 태그 이다. Ul 은 unordered list 의 약자로 순서가 없는 리스트를 뜻한다. Ul 태그로 만든 리스트 웹페이지 예제를 보면 하기처럼 나온다. 리스트 목록 앞에 점모양의 기호가 들어가 있다. 기본 값이다. Ul 태그의 속성을 변경하면 이 기호의 형태도 수정할 수 있다. 하지만 여기서는 Ul 태그 자체의 기능만 살펴보자. 위 결과를 만들기 위한 예제코드는 다음과 같다. Body 태그 안에 Ul 요소를 만들어 보았다. Ul 태그는 혼자서만 사용해서는 리스트를 만들 수는 없고, 자식 관계에 놓인 li 태그를 사용해야 된다. li 는 짐작하듯 list 의 약자 이다. 해당 코드는 ul 순서가 없는 리스트를 만든다 li 리스트 아이템(항목) 을 열거한다. 의 순으로 웹페이지가 이해하게된다. 이렇듯 li 태그는 ul 태그와 쌍으로 같이 구현되게 된다. ul 이외에도 ol(ordered list) menu 등에서도 사용이 된다. 감사합니다.