이안의 평일코딩

https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com CSS 프레임 워크 레이아웃 및 여러 컴포넌트 구성, 브라우저 호환성을 보장하는데 소요되는 시간을 최소화하기 위해 여러 웹 개발/디자인 프로젝트에 적용할 수 있는 CSS 파일 모음이다. 종류로는 Material UI, React Bootstrap, Semantic UI, Ant Design, Materialize 등이 있다. TailWindCSS는 HTML 안에서 CSS 스타일을 만들 수 있게 해주는 CSS 프레임 ..

z-index 웹사이트를 제작하는데 왼쪽사진과 같이 Navbar위로 이미지가 상단으로 올라가 당황했다. 하나만 기억하면 된다. 바로 CSS에 z-index로 우선순위를 매기면 되는 것. .Header { position: fixed; color: white; font-family: 'NanumSquare', sans-serif; background-color: #11ffee00; font-size:40px; font-weight: 400; width: 100%; height: 80px; top: 0; z-index:1; } Header라는 className을 가진 Navbar에 z-index:1을 넣어주면 가장 최상단으로 올라가 해결된다. z-index의 숫자가 낮을수록 우선순위로 밀리고 높을수록 우선순..

Styled-Components란? CSS보다 더 강력한 추상화로 자바스크립트를 사용해 스타일을 선언하고 유지보수가 가능하게 해주는 대표적인 CSS-in-JS 라이브러리다. 컴포넌트 단위로 추상화되어 모듈성을 갖는다. CSS는 명시적 정의가 없어서 부모 요소에서 자동으로 상속되는 속성이 있지만 CSS-in-JS의 경우 부모 요소 속성이 상속되지 않으므로 진정한 분리 법칙을 따른다. App.js import "./App.css"; import { Fragment } from "react"; function App() { return ( Hello Hello ); } App.css .button{ border-radius: 50px; padding: 5px; min-width: 120px; color: wh..

SASS란? CSS를 프로그래밍 언어스럽게 작성가능한 Preprocessor로 CSS에서 변수, 연산자, 함수, extend, import 등을 사용가능하게끔 해준다. 브라우저는 SASS문법을 모르기 때문에 SASS로 작성한 파일을 다시 CSS로 컴파일해야하는데 node-sass를 설치하면 알아서 해준다. node-sass 설치 설치는 npm install node-sass 또는 yarn이 있을 때 yarn add node-sass을 터미널에 치면된다. 그리고 SASS문법을 쓰고싶다면 .CSS 파일이 아닌 .SCSS로 만들면 된다. 그리고 import './파일명.scss'으로 불러온다. SASS 문법 1. 변수에 데이터를 저장 $변수명 : 변수에 넣을 값 Detail.scss $메인칼라 : #ff000..

2020.09.16(수) css1.jsp 70% https://mvnrepository.com => jaxb ==> jar파일 다운로드 => simple-json => jar.파일 다운로드 ================================ | | |======================= | | ================================ --%> css2.jsp id=wrap(container) 로고 => header => 날씨 , 실시간 검색어 =================================== 메뉴 => nav =================================== | 로그인 | 부가정보 | (aside) | 실제 출력 화면 (section) | | |..

2020.09.15(화) css1.jsp JRE System Library => 3DK변경 = WEB-INF => lib => ojdbc6.jar --%> CSS (Box-Model):내부 CSS bootstrap --%> css2.jsp 메뉴제작 --%> 다음 네이버 클릭하세요 자바 오라클 스프링 MyBatis 자바스트립트 Ajax React 이름 국어 영어 수학 홍길동 89 90 78 심청이 89 90 78 박문수 89 90 78 css3.jsp (1일차 EmpDAO.java이용) 출력할 데이터를 읽어 온다 EmpDAO dao=new EmpDAO(); ArrayList list=dao.empListData(); %> 사원 목록 사번 이름 직위 입사일 급여 css4.jsp 10000개의 레시피 레시피종..

2020.09.14(월) CSS => Selector > Jsoup > 1) 태그명 태그명{속성:값; 속성:값..} 2) ID ID는 중복이 없는 경우에 사용 #ID명 {속성:값; 속성;값..} *** 속성은이미 만들어져 있다 3) Class Class는 중복이 허용 .class명 {속성:값;속성:값..} ====> 데이터 수집이 좋다 4) 가상 선택자, 중복 선택자 2. 방법 1) 인라인 CSS 2) 내부 CSS 3) 외부 CSS 파일제작 => 재사용 3. 태그 => block 속성 : 태그가 전체를 화면을 차지하고 있다 다음줄에 출력 System.out.println() div, h1~h6... => inline 속성 : System.out.print() a, img, input... Selector..