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속성에 대해 아래를 참조
width: auto;
영역 안의 내용물에 맞게 너비값을 가진다.
flex y축 정렬
네이버 웹툰 하단 부분
이와 같이(가장 긴 영역의 높이에 맞춰) 정렬하기 위해서는 flex: stretch를 사용한다.
flex에 관한 자세한 정보들은 아래를 참조
추가학습
자바스크립트 1강
변수명 작성법
- var mathScoreStudent = 10;
카멜 케이스 : 위와 같이 첫 어절 제외 나머지 어절들의 첫글자를 대문자로 작성 - var math_score_student = 10;
스네이크 케이스 : 어절 사이에 언더바 사용
변수명 작성시 주의점
- 어절 사이에 하이픈을 넣는 방식(케밥 케이스)은 자바스크립트에서 사용할 수 없다.
- 변수의 첫글자로 사용할 수 있는 특수문자는
언더바(_)와 달러($) 뿐이다 - 변수명에 숫자가 들어갈 수 있지만 변수의 맨 앞쪽에 오면 안된다.
- 그 외에, 너무 임의적이거나 함의가 큰 단어는 메커니즘적으로는 문제가 없으나 알아보기 어렵기 때문에 지양해야 함
데이터 타입
- 원시타입
-
string(문자열) : 말 그대로 문자열이다.
var A = 'string type' 또는 "string type"
와 같이 따옴표로 데이터를 감싸서 표현한다 -
number(숫자) : 역시나 말 그대로 숫자. 콘솔로그로 확인할 때 파란색으로 출력된다.
숫자 타입에 사용할 수 있는 사칙연산과 나머지 연산자
** %는 나눗셈 연산의 나머지 값을 표기한다. -
boolean(논리)
-
undefined
-
null
- 참조타입
- array(배열)
- function(함수)
- object(객체)
각 타입이 가지는 고유성과 그 차이에 대해서는 이후 학습하게 될 것이라고 함.
연산자
이 부분에서 영상의 버퍼링이 너무 심해 우선 업로드 함.
이슈-솔루션/미해결(질문)
x
학습 소감
돈벌다 만난사이
아찔한 전남편
????
영상 버퍼링이 심해 우선 업로드 함..
