yunyj99
라둥이
yunyj99
GitHub
전체 방문자
오늘
어제
  • 분류 전체보기 (309)
    • 1. 프로그래밍 (50)
      • 1-1. Git (17)
      • 1-2. Java (13)
      • 1-2-1. Java GUI (1)
      • 오류 (12)
      • 기타 (7)
    • 2. Front-end (57)
      • 2-1. HTML (5)
      • 2-2. CSS (19)
      • 2-3. Java Script (33)
      • 2-4. React (0)
    • 3. Back-end (47)
      • 3-1. Spring MVC - 국비 (15)
      • 3-2. Spring MVC - 남궁성 (30)
      • 3-3. Spring - 김영한 (2)
    • 4. Android (1)
    • 5. DB (20)
      • 4-1. MySQL DBMS (20)
    • 6. 자료구조 & 알고리즘 (44)
      • 6-1. 자료구조 (14)
      • 6-2. 백준 (30)
    • 7. 웹 디자인 (7)
      • 7-1. UX 디자인 (7)
    • 8. 자격증 (35)
      • 8-1. 정보처리기사 (35)
    • 프로젝트 (3)
      • 프로젝트 기록 (3)
    • etc... (43)
      • 패스트캠퍼스 챌린지 (39)
      • 잡담 (4)

블로그 메뉴

  • 홈
  • 태그

최근 글

티스토리

hELLO · Designed By 정상우.
yunyj99

라둥이

쓰기
패스트캠퍼스 챌린지 7일차 - Part1. Ch6
etc.../패스트캠퍼스 챌린지

패스트캠퍼스 챌린지 7일차 - Part1. Ch6

2021. 11. 7. 19:37

Ch6. HTML 핵심 정리

 

HTML에서 자주 사용하는 핵심 요소들을 알아보자.

  • <div> : 블록 요소. 특별한 의미가 없는 구분을 위한 요소
  • <h1> ~ <h6> : 블록 요소. 제목을 의미하는 요소. 숫자가 작을수록 더 중요한 제목을 정의.
  • <p> : 블록 요소. 문장을 의미하는 요소.
  • <ul> : 블록 요소. 순서가 필요없는 목록의 집합을 의미. (Unordered List)
  • <li> : 블록 요소. 목록(list) 내 각 항목(item)
  • <img src="" alt="" /> : 인라인 요소. 이미지를 삽입하는 요소.
  • <a href="" target="" > : 인라인 요소. 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소.
  • <span> : 인라인 요소. 특별한 의미가 없는 구분을 위한 요소.
  • <br/> : 인라인 요소. 줄바꿈 요소.
  • <input type="" /> : 인라인 요소&블록 요소. 사용자가 데이터를 입력하는 요소. 왼쪽에서 오른쪽으로 수평으로 쌓이는 특징을 가지고 있지만 가로세로 값과 위아래 여백을 지정할 수 있음.
  • <label> : 인라인 요소. 라벨 가능 요소의 제목.
  • <table> : 테이블 요소. 표 요소로 행과 열의 집합.
  • <tr> : 테이블 요소. 행을 지정하는 요소. (table-row)
  • <td> : 테이블 요소. 열을 지정하는 요소. (table-data)

참고로 주석을 남길때는 <!--  --> 와 같이 사용하면 된다. 브라우저는 이 태그를 해석하지 않으므로 화면에 내용이 표시되지 않는다. (단축키 : Ctrl + /)

 


 

전역속성은 전체 영역에서 모두 사용할 수 있는 속성으로, body에서 사용하는 태그들의 전체 영역에서 언제든지 사용할 수 있다.

  • <태그 title=""></태그> : 요소의 정보나 설명을 지정

글자 위에 마우스 올리면 title 내용이 출력됨

  • <태그 style=""></태그> : 요소에 적용할 스타일을 지정
  • <태그 class=""></태그> : 요소를 지칭하는 중복 가능한 이름

이렇게 red 라고 이름을 주고
해당부분만 스타일변경가능

 

  • <태그 id=""></태그> : 요소를 지칭하는 고유한 이름. 중복해서 사용해도 오류가 뜨지는 않지만 한 부분에만 속성 주기!!

class와 다르게 #을 붙임

  • <태그 data-이름="데이터"></태그> : 요소에 데이터를 지정. 지금 중요한 부분은 아니므로 이건 나중에 이해하기~

 


 

7일차 ~.~

 

※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa

'etc... > 패스트캠퍼스 챌린지' 카테고리의 다른 글

패스트캠퍼스 챌린지 9일차 - Part1. Ch7  (0) 2021.11.09
패스트캠퍼스 챌린지 8일차 - Part1. Ch7  (0) 2021.11.08
패스트캠퍼스 챌린지 6일차 - Part1. Ch5  (0) 2021.11.06
패스트캠퍼스 챌린지 5일차 - Part1. Ch4  (0) 2021.11.05
패스트캠퍼스 챌린지 4일차 - Part1. Ch3  (0) 2021.11.04
    'etc.../패스트캠퍼스 챌린지' 카테고리의 다른 글
    • 패스트캠퍼스 챌린지 9일차 - Part1. Ch7
    • 패스트캠퍼스 챌린지 8일차 - Part1. Ch7
    • 패스트캠퍼스 챌린지 6일차 - Part1. Ch5
    • 패스트캠퍼스 챌린지 5일차 - Part1. Ch4
    yunyj99
    yunyj99
    개발자를 목표로 하는, 새싹처럼 성장하고 싶은 사람의 학습 공간 ^v^

    티스토리툴바