CSS9 [React] JSX 문법 - module.css 방법으로 style 적용 이는 컴포넌트 별로 별도의 module.css파일을 통해 독립된 스타일을 적용해주는 방법이다. 바로 예시를 통해 알아보자. -> 우선 별도의 css파일을 만들고 이 css를 적용할 컴포넌트 파일에 import를 해줘야한다.import styles from "파일명.module.css";- 위와 같이 작성해주면 되고 styles는 사실상 변수여서 아무 이름이나 해도 되지만 대부분의 사람들이 저렇게 작성하기 때문에 굳이 바꿀 필요도 없다.- 또한 파일명도 자신이 원하는 명을 적어주면 되는데 나는 보통 적용하려는 컴포넌트 파일의 명과 동일하게 작성하는 편이다. 1. 한개에 대해서 스타일 줄 때 restuarant_category에 대해서 style을 주고자 한다면 위와 같이 {styles.클래스명} 이렇게 작.. 2025. 4. 4. [CSS] overflow 이용해서 스크롤바 생성하기 >> overflow 속성을 이용하여 생성 가능하다- 자식요소의 크기가 부모 요소의 크기를 초과했을때 스크롤바를 생성하여 제어할 수 있다.- 수직방향, 수평방향, 그리고 두개 방향 모두를 제어할 수도 있다. >> overflow-x- 가로로 스크롤바 표시 >> overflow-y- 세로로 스크롤바 표시 >>overflow- 두 방향 모두 표시 >> overflow:scroll- 다음과 같이 작성해야 크기를 초과했을 때 스크롤바를 생성할 수 있다. >> overflow:auto- 내용물이 경계를 넘칠때에만 스크롤바가 붙는다. >> overflow:hidden- 내용물이 크기를 초과하더라고 스크롤바가 나타나지 않는다. 2024. 10. 20. [CSS] "display:flex" - flexbox 이용하여 가운데 정렬하는 법 >> display: flex- 하위 요소들을 똑같이 한줄에 배치하지만 정렬이 틀어지지 않고 유지되도록 한다.- flex라는 말처럼 유연하기 때문에 화면에 맞춰서 정렬이 되어 레이아웃에 용이하다.- 기본적으로 가로축이 기준이다. (flex-direction 속성을 이용해 변경 가능)- 이 속성을 사용할 때는 해당 요소의 직접적인 부모요소(상위요소)에 지정해야한다. >> display: flex- 위와 같이 작성하여 display 속성을 flex로 적어줘야 함 >> flex-direction- 내부 요소들의 정렬방향을 적어줘야 함(기본적으로 가로축(row)정렬임)- flex-direction : row = 가로축 정렬- flex-direction : column = 세로축 정렬 >> justify-cont.. 2024. 10. 20. 3. 이용약관에 대한 회원가입 페이지 만들기 - 다음 사진과 같이 이용약관에 대하여 페이지를 구성함- 이용약관의 내용 부분의 경우 생략하여 일부 내용만 추가하였기에 추후 사용시에는 변경해야 함 >> form 태그 내의 input 태그의 checkbox 타입 이용- 이용약관 동의를 받기 위해 checkbox를 이용했다.- 이는 활성화시 체크되어있는 박스로 렌더링 하는 기능을 가진다.- 를 작성하여 쓸 수 있다. >> overflow:scroll 이용- overflow를 통해 자식요소의 크기가 부모 요소의 크기를 초과했을 때 스크롤바 생성을 제어할 수 있다.- 이용약관의 세부적인 내용의 길이가 너무 길다보니 div 내에 scroll을 달아서 이를 조절했다.- 또한 이용약관 뿐만 아니라 전체적인 폼 태그에 대해서도 height를 정해두고 이를 넘어가면 .. 2024. 10. 20. 2. CSS로 개인정보 입력 회원가입 페이지 화면 디자인하기 - 다음 사진과 같이 css를 추가함- 이전에는 페이지 마지막에 있는 버튼의 값을 가입하기로 했었는데 생각해보니 개인정보입력을 한 후에 약관동의 내용이 필요하다고 생각하여 다음 버튼으로 수정함- 다음을 눌렀을 때 나올 페이지에 대해 만들어야 함 >> felxbox 이용- 뷰 포트나 요소의 크기가 불명확하거나 동적으로 변화할때 효율적으로 요소를 배치시킬 수 있다.- flexbox는 display:flex 속성을 줌으로써 만들 수 있다.- 나는 form 태그 내에 작성한 모든 글들에 대해서 컬럼을 기준으로 가운데 정렬을 하도록 했다.- 다음과 같이 작성하면 가운데 정렬이 된다.display: flex;flex-direction: column;justify-content: center;align-items: .. 2024. 10. 20. [CSS] Display 속성 중 inline과 block의 차이 >> inline과 span 태그- span 태그의 display 속성이 기본적으로 inline이다.- span 태그는 너비오 높이를 가지지 못한다. 즉, 텍스트를 작성하는데 주로 사용된다.- 이때 span 태그의 display 속서을 block로 바꾸게 되면 너비와 높이를 가지도록 변화시킬 수 있긴 하다. >> block과 div 태그- div 태그의 display 속성이 기본적으로 block이다.- div 태그는 너비와 높이를 가진다.- 이때 div 태그의 display 속성을 inline으로 바꾸게 되면 너비와 높이를 가지지 않도록 변화시킬 수 있긴 하다. ++ span과 div에 대해 작성한 글https://zldn.tistory.com/56 >> 실행화면 1. div와 span의 display.. 2024. 10. 2. 이전 1 2 다음
