23.03.08 / 인라인 요소, 블록 요소, 인라인 블록 요소

[ ★ 인라인 요소와 블록 요소, 인라인 블록 요소 ]    

-요소가 화면에 출력되는 특성을 크게 2가지로 구분

1. 블록 요소 : 상자(레이아웃)를 만들기 위한 요소

- 기본적으로 레이아웃 작업에 많이 사용하며, 특별한 의미는 없고 구분을 위해 사용한다.

- 특징  1) 한 줄에 한 개만 배치 가능하다. 2) 기본 너비값이 100%를 차지한다. 3) 크기 값을 가질 수 있다. (가로 세로) 4) 상하좌우 마진을 가질 수 있다.- 종류 : div, h*, table(th, td..), header, nav, footer 등

• div(Division) : 특별한 기능 없음 / 어떤 영역을 잡을 때 많이 사용
• h* (Heading) : 제목 / *에 1~6번 들어갈 수 있음 / 숫자가 작을수록 더 중요한 제목을 정의한다.(숫자가 작을수록 크기가 더 큼) / 웹 표준 h* 태그는 한 문서에 한 개만 있어야 한다.
• p(Paragraph) : 문단
• ul(Unorderd List) : 순서가 필요 없는 목록 / li(List Item)태그로 각 항목을 작성한다.
• ol(Orderd List) : 순서가 필요한 목록 / li(List Item)태그로 각 항목을 작성한다.

 

2. 인라인 요소 : 텍스트 '처럼' 취급한다.

- 한 줄에 여러 개 배치 가능하다.

- 기본 너비값이 콘텐츠의 너비 값.   ( 콘텐츠란 ?  <여는 태그> 콘텐츠 </닫는 태그> )

- 크기 값을 가질 수 없다.

- 상하 마진을 가질 수 없다.

- 종류 : span, a, small, strong 등

• span : 대표적인 인라인 요소 / 특별한 의미는 없고, 콘텐츠의 영역을 설정하는 용도 

 

• a 태그 (Anchor - 닻) : 다른 곳으로의 링크 / 하이퍼 링크를 지정하는 요소
• 필수 속성
• href(Hypertext Reference) : 연결할 주소 작성 
• target 속성 : 링크(페이지)를 여는 옵션 (어디서 열 것인지?)  - blank
• _blank : 웹 접근성을 위한 값
• 시각 장애를 가지고 있는 사용자와 같이 다양한 사용자들이 편리하게 사이트를 이용할 수 있도록 웹 사이트를 만들어야한다.
• _blank를 사용하는 경우, " 새창에서 열립니다." 와 같은 문구로 안내를 해야한다. 눈으로 보지 못하는 사용자들이 당황하지 않고 사이트를 사용할 수 있다.
• target="blank" 와 target="_blank"의 차이점
• blank : blank라고 불리는 윈도우창 또는 탭 이름을 타겟으로 페이지를 여는 것 -> 여러번 링크를 클릭했을 때 새로운 탭이 계속 열리지 않고 한 번 열린 페이지에서 계속 열린다.
• _blank : 계속 클릭하면 계속 새로운 탭이 열린다.
• 참고 : a 태그와 함께 사용할 수 있는 address 태그
• 사이트 주소도 쓸 수 있지만 <a href="사이트 주소 or tel: or mailto:"></a>
• tel : 모바일에서 클릭시, 해당 연락처로 전화 걸기 사용 가능 / mailto : 이메일 링크 작성, 이메일 전송 화면으로 이동

• br (Line break) : 줄바꿈 

3. 인라인 블록 요소 : 인라인 요소의 특징 + 블록 요소의 특징

- 한 줄에 여러개 배치 가능

- 크기 값을 가질 수 있다.

- 상하좌우 마진을 가질 수 있다.

- 종류 : img, input, button 등...

• ★img 태그 (image) 
• 필수 속성
• - src(source) : 실제 이미지의 경로를 명시한다.
• - alt(alternate) : 이미지가 출력되지 않았을 때 or 스크린 리더의 사용자를 위해 대신 출력할 이미지의 설명을 명시한다.  -> 필수 속성을 작성하지 않으면, 웹 표준에 어긋난다.

 

• 사용자로부터 입력을 받는 input

-> 블록 요소로 구조를 잡고 인라인 요소로 정보를 전달한다. 

 

 

라인 전체 주석 처리 - 커서 두고 Ctrl + /h숫자 쓰면 저절로 height = "숫자px" 나옴태그 쓰고 *숫자 쓰면 그 숫자만큼 입력됨

ex) div*3  =>

        <div></div>

        <div></div>

        <div></div>

 

dddd