Layout in CSS

bangi·2022년 3월 30일
0
post-thumbnail

1. Position의 속성

Position의 속성에는 5가지가 있다.

  • relative
  • absolute
  • fixed
  • static
  • sticky
여기서는 위의 세개의 속성인 relative, absolute, fixed에 대해 적을 것이다.

1. Relative

우선 첫번쨰 속성인 relative는 상하좌우로 움직인다.
사용할 때에는 "position: relative"를 css 파일에 작성한 후에
"left: 30px", "top: 50px"과 같이 움직이고 싶은 방향을 설정한 후에 픽셀크기로 나타내주면 된다. 이는 부모태그로 감싸져 있어도 지정된 위치에서 시작하여 자유롭게 움직일 수 있기 때문에 웹페이지의 구성요소들을 자유자재로 이동시키는게 가능하다.

2. Absolute

두번째 속성인 absolute는 가장 가까운 위치에 있는 부모태그의 위치를 따라간다.
예시로 구글 검색창을 들면, 구글 검색창내에는 돋보기, 키보드, 마이크 그림이 위치해있다. 이를 만들때 검색창이 이동할때마다 똑같은 위치이동정보를 각 이미지에 주어서 이동을 시켜도 되긴하지만, absolute를 이용하면 부모태그가 이동하는거에 맞춰서 그의 absolute속성을 지닌 자식태그들 또한 같은 방향으로 이동하게 된다. 만약 부모태그가 없다면, 문서전체를 부모태그처럼 여겨서 페이지 스크롤에 따라 방향을 전환하게 된다.

3. Fixed

마지막 속성인 fixed는 단어 뜻에서도 알 수 있듯, 항상 위치를 고정시키는 속성이다. 목차가 굉장히 다양하고 각각의 내용도 많은 웹페이지에 있을때 이 목차를 알려주는 표시줄이 스크롤을 통해서 화면에서 사라지면, 그 내용을 다 읽은 사용자는 다시 처음으로 스크롤해서 자기가 찾는 목차를 찾아야한다. 하지만 이런 표시줄이 fixed로 고정이 되있으면 웹페이지가 위아래로 스크롤되어도, 화면의 지정된위치에 고정이된다.

이러한 position의 속성을 공부하면서 처음에는 잘 이해가 가지 않았다. 그래서 글상자하나를 띄우고 여러 코드를 치다보니 점점 각각의 특징과 사용법에 대해 익숙해지고 이해가 되기 시작했다.

(출처: https://www.w3schools.com/css/css_positioning.asp)

2. Inline, Inline-block, Block

1. Block은 기본적으로 가로 영역 전체를 박스 형식으로 차지한다.

컨텐츠가 한글자짜리여도 그 가로줄에 있는 영역은 온전하게 그 콘텐츠의 영역이며 그 다음 태그를 쓰고 작동을 시켜도 자동으로 줄 바꿈 형태가 되어서 출력된다. Block태그의 종류에는 div태그, h1태그, p태그, li태그등이 있다. 추가로 그 박스 영역의 크기변경을 위해 width, height의 값을 조정해줄 수 있다.

2. Inline은 Block과 달리 컨텐츠 자체만의 영역을 가질 수 있다.

컨텐츠 자체의 영역만이 Inline태그의 영역이다보니 Block과 달리, 크기 값을 바꿔 줄 수도 없고, 자동 줄바꿈도 되지 않은채 바로 옆에 붙어서 출력이된다. 종류에는 span태그, b태그, i태그, a태그등이 있다.

3. Inline-block은 1,2번에서 다룬 Block과 Inline의 중간 형태이다.

크기는 원하는대로 조정이 가능하지만, 출력시에 자동 줄바꿈이 되진 않는다.

(출처: https://ofcourse.kr/css-course/display-%EC%86%8D%EC%84%B1)

0개의 댓글