빠르게 성장하는 개발자

navbar (navigation bar)을 만들면서, 약간의 난관에 봉착했다.내가 원하는 네비게이션 바의 조건 (은근 간단하지만 구현하는데 하루종일 걸렸다.)💡1. 화면 크기가 줄어들면 hamburger icon이 나오고, menu들은 세로형으로 나온다. 2. menu를 누르면 다시 햄버거 아이콘으로 돌아간다. 3. 스크롤을 내리면 네비게이션 바가 사라진다. 4. 살짝만 스크롤을 올리면 네비게이션바가 상단에 다시 나온다.tailwind는 mobile-first 를 지향해서 min-width만 제공하고 max-width는 따로 제공하지 않는다.즉, md:w-2 같은 코드는 클래스에 바로 넣으면 돼서 편하지만, 나처럼 큰화면에서 반대로 작아질 때 media query를 default로 제공하지 않는다. m..

어제 UX/UI 특강을 들으면서 처음으로 테일윈드(Tailwind CSS, 이하 테일윈드) 에 대해서 처음 들었다. 부트스트랩의 만족도는 떨어지고, 사용자도 줄어드는 반면 테일윈드 사용자는 꾸준히 증가하고 있고 만족도도 크다는 것!! (근데 왜 싸피에서는 부트스트랩을….알려줘…? 어차피 하루 알려줬지만.. 트렌드에 맞게 소개라도 해주었으면.) Anyway, 트렌드를 알게 된 이상 가만히 있을 수 없다.테일윈드 홈페이지를 참고해서 공식문서를 보면서 빠르게 정체를(?) 파악해보기 시작했다. 1. Utility-First Fundamentals전통적으로 class를 만들고 → class를 한땀한땀 만들었다면 → 테일윈드는 인라인 스타일로 이미 정해져있는 style을 ‘적용’ 만하면 되는 것이다.⇒ 공식문서를 ..

1. background참고자료 : background - CSS: Cascading Style Sheets | MDNCSS background 단축 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정합니다.https://developer.mozilla.org/ko/docs/Web/CSS/backgrounddefaultbackground-image: none background-position : 0% 0% background-size: auto auto -> cover : 너비에 꽉 차게, contain : 이미지 full, 여백 있음 background-repeat: repeat background-origin: padding-box background-clip: bord..

1. Multi Column잘 사용하진 않을 것 같지만 미래는 모르는 거니까. 정리해두기마치 신문의 레이아웃처럼 여러개의 다단을 만들어야 할 때 사용하는 기능이다.출처 : 위키피디아종이를 아끼기 위해 꾹꾹 여백없이 눌러담은 이런 디자인을 만들기 위함… 이랄까.2. How to Use먼저 다단을 감쌀 커다란 div태그를 만든다. ⇒ 나는 container라고 class 이름을 지었다..container에 속성 넣기결과는 바로바로 타다~ 이렇게 4단으로 완성된 결과물이 나온다..container { column-count : 4; } 3. 기타 속성 꾸며보기1. column-width이름에서부터 바로 직관적으로 알 수 있듯, 하나의 column의 폭을 정해준다.최소한의 column 너비를 의미하며, 이 예시..

참고 : https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Floats1. Float는 언제 쓰는가?주로 신문 기사같은 레이아웃. 즉, 사진 옆에 사진과 겹치지 않도록 글을 배치하고 싶을 때 사용한다text는 float를 피해간다.간단한 float 예제 float Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultr..

