멋쟁이사자처럼 FE스쿨-회고2

Index

1. 들어가며,,
2. 9월2일
3. 9월5일
4. 9월6일
5. 9월7일
6. 9월8일

들어가며,,,

확실히,, 뒤늦게 회고록을 작성하려하니 그 날에 뭐 배웠는지 잘 생각도 안나고
시간도 많이 걸리고 대충작성하게 된다.

페이지 만들어놓고 최대한 수업끝나면 바로 쓰도록 해야겠다

🔥 내일부터 간단한 목표 🔥
수업들으면서 타이핑한 자료 복붙 및 정리 + 소감포함하여 10분 이내 작성할것

---

9월2일

사실 오늘이 특강이 있던 날이었는데, 예비군훈련이 겹쳤다🥲
그래도 작년이랑 재작년에 원격수업을 들어서 이번훈련은 기본8시간에서 4시간을 삭감해, 4시간 수료받게되었다.
마치고 집으로 달려서 도착하니 2시 ,,, 밥을 좀 먹고 수업에 들어가니 3시가 막 넘어가는 상황이었더랬지 ,,,

뒤늦게 듣기 시작했음에도 수업내용이 강제주입되어버리는 강의실력 ,,
대부분 css에 관한 내용이었는데, css는 각잡고 공부해본적이 없다보니 거의 모든 내용이 새로웠다.
하지만,,, 뒤늦게 들은 여파로인해 따라가기 쉽지 않았고 집중도가 떨어져서 조는 바람에 수업내용 ㅃㅇ 😱

조원분들의 은혜로 과제와 오늘 배운 내용을 정리한 노션페이지를 하사받고
뒤늦게 공부해가며 수업내용을 습득하기는 했다

---

9월5일

태그의 내용또한 semantic 하게 작성해야 한다.

하나의 section에는 하나의 h 태그가 꼭 들어가야 한다!

nav 태그는 페이지 전환이 일어나는 링크들의 모음일 때, 사용한다.

h태그 안에 p태그를 한번 더 써서는 안된다.

a와 button 태그 차이점
a 태그 = 사이트 이동 //// button 태그 = 사이트 내에서 동작

통일성, 규칙, 모듈화가 가능한 웹페이지가 좋은 웹페이지라고 할 수 있다.

---

9월6일

오늘은 html 태그를 위주로 배웠다.
아래는 수업들으면서 키보드가 가는대로 정리한 내용👍
물론 내가 알아볼 정도로만 대충 써놨다 ,,
나중에 복습할때 깔끔하게 타이핑하면서 공부하면 되지 뭐🤗

wbr 태그 : 줄바꿈 위치를 지정해준다
a 태그 : 페이지 이동뿐 아니라 해쉬링크를 통해서 페이지 내 이동도 가능
파일 다운로드 또한 가능
b태그: 오래된 태그다 요새는 잘 사용안해
strong : 굵은 글꼴 및 강조 ,, 중첩사용가능
i태그 : 얘도 오래된 애긴하지만 html5를 넘어가면서 전문용어, 주언어와 다른 언어 등을 의미함
em : 기울임 글꼴 및 강조
dfn : 문서에서 최초로 나타나는 dt>dd 태그 내의 특정 용어를 설명할 때 사용
abbr : 약자를 의미 // title 속성을 통해 마우스 오버시 나타낼 텍스트 설정가능
sup, sub : 윗첨자 아랫첨자
span : 의미없이 영역묶기용 // 최대한 사용을 줄일 것

인라인레벨요소 xx -> 텍스트레벨요소
블럭레벨요소 xx -> 블럭요소

페이지 내에서 많이 사용되지 않는 폰트의 글자의 경우,,,
폰트를 다운로드 받지 않고,,, 이미지로 렌더링해버림,,

Img 태그 안의 alt 속성

<!-- alt안에 공백으로 남아있는 경우 : 스크린리더가 읽지 않음 -->
<img src="jeju.jpg" alt=""> 
<!-- alt 자체가 없는 경우 : 스크린리더가 'a'를 읽습니다.-->
<img src="jeju.jpg" >
<!-- 스크린 리더가 '이미지'를 읽습니다. -->
<img src="jeju.jpg" alt="이미지">

Picture 태그 : source 요소의 media 속성값에 따라 화면에 다른 이미지 표현가능
Source 요소의 type 속성을 통해 포맷을 브라우저에게 전달가능 ->>스크린리더 ??

점진적 향상기법
위 picture 태그와 같이, 브라우저가 지원하는 포맷에 따라 다음요소로 넘겨서 데이터를 제공하는 (크로스브라우징)기법
-> 이는 웹서비스 구축시 충분히 고려해야 할만한 사항

iframe : 아 ,,, 이거 좀 잘안써도 될듯한 그런 ,,, 응
트래픽처리부분에서도 별로고,,
특히 보안관점에서는 사용자가 iframe을 해킹하는데 충분히 활용가능하므로
웹서비스 자체에서 사용하지 못하도록 구현하는것이 좋아

