천천히, 꾸준히

😺 Study/CSS, SCSS

// 반복적인 코드 '@mixin 이름'으로 설정하고, 쓸 때마다 요소에 @include로 불러오기! // 실무에서는 mixin 파일 따로 생성, scss 파일에 연결시켜서 호환! 예시1. 기본문법 응용 @mixin clear{ &:after { content: ""; display: block; clear: both; } } div { @include clear; } >>css 코드에 div:after { content: ""; display: block; clear: both; }로 자동 설정 예시2. 매개변수 응용 @mixin border ($color){ border: 1px solid $color; } div { @include border (blue); } >> $color라는 매개변수를 만들..

2020. 6. 24.

😺 Study/CSS, SCSS

예시) $color: #333; >> $color라는 변수 설정 .btn { &:hover { color : $color; } >> &(가상선택자의 위치 ) .btn을 hover했을 때 색상을 위의 변수로 설정 .lnb { color: $gray; ul { border: 1px; > li { background: pink; & : last-child { background: yellow; } >> li의 마지막 자식 선택 } } } p.s - 유튜브 리베하얀 영상 참고

2020. 6. 24.

😺 Study/CSS, SCSS

// Syntactically Awesome Style Sheets 의 약자로 '문법적으로 멋진 스타일 시트' - css 전처리기 - 코드의 재활용성을 높여줌 - 코드의 가독성을 높여줘 유지보수의 용이성을 높여줌 - 추후 관리 위해 scss와 css 파일은 폴더로 구분 지어주는 것이 좋음 - 모든 작업이 끝날 때까지 종료하면 안 됨 - 반복문 / each / for / 조건문 / 변수 / 매개변수 / 연산 가능 - 변환하는 파일: 컴파일(무료: 코알라, 유료) >> css로 변환해줌 - scss와 sass는 다름! // Koala(코알라) 설정 source map: css와 연결시켜주는 코드 autoprefix: webkit 접두사 자동 생성 output style: compact(선택자 달라질 때마다 ..

2020. 6. 24.

😺 Study

// 브라우저에 기본적으로 내장되어 있는 API // document + object + model // document = HTML /* Object */ // javascript의 자료형 // .html을 javascript도 함께 이해할 수 있는 객체로 만듦. /* API */ // 어플리케이션 프로그래밍 인터페이스 // 인터inter: 상호작용, ~사이에서 // 각 구조끼리 커뮤니케이션 될 수 있도록 도와주는 추상적인 용어 p.s - 책 추천 / DOM을 깨우치다 (유튜버 김버그 영상 참고)

2020. 6. 24.

😺 Study

// 웹에서 표준적으로 사용되는 공통적인 기술이나 규칙 // World Wide Web Consortium(W3C)에서 정의하는 공식 기준 // HTML은 접근성과 시맨틱 HTML의 가이드라인을 충족해야 함. // W3C Validator(문법검사)에서 작업한 html, css 파일 검사 가능 (통과해도 완벽한 코드 인증은 아님!) 마크업 검증 서비스 https://validator.w3.org/ The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our informa..

2020. 6. 17.