zejeworld

반응형

height를 딱히 0으로 지정하지 않았는데 0으로 잡힐 때는 하위요소가 float 되었을 때 발생한다.

<ul>
	<li></li>
    <li></li>
    <li></li>
</ul>
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 배울 때는 세 번째 방법으로 배운 기억이 있다. 마지막 방법같은 경우에는 after 요소로 매번 사용하는 것 보다 따로 클래스를 만들어 적용하는게 편하기도 함.

반응형
반응형

포트폴리오를 만들다가 연락처를 적어야하는 상황이 왔다.
모든 정보를 다 까는건 불편해서 이메일만 공개를 하려고 했는데, 왜인지 form 태그로 정말 어떤 양식을 만들어서 올리는게 낫지 않을까 싶어 열심히 디자인해서 나에게 간단한 메시지를 보낼 수 있는 메일폼을 작성하였다.

<form>
<span class="sender">보내는 사람 <input type="email" placeholder="이메일 주소" required></span><br>
<span class="message">내용 <input type="textarea" required></span>
<button type="submit">전송</button>
</form>

대략 이런 간단한 디자인이었는데 문제는 서버 없이도 내 포트폴리오 사이트에 방문한 사람이 나에게 메일을 보낼 수 있어야 한다는 것이었다.

구글에 html 메일 등으로 검색해서 찾아봤는데 다행히 정적 html로 메일 보내기 등의 제목으로 html에서도 충분히 서버 없이 메일을 보낼 수 있는 코드들이 나와 있었다.

Sample: https://docs.google.com/spreadsheets/d/1Bn4m6iAXch1zzhNvo6CoQWqOAgwwkOWJKC-phHx2Q/copy

Google 스프레드시트 - 스프레드시트를 작성하고 수정할 수 있으며 무료입니다.

accounts.google.com
구글 스프레드시트를 이용해서 html 상에서 메일을 보낼 수 있게 하는 거였는데, 블로그들 참고하면서 따라해보면 쉽게 전송할 수 있다.

그런데 나는 좀 원하는 방향과 다르게 출력되는 디자인때문에 골머리를 썩었다.
작동은 잘 되는데 이상하게 내용과 보내는사람을 다 채웠음에도 불구하고 정작 내가 시험삼아 보내본 메일을 보면 다 빈칸으로 떴다.

php고 뭐고 잘 알지 못해서 구글을 수없이 뒤져봤지만 결국 해결책을 못찾던 찰나에
전송버튼을 누르고 나면 결과값으로


{"result":"success","data":"{}"}


이렇게 나온다는 걸 깨닫고 뭔가...데이터라고 하는 거가 내 쪽에서 제대로 입력이 안 되었음을 알 수 있었다.


<form>
<span class="sender">보내는 사람 <input type="email" placeholder="이메일 주소" name="email" id="email"required></span><br>
<span class="message">내용 <input type="textarea" name="message" id="message" required></span>
<button type="submit">전송</button>
</form>
그래서 무식하게 id도 넣고 네임도 넣고 다 넣어보니


{"result":"success","data":"{\"message\":[\"ㅇㄴㄹ\"],\"email\":[\"dsf@sdf\"]}"}


이렇게 데이터 값이 입력되는 것을 알 수 있었다!
((사실 아직도 이유를 잘 모름))

어찌됐든 메일은 잘 가지니까...... 꺄륵

중간에 구글스프레드시트 스크립트에서 설정할거 다 하고 저장하고 웹으로 배포할때 최신버전 선택하라고 했는데 내쪽에서는 알려주는거랑 같은 옵션이 안보여서 그냥 기본값으로 설정했는데도 아주 잘됐당.


++) 그냥 메일 주소를 적고 a태그로 감싼 경우에
<a href="mailto:메일주소"></a>
mailto를 쓰면 바로 기본 메일 앱이 열리면서 내 메일주소로 메일을 보낼 수 있는 환경이 만들어진다.
문제는 윈도우에서 이 a태그를 눌렀을 때 막 아웃룩 켜지고 난리도 아니라는 점...
불편하지만 나는 이 부분은 잘 모르기에.. 아는 체하고 큰 코 다치는 것보다 그냥 최선을 다 해서 구현을 했다는 것만으로 만족하려 한다..



#html메일 #구글스프레드시트html #정적html메일

반응형
반응형

vs code를 많이들 사용하기에 나도 처음에는 vs code로 작업을 하다가..
웹 퍼블리싱 특징상 마진이나 패딩의 영역을 정확하게 어느정도로 감을 잡고 해야할지 난감할 때가 있어 vs code가 마냥 모든 편의성을 제공하진 않는구나 싶었다.

