-
[공통사항]
디자인을 구현하기 위해 존재하는 Html과 css.
(Block과 Inline은 레이아웃을 구분해주기 위한 속성값임)
Block은 한줄로 표현하기 위해
inline은 한 블럭에 작은 표현을 하기 위해 Block에 inline이라는 속성을 넣은 것이다.
한 줄에 하나씩 표현하기 위함**
** 네이버 검색창으로 보는 Block과 inline의 차이
네이버 로그인창의 나뉜 영역 부분은 Inline(나뉜 영역으로 표시됨)
상단 페이 ~ 알림 부분은 Block(한줄로 표시됨)
- 한줄씩
ex.
네이버 로그인창 - 한줄에 같이 나오는
ex.
네이버 상단 정리하는 방법 : 공통사항을 나열한 후 세부 사항을 적고 , 세부사항의 디테일들을 적어 나가는 연습하기
[Block과 Inline의 차이점?]
Block 코드펜 바로가기
상위 엘리먼트 너비를 상속받는다 (코드펜은 기본적으로 DOCTYPE이 포함되어 있음)
ㄴ 이렇게 나옴
설명 👌 Block 특징
1. 화면 크기가 아닌 상위 앨리먼트 크기만큼 크리를 가진다.
(현재 배경색이 화면 크기인 이유는 코드펜 기본 독타입 때문임)
2. 크기가 아무리 작아도 한 줄에 하나씩 배치된다.
3. inline이나 inline-block을 제외하고 전부 block 태그이다.
4. 레이아웃을 구분할 때 사용되는 요소이다(박스)
5. width가 auto(기본값)일때 100%로 작동한다
inline 코드펜 바로가기
인라인들끼리는 여백생김
ㄴ 이렇게 나옴
설명
👌inline 특징1. 상위 앨리먼트 공간이 부족하지 않는 한 한줄에 같이 나온다.
2. 하단과 양 옆에 알 수 없는 여백이 생긴다.
3. inline 대표 태그
ㄴ a(링크), span(텍스트), img(이미지), ::before, ::after(가상요소:html 태그 추가 없이 사용)
ㄴ inline 요소나 inline-block 요소는 특징이 있는 태그들이 대부분이다.
4. 너비, 높이, 속성을 사용할 수 없다.
5. width가 auto(기본값)일때 0으로 작동한다.
👌 [기본적인 픽셀 단위]
웹에서는 기본적으로 비트맵 이미지를 기반으로 쓴다
* 비트맵 이미지란 : 각각의 색상 정보를 가진 픽셀들이 모여서 한 장의 이미지를 구성하는 이미지를 이야기함.
* 비트맵 이미지는 해상도 저하가 일어날 수 있음(단위가 픽셀이라~)
* 웹에서 사용하는 이미지를 제작할 때는 해상도를 72설정 해야한다
[너비속성 width] 코드펜 바로가기
"너비속성입니다" <- 요게 100px보다 넓어서 줄바꿈됨/100px안에 텍스트가 낑겨잇음
1. 기본값
태그는 각각 기본값이 있다.
너비는 기본값일 때 오토로 작용하고, 디스플레이에 따라 값이 바뀐다.
블럭이면 100% 인라인이면 0%으로 작용하고 오토일때 0이랑 / 0 이랑 다르다.
오토일때 0은 물풍선처럼 넣는 만큼의 크기를 가짐
2. 픽셀
[높이속성 height] 코드펜 바로가기
height: auto;
ㄴ auto : 태그가 기본적으로 가지고 있는 성격대로 적용하겠다.
ㄴ높이는 모든 태그가 auto일때 0으로 작동한다
height: auto; = 0 이랑 height; 0; dlsplay 상태랑은 다르다
height: auto; = 0 (하위요소 크기만큼 크기를 가지겠다 - 물풍선 안에 물 100L 넣으면 물풍선이 100L만큼의 크기를 가진다와 비슷한 원리임)
height: 0; --> px이 0개다. (없다. 라는 의미를 가짐)
태그는 우리 눈에 보이기 위해 3가지 조건이 필요하다.
1. 너비
2. 높이
3. 배경색
[inline-block] 코드펜 바로가기
- 한줄에 표현가능한 (inline)과 커스텀이 가능한(block)을 합산
[공통특징]
1. 원할때마다 display속성값을 바꿔서 사용할 수 있다.
