본문 바로가기

CSS

[CSS] position 안녕하세요. 오늘은 CSS의 position에 대해서 알아보도록 하겠습니다. position은 엘리먼트 요소들의 위치를 어떻게 지정할 것인가를 결정하는 중요한 property인데요. property의 값에 따라 엘리먼트 요소들의 위치가 지정될 방법이 바뀌게 되고 top, left, right, bottom property로 위치를 확정 짓게 됩니다. Position의 Values static 엘리먼트 요소들의 기본값 입니다. 아무것도 지정 해주지 않으면 기본적으로 static이 적용 된다고 보시면 됩니다.static으로 값이 설정 되어 있으면 top, left, right, bottom, z-index 의 값들은 적용 되지 않습니다. 일반적으로 각 엘리먼트에 성질에 따른 (block 요소 inline요소.. 더보기
[CSS] margin collapsing (마진 상쇄) 안녕하세요.이번 포스팅은 margin collapsing (마진 상쇄) 현상에 대해서 알아 보도록 하겠습니다. 또는 마진 겹침 현상이라고도 합니다. 박스 모델을 구현할 때 마진겹침현상 때문에 애먹으신적이 종종 있으실 겁니다.그런데 이 현상이 어떤 경우에 일어나는지 아시면 적어도 답답함은 조금 줄어들지 않을까 생각 됩니다.그래서 어떤 경우에 마진겹침현상이 일어나는지 알아 보도록 하겠습니다. 인접한 두 박스의 마진 방향이 겹칠 경우 .box1 { border: orangered solid 1px; } .box2 { border: purple solid 1px; } div { margin: 20px; } 안녕하세요 margin collapsing test 위 이미지를 보면 뭔가이상한 점이 느껴지시지 않습니까?.. 더보기
[CSS] box model과 box-sizing 안녕하세요. 이번 포스팅은 css의 Box model 개념에 대해서 알아 보도록 하겠습니다. HTML의 모든 요소(element)들은 사각형의 박스 형태로 표시되는데 이 박스는 margin, padding, border, content로 구성 되며 이것들이 합쳐져 너비(width), 높이(height)를 결정한다. 즉, 박스의 크기를 결정하고 박스 모델을 만들게 됩니다. 위에 보이는 것과 같이 구성 됩니다. 그럼 박스를 구성하는 구성요소에 대해서 하나씩 알아보죠. contentcontent는 말 그대로 실제 내용을 포함하는 영역입니다. 그리고 content는 width, height, min-width, max-width, min-height, max-height 를 가지고 크기를 지정하고 제어 할 수 .. 더보기
[CSS] display - block과 inline 그리고 inline-block 안녕하세요. 오늘은 display porperty에 대해서 알아 보겠습니다. 그 중에서 inline과 block 그리고 inline-block에 대해서 알아보겠습니다. 먼저 display property에서 간단히 설명하면 display는 화면이 렌더링 되었을때 어떠한 특정 영역이 표시 되는데 성질을 부여하는 property입니다. 그 중 가장 많이 사용 되는 inline과 block 성질(display property의 값)입니다. 우선, html의 태그들은 크게 block 요소와 inline 요소로 나눌 수 있다. block 요소, , , , , , , , , , ,, , , , , , , , , , , block 요소들은 위와 같은 요소들이 있으며 위에 나열된 태그들 말고도 많은 태그들이 있습니다... 더보기
Text 개행 처리 및 글자 자르기 CSS 퍼블리싱 작업을 하면서 유용하게 쓸 수 있는 CSS를 이용한 Text 개행 처리에 대해서 알아 보겠습니다.주로 많이 쓰이는 때는 역시 글이 많이 쓰이는 게시판 구조의 프로젝트를 진행 할 때 라고 생각합니다. white-space - 공백 기준 줄바꿈(띄어쓰기 및 줄바꿈 공백) valuenormalprenowrap Default - normal white-space: normal 연속되는 여러 칸의 공백이나 줄바꿈을 하나(1칸)로 인식한다. 지정된 넓이 끝에서 자동으로 줄 바꿈한다. white-space: pre연속되는 여러 칸의 공백을 실제 입력된 그대로 보여 준다. 줄바꿈도 마찬가지로 실제 입력된 그대로 보여 준다.하지만 지정된 넓이 보다 오버 되도 강제 줄바꿈을 하지 않는다. white-spa.. 더보기