오늘 공부한 내용 필기
프론트엔드 기초지식
1. 웹의 동작
- 웹 = 클라이언트+서버
- 클라이언트(요청)
- 서버(데이터, 정적지원(html,css,js)를 전송)
2. 프론트엔드 개발자가 하는 일
- 화면을 그리고, 데이터 끼얹기(보이는 부분의 전반적인 부분을 담당한다.)
3. 서버리스
- 서버가 없는것이 아닌 서버를 빌려씀으로써 백엔드의 작업이 없는 것
HTML
프론트엔드라면 꼭 알아야 하는
1. html(hyper text markup language)은 마크업의 언어이다.
- 마크업 : 표시하다(텍스트에 표시하는 언어)
2. < div >,< h1 > 같은 태그들은 하나의 요소이다.
3. 요소가 모인 한줄 한줄이 객체이다.
<div class="cat"> <h3>1. 고양이 밥주기</h3> //객체 <p>고양이 물, 사료 챙겨주기</p> //객체 <button type="button"s>완료</button> //객체 </div>태그 하나하나는 모두 요소(elements)이다.
4.HTML은 DOM(document object model) 구조이다. = 문서 객체 모델 구조
- DOM은 tree구조 이다.
- tree구조 : 포함구조 (부모요소에 자식요소 포함)<div class="cat"> <h3>1. 고양이 밥주기</h3> <p>고양이 물, 사료 챙겨주기</p> <button type="button"s>완료</button> </div> //<div>안에 <h3>,<p>,<button> 요소가 포함되어있고, <body>안에 <div> 요소가 포함되어있다. --> 트리구조- 검사에서 DOM의 부모요소에 접근하기.
- document.부모요소
- 검사에서 DOM의 자식요소에 접근하기.
- document.부모요소.children
- document.getElemetsByTagname("h1")
- 참고 문헌
https://developer.mozilla.org/ko/docs/Web/API/Document
(가끔 시간 날때 틈틈히 보며 익히자!)
css
프론트엔드 개발자라면 알아야하는
1. selector = 선택자
- #id { ... }
- .class { ... }
- Tagname { ... }
- 다중 선택자 : ' , '으로 이어주기
- .class , #id , Tagname { ... }
- 수도 클래스 선택자 : 어떤 요소가 특정 상태일때를 선택자로 두기
- button : hover { ... }
' : '으로 상태를 이어준다.
2. 그리드 시스템 = 레이아웃을 어떻게 잡을거야?
- 레이아웃(layout) : 요소의 배치, 배열
- 박스모델
- 모든 요소들은 기본적으로 박스모델이다.
- 레이아웃을 예쁘게 하기위해 알아야 한다.
- 아래가 박스모델이다. border을 기준으로 생각하면 된다.
- 그리드 시스템 = 클라이언트에게 컨텐츠를 최적의 상태로 보여 줄 수 있도록 하기위한 도구.
- 컨텐츠는 유동적으로 변할수도있기 때문에 그리드 시스템이 필요하다.
- display를 table, grid, flex로 설정하면 알아서 비율에 맞춰 사용할 수 있다.
- 왜인지 모르겠지만, 내가 flex를 사용해봤더니 안됐다. 그래서 inline-block으로 사용했더니 되었다. 그리드 부분은 조금 더 공부해서 포스팅해야겠다.
3. css의 사칙연산
- 고객의 브라우저의 크기에 맞출때 사용
선택자 { 속성:clac( X % - Y px ) }
매일 조금씩 성장하는 개발자!