HTML,CSS31 상단메뉴바 고정, 사이드바 고정 (Fixed) 오늘까지 고민했다. 사이드바로 간단하게해서 대충 할지 아니면 정성스럽게 상 하단 고정 메뉴바를 만들어 이용할지 결론은 아직 시간이 남아있고, 모바일에서 반응형으로 사용하기 좋게, 어플처럼 만들어 보자였다. 중요한건 top,bottom모두 fixed속성을 이용해 주어야했다. 특정 사이즈에서 반응형을 사용하는것과 windowsize를 이용하는것ㅇ느 https://flykimjiwon.tistory.com/120 을 참고하고 중요한건 fixed속성을 이용한 방법이다. -> css속성에 position:fixed를 사용하고 top,bottom,right,left속성을 이용해 위치를 고정시켜주면 된다. - 참고한링크 https://www.w3schools.com/howto/howto_css_fixed_sideba.. 2022. 4. 2. div border속성 (테두리,선,굵기등...) 지금 진행중인 프로젝트에서 상단은 속성 하나로 줄을 구분해 주었지만, 하단에서는 hr속성을 사용하기가 조금 곤란했다. 그래서 div를 하나만들어주고 상단에 라인을 만들어줘 고정시키면 되겠다고 생각했다. 중요한건 div 상단이건 하단이건 div박스 자체에 border속성을 주는 방법을 알아야 한다는 것이 었다. 그저 div에다가 border-top: solid; 이런식으로 속성을주고 원하면 px지정 및 색상까지 정해줄 수 있다. - 참고한사이트 https://developer.mozilla.org/ko/docs/Web/CSS/border-top 2022. 4. 2. justify-content 현재 진행하고 있는 프로젝트 첫화면에 하단 메뉴바를 만드는데, 동일한 가격으로 div속성을 주고 싶었다. 쉽가 말하면 저 4개의 버튼을 같은 간격으로 배치하고 싶었다는 거다. 2 4 이와같은 형태로 구성했고, .bigbox{ justify-content: space-evenly; } 이와같이 큰 div에다가 space-evenvly 속성을 주어 균등하게 배치했다. 이와같이 배치 되어지게 해주는 evenvly! - 참고한링크 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content justify-content - CSS: Cascading Style Sheets | MDN The CSS justify-content property defines h.. 2022. 4. 2. Margin 간격 오늘만 margin을사용해서 몇번을 간격조절 했는지 모른다. 빈 div태그를 만들어 className을 주고 마진을 이용 했을정도로 간격을 만들때 중요한 margin... margin은 기본적으로 1)margin : 원하는px 그럼 상하좌우 전부 공백이 늘어난다. 2)margin-left, margin-right, margin-bottom, margin-top 이렇게도 개별 설정할 수 있다. 참고한링크 https://developer.mozilla.org/ko/docs/Web/CSS/margin margin - CSS: Cascading Style Sheets | MDN margin CSS 속성은 요소의 네 방향 바깥 여백 영역을 설정합니다. margin-top, margin-right, margin-b.. 2022. 3. 23. CSS 애니메이션, 위아래 움직이는 효과주기 과거 이와같이 만들어서 효과를 사용했었는데 다시 만들 필요성이 있었다. 그리고 좀더 부드럽게 만들고 싶었다. 아래와같이 다시 만들게 됬는데 추후 스타일링은 다시 해야할거 같다. 사용한 CSS애니메이션 스타일은 이와같이 사용했다. next.js의 style jsx안에서 사용했고, 어디서 사용해도 크게 다를건없다. 다만 좀더 디테일하게 설정한 부분이 두 가지 있다. 단어 태그하나하나당 div로 감싸서 사용하기도 했지만 각 단어에 위아래 움직이는 효과를 주지않고 한 묶음으로 아래와 같이 묶어서 사용해줬다. #꼬들 #탱글 #쫄깃 #파 #달걀 #소고기 그렇게 묶어서 사용해줘야 다시 단어 하나하나 마다 좌우로 배치해줘서 자연스러운 position설정이 가능했다. .side{ position:relative; lef.. 2022. 3. 23. 다시한번 보는 border 시리즈(radius,solid,style등..) 1.border-radius 이와같이 둥글게 만드는데 사용했다. border-radius: 15px; 참고한링크는 https://developer.mozilla.org/ko/docs/Web/CSS/border-radius border-radius - CSS: Cascading Style Sheets | MDN CSS border-radius 속성은 요소 테두리 경계의 꼭짓점을 둥글게 만듭니다. 하나의 값을 사용해 원형 꼭짓점을, 두 개의 값을 사용해 타원형 꼭짓점을 적용할 수 있습니다. developer.mozilla.org 2.border:속성 선의종류를 그냥 줄로할거냐 점선으로 할거냐 등등... border: solid; 이와같이 사용했고, px까지지정해서 사용할 수 있다. https://develo.. 2022. 3. 23. 이전 1 2 3 4 5 6 다음
