오물오물 개발일기

Typography Font-size - 폰트의 크기를 지정합니다. .text{ font-size:18px; } line-height - 줄 간격의 사이즈 - 줄 안의 세로 정중앙에 위치하게 됩니다. - px이나 rem 경우엔 단위를 명시하고 em은 단위를 명시하지 않습니다. .text{ line-height:16px; } .text1{ line-height:1rem; } .text2{ line-height:1.5; } letter-spacing - 글자간을 조절합니다. - px과 em을 사용합니다. - line-height와 달리 em의 경우에도 단위를 명시합니다. .text{ font-size:15px; line-height:1.5; letter-spacing:-.01em; } font-family ..

Media Query - 반응형 웹 (responsive web) 만들기 위해서는 꼭 필요하다. 👈👈 - head안에 를 선언한다. - 분기별 사이즈는 상황에따라 다르다. @media screen and (min-width | max-width : 사이즈){ /* css */ } 💡 반응형 웹 (responsive web) ? - 현재는 여러 디바이스, 디스플레이 사이즈가 있기때문에 사이즈에 따라 맞춰 화면을 보여주는 웹

Flex box - 요소들을 정렬하기 가장 편한 방법 - 정렬을 하기위한 요소의 부모요소에게 선언을 합니다. .flexbox { display : flex; /* flex | inline-flex */ } flex-direction - 가로, 세로 정렬 방향을 정하는 property - main-axis와 cross-axis의 방향이 따라 가게됩니다. - flex-direction : row -> 가로 방향으로 정렬 - flex-direction : row-reverse -> 가로 반대 방향으로 정렬 - flex-direction : column -> 세로 방향으로 정렬 - flex-direction : column-reverse -> 세로 반대 방향으로 정렬 .flexbox { display : fle..

Position - 요소를 원하는 위치에 자유롭게 이동시키기 위한 property - static | relative | absolute | fixed | sticky - top, left, bottom, right 를 사용하며 위치 시킬 수 있습니다. - top & left, top & right, bottom & left, bottom & right 등의 조합으로 사용 - 사용한 property의 교차점 기준으로 계산을 합니다. static - position : static; - 모든 요소의 기본 position relative - position : relative; - 본래 본인 위치를 기준으로 부모요소에서 떠있으나 위치를 기억하며 움직입니다. red green blue .test-contain..

Float - float : left | right | none; - 부모의 요소에서 나와서 떠있게 됩니다. 🛬 - 기본적으로 block를 가지게 됩니다. - 텍스트의 경우엔 float 된 content를 인식하여 자동으로 배치됩니다. - 구성한 레이아웃이 망가질 가능성이 많습니다. https://developer.mozilla.org/ko/docs/Web/CSS/float float CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. developer.mozilla.org 🚑 Float - fixed - 부모요소에 over..

🧱 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이 적용 되지 않습니다...

📚 Box Model ? - 누군가에게 선물을 하려면 어떻게 해야할까요? 보통은 선물이 될 내용물을 먼저 구매하고 선물에 맞는 크기의 포장지, 상자를 결정하게 됩니다. 웹상에서도 동일합니다. Tag는 기본적으로 box의 형태로 되어있습니다. 이용자에게 보여주기 위한 내용물(content)를 HTML으로 작성하게 되고 내용물(content)을 담기 위한 상자(box) 크기를 width, height, padding, border, margin 등으로 지정 합니다. 1. 구성요소 - content : box의 내용물, 가로는 width, 세로는 height 로 표현됩니다. - padding : content 와 broder 사이의 공간을 나타냅니다. - border : box를 구성하는 테두리 더보기 * b..

✨ 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 작업에 대하여 작업이 용이합니다. - 가장 표준이되고 많이 사용되는 방식입니다..

* Custom Properties 색상이나 사이즈 등을 변수로 정의하여 사용한다. Orange Apple Korea Japan China

* transition - 동작과 애니메이션시 딜레이 등등 설정이 가능하다. * 링크 참고