분류 전체보기
-
[유노코딩] 반응형 웹 Part 1 ~ 7프로그래밍/CSS 2023. 6. 28. 02:33
반응형 웹이란? 구성이나 크기가 다양한 기기나 브라우저에 맞게 변하는 Css의 형태 뷰포트 현재화면에 보여지고 있는 영역을 의미한다. 상대길이 단위 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위 (px은 절대길이 단위이기에 어떤상황에서도 동일한 값을 유지하여 반응형 웹에 적합하지 않다.) em : 부모요소의 글꼴 크기에 상대적으로 나타낸 크기 (em으로 마진이나 패딩을 정하면 자기자신의 글자크기를 기준으로 한다) rem : 루트em이며 html의 글꼴크기에 비례한다 (기본값은 16px) 1vw : 뷰포트의 너비의 100분의 1 1vh : 뷰포트의 높이의 100분의 1 1vmin : 높이와 너비 중 작은 쪽의 100분의 1 1vmax : 높이와 너비 중 큰 쪽의 100분의 1 가변레이아웃(그리드) ..
-
[항해99 주특기] 2주차 강의내용 -React 1편개발일지/항해 99 2023. 6. 27. 13:14
Style Components Css in js방식 js코드로 css코드를 작성을 할 수 있다. 새로운 package를 사용해야하여 따로 설치를 해주어야한다. yarn add styled-components 왜 써야하나?? JS의 패키지 중의 하나로써 꾸준히 사랑받고 사용되고 있으니 대세를 따르자 emotion, styled components, tailwindscc 중에서도 가장 인기가 많다 (하지만 tailwindcss도 꾸준히 올라오고 있기에 한번 봐보자) 패키지란? 리액트에는 없지만 리엑트에서 가져와서 사용할 수 있는 서드파티 라이브러리 사용방법 변수선언방법으로 (styled.HTML요소) const stBox = styled.div` const StyledDvi = styled.div` css ..
-
[CS Study] TypeScript를 사용해야하는 이유네트워크/CS Study 2023. 6. 27. 01:10
컴파일언어 VS 인터프리터언어 컴파일언어란 원시코드(사용자가 작성한 코드)를 컴파일 단계을 거친 후 실행단계로 넘어가는 언어로써 컴퓨터가 이해하기 쉬운 저급언어로 바꾸어서(컴파일링) 실행하기 떄문에 속도가 인터프리터언어에 비해 빠르고 컴파일 한 코드에서 오류를 잡아낼 수 있어서 런타임 환경 이전에 오류를 잡아 낼 수 있다는 특징이 있고 코드를 수정할 시 다시 컴파일링을 하게 된다. 인터프리터언어란 컴파일링 과정을 거치지 않고(기계어 변환 x) 한줄씩 바로바로 실행되는 언어로써 실행 시마다 인터프리터과정을 거치게 되므로 컴파일언어보다 느리고 컴파일언어와 달리 한줄 한줄 실행하기 떄문에 오류를 만나기 전까지는 계속 실행이 되는게 특징이다. TypeScript란? 자바스크립트가 개발 될 당시에는 복잡한 구조의..
-
[드림코딩 Css] Flex-box프로그래밍/CSS 2023. 6. 26. 13:26
Flex-box란? 박스와 아이템들을 행과 열로 자유자재로 배치할 수 있는유용한 것들이며 박스가 커지면 어떤식으로 아이템들이 공간에 배치되어야 하는지 알 수 있다. flexbox에는 중심축과 반대축이 있다는 것을 생각하고 구현을 해보자 중심축이 어디냐에 따라서 어떻게 정렬할 지가 바뀌기 때문이다. 100% 와 100vh 등등 쓰는 단위로 인해서 일어나는 차이를 알아보자 100% === container가 속해있는 부모의 크기에 100%로 맞추겠다는 것 100vh === 부모에 상관없이 보이는 viewPortGeight을 쓰겠다는 의미 container 와 item으로 나누고 두개의 속성을 각각 알아보자 container display; (속성을 지정한다 flex, block 등등) flex-directi..