반응형 분류 전체보기117 SASS SASS(Syntactically Awesome Style Sheets)는 css를 확장하여 몇 가지 편의성을 제공하는 스타일시트 언어이다. sass 파일은 .scss로 저장되는데, 이 파일을 css로 컴파일하여 html 문서에 연결해야하는 다소의 불편이 따른다. 사용을 위해서 우선 sass를 설치해야 한다. 1. ubuntu에 sass 설치하기 $ sudo apt-get update $ sudo apt-get install sass 위와 같이 입력하면 sass가 설치된다. 2. 컴파일하기 $ sass name.scss name.css 2-1 자동 컴파일 파일을 수정할 때마다 컴파일을 하는 것은 귀찮고 불편한 일이다. $ sass --watch name.scss:name.css 위와 같이 입력하면 ctr.. 2021. 5. 13. CSS로 반응형 웹 디자인하기 컴퓨터 화면에 맞추어 제작된 웹사이트를 작은 화면으로 본다면 화면의 모든 요소들이 작아지거나 깨지는 현상으로 인해 가독성이 현저히 떨어지게 된다. 이 문제를 해결하기 위해서는 디바이스 별로 별도의 웹 페이지를 제작할 수도 있지만(Adaptive web design) 화면 크기에 맞추어 자동으로 웹 페이지의 구성이나 배치가 변하도록 할 수도 있다. 이것을 반응형 웹 디자인(Responsive web design)이라고 한다. responsive.css /* media queries 화면이 600px 미만으로 작아지면 배경색을 빨강으로 바꾼다. */ @media (min-width: 600px) { body{ background-color: pink; } } @media (max-width: 599px) {.. 2021. 5. 12. CSS CSS(Cascading Style Sheets)는 마크업 언어를 꾸미기 위한 언어로 html 등에 사용된다. 폰트를 바꾸거나 배경색을 바꾸는 등 웹페이지의 스타일을 만들어주는 역할을 한다. 사용방법은 세 가지가 있다. 1. inline heading 한 h1 요소에 대해 색상은 초록, 가운데 정렬로 바꿔준다. 요소 하나하나에 직접 속성을 입력하는 방식으로, 중복이 많이 발생할 수 있으며 가독성이 떨어질 수 있다. 2. 이렇게 된다. 2021. 5. 12. 이전 1 ··· 17 18 19 20 다음 반응형
