본문 바로가기

분류 전체보기221

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.

티스토리툴바