전체 글 (431) 썸네일형 리스트형 [웹사이트모음] GDWEB - 최신 오픈/리뉴얼사이트 모음 주소 : http://www.gdweb.co.kr/main/ 굿디자인웹 국내 최우수 웹디자인 선정, 웹사이트. 굿디자인웹 www.gdweb.co.kr [HTML/CSS] 웹표준 검사기 - 사이트 1. HTML 마크업 검사기 - 주소 : http://validator.kldp.org/ The W3C Markup Validation Service 파일 업로드로 유효성 검사 주의: Windows XP SP2 의 몇몇 IE 에서는 업로드가 되지 않을수도 있습니다. 이 경우에는, W3C QA 사이트의 information page 를 참고 하십시오. 직접 입력하여 유효성 검사 validator.kldp.org 위의 사이트가 잘 안되면 아래 주소를 쳐보세요. - 주소 : https://validator.w3.org/ The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Expl.. [Brackets] 설치 및 확장 플러그인 1. 설치하기 - 아래 주소에 들어가서 다운 받는다. http://brackets.io/index.html A modern, open source code editor that understands web design Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it's like getting presents all year long. brackets.io 설치가 다되면 프로.. [SASS] 5강 SASS의 @import - OSSAM강좌 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/T8Dq_GJ7IPU 1. 사스파일 가져오기 - SASS도 CSS처럼 @import구문을 지원, 다른 SASS파일을 불러온다. - CSS는 @import를 사용할 때마다 HTTP요청을 추가해서 작업하지만 SASS는 CSS로 바로 처리하기 때문에 HTTP호출이 필요하지 않다. 1) 구문 @import 파일명; - TIP : 파일 확장자를 지정할 필요가 없다. SASS에서는 당연히 파일명.scss를 가져온다고 가정하기 때문이다. css파일을 가져오고 싶은 경우는 확장자를 지정하면 된다. 2) 예시 - D드라이브에 [sassTest]폴더에 [test.scss]와 [test.css]를 만들었다고 가정 - [var.scss]도.. [SASS] 4강 SASS의 중첩규칙과 속성 ** 영상으로 보실분은 아래 주소를 클릭해주세요! https://youtu.be/9c59Mhr2Zu0 ** CSS를 풀어서 보기위해 앞으로 스타일은 expanded를 사용 sass --watch scss파일명:css파일명 --style expanded --sourcemap=none ** D드라이브에 [sassTest]폴더에 [test.scss]와 [test.css]를 만들었다고 가정 sass --watch test.scss:test.css --style expanded --sourcemap=none ** 위의 방법들은 [VS CODE]의 [LIVE SASS COMPILER]를 사용하면 위 작업은 하지 않아도 된다. 1. CSS 선택자를 중첩하여 작성 - 태그가 자손 혹은 후손인 경우 { } 코드블록으로 .. [SASS] 3강 SASS의 CSS작성스타일 설정 1. 기본 watch를 써서 CSS로 변환하는 경우 코드 기록 - SASS로 스타일을 변환시 평소 적던 CSS처럼 적혀지지 않아서 코드가 지저분해질 수 있다. - 코드를 추가하여 CSS코드를 깔끔하게 정리해보자 2. SASS의 CSS기록 스타일 변환 코드 sass --watch scss파일명:css파일명 --style 스타일종류 - 종류는 nested, expanded, compact, compressed 이렇게 4가지 방법이 있다. 1) nested - 문법 sass --watch scss파일명:css파일명 --style nested - cmd에서의 코드 sass --watch test.scss:test.css --style nested - test.css 코드 - 기본값과 같이 처리됨 h1 { col.. [SASS] 2강 SASS의 변수 - OSSAM강좌 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://youtu.be/9NttTBCu2P8 ** SASS주석 처리 //CSS로 컴파일되지 않는 주석 /* CSS로 컴파일되는 주석 */ 1. SASS에서의 변수 1) 정의 : 변수는 추후에 재사용할 값을 저장하기 위한 용도로 사용 2) 변수 문법 $변수명: 값; 3) 변수에서 사용가능한 값 - 문자열, 숫자, 색상, 불표현식(booleans), 리스트, null 2. 다양한 변수를 활용 1) cmd에서 사용할 폴더를 선택(여기서는 D드라이브의 [sassTest]폴더 선택) d: cd sassTest [VS CODE]의 [LIVE SASS COMPILER]를 사용하면 위 작업은 하지 않아도 된다. 2) [index.html]에 요소 생성 및 .. [SASS] 1강 SASS소개 및 설치 - OSSAM강좌 1. SASS(Syntactically Awesome StyleSheets)란? 1) 정의 : CSS pre-processor(전처리기)로서 CSS반복을 줄여 시간을 절약할 수 있도록 해주는 CSS언어의 확장언어 2) 장점 : 변수 및 조건문 등의 새로운 문법을 통해 CSS를 구조화하여 작업할 수 있다. 3) 단점 : 코드가 지저분해질 수 있고, 코드가 많아질수록 유지보수가 어렵다. 2. SASS 확장자 및 CSS언어로의 변환이유 1) SASS의 확장자 : 파일명.scss 2) 브라우저 사용여부 : 브라우저에서는 css만 인식하기 때문에 [파일명.scss]를 인식하지 못한다. 따라서 [파일명.scss]를 [파일명.css]로 변환해주는 작업을 해야한다. 매번 바꿔야하는 불편함이 있는 것은 아니고, 프로그램.. 이전 1 ··· 49 50 51 52 53 54 다음