---

9월7일

video 태그 쓰지 말고, iframe 써라
1. 순간 트래픽 부하분산,,
2. 월간 트래픽,, (비용적 문제)

codec&format
1. 코덱 : 촬영한 영상
2. 포맷 : 영상을 담는 컨테이너
브라우저에 따라 사용가능한 코덱과 포맷이 다르다.

Form

form : 정보를 입력하는 영역
action과 method 속성 존재
action 속성 : input 데이터가 전달되는 목적지
method 속성 : 서버로 데이터를 보내는 방식
-> method에 따라 DB내 CRUD 작업이 연결됨

POST : Create // post 사용하면 쿼리스트링 제공하지 않아서 스니핑 예방가능
—> 패킷 안에 데이터를 캡슐화해서 전달할 때 사용
GET : Read // 큰 파일 또는 id,pw와 같은 민감데이터 전송 시 사용하지말것
PUT : Update
Delete : Delete
*단 Form에서는 post, get 만 사용 가능

** 배속 설정 :) **
document.getElementsByTagName("video")[0].playbackRate = 2.5;

이거 좀 개꿀따리임,,, 동영상 재생시 최대배속을 넘어가도록 설정 가능

Input type = radio 에서 name 을 통일해야 radio가 묶여서 작동함
Ex) name=‘성별’ value=‘man’
name=‘성별’ value=‘woman’
이런식으로 두개 써줘야 택1 기능을 구현 가능

button vs input

button이 스타일 적용하기가 훨씬 수월
Input 은 닫는 태그 없어 ,,
대부분 별 일 없으면 button사용해

1. form에 제출되는 데이터를 javascript로 수정하는 일은 가능하면 하지않는 것이 좋다. (input으로 해결할 수 있거든요)
2. form에 없는 데이터를 추가하고 싶다면 hidden type의 input을 하나 더 만들어서 value를 javascript로 추가하는 방식을 사용하자

*table을 thead와 tbody로 나누는 이유 ,,
tbody에 동적으로 데이터를 쏴주게 된다. 이 때, thead가 꼭 있어야 정상적으로 데이터 전송이 가능
단, tfoot 은 선택사항

CSS

*마지막에 쓰여진것이 적용된다.

selector : 선택자,
property : 속성
value : 값

Css 적용하는 세가지 방법

• 내부 css :
• 외부 css :
• Inline css : 권장하지 않음

내부 vs 외부 css 장점
내부 : 파일 하나만 수정하면 된다
외부 : 마크업과 css의 분리가 가능

다중 스타일 sheet
*태그에서 더 가까운 css가 적용된다.

특강

블록레벨 요소들 사이에서는 인접해있는 상하단 margin이 겹친다
*(좌우 margin은 안겹침)

이는 동일한 레벨의 블럭요소뿐 아니라,
부모, 자식 사이의 블럭요소들끼리도 적용된다.
🔥 이 경우의 해결방법 🔥
방법 1. 부모에게 패딩값 또는 보더값을 1px준다.
방법 2. 부모에게 display: flow-root 를 준다.

---

9월8일

Img ( 백엔드의 입장에서 컨트롤 되는 변경가능성이 있는 이미지 )
background-img(변경되지 않을 이미지, )

id는 문서내에서 유일해야 함
하나의 태그안에 여러개 사용 불가

emmet
.tit-txt#main-title 탭 사용시
<div class=“tit-txt” id=“main-title”></div> 가능

/* 자손 */
div p {}
/* 형제 */
div +p {}
/* 직계 */
div > p {}

구체성의 원칙 ( 좀 더 구체적으로 명시된 것이 적용 )

• {
  color: red;
  }
  h1 {
  color: blue;
  }

style 가중치
id> class >type 순으로 가중치를 가짐

!important 를 주면 우선권을 얻을 수있다,
!important 가 둘 다 적용되어있을 경우는 순서에 영향을 받는다.

box-sizing:border-box : width와 height대로 맞춰줌 border로 인해 해당 사이즈를 넘어가지 않도록

🔥 중요 🔥

Display 종류

block : width& height로 컨트롤 가능, 패딩 마진 보더 속성을 사용가능하고 해당 속성이 다른 요소를 밀어낸다. (한 줄에 하나 )
inline : width&heigh 속성 사용 불가, 패딩과 보더 속성 사용가능, 마진은 좌우만 조절가능, 각 속성들의 상하값이 다른 요소를 밀어내지 않음(한 줄에 여러개)
inline-block : width&height, margin padding border 전부 적용 가능(한 줄에 여러개)

다중 스타일시트

정의 : css 안에 또 다른 css 를 적용시키는 방법이다.
용법 : @import "cssname.css" 를 최상단에 입력하여 적용할 수 있다.
추가 : @import ~~ 처럼 @가 붙는 문법을 at-rules라 부르는데, 다양한 기능들을 제공한다.

이상 ,, 9월 9일 오후 2:36 작성 journey ji