초보 개발자의 개발 블로그

🐸 Flexbox Froggy란 ? CSS코드 게임으로 Flexbox의 속성을 요구한대로 입력하면 다음 단계로 넘어갈 수 있는 게임 Flexbox의 속성을 실습하며 익히기 좋다. * FLEXBOX FROGGY 이동 https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 13단계. 개구리를 순서를 반대로 + 아래로 이동 + 가로선 상 중앙 정렬 #pond { display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-end; } 14단계. 노란색 개구리를 제일 마지막으로 #pond { display..

🐸 Flexbox Froggy란 ? CSS코드 게임으로 Flexbox의 속성을 요구한대로 입력하면 다음 단계로 넘어갈 수 있는 게임 Flexbox의 속성을 실습하며 익히기 좋다. * FLEXBOX FROGGY 이동 https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 1단계. 개구리를 오른쪽으로 이동 #pond { display: flex; justify-content: flex-end; } 2단계. 개구리를 가로선 상 중앙 정렬 #pond { display: flex; justify-content: center; } 3단계. 수련잎 주위의 간격 고려하여 이동 #pond { display:..

Bootstrap Grid System Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a 12 column system, 6 default reponsive tiers, Sass variables and mixins, and dozens of predefined classes. Bootstrap이 가장 많이 사용되는 이유이자 반응형 웹페이지를 만들기 위해서 가장 많이 사용이 필요한 기능 Bootstrap Grid System은 flexbox로 제작되었다. container, rows, column으로 컨텐츠를 배치하고 정렬 반드시 기억할 2가지!!! 12개의 column, 약수가 충분..

Bootstrap Build fast, responsive sites with Bootstrap. Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins. 트위터에서 시작된 오픈 소스 프론트엔드 라이브러리 웹 페이지에 많이 쓰이는 요소 거의 전부를 내장하고 있다. 별도의 디자인을 할 시간이 크게 줄어들고, 여러..

CSS Flexbox 오랫동안 CSS Layout을 작성할 수 있는 도구는 float 및 positioning 뿐이었다. 그로 인해 문제가 있는 것은 아니었지만, 어떤 면에서는 제한적이고 한계가 존재 Flexbox라 불리는 Flexible Box module은, Flexbox 인터페이스 내의 아이템 간 "공간 배분"과 강력한 "정렬"기능을 제공하기 위한 1차원 레이아웃 모델로 설계되었다. 요소 간 공간 배분과 정렬 기능을 위한 1차원(단방향) 레이아웃 크게 딱 2가지만 기억할 것! 요소! 그리고 축! 요소 Flex Container (부모 요소) Flex Item (자식 요소) 축 main axis (메인축) cross axis (교차축) Flexbox의 시작 Flex Container를 선언하는 것으로..

CSS Float 한 요소(element)가 정상 흐름(normal flow)으로부터 빠져, 텍스트 및 인라인(inline)요소가 그 주위를 감싸 요소의 좌/우측을 따라 배치되는 것을 지정한다. (블록 요소는 아니다!!) 본래는 이미지 좌, 우측 주변으로 텍스트를 둘러싸는 배치 용도로 도입 (ex. 신문형식) 더 나아가 이미지가 아닌 다른 요소들에도 적용해 웹 사이트의 전체 레이아웃을 만드는데까지 발전했다. Float 속성 none : 띄우지 않음 (기본 값) left : 선택한 요소를 왼쪽으로 띄움, 페이지 내용은 박스 오른쪽에 위치 right : 선택한 요소를 오른쪽으로 띄움, 페이지 내용은 박스 왼쪽에 위치 inherit : 부모 요소로부터 상속함 Float clear float 속성을 통해 태그를..

CSS Position 문서 상에서 요소를 배치하는 방법을 지정한다. static : 모든 태그의 기본 값(기준 위치) 일반적인 요소의 배치 순서에 따른다. (좌측 상단) 부모 요소 내에서 배치될 때는 부모 요소의 위치를 기준으로 배치된다. 아래는 좌표 프로퍼티(top, bottom, left, right)를 사용하여 이동이 가능(음수 값도 가능) relative absolute fixed static div { height: 100px; width: 100px; background-color: #9775fa; color: black; line-height: 100px; text-align: center; } relative relative : 상대 위치 자기 자신의 static 위치를 기준으로 이동 레..

CSS Display display : block 줄 바꿈이 일어나는 요소 화면 크기 전체의 가로 폭을 차지한다. 블록 레벨 요소 안에 인라인 레벨 요소가 들어갈 수 있다. * 대표적인 블록 레벨 요소 https://developer.mozilla.org/ko/docs/Web/HTML/Block-level_elements 블록 레벨 요소 - HTML: Hypertext Markup Language | MDN HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다. 이 글에서 developer.mozilla.org display : inline 줄 바..

CSS Box model 모든 HTML 요소는 box 형태로 되어있다. 하나의 박스는 네 부분의 영역으로 이루어져 있다. margin border padding content Margin 테두리 바깥의 외부 여백 배경색을 지정할 수 없다. .margin{ margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; } .margin-1{ margin:10px; /* 상하좌우 모두 10px */ } .margin-2{ margin:10px20px; /* 상하 / 좌우 */ } .margin-3{ margin:10px20px30px; /* 상 / 좌우 / 하 */ } .margin-4{ margin:10px20px30px40px;..

CSS 상속 CSS는 상속을 통해 부모 요소의 속성을 자식에게 상속한다. 속성(프로퍼티) 중에는 상속이 되는 것과 되지 않는 것들이 있다. 상속 되는 것 예시 Text 관련요소(font, color, text-align), opacity, visibility 등 상속 되지 않는 것 예시 Box model 관련요소(width, height, margin, padding, border, box-sizing, display), position 관련요소(position, top/right/bottom/left, z-index) 등 * 참고 https://developer.mozilla.org/ko/docs/Web/CSS/inheritance 상속 - CSS: Cascading Style Sheets | MDN ..