- 이론강의 2. 실습강의
모르는것, 새로 배운것, 헷갈리는 것 위주로 정리하기.
HTML / CSS / HTML
- 문서 작성에서 시작해서 더 많은 기능과 레이아웃을 구현하기 위해 단계적으로 생긴 것
태그 관련
- div 태그로 레이아웃을 다 만들수 있지만, 의미상 중요도 때문에 태그를 구분해서 작성하는 것이 좋음.
- 몇개의 태그가 축약인 이유 : 그냥 옛날에는 귀찮아서 줄여쓰다가, 새로운 태그가 많이 나오면서 줄이기 어려워졌음. 최근 나온 태그들은 그냥 원형 그대로 쓰는 경우 많음.
- a태그는 기본 속성이 인라인이긴 하나, display속성으로 상황에 따라 바꿔서 사용 가능
CSS
- .class > p : 꺽쇠를 넣어서 구분하면 '직계자손'까지만 해당
- border-radius : 모서리 둥글게
- vw (viewport width) / vh(viewport height) 보통 자식 태그는 부모 요소에 영향을 받아서 퍼센테이지가 결정됨. 뷰포트는 열려있는 화면 전체의 상대 길이를 반환
- serif / sans-serif / monospace
Monospace는 프로그래밍 할 때 쓰임. 코딩할때 쓰이는 폰트! (어떤 글자를 써도 간격이 같음) - em, rem?
- 하나의 html 파일에 하나의 css파일을 1:1 로 맞춰서 사용해야하나요? 하나의 html이 여러개의 .css파일을 사용할 수 있을까요?
상관은 없으나 유형이 있음. > 보통 번들링.? 이라는것으로 함. 모듈마다 CSS 파일이 하나가 있는게 편하지만, 모듈마다 만들면 비동기적으로 돌려서 네트워크가 느리면 힘들수도 있음. 일관성없이 보일수도 있음. 배포할 때는 하나로 합쳐서 하는 경우가 많음. (번들링?) 웬만한 경우는 공융으로 쓰이는 스타일 CSS 파일 외에는 모듈당 하나를 사용함. 그것이 직관적임. - 모듈 : 기능들을 하나의 단위로 묶어 놓은 모음 정도로 이해하기
- 컴포넌트 / 모듈
- bootstrap / tailwind
- 속성들은 한 줄에 쓸 수도 있지만, 초보 단계에서는 구분을 해서 사용해 보는 것이 좋음
- display / position
- 특정 사이트는 클래스 네이밍이 해시값(?) 형식으로 암호화 되어있는 것 같던데 이건 보안적인 요소를 고려한건가요? 어떤식으로 구현하는지도 궁금합니다. 현재 사이트를 봐도 sc-1raydke-0 gEyznr 같은 클래스 명이 있더라고요.
-> 리액트 같은 툴에서 내장되어있는 어쩌구...저쩌구 (기억안남)
- 부모-자식-자식-자식... 중에서 가장 작은 자식에게 기준을 맞추어 진행함.
-> 왜냐하면? html은 처음에는 그냥 문서를 작성하는 용도였음. 레이아웃은 전혀 고려하지 않았고 마크업 랭귀지였음. 문서를 쓰는 것이었기에 몇줄을 쓰던간에 자동으로 문서 넓이? 단락 넓이? 가 변화하게 하려고 그런것...
block / inline / inline-block
- inline도 패딩값은 줄 수 있음.
- inline-block은 width, height 값 지정이 가능하고 inline 처럼 x축으로 늘어지는 특징이 있음.
- inline & inline-block은 텍스트와 문단 사이에 끼워넣을 때 사용함.
- block은 보통 레이아웃 작성때 사용
마진병합현상
- 현업에서 버그 찾을 때, 마진 병합 현상같은 것을 잘 알고있으면, 효율적인 대처가 가능함.
float
- float도 레이아웃 용도가 아닌 문서작성용이었음.
- 플렉스와 그리드는 배우는데 굉장히 오래걸림..
- clear는 줄바꿈의 의미
vertical-align
- 따로 다시 공부 필요
웹
- web 1.0
- web 2.0
백엔드개발자