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 요소로 매번 사용하는 것 보다 따로 클래스를 만들어 적용하는게 편하기도 함.

반응형
반응형

See the Pen mdObqGx by hyesse (@hyesse) on CodePen.

 

::setInterval()

setInverval(함수,시간)

슬라이드 만들 때 많이 사용했던 setInterval. setInterval함수로 가위바위보 사진을 0.1초마다 계속 돌아가며 보여지게끔 코딩한다. setTimeout()과 차이점은 몇 초 후에 실행할 것이냐, 몇 초마다 반복할 것이냐의 차이이다.

 

setInverval()은 함수를 정해진 시간마다 반복하는 데에 반하여 setTimeout()은 함수를 몇 초가 지난 뒤에 실행할 것인지를 정의한다.

function 인터벌메이커(){
    인터벌=setInterval(function(){
        if(이미지좌표===가위바위보.바위){
            이미지좌표=가위바위보.가위;
        } else if(이미지좌표===가위바위보.가위){
            이미지좌표=가위바위보.보;
        } else{
            이미지좌표=가위바위보.바위;
        }
    
        document.querySelector('#computer').style.background='url("http://en.pimg.jp/023/182/267/1/23182267.jpg") '+이미지좌표+' 0';
    
},100); //1초마다 사진이 정해놓은 좌표값에 맞게 바뀌어 보여진다.


setTimeout(function(){
	인터벌메이커();
},1000); //1초 뒤에 인터벌메이커()함수를 실행함

 

 

::Object.entries()

객체를 배열로 만들 때 사용함.

설명해주실 때 딕셔너리를 배열로 만든다 라고 하셨는데 나는 딕셔너리가 뭔지 모르므로 걍 객체를 배열로 만들 때라고 외움..ㅎ...

var 가위바위보={ //딕셔너리 자료구조
    가위:'-142px',
    바위:'0',
    보:'-284px'
  //key:value값
};

function 컴퓨터의선택(이미지좌표){
    return Object.entries(가위바위보).find(function(v){
        return v[1]===이미지좌표; //v[1]의 위치:좌표값
    })[0];
}

객체를 만들고 안에 있는 value값이 필요해서 객체를 배열로 만든 뒤 v[1], 즉 value 값을 찾는다.

 

::1차원 배열과 2차원 배열에서 사용하는 indexOf / find / findIndex

단순 배열일 때 1차원 배열이라고 하고 이때는 indexOf를 사용해 위치값을 찾아낼 수 있음.

 

그런데 배열 안에 배열이 들어가있는 2차원 배열의 경우에는 find를 이용해서 위치값을 찾아낼 수 있고, findIndex는 위치값의 순번?을 알아낼 수 있다고 한다.

 

jQuery 쓸 때는 find를 html 태그 안에 있는 어떤 요소를 찾을 때(자식요소) 사용했던 기억이 난다.

$('div').find('p');  //div 안에 자식으로 있는 p

 

::querySelector/querySelectorAll

querySelector는 ('#id이름') 같이 css 작성하듯 사용할 수 있는데, 비슷한 태그들을 다 불러오고 싶을 때는 Id로 하면 안되고 class로 해줘야 한다.

document.querySelectorAll('.btn').forEach(function(btn){
    btn.addEventListener('click',function(){
    
    ...

나는 버튼을 세 개 만든 뒤 가위,바위,보를 각각 버튼에 넣어줬기 때문에 버튼들을 다 불러오려면 class로 btn을 명명한 뒤에 자바스크립트 코드에서는 querySelectorAll('.btn')으로 한번에 불러올 수 있었다.

 

그리고 querySelectorAll은 forEach를 사용해서 반복문을 돌릴 수 있음.

 

::[배열].includes()

if함수로 이겼을 때, 졌을 때, 비겼을 때 메시지를 띄워야 하는데 이 때 if문에 들어가는 구절이 너무 길었다.

if(점수차===0){
            console.log('비김');
            var 결과=document.createElement('h2');
            document.body.append(결과);
            결과.textContent="비김";
            
        }else if([-1,2].includes(점수차)){
            console.log('이김');
            var 결과=document.createElement('h2');
            document.body.append(결과);
            결과.textContent="이김";
        }else{
            console.log('짐');
            var 결과=document.createElement('h2');
            document.body.append(결과);
            결과.textContent="짐";
        }


//점수표[나의선택]-점수표[컴퓨터의선택(이미지좌표)]===-1 || 점수표[나의선택]-점수표[컴퓨터의선택(이미지좌표)]===2
//->배열.includes로 줄일 수 있다.

점수표[나의선택]-점수표[컴퓨터의선택(이미지좌표)]===-1 || 점수표[나의선택]-점수표[컴퓨터의선택(이미지좌표)]===2 //비효율적

이럴 때 같은 부분은 제외하고 다른 부분을 배열로 만든 뒤 뒤에 .includes(중복된 부분)을 넣어주면 된다.

[-1, 2].(점수표[나의선택]-점수표[컴퓨터의선택(이미지좌표)])  //이렇게 단순화 할 수 있다.

반응형
반응형

See the Pen 틱택토 by hyesse (@hyesse) on CodePen.

 

::테이블 짜기

<table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
</table>

가로 세 줄 안에 칸 세 개가 들어있는 테이블을 짰다.

이렇게 짜면 간편하지만 자바스크립트 공부를 위해서 직접 자바스크립트에서 html을 생성해보았다.

var 바디=document.body;
var 테이블=document.createElement('table');
var 줄들=[];
var 칸들=[];


for(var i=1;i<=3;i++){                         // 줄 생성을 위한 for문
    var 줄=document.createElement('tr');        // 줄이라는 변수에 tr이 들어가게 설정, 3번 반복(3줄)
    줄들.push(줄);				// 줄들이라는 배열에 세 줄을 넣음
    칸들.push([]);				// 마찬가지로 칸들이라는 배열에 배열 생성
    for(var j=1;j<=3;j++){			// 칸 생성을 위한 for문
        var 칸=document.createElement('td');    // 칸이라는 변수에 td가 들어가게 설정, 3번 반복(3칸)
        칸.addEventListener('click', 비동기콜백);	 // 칸을 클릭했을 때 발생할 함수
        칸들[i-1].push(칸);
        줄.appendChild(칸);
    }
    테이블.appendChild(줄);
}

바디.append(테이블);

 

 

 

::target

클릭한 칸의 위치를 알기 위해 target을 배웠음. target은 클릭한 그 부분을 알게 해줌.

e.target은 칸을, e.target.parentNode는 칸의 상위요소인 줄의 위치를 알게 해준다.

이때, 좌표값으로 표현하기 위하여 indexOf를 사용하였다.

 

 

::Array.indexOf

array.indexOf(value, start)

value에는 검색할 값을, start에는 시작할 위치를 넣는다.

 

var 몇줄=줄들.indexOf(e.target.parentNode);
var 몇칸=칸들[몇줄].indexOf(e.target);
console.log(몇줄,몇칸);

클릭한 칸의 좌표값이 필요하기 때문에 우선 줄의 인덱스 값을 찾고, 그 다음 칸들의 인덱스 값을 찾는다.

콘솔 돌려보면 [1,0] [2,2] 같이 표시되는 것을 확인할 수 있다.

 

 

::addEventListener('click', 함수명)

addEventListener를 사용할 때 함수를 바깥에서 정의했다면 안에 소괄호를 적지 않는다.

함수명() 이라고 넣으니까 에러났음..

반응형
반응형

티스토리에서 기본으로 제공하는 블로그 스킨이 많이 있지만 뭔가 남들과 똑같기도 하고 지루해보여서 손대기로 결정했다. html을 잘 알면 수정이 어렵지 않지만 혹시나 html만 보면 눈앞이 까마득해져서 답답하신 분들이 계실까 해 이렇게 포스팅으로 남겨본다.

 

::html의 구성요소를 대강 살펴보자면..

html은 크게 머리 몸통부분으로 구분을 하는데 이것을 각각 head / body라고 부른다.

하지만 우리가 블로그를 꾸밀 때 알아야하는 부분은 바로 body부분이다. head에서는 행정적인 부분을 담당하기 때문에 우리는 body안에 자리잡고 있는 애들만 건드려주면 된다. 

 

body 안에서도 크게 세 부분으로 나눌 수가 있다.

body도 몸통이지만 이 안을 머리 몸 발로 나눈다고 했을 때 우리는 크게 header / section혹은 article 혹은 div / footer로 나눈다고 볼 수 있다. header는 말그대로 머리부분인데 우리가 웹사이트를 방문했을 때 가장 최상단에 보이는 눈에 쏙 들어오는 그 대문 부분이다. 

사이트에서 가장 윗 부분에 존재하기도 하고 가장 시선을 끄는 중요한 부분이기 때문에 header라는 태그를 중점적으로 뜯어보고, 이 부분을 고쳐나가면 된다. 

몸통부분으로는 section / article / div로 대충 구분해봤는데 사실 이 몸을 구성하는 부분은 어떤 태그를 쓰더라도 상관이 없기때문에 그렇다. 그냥 몸뚱아리만 구성하고 있으면 된다. 어차피 태그만 가지고 이 코드를 작성한 사람이 어떤 의도로 이 태그를 썼는지 다 파악하기 어렵기 때문에, 특별히 눈에 띄는(header/footer같은) 태그는 중요하지만 그 외의 태그는 그닥 중요하지 않다. 

그래도 대략적으로 태그를 보면 어떤 성격을 가지고 있는지 알 수 있기 때문에 알아두면 좋은 것 같다. 

 

body를 세 부분인 header / div / footer 로 나눈다고 가정했을 때, div는 header/footer 태그 안에서 사용하지 못할까?

그렇지 않다. header / footer를 나누고 가운데 몸뚱아리를 차지해야하는 부분에 마땅히 특정된 태그가 없기때문에 저렇게 사용한 것이지 header와 footer 안에서도 div는 무한대로 사용할 수 있다. (그래서 html을 작성하다보면 div범벅이 됨)

 

 

::그래서 수정은 어떻게 하나염?

나는 우선 가장 괜찮아보이는 기본 스킨을 저장하고 그 안에서 뜯어고치기 시작했다.

 

바로 이 에그라는 스킨을 골랐는데 노란색이 맘에 들지 않았다.

따라서 티스토리 관리페이지로 들어간 뒤 스킨편집을 누르고 html편집으로 들어가준다.

/* ***** Header ***** */ /*변경전*/

.header h1 { text-align:center}
.header h1 a { padding:0; margin:0; color: #000; font-weight:bold;  font-size: 28px ; line-height:1.0;}
.header .blogMenu {text-align:center;}
.header .blogMenu a { color:#fafafa;text-transform:uppercase;}
.header .blogMenu li {
  list-style:none;
  float:left;
  padding:0 10px;	
}

.header .menu-inner {display:inline-block}
.header .blogMenu li a:hover {
  text-decoration:none;
}

html탭 말고 css탭으로 들어가 ctrl+f버튼을 눌러 header를 검색해준 뒤에 내가 원하는 부분을 고쳤다.

 

추가한부분:

.header h1 a { //헤더의 큰 제목부분이다.

      color: #fafafa;  //원래 #000을 수정함

      font-size: 38px ; //원래 28px, 너무 작아서 수정함

      font-family: 'Lobster', cursive;font-style:italic; //구글폰트 끌어옴

}

 

.header .blogMenu { //헤더의 큰 제목 아래에 있는 소메뉴들 덩어리

      margin-top:30px;  //원래 없었는데 헤더의 큰 제목과 여백을 주기위해 소메뉴덩어리 위에 30px의 여백을 주었음

}

 

.header .blogMenu a { //헤더의 큰 제목 아래에 있는 소메뉴들

      font-size:13px;  //원래 없었는데 소제목들이 너무 커 비율이 안맞아 폰트 사이즈를 줄임

}

/* ***** Header ***** */ /*변경 후*/

.header h1 { text-align:center}
.header h1 a { padding:0; margin:0; color: #fafafa; font-weight:bold;  font-size: 38px ; line-height:1.0; font-family: 'Lobster', cursive;font-style:italic;}
.header .blogMenu {text-align:center;margin-top:30px}
.header .blogMenu a { color:#fafafa;text-transform:uppercase;font-size:13px;}
.header .blogMenu li {
  list-style:none;
  float:left;
  padding:0 10px;	
}

.header .menu-inner {display:inline-block}
.header .blogMenu li a:hover {
  text-decoration:none;
}

 

이렇게 적용하게 되면 화면은 이렇게 바뀐다.

변경 전

 

변경 후

 

 

::구글웹폰트 끌어오는 방법

 

fonts.google.com/?preview.text=zejeworld&preview.text_type=custom&sidebar.open=true&selection.family=Antic+Slab

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

구글폰트에 접속한 뒤 자신이 맘에드는 폰트를 선택해 들어간다.

우측에 Select this style을 클릭하고

 

Use on the web 부분에서 @import를 눌러준다. 

회색 박스 안에 <style> </style>사이에 있는 @import url~부분을 긁어다가 티스토리 스킨편집에서 css 탭의 맨 상단에 붙여넣는다.

 

그리고 구글폰트 사이트에서 CSS rulesto specity families부분을 복사해다 원하는 css 부분에 넣기만 하면 폰트가 적용된다. : )

 

 

끝!

 

반응형
반응형

애드센스 광고가 승인나고 나서 신난다고 여기저기 광고를 덕지덕지 붙이기 시작했다. 아니나 다를까 수익은 진짜 코딱지만큼이지만 엄청 큰 수익을 바라고 시작한건 아니기때문에 그럭저럭 만족하고 있다.

 

:: 구글 애드센스와 네이버 애드포스트의 차이점

네이버 애드포스트와는 다르게 애드센스는 사용자가 이것저것 조정할 수 있는 부분이 신기했다. 차단할 광고도 직접 설정할 수 있고, 광고의 크기나 위치 등도 직접 만질 수 있다. 

사용자의 입장에서 스스로가 큰 수익을 낼 수 있다고 판단되면 이것저것 수정해서 수익을 올릴 수 있기 떄문에 뭔가 누이좋고 매부좋고라는 말이 딱 생각날 정도로 본인들의 수익을 위해서 우리를 잘 구스르는 느낌이라고 해야하나..ㅋㅋ 

 

:: 판매자 정보를 Google sellers.json 파일에 게시하시기 바랍니다. 라는 알림을 받았을 때

코딱지만한 수익 확인해보겠다고 매일같이 애드센스를 들어갔는데, 갑자기 상단에 이런 알림이 뜨기 시작했다.

뭐지뭐지? 

json파일은 공부할 때만 만져보고 써본적이 없는데 갑자기 왜 저걸 하라는거지? 오만가지 생각이 들었는데 옆에 있는 [작업]버튼을 눌러 들어가보니 내 계정 정보가 써있고 아래에 이런 정보들이 뜬다.

 

 

처음에는 공개상태가 내부용으로 되어있고 도메인칸이 빈 칸으로 뜨는데, 여기를 공개로 바꾸고 도메인에 주소를 써주면 된다.

 

여기서 도메인이란

나는 처음에 내 블로그 주소를 다 쓰는 건줄로 알고 블로그 주소를 풀로 다 썼는데 계속해서 json파일을 수정하라는 알림이 떴다. 알아보니 진짜 도메인, 이 블로그를 운영하는 큰 도메인을 적는 게 맞는거라서 tistory.com만 입력하니 이제 경고창이 뜨지 않는다.

해결!

반응형
반응형

 

이 메일을 받기까지 9개월이라는 시간이 흘렀다......
그간 내가 걸어온 길을 살짝 정리해보자면

2020. 04 초 블로그 개설
2020. 04 초 애드센스 신청 및 거절 여러차례(콘텐츠 부족)
2020. 04 중순 애드센스 계정 추가 개설 (절대 하지 마세요)
2020. 04 말~ 2020. 08 애드센스 신청 거절(중복계정)
2020. 08 중순 애드센스 계정 삭제
2020. 12 잊고있다가 다시한번 신청 후 거절(콘텐츠 부족)
2020. 01 승인

애드포스트 통과 이후 오랜 시간을 둘러온 것 같다.
애드센스 중복 계정으로 6개월 넘게 고생하면서 진짜 계정 하나 더 만들까 하실 분들 계시다면 황금보자기에 도시락 싸들고 다니면서 뜯어 말리고 싶음 ㅠㅠ

내가 애드고시 통과하기까지 오래 걸린 이유:

1. 중복계정

2. 계정해지가 제대로 안 됨

3. 메일 제목만 보고 내용을 확인 안하고 포기

4. 블로그를 새로 파서 이사해서 새로운 주소에 신청하려고 했음

 

해결방법:

중복계정의 굴레를 무릅쓰고 추가계정 개설해서 기존 블로그
로 신청해 성공함



1. 중복계정+계정해지의 문제

중복계정을 만드는 순간 애드센스 굴레에서 벗어날 수가 없다. 나같은 경우에는 중복계정으로 애드몹과 구글 애널리틱스까지 가입하면서 더 복잡해졌는데 이런 경우에 이 중복계정을 삭제하려면 애드몹 탈퇴 + 애널리틱스 탈퇴 + 애드센스 탈퇴까지 완벽 조화가 이루어져야 한다.

중복계정이란?
같은 이름이나 집주소, 혹은 같은 핸드폰 번호로 비슷한 아이디 개설했을 때 한 사람 앞으로 하나의 애드센스 계정만 가질 수 있다고 경고가 뜨는 것 같음(확실치 않다)

근데 남자친구 계정으로 연결했을 때도 거절뜨는 거 보니 잘은 모르겠다만 중복계정 광고 아이디를 블로그에서 깨끗하게 다 지워야하는 것 같았다.

그런데 애널리틱스나 애드센스는 계정 해지한다고 바로 해지되는 것도 아닌 것 같았다.
특히 해지 후에 애드센스에 로그인 해보면 계정 활성화하기 라면서 언제든지 바로 활성화를 할 수 있는 것으로 보아 제대로 해지가 되기까지 시일이 걸릴 것으로 파악하고 한 달 정도는 로그인도 하지 않고 거들떠도 안 봄.

중복계정은 메일 제목 자체가 위반사항 수정 어쩌고로 오기 때문에 알기 쉬움.

해지도 제대로 안되는 것 같고.. 나는 결국 중복계정으로 고생했음에도 불구하고 새로운 계정을 팠다.



2. 새로운 계정 만들기


앞서 만들어 놓았던 모든 계정을 삭제한 뒤 중복계정을 피하기 위해 완전 새로운 형식의 아이디를 팠다. 이름도 주소도.. 핸드폰 인증만 내걸로 했는데 두근거렸지만 오류없이 잘 되더라. 계정 삭제하고 한 달정도 있다 시도한 것 같다.

주소도 어디 외국으로 해놓고 본인인증할때 빼고는 연락처 등록도 안해놓음.



3. 메일 제목만 보고 포기


계정을 새로 만들고 신청을 했는데 또 거절되었다는 메일을 받았다.


이런 내용이었는데 어느 블로그 글에서 보길 이런 거절 메일은 진짜 일말의 가능성도 없다고 해서 애초에 애드센스 홈페이지에 들어가서 문제점이 뭔지 확인해볼 생각도 안했다....

이 메일을 받고 나는 안될 사람인가보다 하고 잊고 지내다가 어느날 문득 그냥 애드센스 사이트에 들어가 로그인을 했는데 거절된 이유가 상세하게 써있더라.

보통 전에는 거절되는 이유를 메일에 써서 보내줬지만 저렇게 단호박 거절 메일은 처음이었고 가능성이 없는 메일이라길래 기대도 안했는데 그 이유는 바로 콘텐츠 부족!!

중복계정 이유도 아니고 콘텐츠 부족이라니!!

사실 키워놓은 블로그를 포기하고 애드센스 계정을 새로만들고 새로운 블로그에 다시 신청을 할 생각이었는데 블로그를 또 만들고 키운다는게 좀 쉬운 일이 아니었다.

그런데 기존 블로그도 희망이 있다는게 너무 기뻐서 그 길로 네이버 블로그에 광고하듯이 제목만 올리고 티스토리로 바로 갈 수 있게끔 링크를 걸어 방문자 수를 높이기 시작했다.

콘텐츠 부족이라는게 물론 글 개수나 퀄리티 등을 말하는 거겠지만 나는 방문자로 승부 봤음 (글 수정 하나도 안했고 근근히 글 하나씩만 올렸다.)


그리고 바로 어제 신청한지 5일만에 승인이 났다.
다른 사람들은 나만큼 길게 고생한 것 같지도 않던데ㅠㅠ
혹시 나처럼 포기 직전까지 간 사람들이 있다면 이 글이 희망스러운 글이 되었으면 좋겠다. : )

반응형
반응형

포트폴리오를 만들다가 연락처를 적어야하는 상황이 왔다.
모든 정보를 다 까는건 불편해서 이메일만 공개를 하려고 했는데, 왜인지 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 #에디터 비교

반응형