728x90 📁 𝐡𝐭𝐦𝐥 & 𝐜𝐬𝐬8 No Image 📷 [CSS] css 차이점들 2023. 7. 30. No Image 📷 [TailwindCSS] tailwindcss 초기설정 하는법 [yarn] 얀 기준으로 설명하겠다. 우선 기존에 설치되어있는지 확인해보자 CMD tailwindcss --version //설치된 tailwindcss 버전 확인 yarn add -D taildwindcss //yarn 라이브러리를 활용하여 개발자모드로 tailwindcss를 다운로드하자 npx tailwindcss init // tailwindcss 초기설정?을 해주자 이때 다운로드가 안되는 경우도 있다. 다운로드가 필요한 버전으로 다운받아주자 tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{js,jsx,ts,tsx}'], // 2023. 7. 30. No Image 📷 [HTML & CSS] 부트스트랩 써보기 부트스트랩 시작 템플릿 이걸로 시작해보죠! 해당 템플릿이 적용되어있어야 밑에있는 사이트에서 CSS 이용할 수 있다. 부트스트랩 주소 들어가기 https://getbootstrap.com/docs/5.0/components/buttons/ Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. getbootstrap.com 해당 주소를 이용해서 활용할 수 있다. 2023. 1. 10. No Image 📷 [HTML & CSS] 폰트, 주석, 파일분리 폰트적용하기 폰트 적용은 간단하다. https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 해당 사이트에서 원하는 폰트 들어가서 해당 부분을 복사해서 안에 타이틀 아래에 넣어준다. 그리고 스타일 안에 * { 아래에 있는 CSS rules to specify families 코드를 넣어준다. } 넣어주고 로컬파일을 크롬창에서 보면 글꼴이 바뀐 모습이다. 주석 주석은 컨트롤 / 만 같이 눌러주면 된다. 이하 생략 CSS 파일분리 CSS 코드창이 너무 길어졌을 때! 간단하게 할 수 있는 방법이 있다. 같은 프로젝트 .. 2023. 1. 10. No Image 📷 [HTML & CSS] 자주 쓰이는 CSS 연습하기 위와 같은 화면을 만들어보자 우선 로그인페이지 아이디, 비밀번호를 입력해주세요 라는 애둘을 묶어줘야겠다 묶어주는건 로그인 페이지 아이디, 비밀번호를 입력하세요 ID: PW: 로그인하기 아 mytitle 저 묶음이 보여지게 style에서 background-color : green; 을 줬다. 출력하면 이렇게 나온다. 그럼 이제 저 칸길이를 조절해주자. 됐다. 그럼 이제 글씨 색은 하얀색으로 해보자 color : white; 이제 저 글씨 친구들을 가운데 오게 해야한다. 가운데 정렬!? text-align : center; 넣어줬다. 이제 남은건 저 글씨를 가운데로 내려주고 배경을 깔아준 뒤 둥글게 처리해야한다. background-image : url("https://www.ancient-origins... 2023. 1. 10. No Image 📷 [HTML & CSS] CSS 기초 이런식으로 안에 넣어주자 그 스타일안에 .mytitle 이라는 class의 색깔을 빨갛게 해주세요 라는 명령어를 넣어주자 그렇게 되면 바디에있는 mytitle 이라는 class를 가지고 있는 글자가 빨간색으로 나타나게 될거다. 로그인 페이지 ID: PW: 로그인하기 2023. 1. 10. No Image 📷 [HTML & CSS] 간단한 로그인 페이지 만들어보기 기본 로그인 뼈대를 만들어보자 우선 타이틀 로그인 페이지로 넣어주자 페이지의 타이틀을 작성해줬다. 그리고 큰 글씨의 로그인페이지라는 글을 띄워보자 로그인 페이지 로그인 페이지라는 큰 제목정도의 글씨가 나왔다. 아래와 같은 아이디와 패스워드 입력칸을 넣어보자 id: 빈칸 pw: 빈칸 로그인 페이지 ID: PW: 마지막으로 로그인하기 버튼을 넣어보자 로그인 페이지 ID: PW: 로그인하기 로그인 페이지 ID: PW: 로그인하기 이런 코드로 간단한 로그인 페이지를 완성해 보았다. 2023. 1. 10. No Image 📷 [HTML & CSS] 기본 내용 HTML은 뼈대 CSS는 꾸미기 HTML과 CSS에서 쓰이는 구역을 나누는 태그 나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 구역 내 콘텐츠 태그 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. h3~h6도 각자의 역할이 있죠. 비중은 작지만.. span 태그입니다: 특정 글자를 꾸밀 때 써요 a 태그입니다: 하이퍼링크 img 태그입니다: input 태그입니다: button 태그입니다: 버튼입니다 textarea 태그입니다: 나는 무엇일까요? 해당 코드들을 로컬파일로 열어보면 이런 화면이 출력된다. 2023. 1. 10. 이전 1 다음 728x90
