웹언어/CSS3 (38) 썸네일형 리스트형 [CSS3강좌] 38강 CSS의 변수 - var() 함수 1. CSS 변수 - var() - 변수라는 것은 컴퓨터 언어에서 값을 한 개 저장하는 공간을 의미합니다. - CSS의 변수도 값을 저장하는 공간입니다. 변수를 사용하는 이유는 동일한 값을 매번 기억해서 작성하면 어렵기 때문입니다. 특히, 색상 코드처럼 좀처럼 외우기 힘든 것을 문자 화한다면 쉽게 사용 가능하겠죠? - 이때 CSS에서는 var()라는 함수를 사용합니다. - CSS변수는 DOM에 액세스 할 수 있고, 전역/지역으로 선언할 수 있습니다. - 자바스크립트에서도 미디어 쿼리에서도 변수를 변경할 수 있습니다. 1) 변수를 사용하지 않은 경우 ## 코드 예시 쇼핑몰 무료쇼핑몰만들기 도메인등록 쇼핑몰 디자인 창업 공간 창업 교육 쇼핑몰 만들기 - CSS 코드를 보면 색상 중 #146af0 이 매우 많.. [CSS3강좌] 37강 CSS단위 - px, em, rem, vw, vh 등 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/gQqkSZvDtbM - CSS는 길이를 표현하는 몇 가지 다른 단위가 있습니다. - 예를 들어 width로 가로폭을 표현할 때 [ width: 300px; ]이라고 쓰죠? 이때 px이 단위입니다. - 이번 강좌에서는 단위의 종류들을 알아보고자 합니다. ** 단위의 몇가지 특징 - 숫자와 단위 사이에는 공백을 쓸 수 없습니다. - 0은 단위 생략이 가능합니다. - 일부 CSS 속성의 경우 음수 길이가 허용됩니다. 1. 절대적 길이 단위 - 절대적 길이 단위는 고정되어 있으며, 정확히 그 크기로 나타내는 것을 말합니다. - 화면 크기(뷰포트)는 기기에 따라 모두 다르기 때문에 절대적 단위만 쓰는 것은 추천하지 않습니다... [CSS3강좌] 36강 유동형 사이즈와 유동형 그리드 - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/5JDVzCNueF0 - 반응형 웹을 만들 수 있는 기술은 크게 3가지라고 말합니다. 1. 미디어 쿼리 - 각각의 기기 뷰포트 별로 CSS를 쓸 수 있는 기술입니다. 이건 지난 강좌에서 배웠죠. 2. 유동형 이미지(사이즈) - 이미지나 요소가 창 사이즈에 따라 자동으로 유동적으로 변화시키는 기술입니다. 3. 유동형 그리드 - 데스크톱, 태블릿, 모바일은 기기 가로폭 즉 뷰포트가 다 다릅니다. 그렇기 때문에 같은 그리드 시스템을 쓰게 되면 안됩니다. 그래서 각각 기기에 맞게 그리드시스템을 맞추는 것입니다. - 지난 강좌에서는 미디어 쿼리에 대해서 배워봤고, 이번 강좌에서는 2번과 3번인 유동형 이미지(사이즈)와 유동형 .. [CSS3강좌] 35강 반응형웹을 위한 미디어쿼리(@media screen{ }) ** 동영상으로 배우고 싶은 분은 아래 주소를 클릭하세요! https://youtu.be/uBrsPwzIZR0 1. 미디어 쿼리(Media Query) - 미디어 쿼리는 특정 조건이 true인 경우에만 코드 블록{ } 내부의 CSS 코드를 실행해주는 구문입니다. - 다른 매체 유형/장치에 대해 서로 다른 스타일을 적용하는데 사용합니다. - 보통 스크린 사이즈를 조건으로 걸어 반응형웹에서 많이 사용하는 코드입니다. - 미디어 쿼리는 반응형웹디자인을 데스트톱, 랩톱, 태블릿 및 휴대폰에 각각 CSS언어를 전달해줄 수 있기 때문입니다. - 또 미디어 쿼리를 사용하여 특정 스타일이 인쇄된 문서 또는 화면 판독기에서만 사용되도록도 할 수 있습니다. @media 조건{ } 2. 뷰포트 너비(width)에 맞춘 미디.. [CSS3강좌] 34강 CSS filter속성 - 오쌤의 니가스터디 1. CSS filter 속성 - filter속성은 요소에 대한 시각효과를 지정합니다. (ex) blur효과 등) - 간단히 생각하면 포토샵에서의 layer style이나 adjustment(보정) 등이 지정된다고 보면 편합니다. - 하지만 최신 브라우저에서만 될 수 있기 때문에 브라우저 지원이 어디까지 되는지 확인해보세요. 1) filter속성의 함숫값 종류 설명 none 기본값, 이펙트를 없앰 blur(px) 이미지에 흐림효과를 적용 값이 클수록 흐림이 더 많이 생성, 값을 작성하지 않으면 0으로 지정 brightness(%) 이미지 밝기를 조정 0%는 완전히 검게 처리, 100%는 기본값, 100%보다 크면 밝게 제공 contrast(%) 이미지의 대비를 조정 0%는 완전히 검게 처리, 100%는 .. [CSS3강좌] 33강 폰트가 깨져 보일때 해결법(IE) - 이번 강좌에서는 폰트가 깨져 보일 때 조금이나마 보완해보는 방법을 알아보도록 하겠습니다. - 웹이 발달이 많이 되면서 한글도 많은 무료 폰트들이 생겨났습니다. - 그래서 웹에서 활용할 폰트가 많이 생겨 좋아진 것도 사실입니다. 1. 에스코어 드림 주소 : www.s-core.co.kr/company/font/ 에스코어 에스코어는 디지털 혁신을 위한 고급 프로페셔널 서비스를 제공합니다. 매니지먼트 컨설팅과 소프트웨어 테크놀로지 서비스 오퍼링을 살펴보세요. www.s-core.co.kr - S-Core에서 제공하는 폰트입니다. - 이폰트의 장점은 꽉 찬 직사각형 구조의 고딕체로 제목용 글꼴로 사용하시면 좋습니다. - 특히 9가지의 다양한 두께를 지원하는 몇 안 되는 폰트 중 하나죠. - 위의 이미지는 모.. [CSS3강좌] 32강 Background-clip과 mask효과 1. background-clip 속성 - background-clip속성은 요소 내에서 background관련(배경)이 확장되는 정도를 지정합니다. 1) 속성 값 정리 속성값 설명 border-box 기본값, 테두리(border)까지 배경색 혹은 배경이미지가 지정됨 padding-box 패딩영역까지 배경색 혹은 배경이미지가 지정됨 content-box 요소까지만 배경색 혹은 배경이미지가 지정됨 See the Pen CSS background-clip by OSSAM (@5ssam) on CodePen. - 첫 번째 박스는 기본값인 border-box여서 테두리까지 배경색이 지정됩니다. - 두번째 박스는 padding-box여서 패딩까지만 배경색이 지정되고 테두리 파트는 빠집니다. - 세번째 박스는 co.. [CSS3강좌] 31강 CSS outline속성 - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요! https://www.youtube.com/watch?v=TaXDcQFAOkw 1. outline 속성이란? - outline(윤곽선)은 요소를 눈에 띄게 하기 위해 테두리(border)의 바깥쪽에 그려지는 선입니다. - 위의 그림을 보면 border보다도 바깥쪽으로 처리되는 것을 그림으로 확인하실 수 있습니다. - 보통은 일단 요소들에는 주지 않고 초점을 받는 태그인 [a, input, button, select, textarea]에 줍니다. 1) 속성의 종류 속성 설명 outline-style outline(윤곽선)의 스타일을 지정합니다. outline-color outline(윤곽선)의 색상을 지정합니다. outline-width outline.. 이전 1 2 3 4 5 다음
