[211225-211226] 클론코딩_연습day

홀로 짜보는 클론코딩을 하며 메타인지를 해봅시다.

 

목적

내가 뭘 알고 뭘 모르는지 알기.

 

진행

1. html 큰 틀을 짜놓는다

2. css로 background 색을 넣어서 영역을 확인한다.

3. 세부요소를 넣는다

 

방법

각 파트별로 걸린 시간을 작성할 것

코드가 꼬인다고 재작성 하지 않을것. 수정으로만 반드시 할것.

주석이랑 블로그에 문제점과 해결법과 생각한 방향을 작성할것.

이렇지 않을까?하고 넘어가지 말고 속성은 정확히 알고 사용할것. 사용의도를 설명 가능해야함.

 

 

목표

영역이 흐르고 넘치는 것을 무지성으로 때려박아서 해결하지 않는것.

 

 

예상 문제점

어느 요소가 block이고 inline속성인지 애매

block, inblock, inline-block의 차이점 애매

float의 기능 개념 애매

 

 

 

뭐, 해봅시다 그래요.  해봐야 알지.

---

html.css 소요시간 5분

1. 좀 더 효율적이고 코드를 덜 쓰고 짤 수 있을까. 내가 div를 너무 많이 쓰는건 아닐까

2. 습관적으로 id를 넣는데 class를 쓰는게 뭔가 어색함. 아무래도 한장짜리 코드고 중복해서 사용할 설정이 없어서 그런듯

3. container 보니까 div 2개로 묶어서 나눴던데 수업에선 ul로 묶어서 넘겼단 말이지. div보다 ul로 영역 설정하고 넘기는게 좀 더 머리를 쓰게하는 연습문제로 괜찮으니까 그런게 아닐까.

4. dt, dl, dd?그걸로 홈페이지가 짜져있던데 개념살펴보고 정리하기

---

 

index.css

큰 영역부터 지정해보았다.

 

---

 

1. 천천히 이해하면서 짠 구조도(1시간 소요)

무지성으로 때려박은거 하나도 없음!

제일 멍청했던 실수

html을 저장 안 해놓고 id 지정 속성변경했는데 안 먹힌다고 10분 날려먹음.

 

다시 깨달은 것

ul, li는  block 성질이다

margin:0 auto;를 넣으려면 해당 개체에 다이렉트로 때려박아야함. 코드가 진행될 수록 카드를 위에 얹는 레이어개념이라고 생각하면 좀 더 쉽다. 그 있잖아 카드 순서로 뒤집어 까면서 다른 카드 위에 올려놓는 스파이더 카드인가 그런거.

 

img랑 a는 inline 속성이다

 

단축키 정리

f12 alt command i

한줄 복사 shift alt 화살표

한줄 이동 alt 화살표

한줄 삭제 ctrl shift k

한줄 선택 shift command 화살표

좌우영역 선택 ctrl shift 화살표

단어 선택 alt shift 화살표

화면캡쳐 shift command 4

주석 만들기 command /

코드 렌더링 alt l o

 

 

---

 

 

1시간째 막혀있음.

뜬금없는 문제에 막혔다. 이미지 위에 떠있는 형광연두색 위에 있는 파란 메뉴 영역때문에 갈색 영역 안의 텍스트랑 영역이 밀리는중.

갈색영역이랑 회색영역은 정상적으로 있는 이미지인데, 진초록이랑 연두색 이미지가 밀려나고 있음. 뭐가 문젠거지.

html은 다른게 없고 css도 다를 바가 없는데 진짜 뜬금없이 일어난 문제라서 열받는중. 뭔데 이게!!! 파란색 영역을 늘리면 속절없이 밑으로 줄줄 밀리는데 뭔지를 모르겠다. 개발자도구로 봐도 뜨지를 않음.

 

 

 

#header > #visual{
    width: 100%;
    height: 500px;
}

저 height를 지우면

 

 

 

이렇게 갑자기 공간이 생긴다. 아니 뭔데 대체 왜 이게 나오는데 왜 대체 아아ㅏ아아아ㅏㅏㅏ

-> 이거 해결하긴 했는데 다시 해봐야함 아니..왜...

 

float:left를 쓰면 div를 벗어나는 효과가 생긴다.

 

 

---

 

 

교수님 해답

relative가 있으면 콘텐츠 본래 사이즈가 측정이 되어서 공간이 남아있다. 해결하는 법이 clear:both

 

-

참고한 사이트

https://stackoverflow.com/questions/59162276/is-there-a-way-to-disable-mdn-references-intellisense-popup-for-html-css-i?rq=1 

Is there a way to disable "MDN References Intellisense" popup (for HTML & CSS) in VS Code?

 

https://blog.eunsatio.io/develop/%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EC%A0%95%EB%A0%AC%EC%9D%84-%EC%9C%84%ED%95%B4-css-float%EB%A5%BC-%EB%90%98%EB%8F%84%EB%A1%9D-%EC%93%B0%EC%A7%80-%EC%95%8A%EC%95%84%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

Slacking studio x BLOG

https://www.codingfactory.net/12644#_Class_Selector

CSS / 선택자(Selector)

 

https://erwinousy.medium.com/z-index%EA%B0%80-%EB%8F%99%EC%9E%91%ED%95%98%EC%A7%80%EC%95%8A%EB%8A%94-%EC%9D%B4%EC%9C%A0-4%EA%B0%80%EC%A7%80-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EA%B3%A0%EC%B9%98%EB%8A%94-%EB%B0%A9%EB%B2%95-d5097572b82f

z-index가 동작하지않는 이유 4가지 (그리고 고치는 방법)

https://dogbird-foot.tistory.com/17

맥북 단축키 모음! (전체화면, 스크린샷 등)

https://velog.io/@solmii/VScode-%EB%8B%A8%EC%B6%95%ED%82%A4-%EB%BD%80%EA%B0%9C%EA%B8%B0-MAC

💪 VScode 단축키 뽀개기 (MAC)

https://techwell.wooritech.com/blog/2021/03/19/VSC%EB%8B%A8%EC%B6%95%ED%82%A4/

Visual Studio Code 단축키 | TechWell

https://junistory.blogspot.com/2017/07/html5.html