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 값을 주어야한다.