[HTML] Link 태그 사용하기

목표: Link 태그를 활용해서 맨위로 이동 구현하기

요약

id(아이디) 달아주기
href에 해당 id 링크하기

안녕하세요 냥장판 입니다

웹페이지를 쭉 내리다가

맨 위로(페이지 상단) 올라가고 싶을 때가 있죠?

웹서핑이든, 쇼핑이든 페이지 상단으로 올라갈 때 우리는

TOP 이미지나 버튼을 클릭합니다.

이번 게시글에서는 위로 올라가는 방법(?) 알려드릴게요!

일단 징그럽게 긴 텍스트를 입력합니다;

스크롤바가 있고, 밑으로 내려가다가

맨 위로 가려면 마우스를 계속 굴려야해요

1. id(아이디) 달아주기

각 요소마다 아이디(id)를 달아주는 거에요

이동하고 싶은 곳 속성에 id를 달아주세요

2. href 에 해당 id 링크하기

그래서 맨 아래에 내려갔을 때 Link 태그에서 해당 id를 가진 속성을 호출하는 구조 인거죠.

아주 쉽죠!

▼ 코드 보기

<!DOCTYPE html>
<html lang='en'>
    <head>
        <title>맨 위로 올라가기 </title>
        <link href="https://fonts.googleapis.com/css?family=Sunflower:300&display=swap" rel="stylesheet">
        <style>
            body{
                font-family: 'Sunflower', sans-serif;
            }
        </style>
    </head>
    <body>
        <h1>고양이</h1>
        <h3 id="thetoppest">고양이 이름의 유래</h3>
        <p>
            한자로는 묘(猫)라 하고, 수고양이를 낭묘(郎猫), 암고양이를 여묘(女猫), 얼룩고양이를 표화묘(豹花猫), 들고양이를 야묘(野猫)로 부르기도 한다. 현재 집에서 기르고 있는 모든 애완용 고양이는 아프리카·남유럽·인도에 걸쳐 분포하는 리비아고양이(Felis silvestris lybica)를 사육 순화시킨 것으로, 전세계에서 2억 마리가 넘게 사육되는 것으로 알려져 있다. 약 5,000년 전 아프리카 북부 리비아산(産)의 야생고양이가 고대 이집트인에 의해 길들여져서 점차 세계 각지에 퍼졌다고 한다. 이것은 고대 이집트의 벽화 ·조각, 고양이의 미라 등으로 미루어 명확하지만, 그것이 현재 사육되는 모든 고양이의 조상인지는 의문이다. 고양이를 죽이거나, 소중히 다루지 않으면 불행을 당하게 된다는 민화(民話)는 동양의 여러 나라뿐 아니라 유럽 ·아프리카 등지에도 있다. 고양이의 가축화가 현저히 발달한 고대 이집트에서는 고양이는 신성한 동물이었다. 또한 고양이가 시체를 뛰어넘으면 시체가 움직인다고 하여 고양이를 시체 가까이 두지 않는 풍습도 있으며 고양이에 관한 미신은 많다. 고양이의 거동을 사물의 전조(前兆)로 보는 습관은 세계적인 현상이다. 
            국제고양이협회(The International Cat Association, TICA)에 의하면 공식적으로 인정된 고양이 품종은 2018년 기준 71종이다. 우리나라에서는 흔히 볼 수 있는 토종 고양이 ‘코리안 쇼트헤어’가 있다. ‘참고양이’라고도 하는 코리안 쇼트헤어는 미국의 길고양이인 ‘아메리칸 쇼트헤어’를 본떠 이름 지어졌으며, 줄여서 ‘코숏’이라 부르기도 한다. 코리안 쇼트헤어의 역사는 명확히 밝혀지지 않았으나, 5~6세기경 가야 토기에 새겨진 고양이의 모습과 9세기경 신라 왕궁 주변에서 발견된 고양이 뼈를 미루어 삼국시대 때부터 존재한 것으로 본다.
        </p>
        <br>
        <h3>생물학적 특성</h3>
        <h5>골격</h5>
            <p>
                고양이는 거의 모든 포유류와 같이 7개의 경추를 가지고 있으며, 13개의 흉추, 7개의 요추, 3개의 천추를 가지며 맹크스를 제외하고는 22개나 23개의 미추를 가진다. 여분의 요추와 천추 덕분에 고양이는 사람과 비교했을 때, 보다 향상된 척추 운동성과 유연성을 가진다. 미추는 꼬리를 형성하며, 고양이의 빠른 운동시에 몸의 균형을 잡는 데 이용된다. 또한 고양이는 자유롭게 움직이는 쇄골을 가지고 있어서 어떠한 공간이라도 머리만 들어간다면 몸이 지나갈 수 있다. 
            </p>
        <h5>입</h5>
        <p>
            고양이는 사냥감을 죽이고 고기를 찢기에 좋은 아주 특수한 이빨을 가지고 있다. 앞어금니와 첫 번째 어금니는 육식용으로 입 양쪽에 쌍을 이루고 있으며, 한 쌍이 가위와 같이 고기를 효율적으로 자를 수 있는 기능을 한다. 고양이의 어금니를 다른 말로 열육치라고 부른다. 이러한 것은 다른 야수들에게도 존재하지만, 특히 고양이과의 동물들에게 잘 발달되어 있다. 보통 고양이는 이빨로 음식을 씹는다기보다는 음식을 잘라서 먹는다고 볼 수 있다.
            구강 구조에 의하여 고양이들은 야옹거리기, 골골거리기, 하악 거리기, 으르렁거리기, 빽빽거리기, 짹짹거리기, 찰칵 소리 내기, 끙끙거리기 등의 다양한 발성과 몸짓으로 의사소통을 한다. 특히 야옹거리는 소리가 때에 따라 다르기 때문에 알아듣기 어려울 수 있다.
        </p>
        <h5>귀</h5>
            <p>각 귀에 있는 32개의 개별 근육들은 고양이가 각각의 귀를 별도로 움직여 소리를 들을 수 있도록 해준다. 이러한 운동성 덕분에 고양이는 몸을 한 방향으로 움직이면서 귀를 다른 방향으로 향하게 할 수 있다. 대부분의 고양이들은 위로 향하는 곧은 귀를 가지고 있다. 개와 달리, 접힌 귀를 가진 종은 극히 드물다. 스코티시 폴드가 그러한 예외적인 변종이다.
            화가 났을 때나 무서울 때, 고양이는 으르렁거리거나 하악거리는 소리를 내며 귀를 뒤로 젖힌다. 또한 고양이는 놀거나 뒤에서 나는 소리를 들을 때 귀를 뒤로 젖힌다. 귀의 각도는 고양이 감정을 이해하는 중요한 단서이다.</p>
        <h5>발</h5>
            <p>개와 마찬가지로 고양이는 발가락으로 걷는 지행동물이다. 고양이는 발의 뼈가 다리의 아래 부분이 되며, 직접 발가락으로 걷는다. 고양이는 뒷발을 거의 정확하게 상응하는 앞발의 발자국에 놓음으로써 소음과 흔적을 최소화 한다. 이것은 또한 고양이들이 거친 지역을 돌아 다닐 때 뒷발에 확실한 발판을 제공하는 역할을 한다. 고양이과 동물들의 특성으로, 오므릴 수 있는 발톱을 가지고 있다. 보통의 긴장이 풀린 상태에서 발톱은 발바닥 근처의 피부와 털로 덮여 있어 발톱이 지면과의 접촉으로 인하여 닳는 것을 방지하여 발톱을 날카롭게 유지하며 또한 사냥감을 조용히 따라갈 수 있게 한다. 앞발의 발톱은 일반적으로 뒷발톱 보다 날카롭다. 고양이는 의도적으로 하나 이상의 발의 발톱을 꺼낼 수 있다. 고양이는 사냥이나 자기방어, 타고 오르기, 주무르기 혹은 침구류나 두꺼운 러그 등의 부드러운 표면에 추가 마찰을 위하여 발톱을 꺼낼 수 있다. 온순한 고양이의 발 위 아래를 조심스럽게 누름으로써 발톱을 꺼낼 수도 있다. 굽어 있는 고양이의 발톱은 카펫나 다른 두꺼운 천 등에 걸리기도 하며, 스스로 빼낼 수 없을 경우 고양이를 다치게 할 수도 있다. 일반적으로 앞발에 다섯 개, 뒷발에 네 개나 다섯 개의 발톱을 가지고 있으나 오랜 돌연변이의 결과로 집고양이들은 다지증에 걸리기 쉬우며 여섯 개나 일곱 개의 발가락을 가지고 있을 수도 있다. 다섯 번째의 앞발톱은 다른 발톱에 인접하여 있으며, 좀 더 인접하여 여섯 번째의 손가락인 돌출부가 있다. 발목 안쪽에 위치한 앞발의 이러한 특수한 모양은 손목관절의 패드로 큰 고양이들이나 개들의 발에서도 발견된다. 이것은 보통 걸음걸이에는 기능하지 않으나 도약할 때 미끄러지지 않도록 해주는 기능을 한다고 믿어지고 있다.</p>
        <h5>피부</h5>
            <p>고양이는 다소 느슨한 피부를 가지고 있으며, 이것은 고양이가 포식자나 다른 고양이와 싸울 때 그들에게 잡히더라도 몸을 돌려서 마주볼 수 있도록 해준다. 이것은 또한 수의학적으로도 주사를 쉽게 놓게 하는 이점이 있다. 실제로, 신부전증이 있는 고양이들의 생명은 때때로 투석치료 대신 정기적으로 다량의 약을 피부에 주사함으로써 몇 년씩 연장되기도 한다.
                목뒤의 특히 느슨한 피부는 뒷덜미이며, 어미 고양이가 새끼를 운반 할 때 새끼를 잡는 부위이다. 따라서, 고양이들은 그 부위를 잡혔을 때 조용해지고 순종적으로 되는 경향이 있다. 이러한 행동은 다 자라서도 이어져, 수컷이 교미를 위하여 암컷에 올라 탔을 때 뒷덜미를 잡음으로써 암컷을 움직이지 못하게 하며 교미 중 암컷이 도망가지 못하도록 한다.
                이 방법은 비협조적인 고양이를 치료하거나 옮기려고 시도할 때 유용할 수 있다. 그러나 성체는 아기 고양이보다 무거워서 절대로 뒷덜미를 사용하여 옮기면 안되며 엉덩이와 뒷다리 쪽 그리고 가슴과 앞발 쪽으로 무게를 지탱해야 한다. 어린 아기와 마찬가지로 고양이는 머리와 앞발을 사람의 어깨에 올리고 뒷발과 엉덩이를 사람의 팔로 떠받치며 안기게 된다.
            </p>
        <h5>감각</h5>
            <p>
                고양이의 코. 고양이의 후각은 매우 민감하다. 고양이의 감각은 사냥에 맞추어져 있다. 고양이는 고도로 발달된 청각, 시각, 미각 그리고 촉각이 있어 다른 포유류들보다 극도로 예민하다.
                고양이의 야간 시력은 사람보다 우수하나 낮 시간의 시력은 사람보다 열악하다. 고양이의 눈에는 휘막이 있으며, 푸른 눈은 일반적으로 멜라닌 색소가 부족하여 적목현상을 보일 수 있다.
                사람과 고양이는 저음대에서는 비슷한 청음구간을 보이나 고음대에서는 64[[킬로헤르츠|kHz] 음을 들을 수 있으며 후각은 사람보다 약 열네 배가 강하다.
                초기 고양이 조상들의 돌연변이로 인하여 고양이는 단맛을 느끼는 데 필요한 두 개의 유전자 중 하나를 잃었다. 이동과 지각을 돕기 위해, 고양이는 십여 개의 움직일 수 있는 수염을 얼굴 부위에 가지고 있다.
            </p>

            <h5>습성</h5>
            <h3>사회성</h3>
            <p>
                고양이끼리 친구가 될 수 있다. 다른 고양이를 그루밍해 주는 고양이
                무리 생활을 하지는 않지만 자신보다 높은 서열의 고양이의 식사 순서를 지키는 등 서열 의식이 갖춰져 있다. 고양이 울음소리의 사회적 역할은 침입자에 대한 것과 나머지 세 가지 소리의 종류에 따라 다르다. 코로 내는 가르랑 소리는 고양이 간의 인사 혹은 다치거나 아픈 고양이에 대한 사회적 관심을 표현하는 것이다. 또한 비음을 섞은 떨림 소리는 인사를 위한 것이다. 천천히 다가오며 『야옹』과 같이 입을 열며 내는 울음소리는 종류가 많은데, 주로 다른 고양이나, 개와 인간같은 다른 동물과의 인사내지 사회적 상호작용을 위한 상황에서 내는 것이다. 입을 열면서 내는 소리, 『하-악』이나 으르렁거림은 주로 고양이의 공격성과 관련된다.[5]
                사람, 가축, 다른 반려동물과의 가까운 곳에서의 생활은 고양이가 점차로 공생을 할 수 있는 사회적 적응이 되게 하였으며, 그럼으로써 사람이나 다른 동물에게 애정표현을 잘 하게 되었던 것 같다. 동물행동학에서는 고양이를 키우고 있는 사람은 고양이에게 마치 어미와 같은 역할을 하게 된다고 한다.[6] 또한 집에서 자란 어른 고양이는 마치 새끼고양이 시절의 연장인 것처럼 행동한다. 이것을 행동적 유형성숙이라고 한다. 집고양이가 배고픈 어린아이의 우는 소리를 모방해서 먹이를 달라고 높은 소리로 조르면, 특히나 사람에게는 거부하기가 힘들다.[7]
            </p>
            <h3>싸움</h3>
            <p>
                고양이는 등을 아치형으로 구부리기, 털 세우기, 몸 옆으로 돌리기, 하악거리기, 꼬리 부풀리기로 방어행동을 한다.
                집고양이의 경우 암컷보다는 수컷이 더 자주 싸운다.[8] 길고양이의 경우에는 한마리의 암컷을 두고 두마리의 수컷이 싸우는 경우가 많다. 이런경우 대개는 더 무거운 고양이가 승리하게 마련이다.[9] 집고양이의 또 다른 싸움의 원인으로는 좁은 집에서 같이 살아서 자신의 영역을 만들기가 어려울 때이다.[8] 암컷 고양이또한 영역을 지키거나 새끼를 지키기 위해 싸운다. 중성화는 이러한 싸움을 줄이거나 심지어 없앤다. 아마도 그 원인은 성호르몬에 있는 것으로 보인다.[10]
            </p>
            <h3>위생</h3>
            <p>
                갈고리처럼 휘어진 고양이의 유두돌기는 마치 빗과 같이 털을 닦고, 엉킨 털을 가지런히 한다
                고양이의 혀에는 목구멍쪽을 향해 고리처럼 뻗은 케라틴을 함유한 유두돌기가 있다. 고양이는 이 케라틴 돌기와 침으로 털을 핥아 스스로를 단장한다. 또한 많은 고양이들은 다른 고양이나 사람을 단장해 주기도 하는데 고양이들은 종종 집단의 서열 상에서 우위에 있음을 주장하기 위해 다른 고양이를 핥아 단장해 주기도 한다.[16]
            </p>
            <h3>높은 곳을 좋아하는 습성</h3>
            <p>
                고양이들은 다른고양이과 동물들처럼 높은 곳을 좋아하는 습성이 있는데, 그 습성 때문에 물건을 떨어트리는 사고를 가끔씩 일으킨다. 그래서 고양이의 습성에 알맞은 장난감은 캣 타워이다.
            </p>
            <a href="#thetoppest">Top으로 이동</a>
    </body>
</html>

     style="display:block"
     data-ad-client="ca-pub-9512983930357661"
     data-ad-slot="3488991516"
     data-ad-format="auto"
     data-full-width-responsive="true">

3. 이미지 파일로 Top 버튼 만들기

글자로하면 너무 고전적이니까

이미지 파일로 버튼 구현해보죠.

Link 태그 사용법은 아래 게시글 꼭 참고하세요

2020/01/09 - [놀고있네/HTML & CSS] - [HTML] Link 태그 사용하기 - 기본편

[HTML] Link 태그 사용하기 - 기본편

목표: Link 태그 사용하기 요약 URL 하이퍼링크 걸기: href 이미지 하이퍼링크 걸기: href, img 안녕하세요 냥장판 입니다 HTML문서에는 Link 또는 Hyperlink 라는 태그가 있어요. 이 태그는 다른 html 문서나 이..

miaow-miaow.tistory.com

외부 리소스 이미지를 사용해 볼게요!

이미지를 클릭하면 상단으로 이동합니다.

그럼 이만!

예쁜 폰트를 쓰고싶어요

혹시 맑은고딕만 사용하고 계시나요?

세상엔 예쁜 폰트가 많답니다

Google에서 무료로 제공하는 폰트 사용해보세요!

2019/11/21 - [기타] - [Font] Google Fonts 사용하기

[Font] Google Fonts 사용하기

목표: Google에서 제공하는 Web Font를 사용해보자 요약 Google Fonts 접속 Language 선택 폰트 선택 코드 복사 1. Google Fonts 접속 Google Fonts URL: https://fonts.google.com/ Google 에서는 무료로 사용할..

miaow-miaow.tistory.com

그럼 이만!

저작자표시

'🎪 놀고있네 > HTML & CSS' 카테고리의 다른 글

[HTML] Link 태그 사용하기 - 새창에서 페이지 열기 (10)	2020.01.15
[HTML, Chrome] 크롬에서 HTML 작업하기 - 개발자도구 (6)	2020.01.14
[HTML] Link 태그 사용하기 - download 속성 (6)	2020.01.10
[HTML] Link 태그 사용하기 - 기본편 (4)	2020.01.09
[HTML] 엔티티, Entity란? (0)	2019.12.23

냥장판