05_HTML 인라인 요소

728x90

오늘은 HTML 여러 인라인 요소에 대해 공부했다.

우선 <a>태그부터 살펴보자.

<a> 이멜주소,우편 등 다른 URL로 연결할 수 있는 하이퍼링크

download 리소스를 다운로드하는 용도로 사용됨을 의미

href ( 하이퍼 텍스트 레퍼런스)

hreflang 링크 URL페이지 언어

rel 현재 문서와 링크 URL의 관계

target 링크 URL의 표시 (브라우저탭) 위치 : _self, _blank

다음과 같은 성질을 가지고 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <link rel="stylesheet" href="./01_A.css">
</head>
<body>
    <a class = 'box' href="https://google.com" target="_blank">Google_blank</a>
    
    
    
    <a href="https://google.com">Google_self</a>
    <a href="./01_README.md" download="">README.md</a>
    <a href="./images/캡처.PNG" download="">Image download</a>

    목차

    <ul>
        <li><a href="#제목1">제목1</a></li>
        <li><a href="#title2">제목2</a></li>
            
    </ul>

    Using <abbr title = "HyperText Markup Language">HTML</abbr> is fun and easy

    <h2 id="제목1">제목1</h2>
    <h2 id="title2">제목2</h2>
    <h2 id="title3">제목3</h2>

    
    
</body>
</html>

a{

}

.box {

    font-weight : bold;
    width : 100px;
    line-height : 40px;
    border : 1px solid black;
    border-radius: 6px;
    display : block;
    text-align : center;
}

.box:hover{
    background: orange;
}


h2{
    padding-bottom: 1000px;
}   /* 스크롤 만들기 */

이때 봐야할점은 주소창에 #제목1이생긴거..

이걸 이용해서 url끝에 #제목1을 붙여서 추가하면 바로 해당페이지의 저 스크롤 위치로 이동할 수 있다.

이하는 나머지 인라인 태그들의 역할들이다

: 문체가 다른 글자의 범위를 설정 ( bold )
특별한 의미 x
읽기 흐름에 도움을 주는 용도
다른 태그가 적합하지 않은 경우 마지막으로 사용
기본적으로 글자가 두껍게(bold) 표시

 사용자의 관심을 끌기위한 하이라이팅 표시 ( 형광펜처럼)
관심있는 부분을 표시하는 의미
시각적인 부분에 조금 더 특화되어 있음 (css로 커버가능)

 (emphasis)
단순한 의미 강조
중첩 가능, 중첩할수록 강조 의미가 강해진다.
이탤릭체 사용
정보통신보조기기에서 구두 강조로 발음


의미의 중요성을 나타내기 위해 사용.
기본적으로 글자가 두껍게 표시된다.


위의 태그들에서 표현할 수 있는 적합한 의미가 아닌 경우
(아이콘이나 특수기호 등을)하기위해서 사용 < b와 유사하지만 조금 다르다!
기본적으로 이탤릭체로 표시된다.

<dfn> 용어를 정의할 때 사용
<dl><dt><dd>는 약간 나열하는 성격으로 하는 반면에 얘는 몇개를 정의할 때 사용

<cite> 창작물에 대한 참조를 설정
(책,논문,영화,TV프로그램,노래 등의 제목)
이탤릭체로 표시

<q> 짧은 인용문을 설정
긴인용문 > <blockquote>사용

 밑줄이 있는 글자를 설정
(Underline) 순수하게 꾸미는 용도이기에 css로 커버가 가능하다.
<a> 태그와 헷갈릴 수 있는 위치에서 사용하지 않도록 주의!
 으로 권장

<code>컴퓨터 코드 범위를 설정

<kbd>키보드에서 사용자 입력을 나타내는 텍스트 범위를 설정

,위첨자, 아래첨자

<time> 날짜나 시간을 나타내기 위한 목적


<div>태그와 의미가 비슷함. 인라인요소중 의미가 없는 영역

 줄바꿈을 설정

