본문 바로가기

전체 글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.
css position : static 프로퍼티로 박스 정적 배치 하기 css position : static 프로퍼티로 박스 정적 배치 하기 네 안녕하세요, 이번 포스팅에서는 css를 이용하여 박스를 배치하는 방법에 대하여 알아보도록 하겠습니다. 전에도 말씀드렸다시피, html 태그에서 배치는 정말 중요한 요소들 중 하나입니다. 그 이유는 우리가 웹 페이지를 작성을 할 때 기능뿐만 아니라 디자인도 중요하기 때문입니다. 그리고 그러한 디자인은 배치가 기본입니다. 그래서 이번에는 이러한 배치를 어떻게 하는지 한 번 알아보도록 하겠습니다. 그럼 같이 보시죠. 1. 박스 배치하기(position) 브라우저에서는 개발자가 배치를 한 html 태그의 순서대로 태그를 배치를 하여 나타냅니다. 이를 normal flow라고 부릅니다. 그리고 이러한 배치를 무시를 하는 방법이 있는데, 그.. 2023. 4. 24.
css display 속성으로 박스의 유형 제어하기 3 - display : inline-block 속성으로 인라인 블록 박스 제어하기 css display 속성으로 박스의 유형 제어하기 3 - display : inline-block 속성으로 인라인 블록 박스 제어하기 네 안녕하세요, 이번 포스팅에서는 저번 포스팅에 이어서 인라인 블록 박스를 제어하는 방법에 대하여 알아보겠습니다. 인라인 블록 박스는 블록 박스와 인라인 박스가 합쳐져 있는 것과 같다고 생각하시면 됩니다. 그럼 지금부터 시작하도록 하겠습니다. 그리고 블록 박스와 인라인 박스를 제어하는 방법에 대하여 알고 싶으신 분들은 제가 아래에 링크를 걸어둘테니 방문해 주시면 도움이 될 겁니다. 2023.04.03 - [html, css, 자바스크립트] - css display 속성으로 박스의 유형 제어하기 1 - display : block 속성으로 블록 박스 제어하기 css dis.. 2023. 4. 3.
css display 속성으로 박스의 유형 제어하기 2 - display : inline 속성으로 인라인 박스 제어하기 css display 속성으로 박스의 유형 제어하기 2 - display : inline 속성으로 인라인 박스 제어하기 네 안녕하세요, 이번 포스팅에서는 인라인 박스를 제어하는 방법에 대하여 알아보도록 하겠습니다. 우리가 박스를 다룰 때 여러 개의 박스를 다뤘습니다. 그중에서 메인 박스 안에 있는 서브 박스에 해당하는 인라인 박스를 제어하는 방법에 대하여 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 인라인 박스 제어하기 : display : inline 속성 사용 이 속성은 인라인 박스로 묶어서 내보내는 방법입니다. 그리고 이러한 방식은 블록 속성보다는 크기가 작기도 하고, 블록이 아니고 인라인이라는 특성상 블록 안에 상속이 되는 속성이기 때문에 블록처럼 한 줄을 독자적으로 차지를 .. 2023. 4. 3.
css display 속성으로 박스의 유형 제어하기1 - display : block 속성으로 블록 박스 제어하기 css display 속성으로 박스의 유형 제어하기1 - display : block 속성으로 블록 박스 제어하기 네 안녕하세요, 저번 포스팅 까지는 css가 제공하는 기본적인 기능에 대하여 알아보았습니다. 이번 포스팅부터는 css가 제공해주는 고급 기능들에 대하여 알아보겠습니다. 그중에서 가장 먼저 배울 것은 바로 배치를 하는 방법입니다. 우리가 css를 쓰는 가장 큰 이유가 바로 배치 때문인데요, 이 배치가 잘 되어있어야 웹 페이지가 깔끔해 보이고 미관상 예뻐 보입니다. 그래서 이번 시간에는 그 방법들에 대하여 알아보도록 하겠습니다. 그럼 지금부터 같이 보시죠. 1. display 프로퍼티 display 프로퍼티는 html에서 제공을 해주는 기본적인 박스의 유형을 무시하고 우리가 직접 박스의 유형을 .. 2023. 4. 3.

티스토리툴바