💛[부스트코스_웹 UI 개발] 7. 레이아웃

속성-display

display
요소의 rendering box 유형을 결정

html요소는 블록레벨요소와 인라인 레벨 요소로 나뉜다.
css의 display속성을 이용하면 화면상에서 블록요소를 인라인요소처럼 보여줄수도 있고 반대로 인라인 요소를 블록요소처럼 보여줄수도 있다.

즉 태그마다 고유하게 갖고 있는 rendering box의 특징을 display 속성으로 변경가능

속성값 굉장히 많음
css버전이 업데이트되면서 계속 값들이 추가됨

display:none

브라우저에서 render tree를 만들지 않기 때문에 브라우저에서 보이지 않게 됨.
브라우저에서 rendering되지 않는다. 보이지 않는다.

display:inline

인라인 레벨요소처럼 렌더링

display:block

블록레벨 요소처럼 렌더링

display:inline-block

인라인처럼 영역 차지
인라인처럼 화면에 나타나지만 block의 성질을 갖는다.
block처럼 렌더링값을 갖는다.

display가 어떤 값을 갖는지에 따라서 box model의 속성을 적용할 수 있고 없고의 차이가 존재

display와 box model의 관계

display         width height margin padding border 

block            ㅇ     ㅇ     ㅇ      ㅇ     ㅇ

inline           X      X    좌/우  ㅇ(설명)  ㅇ(설명)

inline-block     ㅇ     ㅇ     ㅇ      ㅇ     ㅇ

• 인라인에서 margin, padding, border는 부모 요소에 영향을 주고있지 않다. 좌우에만 적용이 된다.

• inline
  width, hegiht는 적용되지않음.
  margin, padding, border는 좌우에만 적용됨
  실제로 상/하 에도 적용이 되지만 상/하는 line-box에 영향을 주지 못하기 때문에 부모요소의 박스에 반영이 안되므로 잘 사용하지 않는다.

• block&inline-block
  box model의 속성들이 적용이 된다.

• inline과 inline-block의 차이

  • block은 한 행을 모두 차지하면서 나열됨
  • inline과 inline-block은 같은 행에서 여러개가 배치됨
    즉 inline-block은 inline처럼 배치됨
    배치는 inline처럼 되지만 block처럼 해당 box model의 속성을 갖는다.

• inline요소의 경우 한칸 띄어쓰기나 개행을 한칸의 여백으로 인정함.
  공백도 하나의 inline box를 갖고있다.
  inline-block도 inline처럼 배치가 되기 때문에 한칸 띄어쓰기나 개행을 했을경우 약 4px의 여백을 갖는다.

• inline요소들은 폰트 텍스트와도 관련이 많다

css로 화면에 보이는 display속성을 바꿀수는 있지만 태그의 본질을 바꾸는건 아님
그래서 html은 html대로 문법적 오류가 없도록 태그를 작성해야함

---

속성-visibility

visibility
요소를 어떻게 숨길것인지 결정할때 선언하는 속성

• 기본값 visible : 보이는 상태

• hidden : 해당 요소는 그대로 존재하지만 마치 사라진것처럼 보인다
  요소가 갖고있는 margin 영역까지 그대로 존재하지만 눈에 보이지 않도록 브라우저가 rendering한다

• collapse
  오직 table태그에서만 적용
  IE, Firefox에서만 렌더링이 됨
  셀간의 경계를 무시하고 숨김

• visibility:hidden와 display:none의 차이

  • hidden은 해당 element의 영역을 유지
    스크린 리더기가 해당 영역에 있는 내용을 읽어줌
    따라서 화면에 보이지 않지만 제공해야 하는 내용이 있다면 hidden 사용
  • none은 아예 화면에 렌더링하지 않음
    스크린 리더기가 읽어주지 않음.

---

속성-float

요소를 보통의 흐름에서 벗어나게 할때 사용
주로 레이아웃을 만들떄 영역을 좌우로 분할할때 사용하는 용도로 선언

• 기본값 none
• left, right

3가지 특징 갖는다.

1. 요소를 보통의 흐름에서 벗어나서 띄워지게 할떄 사용됨
   하지만 자신의 영역은 차지하고 있다
2. 주변 텍스트나 인라인 요소가 주위를 감싸는 특징
   자기 자리의 공간은 모두 차지한채로 주위를 감싼다.
3. 대부분 요소의 display값을 block으로 변경한다
   자동으로 display값을 block으로 변경하기 때문에 display를 선언할 필요가 없다
   예외) display속성값이 inline-table이거나 flex등인 경우 그 요소에다가 float를 선언한다고 해도 display값이 block으로 바뀌지 않고 기존의 display값을 유지하고 있다

---

속성-clear

floating된 요소의 영향에서 벗어나 다음 행으로 이동할 때 선언하는 속성

• 기본값 none
• left
  왼쪽요소의 float의 영향에서 벗어남
• right
  오른쪽 요소의 float 영향에서 벗어남
• both
  양쪽 다 벗어남
• clear는 블록 레벨 요소에만 적용이 가능하다.
  블록 태그이거나 display가 block 레벨일때 사용이 가능