그러다가 문득 학원 컴퓨터에 기본으로 설치가 되어있는 Brackets를 알게 되고 나서 신세계가 펼쳐졌다.

결론부터 말하자면 나는 notepad -> vs code -> Brackets -> vs code로 현재는 vs code를 이용하고 있다.
하지만 웹 퍼블리싱을 주로 하는 사람이라면 Brackets의 존재를 하루라도 빨리 알아야 한다!!

현재는 리액트를 공부중이고, 리액트 네이티브로 앱을 만들고자 하루에 설치만 수십번을 하고 빌드하고 난리부르스를 추는데, 터미널과 익숙하지 않은 초보자이기때문에 브라켓으로 리액트를 공부하기엔 확실히 무리가 있었다.

::::: 나는 웹 퍼블리싱을 많이 한다 -> Brackets

웹 퍼블리싱을 할 때 왜 Brackets 사용을 권하냐면.. 바로 여백 표시가 되기 때문이다. (+ live server 따로 설치할 필요 없이 바로 이용 가능)

vs code에서 대략 여백을 줄 때 항상 margin:20px 기본으로 치고 들어가서 눈으로 확인 후 세부 사항을 조정하곤 했다.
아마 많은 퍼블리셔들이 도무지 감이 안올 때 본인마다 기계처럼 쓰는 구문들이 있을 것이다. (나는 보통 20px로 시작 ㅋㅋ)
하지만 20에서 22px로 늘렸을 때 2px이 늘어났는지 안늘어났는지 내 눈구녕으로는 확인이 잘 안된다.

하지만 Brackets에서는 2px도 바로바로 적용될 때마다 그림자처럼 표시가 되기 때문에 너무 편하다. (이거 경험하는 순간 다른 에디터 못 씀)

그리고 Brackets는 빠른 편집? 간편 편집이었나 하튼 바로 그 태그에 적용된 css를 수정할 수 있어 디자인을 할 때 매우 용이하다고 하는데.......나는 써본 적은 없다..


::::: 나는 디자인보단 개발이다 -> vs Code

vs code는 많이들 사용하기 때문에 뭐라 내가 더 코멘트를 다는 것은 무리.
수많은 확장 프로그램과 사용자의 편의를 위한 것들이 잘 구축되어 있기 때문에 어떤 사람이 사용하더라도 불편함 없이 금방 적응할 에디터라고 생각한다.

Brackets의 저 여백 바로 표시해주는 기능만 있었으면 vs code에 정착할텐데..

개발을 그만 두고 다시 디자인 쪽으로 간다면 나는 다시 Brackets을 사용할 생각이다.

#brackets #CSS #editor #HTML #html editor #vs code #VSCode #vscode vs brackets #에디터 비교

반응형
반응형

내가 살다살다 포트폴리오를 만들어야 하는 날이 올줄은 꿈에도 몰랐다. 
대략 6개월 간의 프론트엔드 수업과정이 거의 끝나가고, 학원에서도 당연하게 포트폴리오 제출을 서두르고 있다.

 

사실 내가 들은 과정은 웹 퍼블리셔? 웹디자이너인데 약간의 코딩을 가미한 정도라 현타가 가끔 오기도 했고 지금도 포트폴리오를 어거지로 만들고 있지만서도 리액트나 추가적으로 공부를 더 해야겠다는 생각이 아주 많이 든다. 

 

와중에 html이나 css 같은 기초 웹 개발에 관심있는 분들을 위해 내가 자주 사용하고 또 자주 도움을 받았던 사이트를 정리하려고 한다. 

 

1. Fontawesome fontawesome.com/icons?d=gallery

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

아이콘을 폰트로 이용할 수 있는 곳. 아이콘을 이미지로 이용해도 되지만 메뉴 글자옆에 작게 넣고 싶을 때 이용하면 좋다. 사용방법은 가입 후에 메일로 전달되는 링크를 html 파일에 연결한 다음, icons메뉴에서 arrow(화살표) 혹은 sns 등 원하는 키워드를 입력한 뒤 i태그를 복사해 오면 된다. 생각보다 나는 굉장히 많이 사용하고 있으며 방문  빈도수도 꽤 높은 편이다. 

2. iconfinder www.iconfinder.com/

 

5,125,000+ free and premium vector icons in SVG, PNG, CSH and AI format.

Iconfinder is the leading search engine and market place for vector icons in SVG, PNG, CSH and AI format.

www.iconfinder.com

