HTML display : 태그들이 화면상에 보여지는 형태
block
inline
inline block
table
table-row
table-cell
list-item
* 모든태그는 기본적으로 inline 형태이다. (-> CSS로 바꿔주는 것을 갖고있기 때문에 다른것들으로 바뀐다)
1. block ( p, div, ...)
1) 처음 만들어지면 넓이는 화면의 전체를 잡는다 ( 화면을 줄여도 그것의 전체화면. (상대적))
* 그 너비 전체를 갖기 때문에 다음에 오는 태그는 줄바뀜이 된 후에 온다
* background-color로 영역을 알 수 있다.
* 전체화면과 줄였을 때 모두 오른쪽 끝에 공백을 확인할 수 있다 ( 영역이 끝났다는 표시)
- 전체화면
- 화면을 줄였을 때.
2) 넓이를 설정하면 남은 부분은 margin으로 채워진다.
: 줄바뀜이 있는것을 보고 뒤에 margin이 남아있다는 것을 알 수 있다.
3) CSS로 inline으로 바꿀 수 있다
: 줄바뀜이 없는것을 보아 inline으로 바뀐것을 알 수 있다 (컨텐츠 내용 크기만큼만 영역으로 갖는것이 inline의 특징이다)
4) 넓이를 채우지않으면 화면을 꽉 채운다
: 별도의 설정이 없으면 전체화면을 꽉 채운다.
5) margin,. padding을 주면 그 상태로 꽉 채운다. (넓이 + margin으로 꽉채운다)
: 스크롤이 생기지 않았고 상하좌우에 margin 이 있다.
- 너비를 설정하고 margin을 줬을 때
(1) width : 2000px ;
- 스크롤 끝까지 밀었을 때
-width : 2000px ; margin-left : 50; (넓이 2000주고 거기에 margin)
(2) width: 100%; margin-left: 50px; (넓이 100% 일 때의 값으로 고정시키고 거기에 margin을 준다)
* 꽉찬 너비와 right-margin : margin이 생기지 않는다.
- auto margin
(1) left :
(2) right-left
(3) 네방향
- margin : auto
: 위 아래로는 지정된 margin이 없기 때문에 나눠질 margin 이 없다.
-margin: 상하값 auto
2. inline(a, ...)
1. 컨텐츠 내용 만큼만 넓이를 잡는다. (쓴만큼 더 넓을 수 있다)
: 위의 사진과 동일.
2. 넓이, 높이에 CSS가 적용되지 않는다.
3. CSS로 block으로 바꿀 수 있다.
3. inline-block
: inline처럼 나열되서 보이지만 block 처럼 너비, 높이를 줄 수 있다
+) inline과 inline-block 계열이 연달아 나타날때 사이의 여백의 의미 : 코드상에서 공백이 있음을 의미한다.
- 여백이 없을 때 :
+) HTML에서 여백을 아무리 많이 해도 띄어쓰기 하나로만 표현된다.
* 많은 수의 공백을 표현하는 태그가 따로 있다.
'프론트엔드 > HTML & CSS' 카테고리의 다른 글
| HTML과 CSS 의 분리 (0) | 2017.06.02 |
|---|---|
| <CSS>HTML 태그의 이동 : position (0) | 2017.06.02 |
| <계속수정&추가> HTML / CSS 태그,속성 (0) | 2017.05.24 |
| HTML(2) - 2 (0) | 2017.05.24 |
| HTML (2) -1 (0) | 2017.05.23 |