CSS
-
css - Sass의 네스팅 (nesting)CSS/SCSS 2020. 5. 18. 10:00
SaSS란? : CSS를 보다 효율적으로 편리하게 사용하기 위해 만들어진 언어이다. SaSS를 쓰는 이유 : 리엑트는 index.js와 index.html로 여기서 각종 컴포넌트들이 합쳐지기 때문에 방대한 양의 css의 class이름들이 겹쳐서 오류가 난다. 하지만, SCSS의 네스팅(nesting) 기능을 사용하면 오류가 나지 않을 것이다. 그렇기 때문에 SCSS를 써야 한다. 예시로 알아보자. 소스는 여기서 확인! wjdxor133/westagram Contribute to wjdxor133/westagram development by creating an account on GitHub. github.com Login.css * { box-sizing: border-box; } body { back..
-
CSS - 인스타 클론(2)CSS/CSS 2020. 5. 1. 13:02
앞에서 인스타그램을 html/css를 이용해서 만들었다. 이제 이 로그인 화면에 기능을 넣어 보도록 하자. Event 구현할 기능은 아이디와 비밀번호에 각각 한 글자 이상 써야 버튼이 활성화되도록 해야 한다. 버튼 색깔이 원래 연한 파란색이었다가 -> 활성화되면 파란색으로! [ html ] 로그인 [ javascript ] const userId = document.querySelector("#userId"); const userPw = document.querySelector("#userPw"); const loginBtn = document.querySelector(".loginBtn"); function check() { if (userId.value.length === 0 && userPw.val..
-
CSS - 개구리 게임(2)CSS/CSS 2020. 4. 29. 10:48
Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 저기에 있는 개구리들을 연못 색깔에 알맞게 배치해야 한다. 처음에는 flex-direction: column; 속성을 이용해서 가로를 기준으로 수직 정렬을 시킨다. #pond { display: flex; flex-direction: column; } 이제 여기서, 저 개구리 무리들을 밑으로 내리기만 하면 된다. 그러면 align-items: flex-end; 속성을 적용시켜보자. #pond { display: flex; flex-direction: column; align-items: flex-end; } 하지만, 개구리 무리들이 오른쪽으로 이동되었다. 이유를 찾아보니, Flex의 방향이..
-
CSS - flex 개구리 게임(1)CSS/CSS 2020. 4. 28. 17:26
Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com flex 속성을 익히고자 Flexbox Froggy라는 게임을 했다. 1단계에서 9단계까지 순조롭게 진행되었다. 하지만, 10단계에서 막혔는데 어떤 문제였느냐..? 바로! 이 개구리들을 같은 색깔의 연못에 올려놔야 한다. 일단, flex-direction: row-reverse;로 접근했다. #pond { display: flex; flex-direction: row-reverse; } flex-direction: row-reverse; 속성으로 가로 정렬에서 역순으로 배치하기에 성공했다. 이제 이 개구리들을 옆으로 옮기기만 하면 되는데, justify-content: flex-start를..
-
CSS - 인스타 클론(1)CSS/CSS 2020. 4. 28. 16:53
보이는 사진처럼 로그인 폼을 만들었다. 하지만, 보이는 것처럼 input 태그와 button태그에 그림자가 껴있는 걸 볼 수 있다. 로그인 * { box-sizing: border-box; } body { background-color: rgba(var(--b3f, 250, 250, 250), 1); min-height: 100vh; display: flex; align-items: center; } .login-form { margin: 0 auto; display: flex; flex-direction: column; background-color: white; border: 1px solid rgba(var(--b6a, 219, 219, 219), 1); width: 350px; height: 30..
-
CSS - flexbox 정리CSS/CSS 2020. 4. 25. 16:47
일기 및 회의록 더보기 오늘은 위코드 4일차가 되는 날이다. 계속 repl.it에서 자바스크립트 문제만 풀어나가고 있었다. 오후 3시 쯤에 html/css QnA 시간이 있어서 QnA를 들으러 위워크 8층 회의실에 들어갔다. QnA시간에 html이 무엇인가?, html, css, javascript를 하나로 표현하세요. 이런 질문들을 해주시는데 아무말도 할 수 없었다. 거기서 나는 너무 repl.it의 과제 풀기에만 급급했고, 정확한 개념을 숙지하지 못했다. html과 css에 대해 전반적으로 정리를 해주셨고, 그 중 flexbox라는 것을 설명 해주셨는데 잘 모르는 내용이라 어려웠지만 많이 쓰이는 속성들 위주로 알려주셨다. 또, 공부하는 방법이나 여러 가지 조언을 해주셔서 굉장히 좋았다. 이 QnA가 ..
-
CSS - 레이아웃의 모든 것 정리CSS/CSS 2020. 4. 21. 11:14
레이아웃에 대해 알아보자. 1. position 속성 html 코드를 작성하면 위에서 아래로 작성한 순서대로 페이지에 그려졌다 하지만, CSS의 position 속성을 사용하면, html 코드와 상관없이 어느 위치에서나 요소를 그릴 수 있다. position에서 사용하는 속성 값은 4개가 존재한다. ▶ position: static; ▶ position: relative; ▶ position: absolute; ▶ position: fixed; relative relative 말 그대로 상대 위치이다. 기본 위치를 기준으로 좌표 프로퍼티를 사용하여 위치를 이동한다. div2에 position: relative의 top, left에 각각 16px를 할당하면 아래와 같이 position: static이 가질..
-
CSS - 문법CSS/CSS 2020. 3. 2. 23:17
오늘은 CSS 문법에 대해 알아보자! 다음은 가장 간단한 CSS 코드이다. h1 { color: red} h1, color, red 세 개의 단어가 의미하는 것은 무엇인가? 이 세 개의 단어들을 각각 선택자, 속성, 값이라고 한다. h1 -> 선택자(selector) 선택자(selector)란 무엇을 꾸밀지 정한다. h1은 h1 요소를 꾸미겠다는 뜻이다. color -> 속성(property) 속성(property)이란 어떤 모양을 꾸밀지 정한다. color는 색을 꾸미겠다는 뜻이다. red -> 값(value) 값(value)은 어떻게 꾸밀지 정한다. red는 빨간색으로 만들겠다는 뜻이다. 즉, CSS 코드는 이렇게 구성된다. selector { property: value} /* 선택자 {속성: 값}..