• 티스토리 홈
  • 프로필사진
    Song hyun
  • 방명록
  • 공지사항
  • 태그
  • 블로그 관리
  • 글 작성
Song hyun
  • 프로필사진
    Song hyun
    • 분류 전체보기 (780)
      • 백준 (0)
      • 영어 (2)
        • Diary (0)
        • Toast Masters (2)
      • 메모 (13)
      • 설치 메뉴얼 (30)
      • Java (178)
      • MySQL (60)
      • JSP (67)
      • Springboot (46)
      • HTML,CSS, JS (71)
        • HTML (8)
        • CSS (12)
        • JavaScript (37)
        • HTML&CSS 스터디 (13)
      • C++ (7)
      • Linux (7)
      • JPA (34)
      • Kotlin (2)
      • Flutter (42)
      • Error Note (39)
      • 디자인 패턴 (12)
      • 디지털논리회로 (4)
      • 데이터베이스 시스템 (8)
      • 알고리즘 (7)
      • 운영체제 (3)
      • 이산수학 (3)
      • 인공지능 (1)
      • 자료 구조 (14)
        • 기본 개념 (14)
        • 자료구조 스터디 (0)
      • 💡My project (76)
        • 팩맨 : Java Swing 게임 제작 프로젝트 (6)
        • 네이트톡 : Java 소켓 통신 프로젝트 (4)
        • 포켓옥션 : HikariCP&JDBC CRUD 프.. (3)
        • 이지 부산 : BDIA-Devton 2024 프로.. (20)
        • 그린 유니버시티 : JSP를 사용한 학사관리 프로.. (1)
        • 애드 포커 : 웹 소켓과 Spring을 사용한 카.. (1)
        • 셸위 : 게임 친구 매칭 사이트 (21)
        • 다모아 : 개발자 중개 플랫폼 (20)
      • 📗스터디 (13)
        • CNN : 웹개발 스터디 (10)
        • Node&React로 유튜브 사이트 만들기 (3)
      • 📙독서 및 강연 기록 (36)
        • 강연 (14)
        • 독서 (22)
  • 방문자 수
    • 전체:
    • 오늘:
    • 어제:
  • 최근 댓글
      등록된 댓글이 없습니다.
    • 최근 공지
        등록된 공지가 없습니다.
      # Home
      # 공지사항
      #
      # 태그
      # 검색결과
      # 방명록
      • [HTML] 2. HTML 기본 태그
        2024년 04월 14일
        • Song hyun
        • 작성자
        • 2024.04.14.:11
        728x90
        반응형

        [HTML] 2. HTML 기본 태그

         

        • 파일 생성시 HTML5: 입력시 기본적인 코드가 생성된다.
        • <h></h>: 글자 크기를 정하는 코드. h 앞에 오는 숫자가 작을 수록 글자가 커진다.
        • <br>: 줄바꿈 코드. 엔터 바와 같은 역할을 한다.
        • <p></p>: 단락 코드. 아래위로 한 줄 씩 띄운다.
        • <blockquote></blockquote>: 문단을 한 칸 들여써서 인용한다.
        • <pre></pre>: 작성한 코드를 소스 모양 그대로 출력한다. 프로그래밍 소스를 출력할 때 많이 쓴다.​
        • <strong></strong>, <b></b>: 글자를 진하게 강조한다. 볼드체.
        • <em></em>,<i></i>: 글자를 기울인 모양으로 바꾼다. 이탤릭체.

        ​

        • <q></q>: 줄바꿈이 없는 인용. 대신 큰 따옴표가 추가된다.
        • <mark></mark>: 노란색 형광펜 표시.

        ​

        • <span></span>: 영역을 지정하는 태그.
        • ㄴ이후 style=”color:blue” 를 사용하여, <span>으로 지정한 영역의 글자들을 파란색으로 변경하였다.

        ​

        • <ruby></ruby>, <rt></rt>: <ruby> 태그 안에서 <rt> 태그가 주석 역할을 한다.
        • <rt> 태그가 붙은 ”일본의 프로그래머”는 “마츠모토 히로유키”의 상단에 주석으로 더해진다.

        ​

        • <abbr></abbr>: <abbr title=”~”> ~자리에 적힌 글자가, 이후에 오는 글자의 아래에 작게 주석처리된다. 주석처리 된 글자는 마우스를 가져다대면 확인해볼 수 있다.
        • <cite></cite>: 인용+이탤릭체
        • <code></code>: 소스를 (작게) 표시한다.
        • <small></small>: 글자를 작게 보이게 한다.
        • <sub></sub>: 아래 첨자
        • <sup></sup>: 위 첨자
        • <s></s>: 취소선

        ​

        • <u></u>: 밑줄
        • <ul></ul>: 들여 쓰기
        • <li></li>: <ul> 태그로 감싼 <li> 태그는 순서 없는 목록으로 불릿(검은 동그라미) 처리된다.

        ​

        • <ol></ol>: 들여쓰기
        • <ol> 태그로 묶은 <li> 태그는 숫자가 있는 목록이다.
        • <ol> 태그는 type 을 이용하여 li 태그로 순서 타입을 정할 수 있다.(a,A,1,i.I…)

         

         


         

        +연습문제

        아래의 사진과 같은 화면을 출력해보자.

         

         

         

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <body>
            <h2> Who am I?</h2>
            <p><mark>프런트엔드 웹 기술(Front-end Web Tech.)</mark>에 관심이 많습니다.
            <br>현재 제주의 한 시골 마을에서 코딩 중입니다.</p>
        
            <h2>Experience</h2>
            <ul>
                <li>프론트엔드 개발</li>
                <ul>
                    <li>업무 내용 업무 내용 업무 내용</li>
                    <li>업무 내용</li>
                    <li>업무 내용 업무 내용</li>
                </ul>
                <li>웹 디자인</li>
                <ul>
                    <li>업무 내용</li>
                    <li>업무 내용 업무 내용</li>
                </ul>
            </ul>
        
            <p><h2>Skills</h2></p>
            <p><h2>Educations</h2></p>
        
        </body>
        </html>
        728x90
        반응형

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

        [HTML] 6. 폼 관련 태그  (0) 2024.04.22
        [HTML] 5. 표(테이블) 만들기  (0) 2024.04.15
        [HTML] 4. 링크 삽입하기  (0) 2024.04.15
        [HTML] 3. 이미지 출력하기  (0) 2024.04.14
        [HTML] 1. 기초 CS 지식  (0) 2024.04.14
        다음글
        다음 글이 없습니다.
        이전글
        이전 글이 없습니다.
        댓글
      조회된 결과가 없습니다.
      스킨 업데이트 안내
      현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
      ("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)
      목차
      표시할 목차가 없습니다.
        • 안녕하세요
        • 감사해요
        • 잘있어요

        티스토리툴바