# CSS3

142개의 포스트
post-thumbnail

Vue.js API, Methods (1/ 2)

뷰의 메서드는 특정 기능 별로 묶을 수 있는 자바스크립트 함수를 의미한다.메서드는 흔히 뷰 템플릿의 버튼 이벤트 처리부터 HTTP 통신까지 다양한 성격의 코드로 구성된다.메서드를 선언하는 방법은 아래와 같다.메서드를 이용해서 버튼 클릭 이벤트를 처리하면 다음과 같다.위

약 7시간 전
·
0개의 댓글
·
post-thumbnail

Syntax : 문법

CSS는 HTML 요소의 style(design, layout etc)을 정의하는데 사용된다.이를 위해서 선행되어야하는 것은 스타일을 적용하고자 하는 HTML 요소를 선택할 수 있어야 한다.셀렉터는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공

2일 전
·
0개의 댓글
·

20일차

어느 웹사이트에서나 이렇게 아이디,비번, 개인정보를 입력하는 창을 쉬이 볼 수 있다. 바로 form문 이다.이번엔 fieldset 과 legend 를 이용한 form문이다.The fieldset tag is used to group related elements in

5일 전
·
0개의 댓글
·
post-thumbnail

Vue.js Template과 Components

뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미한다.템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다.데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법이다.가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)이다.div

6일 전
·
0개의 댓글
·
post-thumbnail

Vue.js 시작하기

다른 주요 프론트엔드 프레임워크(Angular, React)와 비교했을 때 뷰(Vue)의 가장 큰 강점은 바로 시작하기가 정말 쉽다는 점이다.CDN으로 Vue.js 코드를 가져와 바로 Vue 인스턴스를 하나 생성하여 간단한 페이지를 생성해보았다. 기존의 구현된 시스템에

2022년 9월 14일
·
0개의 댓글
·

SCSS 사용하기

SCSS는 CSS를 편하게 사용하고 코딩하듯이 사용하기 위해서 만들어졌다. Sass 버전 3에 추가된 것이 Scss이다.

2022년 9월 4일
·
0개의 댓글
·

[React/CSS] Storybook

🔍 Stotybook 👀 Setting 👀 실습 예시 ✔ Styled Components를 사용해서 만든 컴포넌트를 스토리로 만들기

2022년 8월 26일
·
0개의 댓글
·

[React/CSS] Styled Components

🔍 Styled Components 👀 setting 👀 문법 1. 컴포넌트 만들기 2. 컴포넌트 재활용 3. Props 활용 4. 전역 스타일 설정 👀 실습 예시

2022년 8월 26일
·
0개의 댓글
·

[React/CSS] Component Driven Development(CDD)

🔍 CDD 👀 구조적으로 CSS를 작성하는 방법 👀 CSS 방법론들의 특징, 장단점

2022년 8월 26일
·
0개의 댓글
·
post-thumbnail

My AgoraStates 만들기

section1 마지막 유닛에서 솔로 프로젝트로 진행했다.Advanced 파트가 너무 어려웠다😂Bare Minimum 풀고나서 css 대충 끄적이다가 제출하고, 나중에 advanced랑 같이 css도 수정해야지 생각만 하고 미루다가 이제서야 했다..advanced 파

2022년 7월 31일
·
0개의 댓글
·
post-thumbnail

유효성 검사: Sign-up 페이지 만들기

유효성 검사(validation) 실습 예시- 회원가입 페이지 만들기

2022년 7월 17일
·
0개의 댓글
·
post-thumbnail

Calculator 만들기

기존에 작성했던 HTML문서와 CSS파일 + Javascript로 계산기를 구현하여 Calculator를 만들었다. javascript는 코드스테이츠에서 제공받은 js파일에서 구현했고, nightmare 파트는 레퍼런스를 보고 추가했다....😂

2022년 7월 6일
·
0개의 댓글
·
post-thumbnail

[HTML/CSS] Calculator Mock-up

Calculator Mock-up

2022년 7월 4일
·
0개의 댓글
·
post-thumbnail

Flexbox Froggy 정답

Flexbox Froggy 정답

2022년 7월 2일
·
0개의 댓글
·
post-thumbnail

CSS Diner 정답

CSS Diner

2022년 7월 2일
·
0개의 댓글
·

[CSS] Layout & Flexbox

🔍 Layout 와이어프레임(Wireframe) 목업(Mock-Up) 👀 화면을 나누는 방법 🔍 Flexbox(CSS) 👀 부모 요소에 적용해야하는 Flexbox 속성 ✔ display: flex 1. flex-direction: 2. flex-wrap:

2022년 7월 2일
·
0개의 댓글
·

[CSS] CSS Selector

🔍 CSS Selector 👀 기본 셀렉터 ✔ 전체 셀렉터 ✔ 태그 셀렉터(그룹 셀렉터) ✔ id 셀렉터 ✔ class 셀렉터 ✔ attribute 셀렉터 👀 자식/후손/형제 셀렉터 ✔ 자식 셀렉터 ✔ 후손 셀렉터 ✔ 형제 셀렉터 ✔ 인접 형제 셀렉터 👀 기타

2022년 6월 30일
·
0개의 댓글
·

[CSS] 박스 크기 측정 기준

👀 박스 크기 측정 기준 ✔ 1. Content-box ✔ 2. Border-box

2022년 6월 30일
·
0개의 댓글
·

[CSS] 박스를 구성하는 요소

👀 박스를 구성하는 요소 ✔ 1. Border (테두리) ✔ 2. Margin (바깥 여백) ✔ 3. Padding (안쪽 여백) ✔ 4. Contents ✔ 박스를 벗어나는 콘텐츠 처리

2022년 6월 30일
·
0개의 댓글
·

[CSS] 박스모델

👀 박스모델 ✔ 줄 바꿈이 되는 박스 vs 옆으로 붙는 박스 🔗 Block vs Inline-block vs Inline 박스 비교

2022년 6월 30일
·
0개의 댓글
·