[인턴 정리] Web App 과제 수행💯

Figma 완성된 디자인을 이용하여, html + css 위주로 작업하여 WebApp제작

 

1. css에서 선언 할 때🙌

.클래스명
#아이디명

2. css 이름 규약✌

_ 불가, - 가능 
number1, number2 처럼 추상적인것보다는 내가  알기쉬운 명으로 정하기
ex) main-number

3. web-app 에서 사용할때는 float를 사용안함🚫

float:right, float:left 등을 사용하니 반응형 웹사이트 답지 않게 사이즈가 깨지는 현상 발생
따라서, float 를 사용하지않고 display:flex 로 margin 이나 padding 값으로 조절

4. display , position 은 잘알고가자!🔔

 display:inline-block; -> 가로로 텍스트나 이미지 붙일경우 사용
display:flex; -> 전체적인 구조에서 많이 사용
vertical-align -> 가로로 붙일경우에 inline-block 과 함께 사용

5. position:absolute 와 relative 의 쓰임새 알기✨

absolute는 자식 (절대)
relative는 부모 (상대)
주로 이미지를 겹치게 구현할때 사용

6. padding , margin 줄때 한줄로 쓸수있다👀

순서대로
top, right, bottom, left 순으로 쓰인다 자주 쓰이니 알고가자
ex) margin: 10px 0px 10px 0px;