CSS (44) 썸네일형 리스트형 [CSS3강좌] 38강 CSS의 변수 - var() 함수 1. CSS 변수 - var() - 변수라는 것은 컴퓨터 언어에서 값을 한 개 저장하는 공간을 의미합니다. - CSS의 변수도 값을 저장하는 공간입니다. 변수를 사용하는 이유는 동일한 값을 매번 기억해서 작성하면 어렵기 때문입니다. 특히, 색상 코드처럼 좀처럼 외우기 힘든 것을 문자 화한다면 쉽게 사용 가능하겠죠? - 이때 CSS에서는 var()라는 함수를 사용합니다. - CSS변수는 DOM에 액세스 할 수 있고, 전역/지역으로 선언할 수 있습니다. - 자바스크립트에서도 미디어 쿼리에서도 변수를 변경할 수 있습니다. 1) 변수를 사용하지 않은 경우 ## 코드 예시 쇼핑몰 무료쇼핑몰만들기 도메인등록 쇼핑몰 디자인 창업 공간 창업 교육 쇼핑몰 만들기 - CSS 코드를 보면 색상 중 #146af0 이 매우 많.. [웹컨텐츠제작꿀팁] 8강 Image Sprite와 CSS움짤 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=31Hvgosnwgg&list=PLdwQP35_Nz9drJnPT6_u1ZicS2msRLrUN&index=9 1. Image Sprite를 사용하는 이유 - Sprite(스프라이트)라는 용어는 컴퓨터 그래픽스에서 2차원의 비트맵 이미지나 애니메이션을 합성하는 기술을 의미합니다. 웹, 즉 CSS에서는 여러 개의 이미지를 하나의 이미지로 합쳐서 만들어 놓은 것을 의미합니다. - Image Sprite를 쓰는 이유는 크게 2가지입니다. 렌더링시간줄이기, 용량줄이기입니다. 1) 렌더링시간 줄이기 - 브라우저는 화면에 구현하는 모든 자원을 서버에 요청하고 불러와서 구현(렌더링)합니다. - 그래서 코드를 .. [웹컨텐츠제작꿀팁] 7강 TabBar와 SwitchButton제작 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요! https://www.youtube.com/watch?v=JmNXShXYKAA&list=PLdwQP35_Nz9drJnPT6_u1ZicS2msRLrUN&index=8 ** 이번 강의는 HTML과 CSS로만 제작하는 탭바컨텐츠와 스위치버튼을 해보도록 하겠습니다. - 이 두개를 같이 묶은 이유는 체크박스/라디오버튼의 체크를 통한 컨텐츠이기 때문입니다. - 여기서 알아야 할 것은 두가지 포인트인데, 첫번째는 label태그를 클릭해도 체크/미체크가 된다는 점이고, 두번째는 입력양식 선택자 중 체크되었을 때가 있다는 점입니다. ## 문법 입력양식요소:checked{ } - 위에 보이는 이 선택자를 통해 다양한 작업을 할 수 있습니다. 1. TabBar 제작 *.. [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)에 맞춘 미디.. [웹컨텐츠제작꿀팁] 1강 Table 코딩 이렇게 써라! ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=wNOGuj5uATw 이번 강의에서는 웹컨텐츠를 직접적으로 제작해보겠습니다. 웹컨텐츠 중 표(table)를 만들어보도록 하겠습니다. ★ 제작해볼 표이미지와 소스 ** 표 제목에 들어갈 이미지 소스입니다. 다운받아주세요. ** 코드 전체 확인 See the Pen table by OSSAM (@5ssam) on CodePen. 1. HTML 구조 확인하기! - 첫째로는 표를 확인해서 테이블 구조를 먼저 짜야합니다. 1) 테이블 태그 작성 ## 테스트 코드 : [index.html] - HTML 기본구조 작성 후 태그를 작성해줍니다. - 이때 table태그에는 border 속성을 주는데 그 이유.. [유튜브] 오쌤의 니가스터디 - 웹컨텐츠제작꿀팁 - HTML/CSS중급편 보호되어 있는 글입니다. 이전 1 2 3 4 ··· 6 다음
