Block과 Inline
Block
대부분의 HTML 태그는 block 요소이다.
특징
- 요소 바로 옆에 다른 요소를 붙여 넣을 수 없다.
(= 요소들이 블록 형태처럼 쌓인다.) - 항상 새 줄에서 시작하며 좌우로 최대한 늘어난다. (양옆을 다 차지한다.)
Inline
특징
- 요소가 한줄로 쭉~ 나열되듯이 위치한다.
- inline요소끼리는 서로 한줄에, 즉, 바로 옆에 위치 할 수 있다.
- 내용의 크기만큼만 너비가 생긴다.(너비가 내용의 크기로 지정된다.)
inline과 block을 css에서 사용하기
block과 lnline각각 특징과 역할이 다르지만, css에서 inline을 block으로 block을 inline으로 언제든지 바꿀 수 있다.
.inline{
display: block;
}
.block{
display: inline;
}위에처럼 언제든지 inline을 block 으로 block을 inline으로 바꿀 수 있다.
.block{
display: inline-block;
}block 요소를 inline 요소처럼 한줄에 쭉~~ 보여지게 할 수 있다. 더 나아가서 inline에서 사용하지 못하던 width,height,margin,padding까지 사용할 수 있다.
.block{
display:none;
}none을 사용하면 해당 요소는 화면에서 보이지 않는다.
💡 어짜피 안보일 요소를 작성해주는 이유는?
=> interactiv 한 웹 구현이 가능해진다. (예를 들면, 검색창에 검색할때 자동완성기능 등)
display와 float은 inline성질을 가지고 있다.
Margin
맨 처음 css를 공부할때 각종 요소들을 원하는 위치에 배치시키는 것이 참 어려웠는데 오늘 새로운 것을 하나 더 배웠다.
✨ 바로 margin을 이용하는것! ✨
위에서 봤다싶이 block 요소는 양옆을 전부 다 차지한다. 그치만 그 block 요소에 width 값을 지정해주면 요소의 사이즈는 딱 그 width만큼만 지정된다. (width 값만큼만 자리를 차지하고 그 이상으로 늘어나거나 줄어들지 않는다.)
이때, 중앙으로 배치시키고 싶은 요소의 margin을 auto로 설정하면 그 요소의 width 값을 제외하고 좌우 남은 공간을 균등하게 분배하여 요소들을 정중앙에 오도록 할 수 있다.
Input과 Textarea
Input
사용자에게 입력 받을 필드를 생성
- input의 속성
- type(필수속성): 어떤 타입으로 입력 받을 것인가에 대한것이다. (text, number, password등이 들어간다.)
- placeholder: 도움말을 넣어주는 부분이다.
- value: 입력필드에 대한 초기값을 지정한다. (placeholder와 다르게 실제 입력되어 있음.)
- autofocus: 커서를 자동으로 표시해준다.
textarea
input 태그보다 더 긴글을 입력받고 싶을 때 사용한다.
디자인 변경하기
input,textarea 태그의 디자인을 변경할땐 보통 div안에 담아서 width를 조정하고 block 처럼 성질을 바꾸어야 한다.
Position
- position: static, relative, absolute, fixed
1) static
- 기본값.
- 요소가 문서의 일반적인 흐름을 따라 배치된다.
- top, right, bottom, left 속성들이 아무 효과를 주지 못한다.
2) relative
.pos{
position: relative;
top: 10px
right: 10px
}- position에 relative를 준다고 해서 아무 역할도 하지 않기 때문에 반드시 top, right, bottom, left와 같이 사용해야만 한다.
- 요소가 자기의 원래 위치에서(stactic) top, right, bottom, left의 값에 따라 위치가 바뀐다.
- relative가 적용된 요소의 배치만 변경되고 다른 부분들의 배치에는 영향을 주지 않는다.
- top에 마이너스 값을 주면 위로 올라가게 된다.
3) absolute
- 요소가 문서의 일반적인 흐름을 따르지 않는다.
- 가장 가까운 위치에 있는 조상 요소를 기준으로 top,bottom등의 속성값들의 영향을 받고 위치한다.(조상 element가 없으면 문서 본문(body)을 기준으로 삼고 페이지 스크롤에 따라 움직인다. )
- 기준이 될 부모에 position:relative를 부여한다.
4) fixed
- 요소가 문서의 일반적인 흐름에서 제거 된다.
- 스크롤이 되어도 움직이지 않는 고정된 자리를 가짐.
Float
- float: left, right, none;
- 주로 이미지 주변에 텍스트를 감싸기 위해서 사용한다.
💡 float속성이 선언된 자식 요소를 포함하는 부모 요소의 높이가 정상적으로 반영되지 않는 문제의 해결방법
1) float속성이 선언된 요소의 부모 요소에 overflow:hidden; 속성을 넣어준다.
2) 부모 요소에도 자식 요소에 넣었던 똑같은 float의 속성값을 넣어준다. 근데 이렇게 하면 부모 요소에도 float을 넣었기때문에 block 성질이 없어진다. 이때 부모요소의 너비는 float된 자식요소의 콘텐츠를 표현할 수 있는 만큼만으로 작게 줄어들기 때문에 따로 width 값을 주어야한다.