아이콘을 이미지로 사용해야할 때 무료도 아이콘을 다운받을 수 있는 곳으로 진짜 내가 자주 이용하는 곳이다. 돈을 주고 유료버전 이용도 할수 있으나 가난한 취준생이라 무료에도 만족하며 사용하고 있다. 아이콘 검색 후 내가 원하는 색이나 조금 다른 모양으로 바꾸고 싶을 때는 open in Editor 열어서 원하는 방향으로 수정 후 다운받으면 된다. 

 

3. Css Gradient cssgradient.io/

 

CSS Gradient — Generator, Maker, and Background

As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

cssgradient.io

배경색으로 그라데이션 넣고 싶을 때 너무 편하게 만들어줘서 좋은 곳이다. 원하는 색상과 그라데이션 방향 및 모양을 고른뒤 하단에 자동으로 만들어지는 background 어쩌구 그거를 복사해서 CSs에 넣으면 끝이다. 이렇게 간편할 수가 있다니.. 

 

4. pixabay pixabay.com/ko/

사실 다른 사이트 이용했었는데 그래도 pixabay에서 원하는 이미지를 더 많이 찾아볼 수있어 가끔 이용한다. 저작권 걱정없이 사용할 수 있어 좋다. 

 

5.unsplash unsplash.com/s/photos/splash

 

20+ Splash Pictures [HQ] | Download Free Images on Unsplash

Download the perfect splash pictures. Find over 100+ of the best free splash images. Free for commercial use ✓ No attribution required ✓ Copyright-free ✓

unsplash.com

pixabay와 비슷한 곳. 

 

5. color zilla chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ko

 

ColorZilla

Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies

chrome.google.com

이건 사이트는 아니고 확장프로그램인데 다른 사이트에서 괜찮은 색상을 발견했거나, 그것과 똑같은 색상이 필요할 때 크롬에 추가해놓고 필요시 클릭해서 색상을 따오기 매우 편리한 프로그램이다.  

html을 처음 시작했거나 구조파악 연습을 위해 Clone 사이트를 많이 만드는 사람이라면 매우 유용하게 사용할 수 있을 것이다. 

 

 

정리하면 되게 많을 줄 알았는데 막상 적으려니 기억이 안난다... 

그럼 오늘도 고통받고 있을 포트폴리오 제작자들 화이팅!

반응형
반응형

html과 css를 배운지도 벌써 두 달이 지났다.

그동안 여러가지 편집기를 써봤는데, 사용하기 편했던 편집기 위주로 남겨보려고 한다.

편집기의 장점

1. 태그 자동닫힘

이게 생각보다 매우 편하다.

메모장에서 적다보면 태그 안닫아서 레이아웃 깨지는 경우가 있다거나 속성이 안먹는 경우가 종종 발생한다.

특히 코드가 길어지고 복잡해질수록 닫는걸 가끔 까먹음..

근데 알아서 자동으로 닫아주니 훨씬 편하다.

2. 태그 색상구분

흰 배경에 검은 글씨만 나열되는 메모장과는 달리, 편집기에서는 태그나 속성마다 색상지정이 가능하다.

사용자의 편의에 따라 원하는 색상으로도 지정이 가능.

특히 css에서는 워낙 많은 선택자가 등장하기 때문에 색상이 구분될수록 훨씬 업무가 수월해진다.

3. 줄 복사

비슷한 선택자가 여러개 나오는 경우, ctrl+c/v하면 되긴 하지만 사실 선택자 이름이 길면 그거 드래그 하는 것도 일이다. 나처럼 귀차니즘이 심한 사람에게는 단축키 하나로 윗 줄을 그대로 복사붙여넣기 할 수 있는 기능이 있다. 실제로 나는 이 기능을 매우 편리하게 사용하고 있음..

4. emmet 기능

메모장에도 이게 되나? 잘은 모르겠지만 우선 emmet을 설치하면 태그를 일일이 치지 않아도 태그안에 태그를 여러번 넣을 수 있다. editplus에서는 안써봤지만 되는 걸 확인했고, notepad++에서는 단축키를 여러번 눌러야 먹히는 단점이 있긴했지만(내가 잘못 설치한 거일수도 있음..) 너모너모 편함.

지금 사용하는 visual studio code에서는 단축키(탭키) 한번 눌러도 아주 잘 먹힘.

이렇게 사용한다.

5. 창분리로 메인과 스타일시트를 분리해서 바로바로 스타일 적용 가능

뭐 메모장으로도 못할 건 없는데 메모장은 창이 여러개 뜨니까 그게 불편해서 싫은거고 편집기를 이용하면 하나의 편집기 안에 창만 분리해서 볼 수 있어 훨씬 편함.


