a numeric value that represents sth that is not a number....
0/0 --> NaN
1+NaN --> NaN
const: 한번 정한 값을 바꿀수없음 constant variable임
var: old way of making variables
Boolean: True or False
.trim(): space 부분 없애줌
toLowerCase()
toUpperCase()
convention naming: 첫단어는 lowercase; ex) highScore
indexOf() : TheindexOf()method, given one argument: a substring to search for, searches the entire calling string, and returns the index of the first occurrence of the specified substring. Given a second argument: a number, the method returns the first occurrence of the specified substring at an index greater than or equal to the specified number.
.slice(): 잘라서 새로운 string을 만듬
.replace():
.replace('a', 'b') 맨 처음 a 문자만를 대체함
.replaceAll(): 모든 해당 문자를 대체함 -> 쓸수있는 브라우저는 제한적
.repeat(n): n번 반복
String Template Literals
template literals are strings that allow embedded expressions, which will be evaluated and then turned into a resulting string
`I counted ${3+4} sheep`
back-ticks `` 사용 (tab 키 윗키)
${....}
Undefined & Null
Null: international absence of any value
must be assigned
value is explicitly nothing
Undefined
Variables that do not have an assigned value
Math Object
contains properties and methods for mathematical constants and functions
드디어 부트스트랩이 나왔습니다. css 지식으로 충만해지고 있는데 아직 프론트 엔드가 되고 싶은지는 모르겠습니다. 서버 쪽을 해봐야 알 것 같아요. 유데미 웹개발자 부트캠프 강의는 2022년 최신 버전이라고 알고 있는데 bootstrap은 4.5 version 이 나옵니다. 스파르타 웹개발 종합반에는 5.0 ver을 씁니다. (2022.10.25 기준) 방금 확인했는데 Bootstrap 5.2ver이 최신인 것으로 확인됩니다.
일단 수업을 맞춰서 들어야 하니까 4.5 ver으로 다운받았습니다. 아래 강의 관련 질문에 보니까 앞에는 4. ver 쓰다가 뒤에 강의에는 5.ver가 나온다고 하네요.
개발을 잘하게 될지는 아직까지는 미지수이지만 컴퓨터로 혼자 일 하는 것은 적성에 맞는 것 같습니다.
세상에 없는 무언가를 만드는 것도 어느정도 창의력을 요하는 일이라 재미있습니다.
CS 강의를 유튜브로 들으니 알고리즘이 여기저기 유명한 프로그래머들과 교수들의 강의를 추천해주는데 재밌습니다.
이제 알아 들을 수 있는 용어가 늘어서 그런 거 같기도 합니다.
인상 깊었던 댓글은 Computer Science 라는 학문이 창시된 지 얼마 안 됐기 때문에 초기 이론, 언어 등의 창시자들을 아직까지 인터뷰할 수 있고 그 시대를 함께 살아간다는 거였습니다.
마치 워런버핏이 근 30년 넘는 동안 발행된 거의 모든 투자 책에 언급되는데 아직도 살아서 주주총회 하는 것과 같은 느낌입니다.
유데미 웹개발자 부트캠프 섹션 6~10을 한꺼번에 묶어서 쓰려고 했는데 어느 순간 h2 태그가 안먹히고 자동으로 h3가 되서 멈췄습니다. h 태그에 대한 갯수 제한은 원래 없다고 하는데 티스토리만 그런건지는 잘 모르겠네요. 너무 많은 개념을 한꺼번에 배우다보니 소제목을 남발했습니다. 얼른 css 끝내고 JavaScript로 넘어가려고 하는데 css강의는 section 13까지 있습니다. 오늘 섹션 13까지 끝내고 자는 게 목표입니다.
유데미 웹개발 부트캠프 섹션 6~10
CSS Flexbox
Flexbox is a one-dimensional layout method for laying out items in rows or columns
Colt Steele의 The web developer bootcamp Section 6 부터는 css에 대한 강의입니다. 그래도 한 번 다른 강의 (스파르타 학원 웹개발 종합반 강의) 들었다고 아는 단어가 몇 개 들립니다. 섹션 하나 당 1시간에서 2시간 걸리는데 코드 따라치고 퀴즈도 풀다보면 거의 한 섹션당 5시간은 잡고 듣는 것 같습니다. 심지어 좀 아는 부분이라고 생각되는데도 그렇습니다. 유데미 웹개발자부트캠프 강의는 섹션 61까지 있습니다.
원래 11월 7일 전까지 유데미 웹개발자부트캠프 강의를 다 들을려고 했는데 더 분발해야겠습니다. 대학생인 동생이 당분간 시험기간이라 새벽까지 공부한다고 하니 같이 조인해볼 예정입니다. 전체 강의의 앞부분은 프론트엔드의 역할에 대한 것들이라 얼른 백엔드 파트도 배우고 싶습니다.
Sololearn 이라는 모바일 학습앱으로 이동하거나 생각날 때마다 JavaScript를 배우고 있는데 꽤 도움이 됩니다. Lesson이 59개로 나누어져 있는데 이제 27개 했습니다. 다음주 안으로 JavaScript를 마치고 Java로 넘어갈 예정입니다.
border-width (두께) 랑 border-style (solid, dashed, dotted, inset)같이 해야 보임
width style color 순을 써도 됨
border: 2px solid red;
Padding, Margin
padding: 박스 안 들여쓰기
margin: 박스 간격 띄우기
Display properties
display: inline, block, inline-block, none
CSS Units
px: 가장 많이 사용되는 단위; 반응형에는 권장하지 않음
%: 상대적인 비율
em: With font-size, 1em equals the font-size of the parent. 2em's is twice the fontsize of the parent, etc. EM'S ARE RELATIVE UNITS With other properties, 1em is equal to the computed font-size of the element itself.
바로 위에 parents를 기준으로 함
rem: Relative to the root html element's font-size. Often easier to work with. ROOT EMS If the root font-size is 20px, 1 rem is always 20px, 2rem is always 40px, etc.
최초 root element를 기준으로 함
vh : viewheight: 1vh is 1% of the height of the viewport
vw: viewwidth: 1vw is 1% of the width of the viewport
relative: 기존 default position 대비 움직이고 다른 element에는 영향 없음
absolute:The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initialcontaining block. Its final position is determined by the values oftop,right,bottom, andleft.
fixed: 항상 고정되어 있음. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initialcontaining blockestablished by theviewport, except when one of its ancestors has atransform,perspective, orfilterproperty set to something other thannone(see theCSS Transforms Spec), or thewill-changeproperty is set totransform, in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies withperspectiveandfiltercontributing to containing block formation.) Its final position is determined by the values oftop,right,bottom, and left.
developer.mozilla.org 를 강의 자료로 활용을 많이 하는데 확실히 도움이 됩니다.
친절하게 정의랑 여러가지 자료들이 잘 정리되어 있습니다.
오늘 항해99 사전스터디 미팅에서 나온 단어 중에 html5랑 semantic elements가 나왔는데
바로 오늘 유데미 강의에서 정리해줘서 좋았습니다.
저는 이러한 자료들(mozilla 사이트 등)을 조원들이랑 공유하고 싶은데
영어라서 조금 조심스러운 면이 있습니다.
구글이 잘 번역해주니까 괜찮지 않을까 싶기도 해요.
일단은 보류입니다.
HTML5
a buzzword that refers to a set of modern web technologies. This includes theHTMLLiving Standard, along withJavaScriptAPIsto enhance storage, multimedia, and hardware access.
<span>: a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using theclassoridattributes), or because they share attribute values, such aslang. It should be used only when no other semantic element is appropriate.
Block elements
<div> :the content division elements
other elements
<hr> : 가로 라인 만듦
<br>: break 줄바꿈
<sup>: superscript 작은 글자 위에
<sub>: subscript 작은글자 밑에
HTML Entity codes
코딩 기호들이랑 겹칠수 있는 기호들 (>,<,;, 등등)을 대체해서 쓰는 코드들
ex) < = <
검색하면 나옴
Semantic Markup
relating to meaning
<div>만 있는 거 대신 <main>, <header>, <nav>, <footer>, <section> 등 직관적인 이름을 붙여서 씀
<main>: dominant content of the <body> of a document
<nav>: provide navigtion links (menus, tables of contents, and indexes)
<section>: 말그대로 섹션
<article>: self-contained composition in a document, page, application, or site (e.g. a forum post, magazine, newspaper article, blog entity)
<aside>: a portion of a document whose content is only indirectly related to the document's main content (sidebars, call-out boxes)
<header>: 헤더는 헤더
<footer>: 풋터도 풋터
<time>: represents a specific period in time (24-hour clock,, calender, datetime ...)
<figure>: figure, its caption, and its contents are referenced as a single unit.
