그럼에도 불구하고

👨‍💻

[HTML] 문자 꾸미기, 여러가지 태그들 본문

HTML, CSS/HTML, CSS basics

[HTML] 문자 꾸미기, 여러가지 태그들

zenghyun 2022. 10. 23. 20:19

html을 사용하면서 문자를 꾸밀 수 있는 여러 가지 태그들이 있다. 

 

처음 사용해본 태그들을 기록해 볼 것이다.

 

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문자꾸미기</title>
</head>

<body>
    <h1>문자꾸미기</h1>
    <div>
        <mark>Lorem ipsum</mark> dolor sit amet consectetur adipisicing elit<sup>2</sup>. Porro animi tempora, quibusdam
        libero voluptatem veritatis provident illum velit, maxime, quos amet perspiciatis cupiditate. Similique tempore
        ducimus quaerat, aut sunt asperiores?
        <abbr title="hyper text markup language">HTML</abbr>
    </div>
    <div>
        <ruby>李貞賢 <rt>이정현</rt></ruby>
        같으며, <mark>반짝이는 미묘한</mark> 우리 싶이 만천하의 이상은 품에<sub>2</sub> 끝까지 <ruby>아름다우냐? <rt>덧말</rt></ruby> 이성은 불러 꾸며 꽃 뼈
        <ruby>인생에 싸인 생생<rt>ººº</rt></ruby>하며, 말이다. 인생에 구하지 얼음과 아름다우냐? 커다란 보내는 있는 찾아 인도하겠다는 착목한는 그림자는 사막이다.

        용감하고 목숨이 끓는 끓는 이상의 것이다. 생명을 커다란 구하기 쓸쓸하랴? 고동을 두손을 따뜻한 부패뿐이다. 인도하겠다는 우리는 속잎나고, 고행을 충분히 피다. 희망의 인생의 가치를 그들은 눈이
        봄바람이다. 위하여서, 산야에 눈에 사막이다. 아니한 이 어디 그와 전인 내려온 보내는 이것은 있다.
    </div>
    <div>
        wrap: <kbd>ctrl</kbd> + <kbd>shift</kbd> + <kbd>a</kbd>
        <br>
        웹문서는 <code>&lt;html&gt;</code>로 시작하고 <code>&lt;html&gt;</code>로 끝난다. 10 &gt; 8

        <abbr title="cascading style sheet">css</abbr>
        <code>background : red;</code>
        <kbd>tab</kbd> 또는 <kbd>enter</kbd> 태그를 완성한다.
        <br>
        html 문서는 백색문자를 인식하지 못한다.
        enter 대신 br태그를 쓴다.
        띄어쓰기 &nbsp; <code>&amp;nbsp;</code> 한칸이상의 띄어쓰기 필요시
    </div>
    <div>
        <bdo dir="rtl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur sit libero dolorem ipsum
            optio quisquam placeat sapiente facilis qui beatae accusamus, porro eius hic consectetur tempora, officia
            sunt reiciendis aperiam.</bdo>
        <br><bdi>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis placeat hic omnis iure laboriosam?
            Laboriosam, modi. Quae nesciunt officia eos eaque architecto vel sed minima vero. Nesciunt illo repellat
            mollitia?</bdi>
    </div>
    

</body>

</html>

 

 

 

위 코드는 Visual Studio Code를 이용하여 작성한 html 파일이다.

 

mark 태그는 내가 강조하고 싶은 부분을 형광펜으로 칠해주는 효과를 줄 수 있다.

 

abbr 태그는 <abbr>내용</abbr> 내용이라고 적힌 부분에 작성하고 

<abbr title="Hyper Text Markup Language"> HTML </abbr>과 같이 title을 적어주면 

HTML문자에 커서를 놓으면 Hyper Text Markup Language과 같이 부가적인 설명을 적어줄 수 있다.

 

kbd 태그는 keyboard의 약자로 ctrl + spacebar와 같이

실제로 키보드에서 눌러야 하는 내용을 

알려주고 싶을 때 사용한다.

<kbd>ctrl + spacebar </kbd> 

 

code 태그는 html 파일 상에서 코드로 작성해야 할 부분, 명령을 나타낼 때 사용한다.

 

html에서는 "<" 와 ">"를 태그를 작성하기 위한 명령으로 인식한다. 

 

그래서 부등호를 사용하고 싶다면

 

&lt; =  less then =  "<"

&gt; =  greater then =  ">"

 

와 같이 사용해야 한다.

 

내가 작성한 코드로 실행시켰을 때의 모습 

 

문자꾸미기

문자꾸미기

Lorem ipsum dolor sit amet consectetur adipisicing elit2. Porro animi tempora, quibusdam libero voluptatem veritatis provident illum velit, maxime, quos amet perspiciatis cupiditate. Similique tempore ducimus quaerat, aut sunt asperiores? HTML
李貞賢 이정현 같으며, 반짝이는 미묘한 우리 싶이 만천하의 이상은 품에2 끝까지 아름다우냐? 덧말 이성은 불러 꾸며 꽃 뼈 인생에 싸인 생생ººº하며, 말이다. 인생에 구하지 얼음과 아름다우냐? 커다란 보내는 있는 찾아 인도하겠다는 착목한는 그림자는 사막이다. 용감하고 목숨이 끓는 끓는 이상의 것이다. 생명을 커다란 구하기 쓸쓸하랴? 고동을 두손을 따뜻한 부패뿐이다. 인도하겠다는 우리는 속잎나고, 고행을 충분히 피다. 희망의 인생의 가치를 그들은 눈이 봄바람이다. 위하여서, 산야에 눈에 사막이다. 아니한 이 어디 그와 전인 내려온 보내는 이것은 있다.
wrap: ctrl + shift + a
웹문서는 <html>로 시작하고 <html>로 끝난다. 10 > 8 css background : red; tab 또는 enter 태그를 완성한다.
html 문서는 백색문자를 인식하지 못한다. enter 대신 br태그를 쓴다. 띄어쓰기   &nbst; 한칸이상의 띄어쓰기 필요시
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur sit libero dolorem ipsum optio quisquam placeat sapiente facilis qui beatae accusamus, porro eius hic consectetur tempora, officia sunt reiciendis aperiam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis placeat hic omnis iure laboriosam? Laboriosam, modi. Quae nesciunt officia eos eaque architecto vel sed minima vero. Nesciunt illo repellat mollitia?

 

 

'HTML, CSS > HTML, CSS basics' 카테고리의 다른 글

[CSS] 여러가지 선택자  (0) 2022.12.19
[CSS] linear-gradient / radial-gradient / border gradient  (0) 2022.12.15
[CSS] 캐스케이딩 / 스타일 우선순위  (0) 2022.12.13
[HTML] form 태그 / input 태그 타입 정리  (0) 2022.12.13
[HTML] 인라인 속성, 블록 속성, 태그의 관계  (1) 2022.10.23
'HTML, CSS/HTML, CSS basics' Related Articles more
Comments