개발일지 210722

19일차

네이버쇼핑(2) 카피캣 강의

메모

• 특정 코드에 문제가 생겼을 때 검사 도구에서 해당 부분을 확인하고 수정할 때 해당 코드가 문서의 몇 번째 줄에 있는지 확인할 수 있다.

• 어제와 마찬가지로 (같은 페이지를 작업함) 비슷한 레이아웃이 반복되는 사이트를 만들 경우 빈도가 높은 디자인에 대해 클래스를 미리 생성해두면 작업 효율을 높일 수 있다.

• 미디어쿼리를 상정하지 않는 고정형 웹사이트를 만드는 경우 역시 html의 기본적 속성을 최대한 활용하는 쪽이 작업이 간편하다. (2차원 속성, 세로 방향 배치 등)

• 뭔가 인사이트가 생긴 것이라기 보다, 웹사이트 작업에서 생각보다 텍스트 부분들이 가장 귀찮은 것 같다. 특히 h태그가 그런데, 고유한 상징성에 비해 사용이 중구난방인 느낌이 든다. 실습에서 임의로 작성할 때 역시 어느 정도 중요도를 적용해야 할 지 애매하다. block 속성을 디폴트로 갖고 있다는 점도 덤.

새로 알게된 요소

<em>text</em>

• em태그는 html 1버전부터 사용된 요소로 텍스트의 내용을 강조할 때 사용한다.
• css를 통해 훨씬 다양한 강조 효과를 사용할 수 있으나 코드를 확인할 때 강조가 필요한 부분임을 관습적으로 알 수 있다.
• 기본 css속성으로
  font-style: italic;
  가지고 있다.
• 비슷한 녀석으로 strong태그가 있는데 거의 유사하며 기본 css속성으로 blod를 갖고 있는 차이가 있다.

강의중 나온 팁

웹사이트 제작 연습 중 무료로 공개된 이미지를 사용할 수 있는 방법

• https://pixabay.com/ko/
  : 무료 이미지들을 다운받을 수 있다. 크기를 조절 한 상태로 받을 수 있음

• 유명 사이트, 회사의 로고들을 사명 + logo로 검색하면 많은 경우 사용 가능하다. 물론 비 상업적 용도의 경우. (ex: naver logo)

추가 학습 - 자바스트크립트 1강

시작 ~ 00:39 까지

자바스크립트 개요

1. 자바스크립트의 활용

• (당연히) 웹개발
• 하이브리드앱
  : 안드로이드, IOS 기반 앱을 만들 수 있다.
• node.js를 통한 서버 개발
  : 자바스크립트를 기반으로 하는 일종의 개발 툴로서, 이를 활용해 서버 개발도 할 수 있다
• IoT(사물인터넷) 구현

2. 자바스크립트의 특징

• high level language 이다.
  : 하이레벨랭귀지라 함은 인간에게 친숙한(인간 언어와 유사성이 높은) 언어이다.

3. 자바스크립트 학습의 대분류

3.1. 자바스크립트 코어
: JS의 문법적 특징들을 학습하는 영역

3.2. 클라이언트 측 자바스크립트
: 브라우저의 제어 - 브라우저와의 상호작용하는 방법 등을 학습하는 영역

3.3. 서버 측 자바스크립트
: node.js를 활용하는 영역으로 백엔드에 대한 학습 영역

자바스크립트 사용법

자바스크립트 코드의 적용 방법

1. html문서에 직접 작성하기

<script> JS코드 <script/>

• 브라우저의 검사도구 Console탭에서 JS를 코드로 출력된 결과물을 확인할 수 있다.
• Console탭에서 출력된 결과물의 우측에는 해당 결과물의 코드 위치가 링크되는데 이는 Sources탭으로 연결되고, 내용을 확인할 수 있다.

2. 자바스크립트 문서를 링크하기

<script src="자바스크립트 문서"><script/>

• css문서를 연동하는 것과 달리 스크립트 태그를 이용함
• 이를 통해 연동된 문서가 있을 경우 html안쪽에 직접 작성된 스크립트 태그는 동작하지 않는다. 즉 1.과 2.를 혼용해서 사용할 수 없다.

자바스크립트 코어 학습

0. 주석 처리하기

• css와 마찬가지로 전체 주석 처리는 /* 내용 */ 을 사용
• 한 줄 주석처리는 코드 앞에 슬래쉬 두개 (//)
• 전체 주석 처리된 한 줄 짜리 주석을 넣을 수 있음

1. 변수
   : 변수는 데이터를 담는 공간이다. 공간 자체에는 고유성이 없으므로 이름을 붙여주어야 한다.

• 변수를 만드는 방법 (1)

  1. 변수 선언(변수를 생성함)
     var A(변수명);
  2. 변수 초기화(변수 안에 데이터를 할당함)
     A = "random data"(데이터);
  3. 변수를 확인하는 방법
     console.log(A);
     -> 콘솔 탭에서 random data 가 출력됨

• 변수를 만드는 방법 (2)

  var A = "random data"
  이와 같이 변수 선언과 초기화를 한 번에 할 수도 있다.

• 여러 개의 변수를 동시에 선언하기

  var A, B, C;

• 여러 개의 변수를 동시에 초기화 하기

  var A = random data1;
  var B = random data2;
  var C = random data3;
  또는
  var A = random data1, B = random data2, C = random data3;

미해결 - 솔루션

x

질문거리

x

학습 소감

자바스크립트 자율학습을 시작함. 파이썬과 자바에 대한 몇 가지 기초 학습을 해봤지만 정말 왕기초였기 때문에 코드와 구분자 같은 것들이 다르다는 점만으로도 완전히 새로운 느낌이다. 열심히 해보자..!