코딩각

SASS 변수 - SASS 문법 1

SASS 문법(Syntax) SASS는 프론트엔드 전처리기이기도 하지만 자체의 문법이 있는 프로그래밍 언어입니다. 어떤 프로그래밍 언어를 배워도 처음에는 변수와 데이터 타입에 대해서 이야기합니다. 어떤 강사는 이 두가지를 이해할 수 있다면 언어의 절반을 마스터한 것과 같다 - 고 말하는 분도 있는데요. 과장이라기 보다는 그만큼 변수와 데이터가 중요하다는 뜻입니다. CSS 파일에는 무슨 내용이 들어가는가? 결국은 컴퓨터에서는 모든 것이 값입니다. div 컨테이너를 정의할 때 들어가는 높이, 너비, 칼라, 폰트 사이즈, 마진, 패딩, 보더 등 이 모든 것은 값입니다. 문자열도 있지만 문자열은 인코딩한 정수형의 배열입니다. 컴퓨터에서는 모든게 숫자이고 숫자를 다룰려면 변수와 데이터 타입에 대해 이해하고 있어야..
코딩(CODING)/HTML | CSS 2022. 3. 18. 03:55

SASS 시작하기 / SASS 설치 방법 - CSS 전처리기

SASS란? SASS는 Syntactically Awesome Stylesheet (문법적으로 끝내주는 스타일 시트)의 줄임말로 CSS 전처리기 입니다. CSS는 프론트엔드에서 강력한 기능을 가진 언어이지만 기본적인 프로그래밍 언어의 기능에는 한계가 있습니다. 예를 들어 반복문같은 제어가 필요할 때도 수작업을 반복해야 하므로 C나 자바같은 일반적인 프로그래밍 언어에 비해서 생산성이 낮습니다. 그런데 이는 CSS의 단점이라기 보다는 의도된 특징이라고 합니다. CSS의 초창기 개발자들은 누구나 쉽게 받아들일 수 있는 언어를 개발하기를 원했습니다. 언어가 어려우면 대중적으로 성공하기 쉽지 않기 때문에 보통의 프로그래밍 언어가 가지는 구조를 의도적으로 상당수 제외시켰다고 합니다. 언어가 어려우면 구조가 좋지만 ..
코딩(CODING)/HTML | CSS 2022. 3. 17. 12:43

bootstrap 5 grid 시스템 - bootstrap 5 기초 1

bootstrap 5의 그리드 시스템에 대해서 알아보겠습니다. bootstrap 5 설치하기 bootstrap 5를 설치하는 것이 어렵지는 않지만 간단히 설명하면 직접 다운로드 받아서 사용하는 것과 온라인에서 CDN을 사용하는 방법이 있습니다. 어느쪽이건 프로젝트 성격에 따라 취사 선택하면 되겠으나 중소규모라면 CDN 방식이 트래픽을 아낄 수 있고 또 우리의 웹사이트가 아니라 CDN을 쓰는 다른 웹사이트를 방문해도 브라우저에 캐시가 남아서 빠른 로드가 가능하기 때문에 점차적으로 CDN 활용도가 높아지고 있습니다. bootstrap은 5버전이 나온 이후 jquery를 버려서 점차 점유율을 높여가고 있는데요. 그런 면에서 CDN 쪽이 괜찮을 수 있습니다. 다만 SASS로 커스텀 bootstrap을 사용할거면..
코딩(CODING)/HTML | CSS 2022. 3. 16. 21:39

디자인 레이아웃을 위한 이미지 규격 사이트 place-hold.it - HTML/CSS

이미지 규격 사이트 코드에디터 하나를 덩그라니 열고 프론트엔드 디자인을 하다보면 모든 것을 다 할 수 있을 것 같은데 생각보다 한계가 있습니다. 웹UI를 만들기 위해서는 실제 레이아웃을 봐가면서 미세한 조정을 해야 할 필요가 있는데 그럴려면 이미지의 URL을 실제로 링크를 걸어서 보는게 좋습니다. 대충 느낌을 보는 것 만으로도 웹디자인이 수월해질텐데 아쉽게도 브라우저에서 자체로 지원하는 그런 기능은 별로 없습니다. 이런 부분은 웹의 오랜 역사를 생각하면 아이러니 한 부분인데요. 수많은 웹 디자이너들이 같은 문제를 생각했다는 것을 감안하면 왜 브라우저는 그런 기초적인 부분 조차 지원하지 않는건가? 구체적으로는 HTML이 버전업을 하면서도 가장 기초적인 개발 지원에서는 뭔가 디테일하지 않은가? 에 대한 의문..
코딩(CODING)/HTML | CSS 2022. 3. 15. 04:55

텍스트 라인 수 제한 출력(콘텐츠 줄 자르기) webkit - HTML/CSS

CSS 텍스트 라인 수 CSS는 복잡하고 전문가의 영역이라 초보자가 작성하다 보면 간단해 보이는 것도 잘 안되서 인내심을 테스트하는 경우가 좀 있습니다. 텍스트를 좀 깨끗하게 출력하고 싶은데 div 블록에 height, width 를 열심히 만든 후 박스 밖으로 흘러나가는 텍스트를 보면 4차 IT산업시대의 분노감이 느껴지기도 합니다. (개인의 성향에 따라 다를 수 있음) 웹페이지라는 한정된 공간에 다양한 내용을 넣기 위해서 사용할 수 있는 방법은 여러가지가 있는데 브라우저에서 처리할 수 있는 방법은 좀 가릴 부분을 가리고 보여주는 방식이 있습니다. 보통 summary (요약)된 본분(description)을 가져와서 라인 수를 제한해야하는 경우에 사용할 수 있는 CSS로 벤더프리픽스 -webkit-lin..
코딩(CODING)/HTML | CSS 2022. 3. 15. 01:10
◀ 1 2 3 4 5 6 7 ··· 76 ▶

티스토리툴바