개발일지 210726

21일차

• 네이버 웹툰 페이지 끝까지
• 자바스크립트 1강 45분~

강의노트

개요

https://comic.naver.com/index
https://comic.naver.com/webtoon/weekday

네이버 웹툰 페이지 작업
홈-메인-우측 / 홈-메인-footer / 디테일(요일별) 전체

메모

h와 span

<h3><span>새로운</span>베스트도전만화</h3>

위와 같이 html을 작성하면
'새로운 베스트도전만화' 전체가 h3태그로서의 정보성을 가지면서 '새로운'부분에만 span태그에 대한 꾸미기를 넣을 수 있다.
(div태그와 span은 태그 자체로서 아무런 정보성을 갖지 않는 빈 공간 영역이다)

list-style: decimal;

리스트 앞에 1, 2, 3, ... 순서의 숫자를 부여
보통 초기화 작업으로 ul, ol의 list-style을 none으로 맞춰주고 시작하기 때문에 재사용을 위해서 알아야 할 것.
(하지만 ol은 굳이 초기화를 해야하는가 싶은 생각도 든다)

줄바꿈 없음과 말줄임표 복습

width : 임의의 고정값;
overflow: hidden;
white-space: nowrap:
text-overflow: ellipsis;

flex 정렬이 만족스럽지 않을 때

flex로 정렬된 각 요소의 세밀한 간격이나 높이가 완전히 만족스럽지 않을 때 조정하고 싶은 요소에 position absolute나 relative를 적용한 후 상하좌우 원하는 만큼 미세한 픽셀 조절을 할 수 있다.

글자 앞의 막대(?)

가상선택자, 가상요소 그리고 content속성에 대해 아래를 참조

http://blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0before%EC%99%80after-%EA%B7%B8%EB%93%A4%EC%9D%98-%EC%A0%95%EC%B2%B4%EB%8A%94/

width: auto;

영역 안의 내용물에 맞게 너비값을 가진다.

flex y축 정렬

네이버 웹툰 하단 부분

이와 같이(가장 긴 영역의 높이에 맞춰) 정렬하기 위해서는 flex: stretch를 사용한다.

flex에 관한 자세한 정보들은 아래를 참조

https://studiomeal.com/archives/197

추가학습

자바스크립트 1강

변수명 작성법

• var mathScoreStudent = 10;
  카멜 케이스 : 위와 같이 첫 어절 제외 나머지 어절들의 첫글자를 대문자로 작성
• var math_score_student = 10;
  스네이크 케이스 : 어절 사이에 언더바 사용

변수명 작성시 주의점

• 어절 사이에 하이픈을 넣는 방식(케밥 케이스)은 자바스크립트에서 사용할 수 없다.
• 변수의 첫글자로 사용할 수 있는 특수문자는
  언더바(_)와 달러($) 뿐이다
• 변수명에 숫자가 들어갈 수 있지만 변수의 맨 앞쪽에 오면 안된다.
• 그 외에, 너무 임의적이거나 함의가 큰 단어는 메커니즘적으로는 문제가 없으나 알아보기 어렵기 때문에 지양해야 함

데이터 타입

1. 원시타입

• string(문자열) : 말 그대로 문자열이다.

  var A = 'string type' 또는 "string type"
  와 같이 따옴표로 데이터를 감싸서 표현한다

• number(숫자) : 역시나 말 그대로 숫자. 콘솔로그로 확인할 때 파란색으로 출력된다.

  숫자 타입에 사용할 수 있는 사칙연산과 나머지 연산자
  
  ** %는 나눗셈 연산의 나머지 값을 표기한다.

• boolean(논리)

• undefined

• null

2. 참조타입

• array(배열)
• function(함수)
• object(객체)

각 타입이 가지는 고유성과 그 차이에 대해서는 이후 학습하게 될 것이라고 함.

연산자

이 부분에서 영상의 버퍼링이 너무 심해 우선 업로드 함.

이슈-솔루션/미해결(질문)

x

학습 소감

돈벌다 만난사이
아찔한 전남편
????

영상 버퍼링이 심해 우선 업로드 함..