본문 바로가기

분류 전체보기221

css float 프로퍼티로 박스 유동적으로 배치하기 css float 프로퍼티로 박스 유동적으로 배치하기 네 안녕하세요, 이번 포스팅에서는 css를 이용하여 박스를 유동적으로 배치를 하는 방법에 대하여 알아보도록 하겠습니다. 이 방법은 이전 포스팅에서 보여드렸던 fixed와 얼추 비슷한데, 조금은 다른 점이 있습니다. 그래서 그 부분을 참고를 해주시면 좋을 것 같습니다. 그럼 지금부터 같이 보시죠. 해당 포스팅 관련 링크는 아래에 기재를 하겠습니다. 2023.04.24 - [html, css, 자바스크립트] - css position : fixed 프로퍼티로 박스 고정 배치 하기 css position : fixed 프로퍼티로 박스 고정 배치 하기 css position : fixed 프로퍼티로 박스 고정 배치 하기 네 안녕하세요, 이번 포스팅에서는 박스.. 2023. 4. 24.
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.

티스토리툴바