20일차
강의노트
- 네이버 웹툰 카피캣
개요
위의 두 페이지를 각각 html문서로 작성할 것.
임의로 웹툰 홈, 웹툰 디테일이라는 이름을 붙여주었다.
- 두 페이지간 링크를 만들어 준다
- 두 페이지의 header, footer는 동일함
학습 내용
(1) 아이콘을 넣는 태그
<i></i>
(2) 작업 양상에 따른 차이
하나의 html문서에 여러 css를 만들어 작업할 때보다 여러 html문서에 적용할 하나의 css를 사용할 때 훨씬 더 전체에 대한 설계와 작업의 순서를 계획하는 것이 중요한 것 같다. 하지만 네이버와 같이 전체 분량대비 유사한 레이아웃이 반복되는 경우는 설계만 잘 된다면 효율이 높아진다. 이 부분을 여러 개발자가 협업하게 된다면 어떤 식으로 소통을 할 지 궁금하다.
(3) 한 영역 안에서 고정된 크기를 가진 다른 영역들을 배치할 때 calc를 사용하는 것이 효율적이니 습관을 들여보자
(4) 웹툰-홈 페이지의 헤더와 메인 우측까지 실습함. 특별히 체크할 부분은 없었다. 다만 유사한 레이아웃이 반복되는 구간에 대해 미리 동일한 부분을 작업하고 차이점에 대해 수정해주는 방식의 진행을 따라갈 때 가끔 템포를 맞추지 못할 때가 있다. 숙련도의 차이도 명확할 것이거니와 전체의 설계가 머리에 들어있고 들어있지 않고의 차이는 크다. 지금까지는 선행실습을 할 때나 강의를 볼 때 이 영역은 어떤 구조로 작업하겠다 라는 예측을 해보면서 봤었는데 이제는 그것들에 어느 정도 익숙해 진 것 같으니, 전체 영역에 대해서 예측을 확장해보아야겠다.
추가학습
- 자바스크립트 1강
학습내용
- 변수와 undefined
- 변수를 선언하고 데이터를 담지 않은 상태에서console.log로 해당 변수를 확인해보면 undefined로 출력된다.
- undefined는 이후 다양하게 배우게 될, 자바스크립트의 여러 데이터 형태 중 하나이다.
- 중요한 점 은 모든 변수는, 선언과 동시에 undefined로 자동 할당된다 는 것이다.
- 변수 안의 데이터 변경
var house;
house = "집";
console.log(house);출력결과 : 집
var house;
house = "집";
console.log(house);
house = "아파트";
console.log(house);출력결과 : 아파트
- 위와 같이 변수 안의 데이터는 새롭게 담을 수 있다.
1과 2를 종합해보면 변수에 처음 데이터(A)를 담을 때는 변수 안의 데이터가 undefined에서 A로 바뀌는 것이다.
이슈-솔루션/미해결(질문)
x
학습 소감
시간이 부족해서 자바스크립트를 거의 5분 남짓 밖에 듣지 못했지만, 5분의 내용 전체가 달달 외워도 부족할 중요한 기초였으니 배움의 기쁨(?)을 누려도 될 것 같다.
