2025-11-04(CSS

리액트로 가면 웹표준에서 말하는 htmlcss 각자의 쓰임에 맞게 권고 사항...
구성요소를 정의하는 작업을 했고
css는 html각 요소들을 원하는대로 제어하는 작업..

 

박스모델

1) 기본 내용

• css에서는 모든 HTML 요소를 하나의 영역으로 구분한다.
• 여러 요소를 div 태그 등을 이용해서 하나의 박스로 구분할 수 있다.
• 컨텐츠, padding(요소의 내용(content)과 테두리(border) 사이의 안쪽 여백을 의미
  ,margin( Border 바깥쪽을 차지), border(테두리)
• 레이아웃 구성

2) box-sizing 속성

•  css에서 박스의 너비와 높이를 계산할 때 필요한 속성
• content-box(기본 값)
  => width 는 컨텐츠만을 위한 사이즈..
  1) border, padding이 변경되면 사이즈가 변경 - 가변
  2) border-sizing 속성을 정의하지 않으면 기본
• border-box
  => width가 컨텐츠, padding, border, width등이 고려된 사이즈
  => 사이즈가 변경되지 않는다.

3) display

• HTML 모든 요소는 인라인요소, 블록요소, 인라인블록요소로 나뉘다.
• display 속성으로 정의하면 이 요소들에 대해서 정확하게 특징을 알고 있어야한다.
• 요소가 화면에 어떻게 배치되고 얼마만큼 영역을 차지하는지와 관련된 속성으로 레이아웃에 영향을 주는 속성

   1) block 요소

• display:block 정의
• 항상 새로운 줄에서 시작
• 가로 너비를 100% 모두 사용하므로 세로로 추가
• width, height, margin, padding 모두 적용 가능
• div, 시멘틱테그, p, ul, ol, form ,table, h1~h6 

   2) inline요소 

• 한 줄 여러개가 배치
• 태그 내부의 컨텐츠 사이즈 만큼 영역을 차지
• width, height를 무시하고 margin도 적용되지 않는다.
• span, a video, audio

   3) inline-block

• inline과 block의 장점만 적용
• inline 요소와 동일하게 줄바꿈이 발생하지 않고 가로로 배치
• position 속성을 이용해서 작업
• 네비게이션 이나 슬라이더
• 부모요소에 relative를 정의하고 자식 요소에 absolute정의
• html에서 부모요소는 밖에서 감싸고 있는 테그가 부모요소 감싸지는 것을 당하는 테그가 자식 요소

1) 정적위치(static)

- 기본흐름대로 출력

- 상위요소를 기준으로 원래 표시되어야 하는 자리에 위치

- left, top, botton, right의 좌표 속성을 사용할 수 없다

- 위 -> 아래

왼쪽 -> 오른쪽 배치

 

2) 절대위치(absolute)

- 정상적인 기본 흐름과 상관없이 내가 원하는 위치에 배치

- top, left를 지정해서 배치

- 문서를 기준으로 위치가 정해지고 좌표속성에 정의한 값의 위치로 이동

- 상위요소를 기준으로 이동

- 문서를 기준으로 배치가 되므로 윈도우의 해상도와 상관없이 무조건 보인다.

3) 상대위치(relative)

- 부모의 위치를 기준으로 해서

- 부모의 요소를 기준으로 자식요소의 위치 기준이 잡혀야 하는 경우 일반적으로 부모요소를 relative로 정의하고 작업

- 부모요소가 아닌 경우에는 static인 경우 원래 있어야하는 위치로 부터 상대적으로 좌표값에 따라 이동

 

4) 고정위치(fixed)

- 상위요소에 영향을 받지 않고 이동

- 윈도우 기준으로 움직인다. 윈도우를 기준으로 위치값을 계산하고 윈도우의 해상도를 벗어나면 안보임

- 기준위치(left:0, top:0)를 기준으로 이동

- 화면의 기준위치(viewport의 기준위치를 기준으로 잡는다.)

- 부모의 요소에서 항상 같은 위치에 고정되어야 하는 경우

7. 레이아웃