프로젝트4 - div 섹션 구역 분리 와 CSS 스타일 적용하기

-
이미지
웹 브라우저에 표시되는 글자와 이미지 들에 디자인 적인 효과( 배경색, 글자색, 크기 조절...) 및 브라우저 내에서의 배치등을 조절하기 위해서는 구역을 나누면 편리해진다. 바로 구역(섹션) 을 나누어 주는 역할을 하는 태그가 div 이다. <div>태그는 브라우저에서 보여지는 시각적 기능은 없다. 단지, 구역을 나누는 역할을 한다.  코드를 만들어 본다. <!DOCTYPE html> <html> <head>   <title>div</title> </head> <body>   <div>     <p>Ice cream is a frozen dessert typically made from milk or cream that has been flavoured with a sweetener,        either sugar or an alternative, and a spice,        such as cocoa or vanilla, or with fruit, such as strawberries or peaches.</p>   </div>   <div>     <p> Food colouring is sometimes added in addition to stabilizers.        mixture is cooled below the freezing point of water and stirred to incorporate air spaces and prevent detectable ice crystals from forming.        It can also be made by whisking a flavoured cream base and liquid nitrogen together.        The result is a smooth, semi-solid foam that is solid at v
댓글 쓰기

a 태그 사용법 과 예제

-

인터넷을 활용한 웹 서핑을 하다보면, 이 웹페이지에서 저 웹페이지로의 이동을 자주하게 된다.
수많은 웹 페이지가 옹기종기 연결되어있다. 웹(web) 이란 단어자체가 거미줄 처럼 엉켜있음을 이야기 한다.
다른 웹페이지로의 이동을 할수 있게 만들어 주는 태그가 바로 a 태그 이다.
어찌보면 HTML 태그 중 심플하지만 가장 강력한 기능을 가지고 있는 태그 라 할 수 있다.
a 태그의 사용법에 대해서 알아본다.

a태그는 다른 태그와는 조금 다르게 필수 속성값을 가진다. 바로 herf 이다.
<a herf="" > </a> : 
herf 라는 속성은 hypertext reference 의 약자로 이동할 웹 URL 주소를 속성 값으로 가지며, herf 속성이 세팅되어야지만 이동하고 싶은 URL로 이동이 가능하다.
a 태그 혼자서만 웹 페이지 이동은 불가하다.

코드 구현 과 그에 따른 결과는 하기와 같다.

a 태그 사용법 과 예제

결과 화면

하이퍼링크 가 생겼다. 해당 하이퍼링크 를 누르면 설정한 URL로 이동하게 된다.
여기서는 네이버 이다.

다만, 해당 탭에서 네이버 페이지로 변환 된다. 기존 웹 페이지는 사라진다.
만약 다른 탭에서 열리게 하고 싶다면, 하기 속성을 추가하면 된다.
바로, target 속성이다. VSC에서 지원해주는 자동완성을 보면 target 속성 값은 총 4가지가 지원된다. 이중 _blank 가 가장 많이 사용된다. 다른 속성은 사용될 일이 잘 없다.
필요하다면 해당 속성들을 웹 검색으로 하나씩 테스트 해보는 것이 HTML태그 공부하는 것에 유리 하다.

a 태그 사용법 과 예제2


target 속성으로 _blank 값을 설정하면, 새 탭에서 설정한 URL이 열린다.
우리가 원했던 결과 물이다.

a 태그 사용법 과 예제3

새탭에서 열린 네이버 페이지

a 태그 사용법 과 예제4

사용빈도 가 높은 속성이 하나 더 있다. 
바로 title 이다. 기존 예제에 title 속성을 추가했다. title 은 추가 설명글 로 이해하면 된다.
a 엘리먼트의 컨텐츠 요소에 "네이버로 이동하기" 란 텍스트 가 있다.
웹페이지를 이용하는 사용자는 해당 하이퍼링크를 선택 시 "네이버" 로 이동하겠구나 라고 인지 할수 있다. 하지만, 추가적인 정보를 더 적어서 보여주고 싶을때 바로 title 속성을 사용하면 된다. 


title 속성의 결과는 하기처럼 해당 하이퍼링크에 마우스를 이동시켰을때
작은 박스(툴팁) 형태로 추가 설명을 보여준다.a 태그 사용법 과 예제5

a 태그는 기본적으로 href 속성과 같이 사용된다.
taget 과 title 은 편의성을 위해서 사용되는 속성이라고 정리해본다.
감사합니다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

구글 블로그 이미지 복사 붙여넣기 가능한가요?

-
이미지
 구글 블로그에서 복사 붙여넣기로 이미지 삽입이 가능한지 테스트 해보았습니다. 1. 윈도우를 사용하신다면,    윈도우키+Shift+S 로 화면캡쳐 한 후, 구글 블로그 글쓰기 창에 CTR+V 로 붙여넣기 하면    하기 처럼 이미지 가 복사 됩니다 복사된 이미지를 마우스로 선택하면 하기처럼 하단에 서브메뉴가 나옵니다 복사 붙여넣기 한 이미지 좌측 3개는 이미지 정렬 메뉴 이며, 4번째는 이미지 크기 조정 메뉴 입니다. 해당 메뉴를 사용해도 되고, 위 처럼 마우스 클릭시 나타난 작은 네모박스 등을 마우스 드래그로 크기를 직접 조정해도 됩니다. 하지만 주로 업로드 실패 에러가 뜹니다. 이는 공식적으로 구글 블로그에서 이미지 복사 붙여넣기 기능을 지원하지 않는 다는것을 의미 합니다.  이미지 삽입은 공식적으로는 상단 이미지 삽입 아이콘을 통해서  이루어져야 합니다.  구글 블로그는 티스토리 에 비해서 이런 점들이 불편한거 같습니다. 블로그에 안착하면서 하나씩 개선 방법을 찾아봐야 겠습니다. 감사합니다.
자세한 내용 보기

HTML 페이지 기본 구성.(HTML Page Structure)

-
이미지
HTML 기본 구성. HTML 문서는 기본적으로 <html>요소 사이에 <head><body> 를 담고 있다. 이게 가장 큰 구조 이다. 먼저 <head></head> 요소는 브라우저에 나타낼 정보를 표기 한다고 생각하면 된다. <title>요소는 브라우저의 타이틀 바 혹은 페이지 탭에 보여지는 제목이다. 하기 빨간 네모박스 부분이라고 생각하면 된다. <body></body>요소 안의 컨텐츠는 브라우저 화면에 보여지는 부분이다. 위 그림에서 My First Heading 과 My first paragraph 부분이 되겠다. 위 그림에 나오는 웹 페이지를 코딩하면 하기와 같다. HTML에서 가장 기본이 되는 문법단위인 태그에 대해서 한번쯤은 생각해 볼 필요가 있다. 태그란 무엇인가에 그리고 HTML은 어떻게 공부하는 것이 좋을것인가 대해서는 하기글에서 이야기 해보자. HTML 태그란 무엇인가?
자세한 내용 보기

구글 블로그 대표이미지 설정하기

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