프로그래밍/CSS
-
[유노코딩] 반응형 웹 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 가변레이아웃(그리드) ..
-
[드림코딩 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..
-
[CSS] Display && Position프로그래밍/CSS 2023. 6. 24. 20:18
Dispaly display는 크게 block level 과 inline level로 나뉜다. ( 와 으로 예시를 들겠음) block level 한줄에 한개씩 나온다 컨텐츠의 크기와 상관없이 지정한 값에 맞춰 표현이 된다 inline level 한줄에 공간이 많으면여러개가 나온다 물건(contents) 자체만을 꾸며주기때문에 width height는 개무시하고 안에 들은 물건의 크기에 맞춰서 설정이된다. 안에 내용물(contents)이 있어야 표기된다 display 속성의 변경을 통해 block, inline을 바꿀 수 있다. inline-block Vs inline 내용물이 없으면 inline은 표시되지 않고 inline-block은 내용물이 없어도 표시되는 inline속성의 block이다. Posit..
-
띵동코딩 CSS프로그래밍/CSS 2023. 6. 1. 15:53
1. CSS활용 - 구역에 대한 이해 Gnb(맨 위에 있는 것) Main Cta(둥둥 떠다니는 박스 구매표시뜨는 애들) - 줄바꿈 - justify-content 얼마나 떨어뜨릴지 결정하는 것 - 수평선 만들기 (2줄로 구성되어있다) - position : fixed; Cta 할때 주로 쓰임(고정) - calc 연산 할 때 주로 쓰이는데 Cta 크기 맞출 때 사용되었다. - 그림자 넣기 - curser: pointer 손모양 나오게 하기 - margin 위 오른쪽 아래 왼쪽 2. 부트스트랩 아이콘 쓸려면 부트스트랩 링크 무조건 필요 가져다 쓰기 꼭 하기 3. 깃허브 배포 방법 레포지토리 먼저 만들고 QUick setup 부분에서 uploading 눌러서 file 올리고 setting에서 page 가서 b..