HTML + CSS 간단 프로젝트(by 드림코딩엘리)

짭튜브

한때 내 영어 이름도 elly였기에 더 반가운 드림코딩 유튜버 엘리님!!

엘리님 목소리가 너무 좋고 발성도 짱짱맨이라 굳이 2배속 안해도 귀에 콕콕 박혀서 강의듣기가 편하다.

6일 일요일에 파이썬 장고 강의를 끝냈고,

7,8일 이틀정도는 생활코딩이랑 이수안님 유튜브를 보면서 HTML 기초수업을 들으며 개념을 익혔고,

9일 오늘은 이수안님의 기초 CSS강의를 들었다. JavaScript 스터디 들어가기전에 이제까지 배운 HTML과 CSS를 활용해서 간단하게 할만한 프로젝트가 없을까 찾아보다가 발견한 엘리님의 유튜브 클론프로젝트. 엘리님 영상보면서 만든 결과물이 바로 위의 이미지다.😁

 

엘리님이 영상에서 사용하신 모든 코드를 완벽하게 이해하진 못했지만 이 강의를 들음으로써 몇가지는 확실해졌다.

1. 내가 짠 코드들이 화면에 바로바로 구현이 되다니 프론트는 정말 재밌군

2. 그럼에도 불구하고 백에서 로직을 짠다던가 쿼리를 날리든가 등의 백엔드 작업이 나는 더 재밌다.

3. 난 백엔드도 능력이 있는 건 아니지만.. 프론트는 더 꽝이야.. 블로그를 보아라 눈에 쏙 안들어오지않는가?😅

4. 이제 HTML이나 CSS의 코드를 읽을 수 있고, 구글링해서 적용할 수 있다.

5. 그렇다면 가자, JavaScript 배우러 !!!

 

---

*** 엘리님 영상을 보면서 따라했지만 끝까지 해결이 안된 부분이 하나 있다. 엘리님은 영상에서 아래의 코드로 버튼 뒷배경이 뿅!하고 사라졌는데 나는 안사라지고 계속 남아있었다.. 이럴 때 정말 서터레서!!!

/* syle.css*/

button,
button:focus {
  border: none;
  cursor: pointer;
  outline: none;
}

저 회색 뒷배경 뭐냐구여 왜 난 안사라져

이럴땐 구글링이 정답 구글링을했더니 다들 boarder와 outline을 0으로 적용하면 된다던데 아니요 안되던데요... 여전히 저 배경은 회색이던데요.... 한참 끙끙거리다가 잠.깐.만.? 배경을 투명처리해버리면 어쩔까 하고 "css background 투명" 엔터 빡 쳤더니 나왔던 코드 한 줄. 내 코드에 적용했더니 회색 배경이 말끔하게 사라졌다😄👍 이 코드가 좋은 코드인지는 6월에 위코드나 가야지 알 수 있겠지...? 그때를 위해서 적어두고 오늘 하루는 이렇게 마무리! (아마 저 코드는 절대 안잊어먹을 것 같은 느낌이 든다)

/* syle.css*/

button,
button:focus {
  border: none;
  cursor: pointer;
  outline: none;
  background-color:transparent;   /*여기 한 줄*/
}