stonesy

CSS(Cascading Style Sheets)는 웹 페이지의 스타일(디자인)을 정의하기 위한 언어로, HTML이나 XML같은 마크업 언어로 작성된 문서의 시각적 표현(색상, 레이아웃, 글꼴 등)을 담당한다. *CSS 전처리기전처리기는 CSS 확장 언어로 작성된 코드를 컴파일하여 일반적인 CSS로 변환한다.  Sass 등이 있다.장점1. 코드 재사용성 증가변수를 통해 색상, 글꼴 크기 등 반복적으로 사용하는 값을 한 곳에 정의하고 재사용할 수 있다.// 변수 정의$primary-color: #3498db;// 재사용body { background-color: $primary-color;}h1 { color: $primary-color;} 2. 코드 가독성 및 유지보수성 향상중첩을 지원하여, 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 🔎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)가 동적 활동..