CSS60 css position : fixed 프로퍼티로 박스 고정 배치 하기 css position : fixed 프로퍼티로 박스 고정 배치 하기 네 안녕하세요, 이번 포스팅에서는 박스를 고정 배치 하는 방법에 대하여 알아보도록 하겠습니다. 박스를 고정 배치를 한다는 것은 사실 반응형 웹을 만드는 것을 훨씬 선호하고 고수하는 우리들의 입장에서는 조금 이상하다 느낄 수가 있습니다. 하지만 가끔 고정적으로 배치를 해야만 하는 경우가 생기곤 합니다. 그래서 자주 쓰이는 방법은 아니지만, 쓰이기는 하기 때문에 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1 - 4. 고정 배치하기 - position : fixed 사용 고정 배치는 html 태그를 브라우저의 창이 유동적으로 크기가 바뀌어도 보이는 위치를 고정하는 기능입니다. 그래서 브라우저 창에 반응하여 계속 그 위치를 .. 2023. 4. 24. css position : absolute 프로퍼티로 박스 절대 배치 하기 css position : absolute 프로퍼티로 박스 절대 배치 하기 네 안녕하세요, 이번 포스팅에서는 박스를 절대 배치하는 방법에 대하여 알아보도록 하겠습니다. 절대 배치 역시 상대 배치처럼 많이 쓰입니다. 상대 배치만큼이나 중요한 요소 중 하나이기 때문에 이번 포스팅을 통하여 잘 알아가셨으면 좋겠습니다. 그럼 시작하도록 하겠습니다. 1 - 3. 절대 배치하기 - position : absolute 사용 절대 배치는 조금 이해하기 어려운 부분이 있을 수 있습니다. 일단 상대 배치와 조금 다른 점이 있다면, 상대 배치는 위에서 디테일한 위치를 그냥 잡아서 가지만, 절대 배치는 위에서는 절대 배치를 하겠다 선언을 해주고, 그다음에 body 태그 안에 있는 자식 태그들에게 개별적으로 style 속성을 .. 2023. 4. 24. css position : relative 프로퍼티로 박스 상대 배치 하기 css position : relative 프로퍼티로 박스 상대 배치 하기 네 안녕하세요, 이번 포스팅에서는 박스를 상대 배치를 하는 방법에 대하여 알아보려 합니다. 우리가 css로 웹 퍼블리싱을 할 때 많이 사용하는 배치의 형태 중 하나가 바로 상대 배치입니다. 그래서 프런트엔드 개발자와 더불어 웹 퍼블리싱을 하시는 분들이시라면 잘 알아두셔야 합니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 상대 배치하기 - position : relative 사용 상대 배치는 우리가 위치와 관련된 속성 값을 넣어주고, 그 값을 입력해 주면 그만큼 이동이 되어 출력이 됩니다. 그러한 방식을 상대 배치라고 합니다. 그리고 상대 배치를 사용하는 방식은 이러합니다. position : relative; 이렇게 씁니다. 그.. 2023. 4. 24. css position : static 프로퍼티로 박스 정적 배치 하기 css position : static 프로퍼티로 박스 정적 배치 하기 네 안녕하세요, 이번 포스팅에서는 css를 이용하여 박스를 배치하는 방법에 대하여 알아보도록 하겠습니다. 전에도 말씀드렸다시피, html 태그에서 배치는 정말 중요한 요소들 중 하나입니다. 그 이유는 우리가 웹 페이지를 작성을 할 때 기능뿐만 아니라 디자인도 중요하기 때문입니다. 그리고 그러한 디자인은 배치가 기본입니다. 그래서 이번에는 이러한 배치를 어떻게 하는지 한 번 알아보도록 하겠습니다. 그럼 같이 보시죠. 1. 박스 배치하기(position) 브라우저에서는 개발자가 배치를 한 html 태그의 순서대로 태그를 배치를 하여 나타냅니다. 이를 normal flow라고 부릅니다. 그리고 이러한 배치를 무시를 하는 방법이 있는데, 그.. 2023. 4. 24. 이전 1 ··· 4 5 6 7 8 9 10 ··· 15 다음