빠르게 성장하는 개발자

Footer를 만들면서 구분선을 만들어야 할 일이 생겼는데습관적으로 hr을 쓰려다가 문득 div로 만들어도 상관없는거 아니야? 라는 생각이 들었다. 나와 같은 고민을 했던 분들의 대답hr element vs 1px high div vs 1px borderI have an app which has sections, and I need a 1px line between them. It seems I have a choice: An hr element. A div with a 1px border. A div which is one pixel high, and has a background color. ...https://stackoverflow.com/questions/41315990/hr-element-vs..

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..

1. Inline? Block? display 속성은 크게 두 가지로 구분한다. inline : content만큼의 크기를 차지한다. ex) block : 너비(width)를 지정하지 않으면, 페이지 전체 만큼의 크기를 차지한다. ex) 💡 style의 display 속성을 통해서 inline block 으로 유동적으로 사용할 수 있다. 2. Box-Model tag의 부피감(크기, 여백, 위치) 등을 결정하는 요소 content- padding - border - margin 순이다 출처 : simplie learn 💡 in-line style에서는 box의 height, width는 무시된다. 3. Box-sizing box-sizing : content-box ( default ) width는 co..

1. 크기 - px : 절대적 단위(고정) - em, rem : 가변적 최근에는 rem을 사용한다고 보면 된다. why? 사용자의 환경에 따라 유동적으로 변할 수 있도록 자유도를 주기 위해서 web font size(ex. medium) -> html font에 영향 -> rem은 html의 기본 font size에 비례한다. 2. 색상 - color : "색상명", hex(16진수), rgb 3. 정렬 - text-align : left/right/center/justify 4. 서체 - font-family: arial, verdana... => 없으면 대체하는 폰트를 지정해주는 것이다. (우선순위) - monospace : 고정폭. 자연스럽지는 않아서 많은 양의 data를 다루거나 coding 할 ..