[1주차] 페이지 제작 기초

일별 후기

1일차

강의 갯수 제한이 슬프다.

막 강의내용이 시작되겠구나 했는데 끝나 버렸다..

그래도 생활코딩 하다가 스파르타로 넘어가니까 확실히 강의와 강의자료가 깔끔해서 좋다.

 

2일차

오늘 하루종일 "실습이 필요해" 하며 실습 좀비처럼 정보 찾아 돌아다녔는데

바로 딱 눈에 보이는 결과물 만들어 버리니까 신난다 ㅋㅋㅋㅋ

생활코딩에서 열심히 즈려밟으며 배운 것을 가뿐히 디디고 가 버리니 좀 당황스럽기도 ㅋㅋ

 

3일차

어제 강의 들을 때까지만 해도 신났는데 오늘 아는 내용 설명 들으려니까 도저히 집중이 안 된다.

으어.....

+ 역시 실습을 하면 잠이 깬다! ^^

 

 

강의 : html, css, js 기본

1. html 배운 것

<span>를 단순히 '인라인 구역나누기'라는 정의로만 기억하고 있었는데,

내가 그렇게 애를 먹던 글씨 색 바꾸기에 간단히 적용할 수 있겠다는 생각이 들었다.

<hr> 가로 구분선을 넣어 준다.

ctrl+alt+L 코드 전체 들여쓰기를 정돈해 준다.

 

2. css 배운 것

01 로그인 페이지 꾸밀 때 쓴 property

 width

 height

 margin

 padding

 

 color

 text-align: center;

 

 background-image: url(" 블라블라 ");

 background-size: cover;           배경 이미지 크기 : 채우기

 background-position: center;    배경 이미지 위치 : 센터

 

 display: block;  버튼 등 텍스트 형식을 블록 형식으로 변경

 margin: auto;   양쪽 간격 자동(가운데정렬)

 

02 글씨체 적용

1) '구글 폰트' 사이트에서 글씨체 선택 (select this style)

2) <link> 프리셋 내용 head 안에 넣기

3) <style>에서 *{font-family:_____} 으로 전체 적용

 

03 부트스트랩

1) meta tags, bootstrap css, javascript 세팅

2) 부트스트랩 사이트에서 원하는 컨텐츠 복사해서 사용 https://getbootstrap.com/docs/4.0/components/alerts/

 

3. JS 배운 것

&& 조건문 안에서 '그리고 and'

||    조건문 안에서 '또는 or'

왓???&amp;nbsp; &amp;nbsp;i = i + 1 보다 단순한 방법이 있었다고?

 

 

숙제 : 주문 페이지 만들기

* 이미지 태그 검색했다가 '이미지 비율은 어떻게 고정시키지'싶어서 검색함.

https://stackoverflow.com/questions/12912048/how-to-maintain-aspect-ratio-using-html-img-tag#comment66076408_12912224

-> 둘 중 하나의 값만 지정하면 나머지는 원래 비율대로 자동 조정된다

-> 특정 사이즈에 맞춰야 된다면 max-width 또는 max-hight를 class먹여라

-> 또는 div 안에 img 태그로 넣어라

 

* 문단에서 빈 줄 만들고 싶어서 line break 방법으로 <pre></pre> 배워서 써먹음

 

* 강사님이 수량칸 dropdown으로 만들라고 하셨는데, form에서 한 번에 처리하는 게 깔끔할 거 같아서 복붙해 써 버렸다.

 

*html 태그에 js function을 먹일 때는 꼭 함수명 뒤에 () 붙여주자

---

* 모르는 건 죄가 아니다! 구글링 하면 된다!

검색할 때는 w3schools, mdn 추천.

 

* 오늘의 실수 22.01.19

메모장 만들 때, 수정한 model 메모를 복붙했더니 옆으로 정렬이 안 되고 아래로 한 줄로 내려가서 당황했다.

왜냐? div class="card"가 아니라 그 부모인 div class="card-colums" 단위를 복붙해서였다.