본문 바로가기

  • 프로그램 강좌 [SASS]#5 조건문, 삼항연산자 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS 조건문 if, else, else if 많이 들어보셨죠? 그건 스크립트잖아 하실수도 있는데, SASS에서도 쓸 수 있어요. 아래 예제를 따라해보세요. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <Link href="css/style.css" rel="stylesheet" /> <title>sass연습</title>.. 더보기
  • 프로그램 강좌 [SASS]#4 Function placeholder : 디자이너, 퍼블리셔들을 위한 쉬운 SASS Function mixin 과 상당히 비슷하긴 합니다. 하지만, mixin은 속성 전체를 반환하고 Function은 값을 반환합니다. 저도 mixin은 많이 사용했는데, function은 별로 안써봤네요. 아래 예제를 보시면 이해가 빠르실거예요. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=e.. 더보기
  • 프로그램 강좌 [SASS]#3 Extend, Mixin : 디자이너, 퍼블리셔들을 위한 쉬운 SASS Extend(상속) 말 그대로 해석하면 인데, 기존 CSS를 그대로 가져와서 사용할 수 있는 기능으로, 약간 위험성이 있어 보여 잘 사용하진 않습니다. 기본형에 대해서는 지정할수는 있겠지만, 아무거나 다 연결시키면 꼬이기 시작합니다. 무작정 남발하지 말고 사용시 주의해야 합니다. 아래 예제를 보시고 한번 따라해보세요. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co.. 더보기
  • 프로그램 강좌 [SASS]#2 주석, 변수 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS 주석 주석은 아주 간단합니다. 그룹단위의 주석과 한줄 단위의 주석을 모두 사용할 수 있는데, 아랫쪽에 자세히 살펴 보겠습니다. body { //그룹단위 주석 /* display: block; margin: 0; padding: 0 */ //한줄 주석 //background: black; } 변수 css와는 다르게 마치 프로그램처럼 변수를 사용할 수 있습니다. 아래 예문을 보고 실습해보시겠습니다. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8".. 더보기
  • 프로그램 강좌 [SASS]#1 설치방법, 환경구성, 작성규칙 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS SASS가 뭔데? CSS 그냥 쓰면 안돼? SASS 의 풀네임은 Syntactically Awesome Style Sheets SASS는 위 내용의 약자입니다. 해석한다면 "문법적으로 짱 멋진 스타일시트"라는 뜻이 됩니다. 막상 해석을 하고나니 굉장히 볼품 없어 진것 같아요. 초딩들이 "초 울트라 짱짱 멋진 가방" 막 그러는것 같네요. 어쨋든 좋은거랍니다. 저는 이미 즐겨 쓰기 때문에 보증할 수 있는데, CSS에 코딩이 들어간 구조라 반복작업을 훨씬 더 줄여.. 더보기

게시물이 존재할 경우 아래에 최신순 4건이 배열됩니다