앞에 어떤 내용의 float이 올지 모르는 상황에서 모든 요소에 다 clear를 해줄수없음.
불필요한 속성을 너무 많이 선언하게 됨
-> 일반적으로 해당 자식 요소들이 float을 갖고 있을 수 있으니까 부모 요소에서 이 안의 내용들이 모두 clear될 수 있도록 작업을 해준다.
즉 float을 가지는 부모들에서 clear와 float을 세트처럼 자주 쓴다

---

속성-position

요소의 위치를 원하는곳으로 이동시킬때 사용하는 속성

더보기를 눌렀을때 메뉴들이 그대로 위에 겹쳐지는 부분, 밑에 다른 콘텐츠가 있고 그 흐름을 무시한상태로 별도의 레이어가 겹쳐지는 형태, 스크롤을 했을때 브라우저 상단에 고정적으로 위치할 수 있는 메뉴들이 position을 이용한것

position 단독으로 사용해도 되지만
얼마만큼 어떠한 방향으로 이동할것인지를 top, bottom, left, right이라는 속성으로 좌표값을 지정해줄 수 있다.
이런 해당 좌표에 대한 거리등을 OFFSET이라고함

position값
static, relative, absolute, fixed, sticky, initial, inherit 등 정적인 위치, 상대적인 위치, 절대적인 위치, 고정위치 등

• sticky는 브라우저 지원율이 좋은 편이 아니기 때문에 실무에 거의 쓰이지 못함
• static이 기본값
• offset값은 상하좌우 모두 기본값이 auto

• static
  기본값
  정상흐름대로 배열
  offset값이 아무런 변화도 일어나지 않는다
  offset값이 적용되지 않음

• relative
  정상흐름대로 배열
  왼쪽상단을 기준으로 offset만큼 이동함
  상대위치를 갖는다. 주변 요소들에 영향을 주지 않으면서 offset이 이동
  왼쪽 상단의 안쪽이 다 양수값, 바깥쪽이 음수값
  top -50px = bottom 50px 위로이동
  left -40px = right 40px 왼쪽으로이동
  자기자신을 상대적으로 움직인다.
  요소 자체에서 그 요소를 기준으로 움직인다

• absolute
  절대적인 좌표를 갖게됨으로써 display값을 block으로 변경
  문서의 흐름을 벗어나게 된다
  parent의 position을 기준으로 한다.
  만약 부모가 postion이 없다면 조상까지 찾아 올라감
  이떄 부모요소의 border을 제외한 padding 영역부터.
  부모의 padding 영역부터 기준을 갖는다! 여기를 containing block이라고 생각하면 된다
  절대위치를 갖는다.
  부모가 postion:static이 아닌상태여야한다!!

• fixed
  흐름을 벗어난다
  스크롤한것과 문서의 흐름과 상관없이, 브라우저의 좌표값을 기준으로 요소가 고정된 위치에 위치한다.
  즉 뷰포트(브라우저의 창)을 기준으로 offset에 따라 배치
  상단 메뉴에 fixed를 많이 사용하는 편
  부모 요소의 위치와 상관없이 브라우저를 기준으로 한다.
  display값이 block으로 변경된다
  고정위치를 선언할때 사용
  뷰포트상에서 그 좌표값이 이동하는것. 부모위치의 영향을 받지 않는다

absolute, fixed의 경우 인라인 요소에다 선언하면 display값이 block으로 변경된다. 따라서 box model관련 속성들을 모두 선언할 수 있다

• sticky
  relative인 상태로 있다가 스크롤했을때 상단에 가서 붙는다
  아직까지는 브라우저 지원율이 낮아서 사용못하고 있다
  굉장히 유용한 속성

---

속성 - z-index

box가 겹치는 순서를 지정할 때 사용하는 속성

기본값 auto

z-index: auto | number | initial | inherit;

number로 단위가 없는 숫자로 선언해서 z축의 순서를 지정해줄 수 있다

position값이 static이 아닌 경우에 지정가능하다
= position값이 relative, absolute, fixed, sticky등의 값을 가지고 있어야 z-index가 적용된다

• 순서값이 없을 경우 생성순서(코드 상 순서)에 따라서 쌓인다.

• 부모가 z-index값이 있을 경우 부모안에서만 의미가 있다
  부모들간에도 z-index의 관계가 있기 때문에 그 관계에 따라서 z축을 잘 선언해주어야한다.

• 큰값이 가장 위쪽에 위치, 음수사용가능

• z-index가 가장 큰 요소가 화면에서 레이어 위치가 z축이 크다

• 같은형제요소들끼리의 싸움에서 z-index가 가장 큰 값이 가장 위에 올라온다

• 부모끼리 경쟁할때는 내 부모가 더 높은 z-index값을 갖고 있어야 자식이 이길 수 있다.
  자식의 z-index값이 아무리 높아도 자신의 부모의 z-index값이 낮으면 소용없음

• position과 z-index는 함꼐 쓰이는 경우가 많다

---

HTML/CSS 유효성 검사

HTML/CSS 코드를 작성하고 나면 항상 유효성 테스트를 실시해야함.

유효성 검사를 통해 마크업 문법상 에러가 없는지 표준에 맞게 작성되었는지 알 수 있고,사용성과 접근성, SEO 최적화 개선에도 도움된다

유효성 검사를 할 수 있는 주소

The W3C Markup Validation Service