이제 편집기로 돌아가보자.

메모장(핵불편)

메모장은 html을 처음 접할 때 많이 쓰는 것 같다. 윈도우에서 기본적으로 제공하고 있기 때문이고, 베이직하기 때문이다.

정말 긴급한 상황이 아니면 메모장은 되도록 안쓰는게 정신건강에 좋다.

Notepad++

남자친구의 추천으로 알게된 편집기였다. 노트패드를 알게 되었을 때 학원에서는 editplus를 추천해줬었는데 둘 다 써본 결과, 나에게는 notepad++가 훨씬 편했다.

우선 notepad++는 무료로 이용이 가능하고, emmet기능도 editplus와 동일하게 사용할 수 있기 때문에 가격적인 면에서는 훨씬 이득이라는 생각이 들었다. 근데 emmet 설치 방법이 좀 까다롭다고 해야하나? 어려워서 버벅대다가 겨우 깔았는데, 생각보다 단축키가 노트패드 안에서 잘 먹지를 않아서 여러번 눌러야 쓸 수 있었다.

단점은 맥버전이 없음!!

**용이하다고 생각했던 부분**

- 줄 복사는 복사하고자 하는 행의 끝에 커서를 갖다놓고 ctrl+d로 이용할 수 있다.

- 원하는 줄 앞에 커서를 두고 alt키를 누른 다음 위나 아래로 드래그하면 행을 다중으로 선택 가능

- ctrl + y 되살리기(ctrl + z의 반대)

- 원하는 줄 대충 드래그 후 탭 누르면 한번에 들여쓰기 가능 > 정렬이 편해서 깔끔하게 작성 가능함

다운로드 https://notepad-plus-plus.org/downloads/

 

Editplus

우선 에디트플러스는 유료로 알고 있다.

예전에는 무료로 제공했다고 하는데, 현재는 한 달만 무료 사용 가능하고, 30일이 지나면 유료로 전환되는 듯하다. 물론 어둠의 경로를 이용하면 다르겠지만..

이 편집기는 학원에서 선생님이랑 함께 쓰느라고 설정도 다 같이 했는데, 나는 노트패드가 더 편해서 잘 안썼음. 근데 쌤은 여전히 이거로 emmet 플러그인도 잘 사용하신다. (emmet 플러그인 별도 설치해야 함)

노트패드보다 기능이 많은 것인지 뭔지 모르겠지만 인터페이스가 굉장히 불편했던 걸로 기억.

뭔가 되게 복작복작한 느낌이었다. 단순무식한 나는 알록달록하고 알아보기 힘든 화면에서 적응을 못했음 ㅠ

**용이하다고 생각했던 부분**

- html이나 css 기본문서 불러올 때 원하는 형식대로 짜놓고 불러올 수 있음.(노트패드에도 있지 않을까?)

- 줄 복사 단축키는 ctrl + j

- html편집할 때 필요한 색상표나 글씨체, 글씨크기 등 도구모음 상자가 편해보였다. 노트패드에선 찾다찾다 못찾았어염..

<출처: https://www.editplus.com/screen.html>

다운로드 https://www.editplus.com/download.html

Visual Studio Code

윈도우에서 맥으로 옮겨오면서 노트패드말고 다른 걸 써볼까 해서 결국 나의 종착지가 된 visual studio code이다. 편집기 내부에서 바로바로 작성한 코드를 프리뷰할 수 있다는 게 매우 편리하게 다가왔다.

그리고 윈도우나 맥 가리지 않고 다양한 os에서 사용이 가능해서 매력적이다.

지정하기 나름이지만 기본 emmet은 tab키로 쓸 수 있는 것 같음, 그리고 노트패드와 달리 바로바로 입력이 된다. 별도의 플러그인 설치 없이 바로 emmet 기능을 쓸 수 있음.

**용이하다고 생각했던 부분**

- 창 분할 후 굳이 크롬으로 html 파일을 열지 않아도 프리뷰가 가능(다른 편집기도 가능할 수 있는데 안해봤어여..)

- emmet 플러그인 설치할 필요 없고 간단하게 이용 가능

- 오타나거나 태그가 이상하면 빨간색으로 표시해준다.

더 있었는데 기억이 안나서 우선은 여기까지만..

다운로드 https://code.visualstudio.com/

 

나보다 더 경력자들도 있을테고, 오랜시간 코딩하셨던 분들에 비하면 나는 완전 아가수준이지만 혹시나 고민하시는 분들이 계시다면 이 포스팅을 보고 도움이 되었으면 좋겠다.

반응형