Write and Make

구글 블로그에서 대표 이미지를 설정 하는 방법을 알아봅니다. 글을 적으면, 자동으로 글에 포함된 첫번째 이미지가 대표 이미지로 설정됩니다. 다른 이미지 로 변경하고 싶다면 어떻게 해야될까요? 여기서는 위 파란색 네모 박스의 이미지를 설정해봅니다. 먼저 이미 대표 이미지가 설정된 글로 이동 후 수정모드 로 들어갑니다. 편집모드를 HTML 로 변경 합니다. 해당 페이지에는 이미 대표이미지 로 설정될 이미지 엘리먼트가 들어있습니다.  여러분들이 처음 만들때는 대표이미지 로 사용될 이미지를 '새 글쓰기' 로 업로드 한뒤 html 모드로 변경한뒤 이미지 코드를 확인 해야 합니다. 이미지 소스는 각자 다 다르겠죠.  대표이미지로 설정을 위해서는 해당 코드가 첫줄에만 있어야 합니다.  왜그런지는 정확히 잘 모르겠습니다.  이미지가 글 내부에서는 보이지 않고, 썸네일 이미지에만 보이기 위해서  Style 속성값을 줍니다. 이미지를 보이지 않겠다는 뜻 입니다. 해당 코드를 복사 한뒤, 여러분이 원하는 글로 이동합니다.  글을 HTML 모드로 변경 뒤, 해당 코드를 위에서 언급한 것 처럼 글 제일 처음에 붙여넣기 합니다. 첫줄에 붙여넣기 가 완료 되었습니다. 저장 하고 리스트 와 블로그 미리보기에서 확인 해봅니다. 썸네일이 잘  업데이트 되었네요. 감사합니다.

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 등에서도 사용이 된다. 감사합니다.

div 태그는 division 의 약자로 구역을 나눈다는 뜻 입니다. div 태그의 사용법을 알아봅니다. div 태그는 다른 태그들과는 다르게 뜻별한 태그 자체의 기능을 가지고 있지않다. 다만, 해당 구역을 나눔으로써 향후 배울 CSS 나 JS 등에서 해당 Element 들의 시각적 기능적 효과를 구분해서 손쉽게 적용할 수 있다. 그런용도 로 가장 많이 사용된다. div 태그를 쓴다고 해서 화면상 기능상 무언가 확실하게 눈에 보이게 달라지지 않는다. 그럼 예제 코드를 만들어보자. 두개의 문단이 두개의 div 태그로 둘러쌓여 있다. div 요소(Element)가 두개 인 구조가 되었다. 브라우저에서 실행한 결과이다. div 태그의 특성상 화면상으로 달라진 점은 없다. 다만, 위 예제 코드에서 처럼 div 태그는 열린태그 안에 id 라는 속성을 통해서 div 태그들을 나누어 주고 있다. id라는 속성은 그 태그 를 식별할 수 있는 식별자 이다. 주민등록번호 나 자동차 면허증 처럼 말이다. 이렇게 식별된 div 태그에만 CSS 디자인 요소 및 JS 기능적인 요소를 넣는다면 해당 div 엘리멘트 에서만 그 기능을 하기에 구조적으로 나눔이 효과적으로 사용될 수 있는 것이다. 참고로, div 태그를 사용하면 div엘리먼트 전후 로 line break (한줄)이 자동으로 띄워진다. 하기 코드에서는 P태그를 삭제하였다. P태그가 없지만, div 요소들은 앞뒤로 한줄의 띄움이 생긴다. 감사합니다. HTML태그 란 그리고 엘리먼트란?