SASS란? CSS로 컴파일 되는 스타일 시트 확장 언어, CSS 전처리기의 하나. 개발은 Sass를 기반으로 한 후, CSS로 export한다. 브라우저는 Sass파일을 직접 읽지 못함. 그러기 때문에 일반 CSS로 컴파일 해야함. 1. 파일 분리 메인 SCSS파일은 언더스코어없이 작성하고 나머지 SCSS파일은 언더스코어로 파일명이 시작되어야 한다. 언더 스코어를 붙이는 이유 - 컴파일되는 것을 피하기 위해서이다. @import로 main.scss에서만 컴파일 될 수 있도록 붙이는 것임. styles.scss(메인 파일) = 나머지 SCSS파일들 import한다. 레이아웃별, 기능 별로 분할해서 사용가능하기 때문에 코드를 관리하기 편리해진다. ![](https://velog

Flex CSS에서 편리하고 멋진 기능인 Flex!!에 대해 알아보자 flex를 사용할 때 순서를 알아보자 Flex 정복👌👌 1. display : flex ; 선언하기 flex쓴다고 선언하기! 정렬하고자 하는 요소를 감싸는 부모요소 에게 display:flex 여기서 container 에게 display:flex 값을 주면 flex 적용! 2. 가로방향, 세로방향 정하기 기본값이 row(가로)이다. axis 알아보기

Float float 속성? 요소가 문서의 일반적인 흐름에서 제외되어 컨테이너의 왼쪽 or 오른쪽에 배치되게 하는 것. none : 기본값, 원래 상태 left : 자신을 포함하고 있는 박스의 왼편에 떠 있어야 함 right : 자신을 포함하고 있는 박스의 오른편에 떠 있어야 함 HTML 구성 스타일 구성 구현화면 float 적용해보기 여기서 A박스에 float:right;를 주면 어떻게 될까? -->

emmit 사용법 * emmit이란 강력한 자동완성 기능을 통해 HTML 작성속도를 향상시켜주는 플러그인 >## emmit 활용법 1. ! + tab HTML 문서를 처음 만들시 사용함. !+tab을 누르면 이렇게 HTML태그 , head태그, body태그 등 기본틀이 자동으로 만들어진다. 2. tag + Enter 태그 + Enter를 하게되면 태그쌍이 만들어진다. ex) h1 + Enter 이렇게 만들어진다. h1 + Tab도 가능하다. 3. tag + tag tag + tag이다. 바로 예를 들어보자. ex) h1+p 그리고 +태그를 계속해서 덧붙여가도 적용된다. ex) `h2+h

이력서 프로덕트를 만들어봄을 통해서 HTML연습. 이력서 구성에 대해서 설명하였다. HTML과 CSS가 제일 기초입니다! ex) 내용물입니다. //!DOCTYPE html html /html태그는 무조건 있어야 되는구나 DOCTYPE html 이란 웹문서가 어떤 버전의 HTML 언어로 작성되었는지 결정하는 기능. DTD(Document Type Declaration)를 통해서 현재의 웹문서가 어떤 버전의 HTML 기술로 작성되었는지 웹브라우저에 전달 코딩을 한다고 생각하기보다는 문서를 만든다고 생각하자!! footer같은 요소는 의미를 부여하는 요소이다. 안내문같은 의미이다. 각각에 의미를 부여하는 것이다. CSS는 순서를 지키지 않아도 괜찮다. 이두희씨가 강의해주셨다. html color code html 색깔 사이트 html border type margin-left:a