stonesy

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard [코드캠프] 강력한 CSS 강의 - 인프런 CSS만 집요하게 모아놓은 강의 보셨나요? 이 강의에서는 총 2가지 프로젝트를 진행하면서, 가장 기본적인 레이아웃 구성부터 반응형까지 구현하게 될 거에요! 자, 이제 준비되셨다면 시작해볼까 www.inflearn.com 🔎grid 레이아웃 float>flex>grid float: 현재 거의 사용되지 않음! flex, grid: 상황에 따라 혼용 flex는 1차원적 구조→row 혹은 column ✔️grid-template-rows grid의 행의 개수 및 크기를 지정할 수 있다. g..

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard [코드캠프] 강력한 CSS 강의 - 인프런 CSS만 집요하게 모아놓은 강의 보셨나요? 이 강의에서는 총 2가지 프로젝트를 진행하면서, 가장 기본적인 레이아웃 구성부터 반응형까지 구현하게 될 거에요! 자, 이제 준비되셨다면 시작해볼까 www.inflearn.com 📖position/transition 🔎단위 심화 calc(): 괄호 안의 사칙연산을 수행한 결과를 속성값으로 사용한다. ⇒곱셈과 나눗셈의 경우는 공백의 유무가 상관없지만, 덧셈과 뺄셈의 경우 공백이 필수적이다. 🔎position ✔position이란? HTML 요소..

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard [코드캠프] 강력한 CSS 강의 - 인프런 CSS만 집요하게 모아놓은 강의 보셨나요? 이 강의에서는 총 2가지 프로젝트를 진행하면서, 가장 기본적인 레이아웃 구성부터 반응형까지 구현하게 될 거에요! 자, 이제 준비되셨다면 시작해볼까 www.inflearn.com 🔎캐스캐이딩(Cascading) 수많은 스타일 요소 중 어떤 스타일을 브라우저에 그릴지 결정해주는 CSS 우선순위 적용 원리 중요도: CSS가 선언된 위치에 따라 우선순위가 결정된다.(브라우저 스타일 시트

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard [코드캠프] 강력한 CSS 강의 - 인프런 CSS만 집요하게 모아놓은 강의 보셨나요? 이 강의에서는 총 2가지 프로젝트를 진행하면서, 가장 기본적인 레이아웃 구성부터 반응형까지 구현하게 될 거에요! 자, 이제 준비되셨다면 시작해볼까 www.inflearn.com 📖CSS 상속 🔎상속 상속: 부모가 자식에게 무엇을 물려주는 것 바깥에 있는 박스입니다. 안쪽에 있는 박스입니다. .container{ color: red; } ⇒자식요소에도 color: red;가 적용된다. 이는 부모 요소의 속성이 자식 요소에게도 상속되었기 때문이..

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard [코드캠프] 강력한 CSS 강의 - 인프런 CSS만 집요하게 모아놓은 강의 보셨나요? 이 강의에서는 총 2가지 프로젝트를 진행하면서, 가장 기본적인 레이아웃 구성부터 반응형까지 구현하게 될 거에요! 자, 이제 준비되셨다면 시작해볼까 www.inflearn.com 📖CSS 레이아웃 레이아웃: 화면의 요소를 적절히 배치하는 것 🔍선택자(Selector) 2 전체 선택자 *{ property: value } 그룹 선택자 .class1, .class2{ property: value } 가상 클래스 선택자 가상 클래스 선택자란 실제로..

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard [코드캠프] 강력한 CSS 강의 - 인프런 CSS만 집요하게 모아놓은 강의 보셨나요? 이 강의에서는 총 2가지 프로젝트를 진행하면서, 가장 기본적인 레이아웃 구성부터 반응형까지 구현하게 될 거에요! 자, 이제 준비되셨다면 시작해볼까 www.inflearn.com 🔍font 기본 속성 ✔️font-size(폰트 사이즈) 텍스트의 크기를 지정한다. font-size: 18px ✔️font-weight(글자 두께) 텍스트의 두께를 지정한다. font-weight: 600 일반적인 regular에 해당하는 값이 400이다. ✔️fo..

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard [코드캠프] 강력한 CSS 강의 - 인프런 CSS만 집요하게 모아놓은 강의 보셨나요? 이 강의에서는 총 2가지 프로젝트를 진행하면서, 가장 기본적인 레이아웃 구성부터 반응형까지 구현하게 될 거에요! 자, 이제 준비되셨다면 시작해볼까 www.inflearn.com 📖CSS Basic 🔍웹 브라우저란? 인터넷 통신을 할 수 있는 프로그램을 통틀어서 “웹 브라우저”라고 한다. 이때, 웹 브라우저가 읽을 수 있는 언어는 HTML, CSS, JS 세가지뿐이다. HTML이 문서의 기본구조(뼈대), JS(JavaScript)가 동적 활동..

Nomad Coders 강의는 예전에 들었었는데 노션에 정리한 내용을 블로그에도 정리하면 좋을 것 같아서 복습 겸 정리를 해보았다. React 프로젝트에 CSS를 적용하는 방식에는 직접 CSS를 적용하는 방식, module.css를 사용하는 방식, styled-components를 사용하는 방식 등이 있다. 1. 직접 CSS를 적용하는 방식 가장 단순한 방식인데, hover 등의 이벤트 등을 적용할 수 없다. function Header(){ return( Header ) } 2. module.css를 사용하는 방식 내가 프로젝트를 진행할 때 가장 많이 사용하는 방식이다. 파일이름.module.css라는 이름을 가진 파일을 만들고 styles를 불러와 사용한다. *Header.tsx 파일 import s..

1.2개의 웹 페이지를 작성하라. 첫 번째 웹 페이지에서는 이름과 학번을 입력받아 세션 스토리지를 저장한다. 그리고 ' 이름으로 학번 검색 페이지로'의 링크를 클릭하면 두번째 페이지를 로드한다. 이 페이지에서는 이름을 입력받고 버튼을 클릭하면 세션 스토리지에서 검색하여 학번을 출력한다. 이름과 학번은 여러 개 저장 가능하다. 이름으로 학번 저장 저장할 이름 저장된 학번 이름과 학번 검색 페이지로 이름으로 학번 검색 검색할 이름 검색된 학번 이름과 학번 저장 페이지로 2. 본문의 '실습: 4' 세션 스토리지 응용'절에서 만든 sessionStorage.html을 2개의 페이지로 분할 작성하여 한 페이지에는 구입 리스트를 저장하고 다른 페이지에는 구입 리스트에서 품목명을 입력하여 개수를 검색하도록 수정하라...

1.다음 HTML 페이지와 출력 결과를 참고하여 원을 그리는 drawCircle() 함수를 작성하라. drawCircle() 만들기 2.다음 HTML 페이지와 출력 결과를 참고하여 다각형을 그리는 drawPolygon()을 작성하라. drawPolygon() 만들기 3.올림픽 오륜기를 캔버스에 출력하는 웹 페이지를 작성하라. 오륜기 그리기 4.캔버스를 이용해서 자신의 사진 위에 자신의 이름을 출력하는 웹 페이지를 작성하라. (1) 사진과 이름 출력 (2) 사진과 이름 출력 5.폼으로부터 여러 속성을 입력받아 캔버스에 사각형을 그리는 웹 페이지를 작성하라. 폼으로 사각형 그리기 x y width height 선굵기 선색 그리기 지우기 6.폼으로부터 여러 속성을 입력받아 캔버스에 원호를 그리는 웹 페이지를 ..