[코딩의 기초] Inline, Block, tag, 전역속성

kemi·2022년 11월 1일
0
post-thumbnail

벨로그에 올리는 글 전체공개 되는 줄 몰랐는데 검색하면 내 글이 보이는거였다.. =͟͟͞͞(꒪ᗜ꒪ ‧̣̥̇)
이제 여기다가 이상한 말 안 쓰고 정상적인 말만 적어야지..
이번에 정리할 내용들은 분량이 너무 많아서 이걸 언제 다 정리하나 막막합니다.
하지만 어쩌겠어요~ 일단 해야지~~


Inline

: 글씨의 영역을 설정하는 요소

  • 왼쪽에서 오른쪽으로 (수평으로) 쌓인다.
  • 줄 바꿈 시 띄어쓰기의 효과가 있다.
  • 가로와 세로의 크기가 콘텐츠의 크기에 맞춰 줄어든다.
  • style 속성인 widthheight가 적용되지 않는다.
  • marginpadding좌-우 여백에만 적용된다.
  • 자식으로 block요소를 사용할 수 없다.
    <span> <div> </div> </span> - X
    <span> <span> </span> </span> - O

Block

: 콘텐츠의 영역을 설정하는 요소

  • 위에서 아래로 (수평으로) 쌓인다.
  • 가로 : 부모요소의 크기에 맞춰 늘어난다.
  • 세로 : 부모요소의 크기에 맞춰 줄어든다.
  • style 속성인 widthheight가 적용된다.
  • marginpadding이 상-하, 좌-우 모두 적용된다.
  • 자식으로 Inline요소와 block요소 모두 사용 가능하다.
    <div> <div> </div> </div> - O
    <div> <span> </span> </div> - O

div 태그

: 구분을 위한 요소

의미를 가지고 있지 않다.


h1 ~ h6 태그

: 제목을 의미하는 요소

수의 크기와 중요도는 반비례한다. (숫자가 작을수록 글씨가 커짐)


P 태그

: 문장을 의미하는 요소


img 태그

: 이미지를 나타내는 태그

이미지를 삽입하지만, Inline요소이다.

  • src : 이미지의 경로
  • alt : 이미지 대체 이름 (text)
    -> src와 alt 둘 다 필수속성

ul 태그

: 순서가 필요없는 목록의 집합

ol태그와 반대의 의미를 가지고 있다.

li 태그

: 목록 내 각 항목을 나타내는 요소

ul태그의 자식 요소로, ul태그는 li태그를 1개 이상 가져야한다.


span 태그

: 단순 구분을 위한 요소

의미를 가지고 있지 않다.


break 태그

: 줄 바꿈 요소

빈태그여서 <br> 혹은 <br/> 로 쓴다.


a 태그

: 페이지로 이동하는 하이퍼링크 지정요소

  • href : 하이퍼링크 (경로)
  • target : "_blank"
    -> href 경로가 새로운 탭에서 열림

input 태그

: 사용자가 데이터를 입력하는 요소

inline요소지만 block요소의 특징을 가짐

  • 요소가 수평으로 쌓인다.
  • style 속성인 width와 height가 적용된다.
  • margin과 padding이 상-하, 좌-우 모두 적용된다.
  • type : 데이터 타입
  • value : 미리 입력한 값
  • place holder : 입력할 값에 대한 힌트
  • disable : 값 명시 안 함 (비활성화)

label 요소

: label이 감싼 기능요소의 제목 표시

(기능요소 : input ,,,)


type : check box

  • label 요소로 감싸서 표현한다.

  • checked : 이미 체크된 상태로 표시

    <label> 
       <input type : "check box"/> cat 
    </label>
    
    ->  ㅁ cat

type : radio

  • 체크 여부를 그룹에서 하나만 입력 받는다.
  • 그룹이 형성되어야 사용 가능하다.
    ex) name = "fruits" ( name 속성을 동일하게 하여 그룹을 생성한다. )

전역속성

  • <태그 title = "설명"> </>
    : 요소의 정보, 설명을 보여줌

  • <태그 style = "스타일"> </>
    : 요소에 적용할 css를 지정

  • <태그 class = "이름"> </>
    : 요소를 지칭하는 중복 가능한 이름

    ex)

    <span class : "R"> 장미 </span>    |     css : .R {color:"red"}
  • <태그 id = "이름"> </>
    : 요소를 지칭하는 고유한 이름

    ex)

    <span class : "B"> 하늘 </span>    |     css : #B {color:"blue"}
  • <태그 data - 이름 = "데이터"> </>
    : 요소에 데이터를 지정 (=잠시 저장 )

    ex)

    <div data-fruit-name = "apple"> 사과 </div>
     <div data-fruit-name = "banana"> 바나나 </div>
     ----------------------------------------------------
     [JS]
     const els = document.querySalectorAll('div')
     els.foreach (el => {
     	console.log(el.dataset.fruitName)
     })
     ----------------------------------------------------
     console 값 -> apple / banana
profile
어쩌다 코딩

0개의 댓글