zejeworld

height를 딱히 0으로 지정하지 않았는데 0으로 잡힐 때는 하위요소가 float 되었을 때 발생한다. ul li { float: left; } /* 혹은 float: right; */ 이렇게 하위 요소에 float을 적용하면 상위 요소는 height가 0으로 잡히는데 이 때 해결방법은 다음과 같다. /* 1 */ ul { overflow: hidden; } /* 2 */ ul { display: inline-block; } /* 3 */ ul:after { display:block; content: ''; clear: both; } 나는 첫 번째 방법이 간편해서 overflow hidden을 많이 쓰는 편이긴 한데, 처음 css 배울 때는 세 번째 방법으로 배운 기억이 있다. 마지막 방법같은 경우에는..

포트폴리오를 만들다가 연락처를 적어야하는 상황이 왔다. 모든 정보를 다 까는건 불편해서 이메일만 공개를 하려고 했는데, 왜인지 form 태그로 정말 어떤 양식을 만들어서 올리는게 낫지 않을까 싶어 열심히 디자인해서 나에게 간단한 메시지를 보낼 수 있는 메일폼을 작성하였다. 보내는 사람 내용 전송 대략 이런 간단한 디자인이었는데 문제는 서버 없이도 내 포트폴리오 사이트에 방문한 사람이 나에게 메일을 보낼 수 있어야 한다는 것이었다. 구글에 html 메일 등으로 검색해서 찾아봤는데 다행히 정적 html로 메일 보내기 등의 제목으로 html에서도 충분히 서버 없이 메일을 보낼 수 있는 코드들이 나와 있었다. Sample: https://docs.google.com/spreadsheets/d/1Bn4m6iAXc..

vs code를 많이들 사용하기에 나도 처음에는 vs code로 작업을 하다가.. 웹 퍼블리싱 특징상 마진이나 패딩의 영역을 정확하게 어느정도로 감을 잡고 해야할지 난감할 때가 있어 vs code가 마냥 모든 편의성을 제공하진 않는구나 싶었다. 그러다가 문득 학원 컴퓨터에 기본으로 설치가 되어있는 Brackets를 알게 되고 나서 신세계가 펼쳐졌다. 결론부터 말하자면 나는 notepad -> vs code -> Brackets -> vs code로 현재는 vs code를 이용하고 있다. 하지만 웹 퍼블리싱을 주로 하는 사람이라면 Brackets의 존재를 하루라도 빨리 알아야 한다!! 현재는 리액트를 공부중이고, 리액트 네이티브로 앱을 만들고자 하루에 설치만 수십번을 하고 빌드하고 난리부르스를 추는데, 터..

내가 살다살다 포트폴리오를 만들어야 하는 날이 올줄은 꿈에도 몰랐다. 대략 6개월 간의 프론트엔드 수업과정이 거의 끝나가고, 학원에서도 당연하게 포트폴리오 제출을 서두르고 있다. 사실 내가 들은 과정은 웹 퍼블리셔? 웹디자이너인데 약간의 코딩을 가미한 정도라 현타가 가끔 오기도 했고 지금도 포트폴리오를 어거지로 만들고 있지만서도 리액트나 추가적으로 공부를 더 해야겠다는 생각이 아주 많이 든다. 와중에 html이나 css 같은 기초 웹 개발에 관심있는 분들을 위해 내가 자주 사용하고 또 자주 도움을 받았던 사이트를 정리하려고 한다. 1. Fontawesome fontawesome.com/icons?d=gallery Font Awesome The world’s most popular and easiest t..

html과 css를 배운지도 벌써 두 달이 지났다. 그동안 여러가지 편집기를 써봤는데, 사용하기 편했던 편집기 위주로 남겨보려고 한다. ​ ​ 편집기의 장점 1. 태그 자동닫힘 이게 생각보다 매우 편하다. 메모장에서 적다보면 태그 안닫아서 레이아웃 깨지는 경우가 있다거나 속성이 안먹는 경우가 종종 발생한다. 특히 코드가 길어지고 복잡해질수록 닫는걸 가끔 까먹음.. ​ 근데 알아서 자동으로 닫아주니 훨씬 편하다. ​ ​ 2. 태그 색상구분 흰 배경에 검은 글씨만 나열되는 메모장과는 달리, 편집기에서는 태그나 속성마다 색상지정이 가능하다. 사용자의 편의에 따라 원하는 색상으로도 지정이 가능. ​ 특히 css에서는 워낙 많은 선택자가 등장하기 때문에 색상이 구분될수록 훨씬 업무가 수월해진다. ​ ​ 3. 줄 ..