CSS5 CSS Display CSS Display 속성값들의 특징 1. display: inline; - line break가 일어나지 않습니다. - full width를 차지하지 않습니다. - width, height 속성을 적용할 수 없습니다. 2. display: block; - new line에서 시작합니다. 즉, line break가 일어납니다. - full width를 차지합니다. - width, height 속성이 적용 가능합니다. 3. display: inline-block; - inline과 비슷한 특성이지만 width, height 적용이 가능합니다. - 위와 같은 이유로 line break 시키고 싶진 않으나 width나 height등의 속성의 성격은 box를 따라가고 싶을 때 사용합니다. - 주로 inline .. 2023. 5. 9. CSS Box Model CSS Box Model CSS의 모든 것들은 Box(박스)로 이루어져 있고 이를 이해해야 복잡한 레이아웃을 구성할 수 있습니다. 박스는 크게 Block 박스와 Inline 박스 두 종류로 나뉩니다. 이는 해당 박스가 다른 박스와 어떤 관계고 페이지 흐름 속에서 어떠한 특성을 갖는가로 구분합니다. 그리고 Block 박스와 Inline 박스 안에서도 각각 inner display type 과 outer display type 으로 종류를 나눌 수 있습니다. 1. Box의 구분과 그 특징 1-1. Block + outer display type - 요소를 생성하면 line break과 함께 박스가 생성됩니다. - 이 박스에는 width, height 속성을 적용할 수 있습니다. - padding, borde.. 2023. 5. 9. CSS Positioning에 대한 이해 CSS Position 속성 1. static static 속성값은 position 속성의 default 값입니다. 즉, 별다른 컨트롤 없이 문서의 흐름 그대로 배치됩니다. position 속성값은 cascade 되지 않기 때문에 굳이 그 값을 초기화해줄 필요가 없어 거의 쓸 일이 없는 값입니다. 2. relative '자기 자신에게 relative' 하다는 뜻에서 relative라는 값 이름이 붙여졌습니다. top, left, bottom, right 등의 positioning 속성을 따로 설정하지 않으면 배치되는 위치는 static과 다를 바가 없습니다. top, left, bottom, right 등의 positioning 속성에 따라 자신의 원래 위치에서 이동된 위치에 배치됩니다. static으로.. 2023. 4. 11. Float과 Clear에 대한 이해 CSS의 Float과 Clear 속성에 대한 이해 1. Float 속성 float 속성은 원래 뉴스 기사나 잡지 등에서 흔히 볼 수 있는 형태인 글과 사진이 함께 어우러지며 화면에 나타날 수 있도록 하기 위해 고안된 CSS 속성 중에 하나입니다. 요소에 float 속성을 지정하면, 해당 요소가 HTML 문서의 기본적인 흐름에서 벗어나 3차원 공간 위로 붕 뜨듯이 배치가 되는 것이 특징입니다. 물론 이로 인해 해당 요소가 가지는 block의 성격을 무시하게 되겠죠. 다음 짧은 유튜브 영상을 보면 쉽게 이에 대한 개념을 잡을 수 있을 것 같습니다. https://www.youtube.com/watch?v=xara4Z1b18I position: absolute 속성과 속성값이 지정된 요소와의 차이점은, pos.. 2023. 4. 10. CSS 기본 - 잊고 넘어가기 쉬운 것들에 대한 복습 CSS 기본 CSS란 Cascading Style Sheets의 약자로, W3C에서 만들었으며 HTML이 화면 등에서 어떻게 표시될지 묘사하는 역할을 합니다. 웹 프론트엔드 개발을 하기 위해서는 CSS를 계속해서 접하게 되고 필수적으로 알아야하기 때문에 HTML과 함께 굉장히 사소하고 그저 자주 쓰는 기술 정도로 치부되는 경우가 있는데, 특히 주니어 단계에서는 은근히 모르고 넘어가거나 잊어서 다시 찾아보게 되는 일이 종종 있습니다. 이에 기본 내용을 복습하면서 잊고 넘어가기 쉬운 부분들 혹은 머릿속에 잘 녹아들어있어야만 하는 것들에 대해서 기록해봅니다. 1. 선택자 (Selector) 1-1. 기본 선택자 (1) 유형 선택자(Type selector) : 익히 알다 싶이 명시된 요소를 선택하며, 예를 들.. 2023. 4. 6. 이전 1 다음
