본문 바로가기

CSS3

새로 알게 된 것들(1) 새로 알게 된 것들(1) Emmet Emmet은 HTML과 CSS 작성을 빠르게 도와주는 단축키 모음이다. VS Code에 내장되어 있는 플러그인이다. HTML과 CSS문법을 알고 있다면 높은 학습 곡선을 필요로 하지 않는다. (예제) .wrapper>h1{ Title }+.content wrapper라는 클래스이름(.클래스이름)을 가진 div태그 생성(태그이름이 없으면 div태그) div태그 하위에(>) "Title"이라는 문자열의 h1태그 생성 같은 자식 위치(+)에 content라는 클래스 이름을 가진 div태그 생성 Title nav>ul.nav>li.nav-item*3>a nav태그 하위에 nav라는 클래스 이름을 가진 ul태그 생성 nav-item이라는 클래스 이름을 가진 li태그 3개 생성(.. 2023. 8. 5.
소플의 처음 만난 리액트_실습13 소플의 처음 만난 리액트_실습13 styled-components - CSS 문법을 그대로 사용하면서 결과물을 스타일링된 컴포넌트 형태로 만들어주는 오픈소스 라이브러리 - 컴포넌트 개념을 사용하기 때문에 리액트와 궁합이 잘 맞음 - 태그드 템플릿 리터럴을 사용하여 구성 요소의 스타일을 지정 styled-components를 사용하여 스타일링해보기 실습 import styled from "styled-components"; const Wrapper = styled.div` padding: 1rem; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; background-color: lightgrey.. 2023. 8. 3.
나만의 웹 페이지 만들기 <MBTI 테스트> 나만의 웹 페이지 만들기 '패스트캠퍼스'에서 제공한 무료강의 中 MBTI 테스트 만들며 배우는 왕초보 코딩 https://fastcampus.co.kr/ 패스트캠퍼스 [직장인 실무교육] 프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공. fastcampus.co.kr 내 안에 숨어있는 직업캐 찾기! (sparkly-halva-1cddd3.netlify.app) 수업 열심히 따라가면서 만든 나의 결과물 !!!!! 내 안에 숨어있는 직업캐 찾기! 누구나 찰떡인 직업이 있어요! 내 안에 숨어있는 직업캐를 찾아보세요! prismatic-monstera-4c9d6a.netlify.app 확실히 무언가 배울때는 어떤 선생님을 만나냐에 따라서 학생.. 2023. 1. 6.
반응형