오물오물 개발일기

* div & span - 두 태그의 경우 Semantic Markup 적으로 즉, "의미론적"으로 지니고 있는건 없다. 우리가 실생활에서 정리를 할때 물건을 박스에 담듯이 css 작업을하며 레이아웃을 잡거나 정렬을 시킬때 사용하기도 하며 부분적으로 색변경, 폰트사이즈변경 등의 작업할때 사용한다. * 영역 설정 div는 정해져있는 영역 전체를 감싸게된다. span은 줄단위로 영역을 감싸게 되며 범위가 다르다. div와 span의 차이점을 알아보자 div와 span의 차이점을 알아보자 div와 span의 차이점을 알아보자 div와 span의 차이점을 알아보자 div와 span의 차이점을 알아보자 div와 span의 차이점을 알아보자 div와 span의 차이점을 알아보자 div와 span의 차이점을 알아보자..

🧱 Block - display : block - width = 부모의 width 100%로 사용합니다. - 별도의 width값을 지정하게되면 width를 적용 후 남는 공간은 margin으로 채웁니. width margin .test-container { background-color: #f2f2f2; } .test-container__width { background-color: red; } .test-container__margin { background-color: yellow; width: 500px; } ⛸️ Inline - 한 라인안에 같이 들어가게 됩니다. - width, height 지정이 불가능하며 padding, maring, border의 top, bottom이 적용 되지 않습니다...

✨ CSS - Cascading Style Sheet - HTML, XHTML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트언어입니다. HTML로 문서의 골격을 잡는다면 CSS는 이 문서를 꾸며주는 화장의 역할을 합니다. 글꼴, 배경색, 크기, 위치 등을 변경할 수 있도록해줍니다. 1. 기본구조 selector { property : value; /* declare */ } 2. 사용법 - External, Internal, In-line 처럼 3가지의 방법이 있습니다. 1. External CSS - css파일을 따로 작성하여 link & @import 등의 방식으로 사용하는 방식입니다. - 여러 문서의 css 작업에 대하여 작업이 용이합니다. - 가장 표준이되고 많이 사용되는 방식입니다..