본문 바로가기

html, css, 자바스크립트97

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.
css cursor 프로퍼티로 마우스 커서 제어하기 css cursor 프로퍼티로 마우스 커서 제어하기 네 안녕하세요, 이번 포스팅에서는 css로 마우스의 커서를 제어하는 방법에 대하여 알아보도록 하겠습니다. 우리가 마우스 커서를 올리면 마우스의 커서가 변합니다. 이 역시도 우리는 css로 제어가 가능합니다. 이러한 마우스 커서 제어를 할 수 있는 속성값은 정말 다양한데, 이번 포스팅에서는 그러한 마우스 커서를 제어할 수 있는 속성들이 어떤 것이 있는지 한 번 알아보도록 하겠습니다. 1. 마우스 커서 제어하기 : cursor 사용 css에서는 cursor라는 프로퍼티를 제공하며, 이를 통하여 마우스 커서를 제어를 할 수 있습니다. 마우스 커서 제어를 할 수 있는 속성값은 정말 많습니다. 제가 한 번 적어보겠습니다. alias : 통칭(별명) 커서 all-.. 2023. 4. 3.