[CSS] 가시 속성 & 위치 속성 & 배경 속성 (display & position)

가시 속성

• 가시 속성은 태그가 화면에 보이는 방식을 지정 ex) display
• display 속성을 이용하면 박스를 인라인 형식, 블록 형식, 인라인-블록 형식으로 설정할 수 있다

키워드	설명
none	화면에 보이지 않음
block	블록 박스 형식으로 지정
inline	인라인 박스 형식으로 지정
inline-block	블록과 인라인의 중간 형태로 지정

none 키워드

• display 속성에 none 키워드를 적용하면 태그가 화면에서 보이지 X
• 중간에 있는 div 태그 전체가 화면에서 사라진다

block 키워드

• 속성을 block으로 지정하면 태그를 클릭하면 해당 요소가 선택된다
• 블록 형식과 인라인-블록 형식은 margin 속성과 padding 속성을 상하좌우 네 방향으로 지정할 수 있다
• 인라인 형식은 왼쪽과 오른쪽으로만 지정할 수 있다

배경 속성

속성	설명
background-image	배경 이미지 삽입
background-size	배경 이미지의 크기 지정
background-repeat	배경 이미지의 반복 형태 지정
background-attachment	배경 이미지의 부착 형태 지정
background-position	배경 이미지의 위치 지정
background	한 번에 모든 배경 속성 입력

background-image

• 배경 이미지를 지정하는 속성으로 스타일 값에는 URL 단위나 그레이디언트를 입력

background-size

• 크기 단위나 키워드를 입력
• 크기 단위로는 퍼센트 %를 많이 사용
• 너비와 높이 값 2개를 입력할 수 있다
• 주의 : 너비와 높이에 띄어쓰기를 사용하는 것과 쉼표를 사용하는 것은 다르다, 쉼표를 사용하면 각 배경에 서로 다른 크기를 입력하는 것으로 인식한다background-repeat

• 배경 이미지의 반복 형태를 지정
• 이미지를 패턴처럼 표시
• repeat-x를 입력하면 x축 방향으로만 이미지가 반복
• repeat-y는 y축으로만

background-attachment

• 배경 이미지를 화면에 고정하는 속성
• 기본 키보드는 scroll : 화면 스크롤에 따라 배경 이미지가 함께 이동

background-position

• 배경 이미지의 배치 위치를 지정
• background-position : 키워드;
• background-position : X축 위치;
• background-position : X축 위치 Y축 위치;

글자 속성

• font-size : 글자 크기를 지정
• font-family : 글꼴을 지정
• font-style : 글자의 스타일(기울기 등)을 지정
• font-weight : 글자 두께를 지정
• text-align : 글자 정렬을 지정
• line-height : 글자 높이를 지정

위치 속성

• 요소 위치를 설정할 때는 X 좌표와 Y 좌표를 지정하는 방법인 ‘절대 위치 좌표 방법’
• 요소를 입력한 순서에 따라 지정하는 ‘상대 위치 좌표 방법’을 사용
• position : 요소의 위치 지정 형식을 설정할 때

🔥 절대 위치 좌표를 사용하려면 position 속성에 absolute나 fixed 키워드를 입력하고 상대 위치 좌표를 사용할 때는 static이나 relative 키워드를 입력

🔥 static 키워드를 사용하면 요소가 ‘위쪽에서 아래쪽’ / ‘왼쪽에서 오른쪽’ 순서에 맞게 배치

🔥 relative 키워드를 적용하면 static 키워드로 초기 위치가 지정된 상태에서 상하좌우로 이동 가능

 

키워드	설명
absolute	절대 위치 좌표 설정 (내 아이템이 담겨 있는 가장 가까이 있는 박스 안에서 위치 변경) (아이템이 담겨있는 상자 안에서 움직인거)
fixed	화면을 기준으로 절대 위치 좌표 설정 (박스에서 완전히 벗어나 윈도우(페이지) 안에서 움직인다)
relative	초기 위치에서 상하좌우로 위치 이동 (원래 있던 위치에서 이동)
static	위쪽에서 아래쪽으로 순서대로 배치 (기본 값)

• sticky - 원래 있어야 되는 자리에 있는다. 스크롤 해도 자기 자리에 있다
• z-index: 요소 순서를 변경하고 싶을 때, 속성에 숫자를 입력하면 숫자가 클수록 앞에 위치한다 하지만, 9999처럼 터무니없는 값을 입력하면 브라우저가 인식 못할 수 있다
• !! Position 속성인 absolute 키워드를 적용하면 부모 태그가 영역을 차지하지 X, 따라서 자손의 position 속성에 absolute 키워드를 적용할 때는 태그에 몇 가지 처리를 해야된다
  • 해결 공식 :
    • 자손의 position 속성에 absoulte 키워드를 적용하려면 부모의 position 속성에 relative 키워드를 적용
      • 이렇게 하면 자손 태그가 부모 위치를 기준으로 절대 위치 좌표를 설정
      • 이 공식에 따라 div 태그, 부모 태그의 postion 속성을 지정

키워드	설명
hidden	영역을 벗어나는 부분 감춤
scroll	영역을 벗어나는 부분을 스크롤로 만든다

요소 쌓임 순서(Stack Order)

• 어떤 요소가 사용자와 더 가깝게 있는지 (위에 쌓이는지) 결정
  1. 요소애 position 속성의 값이 있는 경우 위에 쌓임(기본값 static 제외)
  2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 샇임
  3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임

position 속성의 값으로 absolute, fixed가 지정된 요소는, display 속성이 block으로 변경된다