CSS26 [SASS] 리액트에서 시작하기 터미널에서 Sass를 다운 받는다. npm i sass yarn add sass categories.styles.scss 파일을 만든다 App.js에서 import 하기 2022. 5. 10. CSS vs SASS 다음과 같이 3겹으로 된 부모 자식 태그가 있는 경우 css에서 작업해야 하는 경우 부모 태그를 모두 적어주어 다음과 같이 나타낼 수 있다. 브라우저에는 자식 태그가 위로 가므로 다음과 같은 순서로 보일 것이다. 하지만 SASS를 사용하면 더 편리해진다. nesting이 가능해서 부모 태그 안에 내용을 적어주면 된다. 2022. 5. 10. [CSS] sign-up 페이지에서 z-index 활용 부트스트랩에서 아래와 같은 Sign-up 페이지를 가져왔는데 코드를 그대로 복사를 한 거 같은데 이상하게 버그가 발생했다. 문제점은 입력하려고 빈칸을 클릭하면 파란색 테두리의 아랫 부분이 씹혀 있는 것을 볼 수 있다. First Name 클릭시 Last Name 클릭시에도 하지만 마지막 이메일 입력은 모든 테두리 다 잘 보인다. css에는 아래와 같은 코드가 이미 있는데 z-index가 적용이 안되고 있는 것은 아닐까 하는 생각이 들었다. 그래서 html에서 input에 각각 div를 씌워 class="form-floating"을 적어주고 css에서는 이 div에 position:relative;를 주어 각 div에 z-index가 적용되도록 했다. 다행히 문제가 해결되었다. 이제는 클릭시 해당 div가.. 2021. 12. 15. CSS] selector 선택자 문법 여러 태그에 같은 효과 selector1, selector2 { 2021. 7. 25. CSS] class / id / pseudo class css syntax란 css 언어의 문법을 말한다. 기본 syntax selector{ property: value; } selector 효과 받을 대상 who? property: 무엇을 바꿀까 what? value; 어떻게 또는 얼마나 바꿔줄까 how? property 배열은 알파벳 순서로 한다. Tag selector html에 있는 태그에 효과를 준다. Class selector 예를 들어 이미지 두 개 중 하나에만 효과를 주고 싶을때 img 태그에 효과를 줘버리면 전체 이미지에 같은 효과가 들어가게 된다. 한 군데만 효과를 주고 싶으면 class로 따로 지정해 준다. class selector가 tag selector에 적용된 효과를 덮어버리기에 class에 들어간 효과가 보인다. class 사용.. 2021. 7. 25. Bootstrap] Media-quary / 폰 화면에 반응형으로 만들기 Media query란 무엇인가? 특정 상황이 됐을 때 적용되는 css 코딩 https://www.w3schools.com/cssref/css3_pr_mediaquery.asp https://www.w3schools.com/css/css3_mediaqueries_ex.asp 자주 쓰이는 Media query 타입 Media print h1 {color: red;} 이라하면 화면에서 h1색을 빨간색으로 바꾸라는 것이지만 @media print { h1 {color: red;} } @media print로 감싸면 print할 때만 빨간색으로 하라는 의미가 된다. Media screen break point 사용 화면을 점점 줄였을 때 어느 지점에서 설정된 화면으로 전환할 지 설정 Media (max-widt.. 2021. 7. 22. CSS] Z-index 제트 인덱스 z-index 사용 전 z-index 사용 후 A 파트가 B 파트 속으로 들어가 보인다. 휴대폰 아래 부분을 아래에 있는 흰바탕 안으로 집어 넣고 싶을 때 z-index를 사용한다. html 기본 포지셔닝 z-index를 사용하기 전에 html 기본 포지셔닝을 알아야 어떤 게 먼저 보이는 게 기본 설정 되어있는지 알 수있다. 1 부모, 자식 태그가 같이 있을 때 자식 태그가 화면 위에 위치한다. 자식 태그는 부모 태그 위에 보여진다. 부모 태그(div)는 보라색, 자식 태그 (h1)은 황토색인데 황토색이 먼저 보이고, 보라색이 그 밑에 깔려있다. 자식태그가 우선 순위에서 앞선다. 2. 코드가 위에서부터 아래로 내려가는 순서대로 화면 디스플레이도 순서대로 나타난다. html 순서대로 나옴 1,2,3 모두에.. 2021. 7. 20. Bootstrap, Bootsnipp] 부트스트랩 탬플릿 사용하는 법 탬플릿을 제공하는 사이트 1. Bootsnipp.com https://bootsnipp.com/ 2. Bootstrap Examples Bootstrap Example에서 원하는 템플랫을 선택할 수 있다. https://getbootstrap.com/docs/5.0/examples/ 탬플릿 코드 복사해 오는 법 원하는 탬플릿을 클릭해 해당 페이지에 들어간 후 빈 공간에 오른쪽 버튼 눌러 맨 마지막 inspect를 클릭한다. 가져오고 싶은 태그를 선택한 후 copy -> Copy element 를 눌러 복사한 후 붙여넣기 하여 사용한다. 2021. 7. 20. Bootstrap] 슬라이드 (Carousel) 만들기 Bootstrap에서 Carousel(슬라이드) 찾는 법 Docs -> Components -> Carousel (카러즐) https://getbootstrap.com/docs/5.0/components/carousel/ 부트스트랩에서 코딩 복사해서 붙이기 carousel 기타 옵션 슬라이드 자동 재생 스피드 조절 interval: 5000ms(5초)로 기본 설정. 5초 후에 다음 슬라이드 자동으로 보여진다. 3초 후로 바꿔보기 data-bs-interval="3000" 마우스 올렸을 때 슬라이드 자동실행 멈춤 data-bs-pause="hover" 슬라이드로 안하고 싶을 때 slide를 클래스에서 삭제한다. 자동 재생 멈추고 싶을 때 ride를 false로 설정해 준다. control button 살펴.. 2021. 7. 20. CSS] 이미지 기울이기, 사이즈 조절, 원으로 만들기 이미지 기울이기 html 이미지에 클래스 이름을 정해주고 css에서 width를 조절해서 크기를 정해준다. rotate(숫자deg)로 얼마나 회전할 지 정한다. 사각 이미지 원으로 만들기 border-radius: ;로 조절한다. 모서리가 점점 깍인다. border-radius: 20%; 일 때 border-radius: 50%; 일 때 원모양이 되었다. 2021. 7. 19. 아이콘 붙이기 / Font Awesome 아래와 같은 아이콘을 불러와서 아이콘 색과 크기를 변경해 보자. 아이콘 불러오기 1. Font Awesome에서 회원가입(무료)을 해야한다. 유료로 있긴하지만 난 무료만 사용하고 있다. Font Awesome 링크 https://fontawesome.com/ 2. 회원 가입을 하면 CDN 주소을 주는데, 이 CDN을 복사해서 내 html head에 붙여 넣는다. 3. 그리고 나서 원하는 아이콘을 검색한 후 마음에 드는 아이콘을 클릭한다. 4. 아이콘 주소를 복사한다. 5. html 원하는 자리에 붙여넣기 한다. 아이콘 삽입 전 아이콘 삽입 후 아이콘 크기 조절 사이트에서 제공하는 크기를 참고해서 원하는 사이즈를 클래스 안에 적어준다. 아이콘 색 변경 아이콘 색을 바꿀 때는 따로 클래스 이름을 지정해 주고.. 2021. 7. 19. Bootstrap] 버튼 만들기 부트스트랩 버튼 만들기 클래스에서 btn을 입력하면 부트스트랩 버튼을 불러온다. 부트스트랩 버튼 색지정 부트스트랩 위 색깔 표를 보면 각 색마다 이름이 정해져 있다. btn-primary 클래스를 추가하면 이미 설정된 파란색이 나온다. Primary 파랑색 Secondary 회색 Success 녹색 Danger 빨강색 Warning 노랑색 Info 하늘색 Light 흰색 Dark 검은색 Link 링크 밑줄 원하는 색이 없을 때 사용자 색 지정 1. 새로운 클래스(card-btn)를 하나 만들고 css에서 따로 설정해 준다. 2. 그 전에 html head에서 css 링크가 bootstrap 링크보다 아래 위치해 있어야 css가 적용된다. 3. css에서 원하는 색 지정한다. 4. 결과물 보더로만 버튼 만.. 2021. 7. 18. Bootstrap] container/ container-fluid container 반응형으로 설정된 박스 화면 사이즈 바뀌면 알아서 반응형으로 박스 사이즈도 변형해 준다. 여유 공간도 알아서 바뀌는데 이게 싫을 수 있다. 화면을 꽉차게 해서 내가 원하는 만큼 padding을 주는 것이 더 편리하다. 전체가 꽉차게 하려면 container-fluid를 사용해야 한다. padding은 css에서 준다. container-fluid 화면의 사이즈 변경할 때 마진 없이 꽉참. 항상 width가 100% css에서 여유 공간을 따로 설정할 수 있어 통제가 가능하다. 전체 화면에서 여유 공간주기 내용물들을 큰 박스에 담아 container-fluid를 먼저 주고 나서 css에서 여백 크기를 조절하면 전체 여유 공간 조절하기에 편하다. css에서 위아래, 양옆으로 패딩주기 Boo.. 2021. 7. 11. Bootstrap] 반응형 만들기 Grid Layout system 반응형이란? 데스크탑-> 태블릿-> 모바일 화면 사이즈가 바뀔 때 화면 배열도 바뀌는 것을 말한다. Bootstrap은 반응형을 만들기 쉽다. 반응형 예시 데스크탑 화면 - 사진 4개 나옴 태블릿 화면 - 사진 3개 나옴 폰 화면 - 사진 2개 나옴 코딩하기 html head에 bootstrap을 연결해준다. bootstrap 홈페이지에 들어가 Get Startd에 들어가면 나오는 아래 내용을 html head에 넣는다. 클래스를 col로만 주었을 때 element 넣은 갯수 만큼 알아서 균등하게 자리를 차지한다. 화면을 줄여도 사이즈는 변하지만 아래줄로 떨어지는 것 없이 그대로 같이 붙어 있는다. 화면을 줄였을 때 클래스를 col-숫자로 주었을 때 클래스를 col-6, col-4, col-3,, 등 c.. 2021. 7. 9. Bootstrap] 메뉴바 만들기 (네비게이션바) 메뉴바로 가기 부트스트랩에서 docs -> components -> navbar 들어가기 쭉 보면서 마음에 드는 메뉴바 선택한다. navbar(메뉴바) 만들기 navbar -> nav 선택 nav-item : 기본적으로 vertical로 설정되어 있음 navbar-expand : nav-item이 기본적으로 vertical로 설정되어있는 것을 가로로 바꿔줌. navbar-expand-lg : large 데스크탑 사이즈로 볼 때 메뉴가 가로로 다 보이고 화면 접으면 메뉴 햄버거 버튼으로 들어감. navbar-expand-md: medium 태블릿 사이즈까지 메뉴가 가로로 다 보이고 화면 접으면 메뉴 햄버거 버튼으로 들어감. navbar-expand-sm: small 폰 화면 사이즈까지 가로로 메뉴가 다보임.. 2021. 7. 8. Bootstrap 시작 Bootstrap 트위터에서 무료로 배포한 프리, 오픈 소스 Github에서 두번째로 많은 별을 받은 repository이다. Responsive 기기에 따라 보여 지는 화면 사이즈가 다르다. 그 화면 사이즈에 맞게 레이아웃이 변하는 것을 말한다. adaptable layout Pre-styled Elements 미리 만들어진 것을 복사 붙여넣기 해서 사용한다. Bootstrap 다운로드 https://getbootstrap.com/docs/5.0/getting-started/download/ 다운로드 받으면 dist 파일이 뜨고, 그 안에 보면 css, js 파일이 있다. css 파일에 들어가서 bootstrap.css를 vscode로 열면 이미 정해놓은 css 효과들을 볼 수 있다. 거기에 있는 클래.. 2021. 7. 6. CSS] float, clear float 사용하기 사진을 왼쪽으로 글씨를 오른쪽으로 위치하고 싶을 때 table을 만들지 않고, float로 할 수 있다. css에서 해당 이미지에 float: left;로 줘서 이미지를 왼쪽으로 가게 하고, 오른쪽 마진을 30px 만큼 주었다. clear 사용하기 이미지 옆에 타이틀은 놔두고, 내용은 밑으로 보낼 때 밑에 보낼 내용을 html에서 클래스로 지정해주고 css에서 그 클래스에 clear: left; 를 준다. clear는 float를 무효화한다. 2021. 7. 5. CSS] 사이즈 px, %, em, rem 고정된 사이즈 px font-size: 90px 픽셀은 다이나믹 사이즈가 아니다. 고정된 사이즈로 기기 설정에서 폰트를 크고, 작게 하거나 화면을 크고, 작게 만들어도 그에 맞게 변하지 않는다. 다이나믹 사이즈 % font-size: 100%; 이라고 설정하면 기본 값은 16px이다. 90px만큼 원한다면 90/16 = 562.5 % 정도가 된다. font-size: 562.5%; 로 해주어야 한다. em html에서 em태그는 emphasize로 글자를 이탈릭 사이즈로 바꿀때 사용하였지만 크기를 조절할 때는 완전히 다르다. 여기서 em은 M을 발음하는 것이고 예전에 M사이즈 만큼을 말했다고 한다. 지금은 1em(M)= 16px이다. 90px을 원하면 font-size: 5.625em; 또는 %으로 설정.. 2021. 7. 5. CSS] 폰트 종류, 구글 폰트 연결하기 폰트 자주 쓰는 폰트 1. Serif: 끝에 장식이 들어간 형태이고 2. Sans-serif: 끝 장식이 없는 형태이다 3. monospace: 각 알파벳마다 같은 가로 길이를 가지고 있다. 4. Cursive: 손글씨 느낌 5. Fantasy https://www.w3schools.com/css/css_font.asp Web safe fonts 모든 브라우저와 디바이스에 설치되어 있는 폰트 fallback fonts, font family 내가 설정한 폰트가 디바이스에 없으면 그 다음에 적은 폰트를 찾으라고 설정해 놓다. css에서 font family를 이용하여 우선 순위 대로 나열한다. Tahoma 폰트가 1순위이고 이 폰트가 없으면 Verdana가 2순위 이 것도 없으면 sans-serif 사용... 2021. 7. 5. CSS] 마진 margin 갯수 설정 자세한 사항 margin/mdn https://developer.mozilla.org/en-US/docs/Web/CSS/margin 벨류 1개 일 때 : 4면 모두에 적용 벨류 2개 일 때 : 위아래 / 양옆 벨류 3개 일 때 : 위 / 양옆 / 아래 벨류 4개 일 때 : 시계 방향 - 위 / 오른쪽 / 아래 / 왼쪽 2021. 7. 4. CSS] position 속성/ static, relative, absolute, fixed 밸류 알아보기 Postion을 배우기 전에 먼저 html 기본 포지셔닝을 알고 있어야 한다. HTML 기본 설정된 포지셔닝 먼저 html에서 기본 설정되어 포지셔닝은 무엇이 있는지 알아보자. 1. 컨텐츠 사이즈에 따라 박스 사이즈가 결정된다. h1~h6, p 등처럼 기본 설정이 block인 경우에도 가로 길이는 컨텐츠 길이와 상관없이 화면 끝까지 길지만, 세로 길이는 컨텐츠에 따라 길이가 결정된다. 이미지등은 가로, 세로가 이미지 크기에 따라 박스 사이즈가 결정된다. 2. 코드가 위에서부터 아래로 내려가는 순서대로 화면 디스플레이도 순서대로 나타난다. 3 자식 태그는 부모 태그 위에 보여진다. 부모 태그(div)는 보라색 자식 태그 (h1)은 황토색인데 황토색이 먼저 보이고, 보라색이 그 밑에 깔려있다. 자식태그가 우.. 2021. 6. 29. 이전 1 2 다음
