삼바의 성장 블로그

HTML 작업을 하다보면 태그에 margin: 0; padding: 0; 을 설정했음에도 불구하고 1 ~ 5px 의 공백이 생기는 것을 볼 수 있습니다. 우선 해결방법을 먼저 소개하고 왜 이러한 공백이 생기는지 이야기해보려 합니다. 해결방법 두 가지 해결방법이 있습니다. 저는 주로 블록 요소로 속성을 변경시키는 방법을 사용합니다. 블록 요소로 속성을 변경 간단하게 태그에 css 속성으로 display: block; 을 추가하여 해결합니다. img { display: block; } 혹은 태그에 style 속성을 사용하여 해결할 수도 있습니다. vertical-align vertical-align 의 기본 값은 baseline 인데 이 값을 top 혹은 bottom 으로 변경해줍니다. **** 발생 원인 ..

로만 HTML의 거의 모든 태그를 사용하던 도중, 이는 문서자체가 구조적이지 못하게하고, HTML5에서 추가된 Sementic(의미론적인)특징을 사용하지 못하는 것이라는 유튜브를 보고 이를 정리한 글입니다. 사용해야 하는 이유의미부여의미요소(Semantic Element)는 HTML로 만든 문서에 추가적으로 의미를 부여해줍니다. 무의미한 요소(Non-Semantic Element)로 문서를 작성할 경우, HTML문서를 접하는 사람이 어떤 데이터를 봐야할지, 어떤 데이터를 제공하는지 파악하기가 어렵습니다.사실 만능 를 사용하다가 Semantic 마크업들을 찾는 행위자체가 개발하는데 시간을 더 잡아먹을 것은 사실입니다. 하지만, Semantic 마크업을 사용하여 의미를 부여해준다면, 유지보수하거나 소프트웨어..

async속성이 있는 스크립트는 비동기적으로 실행됩니다. 기존에 defer속성이 있는 는 순서대로 실행합니다. (hello1.js → hello2.js) async와 마찬가지로 HTML 파싱을 중지시키지는 않습니다. 하지만 async와 다르게 파싱이 종료된 후, 실행됩니다. caniuse의 script-defer 에 따르면 대부분의 브라우저에서 사용이 가능합니다.

[HTTP] GET과 POST의 차이 HTTP Hyper Text Transfer Protocol으로 주로 HTML 문서를 주고받는데 사용된다. HTTP는 클라이언트와 서버사이에 이루어지는 Request와 Response 프로토콜이다. 사용자가 브라우저를 통해 Request를 하면 서버는 이 요청에 응답하여 사용자에게 정보를 전달한다. Get /test/demo_form.php?name1=value1&name2=value2 GET은 Data Request에 주로 사용됩니다. 특징 GET Request는 요청을 캐싱할 수 있습니다. GET Request는 브라우저 기록에 남아있습니다. GET Request는 북마크에 추가 가능합니다. GET Request는 중요한 데이터를 다룰때는 적합하지 않습니다. GE..

CSS Text 오버플로우 Overflow 할경우 대체할 텍스트 정하기 div.a { white-space: nowrap; width: 50px; overflow: hidden; text-overflow: clip; border: 1px solid #000000; } div.b { white-space: nowrap; width: 50px; overflow: hidden; text-overflow: ellipsis; border: 1px solid #000000; } div.c { white-space: nowrap; width: 50px; overflow: hidden; text-overflow: "----"; border: 1px solid #000000; } 한줄 혹은 여러줄을 남기고 자르는 경우 ..

CSS 7가지 단위 rem 기존 em body태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받음 Test Test Test body { font-size: 14px; } div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px } rem rem('root'em)을 사용하면 세 div의 폰트 사이즈가 같아짐 html { font-size: 14px; } div { font-size: 1.2rem; } vh와 vw CSS의 너비 값은 가장 가까운 부모 요소에 상대적인 영향을 받음 vh 요소는 높이 값의 1/100 단위 (ex. 브라우저 높이 값이 900px 일때, 1vh는 9px) ex. 전체 높이의 ..