1. 반응형 웹(Responsive web)사용자의 환경, 디바이스의 크기에 따라 디스플레이를 변화시키는 것.2. 사용방법@media screen and (min-width: 480px) { body { background-color: lightgreen; } }3. 주의할 점min-width : npx ⇒ npx 이상일 때 적용max-width: npx ⇒ npx 이하일 때 적용케스케이딩을 주의해야 한다.예를 들어 아래의 코드처럼 작성하면, 위에 적용한 lightgreen색은 무시되고, 600px 이하는 모두 배경색이 red가 된다.즉, max-width 속성을 쓰려면 큰 화면부터 작성. min-width 속성을 쓰려면 작은 화면 속성부터 작성.@media screen and (max-width: 48..

1 2 3 2️⃣ flex-directionitem이 정렬될 축을 설정하는 것default : flex-direction:row; 반면, flex-direction:column; 을 적용하게 되면 세로축을 기준으로 item이 정렬된다.flex-direction : column; 을 적용한 것과, 그냥 item을 세로로 배치한 것은 무슨 차이가 있을까?.container에 height속성을 주면 그 차이를 알 수 있다..container{ display: flex; flex-direction: column; background-color: dodgerblue; height: 500px; }flex-direction 속성에는 row, row-reverse, column, column-reverse가 있다.3..

이름부터 너무너무 헷갈리는 4가지 결합자들을 정리해보려고 한다.왜냐면 내일 시험에 무조건~ 나올 것 같아서 😄1. 자손 결합자와 자식 결합자자손결합자는 공백 (ex. div p{})자식 결합자는 > (ex. div>p{})포함 관계는 아니지만, 자손 결합자가 더 넓은 범위다. 그러니까 div 아래에 있는 p는 모조리!! 이걸 다 따라야해! 라는 의미고, 자식 결합자는 딱 div 아래에있는 p만. 그러니까 div와 p 사이에 다른 게 끼면 적용이 안된다!그렇기 때문에! 한 페이지에서 같이 쓰려면 이 친구는 아무 영향이 없습니다. 여기에는 무슨 말을 써볼까 무야호 얘는 인접 형제 결합자 입니다. 얘는 일반 형제 결합자 입니다 그래그래 결합자를 정복해보자구 그래그래 그려그려 짱구그려그려 이 친구는 자식 이 친..

1. CSS의 개념Cascading Style Sheet 의 약자라고 한다.Style Sheet는 꾸며주는 종이 (페이지) 니까 이해가 간다고 치고, Cascading 은 무슨뜻일까?cascade는 흘러내리는 (작은) 폭포라는 뜻이라고 한다. CSS의 큰 특징 중 하나는 ‘위에서부터' 적용된다는 것이다. 특징에 따라 부모의 요소가 상속되는 경우도 있다.특히 초기화 한다거나 하는 링크를 CSS의 맨 아래에 넣지 않도록 주의하자!! 왜냐면 애써 만든 스타일들을 결국 초기화 시키는 꼴이 될테니까 말이다.2. CSS의 기본 구조(출처 : poeima web)CSS를 적용하는 방법은 세가지가 있다.인라인 : 선택자의 바로 뒤에 선언하는 inline 식내부참조 : 의 태그에 선언하는 식외부참조 : css파일을 따로..

1. 웹사이트우리가 매일같이 쓰는 NAVER, GOOGLE 같은 사이트들을 통틀어 ‘웹사이트' 라고 한다. 위키백과에서는 웹사이트를 다음과 같이 정의하고 있다.웹사이트는 인터넷 프로토콜 기반의 네트워크에서 도메인 이름이나 IP 주소, 루트 경로만으로 이루어진 일반 URL을 통하여 보이는 웹 페이지 (Web Page)들의 의미 있는 묶음이다. 한 줄로 요약하자면, 링크로 연결되어 있는 웹페이지의 모음이라는 거다.그럼 웹페이지는 무엇일까? 웹상의 문서 하나하나가 바로 웹페이지 인 것이다. 웹페이지의 구성 요소는 크게 3가지로 나뉜다.HTML, CSS , JAVASCRIPT (출처: 코드메이트)위 그림이 딱 적절한 예시라고 할 수 있겠다. 웹페이지가 만약, 사람이라면html은 뼈대 (구조), javascrip..