<del> 삭제된 텍스트의 범위를 지정

<ins> 새로 추가된 텍스트의 범위를 지정

간단하게 역할들만 써보았는데 이 코드들을 어떻게 쓰면 되었는지 기억이 잘안나면 밑의 html파일과 css, 그리고 실행화면을 대조하면서 복습하자

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
 
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="./02_B.css">
</head>
<body>
    <p>
        <b>1.</b> 
        <i class="fa fa-cloud"></i>
       
        <mark>동해물과 백두산이 마르고</mark> 닳도록   <!-- 형관펜처럼 mark-->
        하느님이 보우하사 우리나라 만세
        무궁화 삼천리 화려 강산
        대한 사람 대한으로 길이 보전하세

        <b>2.</b> 
        <i class="fas fa-home"></i> 
        남산 위에 저 소나무 철갑을 두른 듯
        <em>바람 서리 불변함은</em> 우리 기상일세  <!-- 강조!-->
        무궁화 삼천리 화려 강산
        대한 사람 대한으로 길이 보전하세

        <b>3.</b> 
         <strong>가을 하늘 공활한데</strong> 높고 구름 없이  <!-- 의미의 중요성을 표시-->
        밝은 달은 우리 가슴 일편단심일세
        <span>무궁화 삼천리 화려 강산</span> <!-- 결과를 보면 u태그와 같은 의미 (css사용 가능시)-->
        <u>대한 사람 대한으로 길이 보전하세</u>   <!-- 파랑색까지 된다면 a태그와 헷갈릴 수 있음.-->
 
        <b>4.</b> 
         이 기상과 이 맘으로 충성을 다하여
        괴로우나 즐거우나 나라 사랑하세
        <br>   <!-- 줄바꿈!-->   <!-- 줄바꿈을 여러번해서 간격을 넓히거나 하는 행위는 하지 않는게 좋다.-->
        <span class = "exam">
            무궁화 삼천리 화려 강산
            대한 사람 대한으로 길이 보전하세
        </span>

        <p><code>document.getElementById('id-value)</code> is a piece of computer code  <!-- 코드를 표시 --></p>
        <p><kbd>Ctrl</kbd> + <kbd>ALT</kbd> + <kbd>K</kbd>   <!-- 키보드 입력 표시 --></p>
        <p>X<sup>4</sup> + Y<sup>2</sup> , H<sub>2</sub>0 <!--위첨자 아래첨자--></p>
        <p>The Cure will be celebrating their 40th anniversary on <time datetime="2018-07-07">July 7</time> in London's Hyde Park.</p>
        <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
    </p>
    
</body>
</html>

b{
    font-weight: normal;
    color : brown;
    
}

em{
    font-style: normal;
    font-weight : bold;

}

strong{
    color : yellowgreen;
}

span {
    text-decoration : underline;
}

code{
    color : orange;
    background:  lightgray;
    padding:3;
}

kbd{
    padding : 0 3px;
    border-radius: 3px;
    border-top :2px solid rgb(240, 240, 240);
    border-bottom: solid rgb(205, 205, 205);
    border-left: 2px solid rgb(240, 240, 240);
    border-right: 2px solid rgb(240, 240, 240);
}
time{
    color : orangered;
}

.exam{
    
}

각 인라인 태그들의 기능을 잘 파악하는게 좋은거 같다.

오늘 배운 내용중 가장 중요한 점은 html에서 시각적 이유로 코드를 넣는건 지양되어야 한다는점이다.

728x90

'FrontEnd > HTML&CSS' 카테고리의 다른 글

07_내장요소 (0)	2021.10.31
06_멀티미디어(img,audio,video) (0)	2021.10.31
04_content 구분 & 문자콘텐츠 (0)	2021.10.30
03_HTML 블록과 인라인, 메타데이터 (0)	2021.10.28
02_css 첫걸음 (0)	2021.10.28

'FrontEnd > HTML&CSS' 카테고리의 다른 글

티스토리툴바