HTML :: 요소

📝 HTML

• HyperText Mark-up Language
  
  

💡 요소

• 인라인(Inline) 요소
• 블록(Block) 요소
  
  

💡 인라인 요소

• 요소가 수평으로 쌓임
  • 코드를 줄 바꿈 처리를 하면 하나의 띄어쓰기로 처리됨.
• 상하좌우가 포함한 콘텐츠 크기만큼 자동으로 줄어듬
• 가로, 세로 사이즈를 지정할 수 없음 → 인라인 요소는 하나의 글자이므로 가로, 세로 사이즈와 같은 요소 적용 X
• 상하 여백 적용 불가능, 좌우 여백 적용 가능
  + 내부 여백 요소 : margin, 외부 여백 요소 : padding
• 인라인 요소 내에 인라인 요소 가능, 블록 요소 불가!
  
  

💡 블록 요소

• 요소가 수직으로 쌓임
• 상하는 포함한 콘텐츠 크기만큼 자동으로 줄어듬
• 좌우는 부모 요소의 크기만큼 자동으로 늘어남
• 가로, 세로 사이즈를 지정할 수 있음
• 상하좌우 여백 적용 가능
• 블록 요소 내에 인라인 요소 & 블록 요소 가능!
  
  

💡 비교

구분	인라인 요소	블록 요소
방식	요소가 수평으로 쌓임	요소가 수직으로 쌓임
상하 크기 설정	포함한 콘텐츠 크기만큼 자동으로 줄어듬	포함한 콘텐츠 크기만큼 자동으로 줄어듬
좌우 크기 설정	포함한 콘텐츠 크기만큼 자동으로 줄어듬	부모 요소의 크기만큼 자동으로 늘어남
가로 & 세로 사이즈 지정	불가능	가능
상하 여백 설정	불가능	가능
좌우 여백 설정	가능	가능
요소 내 블록 요소	불가능	가능
요소 내 인라인 요소	가능	가능

💡 인라인 요소 태그

• <span> : 구분을 위한 요소
• <img /> : 이미지를 삽입하는 요소
  • src : 삽입할 이미지의 경로
  • alt : 삽입할 이미지의 이름
• <a> : 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소
  • href : 링크 URL
  • target : 브라우저 탭 위치
• <br /> : 줄바꿈 요소
• <label> : <input /> 종류 중 checkbox 또는 radio 사용 시 <input /> 를 감싸야되는 요소
  
  

💡 블록 요소 태그

• <div> : 구분을 위한 요소
• <h1> ~ <h6> : 제목을 의미하는 요소
• <p> : 문장을 의미하는 요소
• <ol> : 순서가 필요있는 목록의 집합
• <ul> : 순서가 필요없는 목록의 집합
• <li> : 목록 내 각 항목
  
  

💡 인라인-블록 요소 태그

• <input /> : 사용자가 데이터를 입력하는 요소
  • type : 입력받을 데이터의 타입
    • text
    • checkbox : 사용자에게 체크 여부를 입력 받음!
      ▫ checked : 체크박스 입력 요소 체크됨
    • radio : 사용자에게 체크 여부를 그룹에서 1개만 입력 받음
      ▫ name : 그룹 이름
  • value : 미리 입력된 값(데이터)
  • placeholder : 사용자가 입력할 값(데이터)의 힌트
  • disabled : 입력 요소 비활성화