개발 요정🧚‍♀️ 용덕대게

오늘은 HTML & CSS flex 정리를 더 해보려고 합니다. flex-basis, flex-grow, flex-shrink에 대해서요. 내용은 beam camp의 강사님의 강의를 바탕으로 하고 있습니다. 더 많은 내용을 원하시면 https://www.youtube.com/@veamcamp flex-basis 초기 값을 정할 수 있는 키워드인 flex-basis부터 해보겠습니다. 하숙집에 3명이 같이 살고 있습니다. 이친구들이 살고 있는 방의 크기를 늘리고 싶다면 어떻게 해야 할까요??? width를 주는 방법과 flex-basis의 값을 주면 됩니다! 방이 넓어 졌네요. ㅎㅎ 그럼 둘(flex-basis, width)의 차이는 무엇일까요??? 차이는 축에 있습니다. flex-direction이 row..

button 동적 가상 생성자 속성 선택자 button 사용자가 클릭할수 있는 요소입니다. form 내부뿐만 아니라 버튼이 필요한 곳이라면 어디에든 배치할 수 있습니다. button /* disabled: 누르거나 클릭하는 것을 막습니다. */ button 동적 가상 선택자 :active 클릭시 활성화(누르고 있는 동안) :visited 사용자가 이미 방문한 링크일 경우 해당 상태에 만족합니다 웹브라우저의 방문기록 정보를 사용합니다. a:visited { color: skyblue; } :disabled 비활성화 된 요소를 선택합니다 :hover 마우스 커서를 요소에 올려두었을 때 button:hover { background: skyblue; } :focus focus 받은 상태를 나타냅니다 .btn:..

HTML과 CSS를 통해 홈페이지를 만들다 보면 내가 원하지 않는 곳에 패딩과 마진 혹은 높이값이 들어가 있는 경험들을 많이 하게 됩니다. 이런 경험 들을 하면 보통을 그냥 지나 가거나 별 생각 없이 초기화를 해주게 되죠. 저도 별생각 없이 지나갓던 것들인데 오늘은 당연하게 생각하지 않고 정리를 한번 해보겠습니다. 당연하게도 모든 프로퍼티에 대해 정리 할 수는 없을 겁니다. 크게 initial value가 뭔지 그리고 initial value를 맞이 했을 떄 어떻게 대처하고 또 어떤 때 대처 하지 않는지에 대한 소개를 해보겠습니다. initial value가 뭘까? initial value란 말 그대로 CSS의 초기 값입니다. 뭔지 이미지를 통해서 확인해 보겠습니다. 위의 두 이미지의 차이가 보이시나요?..

웹페이지 혹은 어플리케이션 화면을 만들때 우리는 수평적 요소들에 대한 배치를 할때 고민을 합니다. float, grid, flex중에 어떤 것을 사용할지에 대한 것을 말이죠. 우리가 많이 사용하는 요소들 예를 들어 div, p, footer등은 블럭의 개념으로 표시됩니다. 이 친구들은 블럭요소로 화면의 width를 다 차지해 버립니다. 요소들을 옆에 두지 않고 밑에(?)두죠. 이런 비 사교적인 친구들을 사교적으로 만들수 있는 flex에 대한 설명을 해보겠습니다. 이미지에서 주축과 교차축 flex-direction이 보이시나요??? 이것들은 화면에 보이는 컨테이너들 즉 요소들을 어떻게 배치하느냐에 중요한 키워드 들입니다. flex-direction 컨테이너 내 아이템을 배치할 때 주축 및 방향을 지정합니다..

이렇게 생긴 box layout을 정리하려면 어떻게 해야 될까요?? 여러가지 방법이 있겠지만. float 속성과 float을 사용하여 위의 layout을 만드는 방법을 소개해 보겠습니다 😉. float의 사전적 의미는 "뜨다"입니다. div는 블럭 요소 입니다. 그렇기에 박스의 오른쪽에 텍스트는 오지 못하죠. 하지만 그걸 가능하게 해주는 것이 float요소입니다. float 요소의 정확한 정의는 "한 요소가 보통 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소에 좌 우측에 배치 되게 합니다." 입니다. https://developer.mozilla.org/ko/docs/Web/CSS/float float - CSS: Cascading Style Sheets | MDN CSS 속성(p..

주말동안 멋쟁이 사자처럼 프론트 엔드 스쿨에서 간단한 과제를 받았습니다!. 박스 꾸미기 인데요. 한번 들어가 보겠습니다. 1번째 박스 부터 시작해 보도록 하겠습니다. 2번 째 사진을 보시면 3가지의 색을 갖는 것을 볼 수 있습니다. 겉에 검은 테두리는 border를 줘서 만들 수 있을 것 같은데 중간에 회색 부분은 어떻게 할지 감이 잘 오지 않았습니다. 그래서 고민한 결과 div안에 div를 둬서 따로 border를 주는것 밖에 생각이 나지 않아 그런 식으로 구현해 보았습니다. HTML & CSS .Fbox { border: 5px solid black; background-color: #343F50; } .innerBox { box-sizing: border-box; border-top: 3px sol..

블록레벨 요소 vs 인라인 레벨 요소 Block 부모 요소의 전체 공간을 차지하여 블록을 만듭니다. 언제나 새로운 줄에서 시작. 약측으로 최대한 늘어나 가능한 모든 너비를 차지합니다. width, height 크기를 지정할 수 있고, padding, border, margin 속성을 사용할 수 있습니다. Inline 항상 블록 레벨 요소 내에 포함됩니다. 콘텐츠에 따라 할당된 공간만을 차지 합니다. width, hegiht 크기를 지정할 수 없고, padding, borer, margin 속성을 사용 할 수 있지만, 상하 margin속성은 사용할 수 없습니다!. hello world! hello world! hello world! hello world! hello world! hello world! pa..

HTML 문서 해부! 이 문서는 html Living standard 문서! 라는 의미입니다. 사실 명시 하지 않아도 문제가 되지 않는다고 합니다. HTML 문서의 최상단의 요소 입니다. DOM 구조에서 루트를 담당 하고 있습니다. lang 속성을 통해 해당 페이지의 주 언어가 무엇인지 설정할 수 있습니다. 언어코드(소문자)-국가코드(대문자). 사용자에게 보이는 영역 입니다. css란? CSS는 Cascading Style Sheets의 약자입니다. 우리가 작성한 HTML의 스타일, 레이아웃 등을 꾸미는 역할을 합니다. 작성방법 css를 사용하는 3가지 방법!!! 1) 인라인 방식 hello world! 2) 내부 스타일 h1 { background-color: red; } hello world! 3) ..