본문 바로가기

728x90

CSS37

일러스트 디자인 (토끼) 2022. 8. 23.

이미지 스프라이트 ⭐️ IR 효과 / 이미지 스프라이트 / 백그라운드 포지션 ⭐️ 01. 웹 문서의 이미지 표현 방법 # 1) html 의미가 있을 때 : 이미지가 없으면 내용 파악이 어려운 경우를 말합니다. img 태그로 표현하며, img 태그 안에는 alt 태그로 대체 문자를 표시해주어야 합니다. # 2) css 의미가 없을 떄 : 이미지가 없어도 내용 파악이 가능하며, 이미지를 장식용으로 사용하는 경우를 말합니다. background 속성으로 표현하며, 대체 문자가 필요하지 않습니다. 02. IR 효과 웹 접근성을 준수하기 위해 이미지에 대체 문자를 표시해주는 것을 의미합니다. # 1) 의미 있는 이미지의 대체 텍스트를 제공하는 경우 .ir { display: block; overflow : hidden; font-.. 2022. 8. 22.

이미지 유형 (3) ⭐️ 이미지 유형 03 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다. 카드 상자 3개(article)을 만들고, 제목과 내용을 입력합니다. 중간 중간에 브라우저를 살펴보며 잘 만들어지고 있는지 확인하는 과정이 필요합니다. 컬러풀 아트 뮤지엄 다채로운 색감이 전하는 역동적인 에너지를 느껴보세요. Color Dance untitled - 03 페이스북 트위터 인스타 인 Color Dance untitled - 03 페이스북 트위터 인스타 인 Color Dance untitled - 03 페이스북 트위터 인스타 인 Color Dance untitl.. 2022. 8. 22.

CSS / SASS / SCSS ⭐️ CSS / SASS / SCSS ⭐️ 01. CSS 란? CSS (Cascading Style Sheets)는 마크업 언어로 작성된 HTML 문서가 실제로 웹사이트에 표시되는 방법을 정해주는 스타일 시트 언어를 의미합니다. CSS는 문서의 각 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지를 지정합니다. 02. SASS / SCSS SASS 와 SCSS 는 CSS 의 기능 부재 및 단점을 보완하여 다양한 기능을 추가한 확장판 스크립트 언어입니다. SASS 는 중첩으로 들여쓰기 및 줄바꿈 형식이고, SCSS 는 중괄호 및 세미콜론 형식 입니다. SASS 보다 SCSS 가 CSS 와의 호환성이 더 좋습니다. ___ 참고하기 ___ `1 SASS (Syntactically Awe.. 2022. 8. 18.

애니메이션 - 꼬리 흔드는 강아지 만들기 ⭐️ 애니메이션 효과 : 꼬리 흔드는 강아지 ⭐️ 01. 애니메이션 효과 애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 연속된 장면(sequence)를 나타내는 복수의 키프레임(@keyframes)들로 이루어집니다. ___ 참고하기 ___ `1 @keyframes : CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정합니다. 02. 꼬리 흔드는 강아지 만들어보기 [1] 박스 만들기 강아지의 움직임을 어떻게 표현할지 생각하고 박스를 만듭니다. [2] CSS 설정하기 Scss 를 활용합니다. @keyframes 을 이용하여 애니메이.. 2022. 8. 18.

이미지 유형 (2) ⭐️ 이미지 유형 02 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다. 카드 상자 3개(article)을 만들고, 제목과 내용을 입력합니다. 중간 중간에 브라우저를 살펴보며 잘 만들어지고 있는지 확인하는 과정이 필요합니다. 이 달의 컨셉 모델 선정 이 달의 컨셉 모델로 선정되신 분들을 소개합니다. 컨셉 29기 베아킴 자세히보기 컨셉 29기 로즈문 자세히보기 컨셉 29기 에일리 자세히보기 02. style(css) 설정하기 : /* fonts */ @import url('https://webfontworld.github.io/gmarket/Gma.. 2022. 8. 18.

이미지 유형 (1) ⭐️ 이미지 유형 01 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 상자(div) 만들기 : section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다. 카드 상자 3개(article)을 만들고, 제목과 내용을 입력합니다. 중간 중간에 브라우저를 살펴보며 잘 만들어지고 있는지 확인하는 과정이 필요합니다. 나의 쉴 곳은 어디에 우리 모두의 마음이 편안해지는 힐링 장소를 소개합니다. 들꽃이 가득한 유원지에서 나무가 품어주는 그늘에 앉아 살랑이는 꽃들을 바라보는 상상을 해보세요. 나무가 품어주는 그늘에 앉아 살랑이는 꽃들을 바라보는 상상을 해보세요. 나무가 품어주는 그늘에 앉아 살랑이는 꽃들을 바라보는 상상을 해보세요. 자세히보기.. 2022. 8. 17.

기본 문법 ⭐️ CSS 기본 문법 ⭐️ 01. CSS 란? CSS (Cascading Style Sheets)는 마크업 언어로 작성된 HTML 문서가 실제로 웹사이트에 표시되는 방법을 정해주는 스타일 시트 언어를 의미합니다. CSS는 문서의 각 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지를 지정합니다. ___ 참고하기 ___ `1 웹의 기초적인 구성요소 3가지 - HTML : 웹 페이지의 구조와 콘텐츠의 의미를 정의합니다. ☛ 건물의 뼈대 / 사람의 골격 - JavaScript : 문서와 유저의 상호작용을 위한 웹 페이지의 기능과 동작을 정의합니다. ☛ 엘레베이터 등 건물의 기능 / 사람의 근육조직 및 신체기관 - CSS : 웹 페이지에 관한 다양한 스타일을 정의합니다. ☛ 건물의 디자.. 2022. 8. 16.

미디어쿼리 ⭐️ 미디어쿼리 ⭐️ 01. 미디어쿼리란? 미디어쿼리(Media Query)는 뷰포트의 해상도에 따라 CSS 를 분기시키는 기법을 말합니다. 반응형 프로젝트에서 반드시 필요합니다. [1] 여기서의 의미는 1000px 보다 넓은 해상도일 때에 style_pc.css 를 연결한다는 뜻입니다. 크롬 브라우저에서 개발자 도구를 열고 Tobble device Toolbar 를 누르면 기기마다의 해상도를 확인할 수 있고 기기 모델의 추가가 가능합니다. [2] @media 처음 로딩할 떄 성능이 저하되지 .. 2022. 8. 16.

카드 유형 (3) ⭐️ 카드 유형 03 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다. 02. 기본 상자(div) 만들기 : section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다. 카드 상자 3개(article)을 만들고, 제목과 내용을 입력합니다. 중간 중간에 브라우저를 살펴보며 잘 만들어지고 있는지 확인하는 과정이 필요합니다. // 과 같이 시멘틱 마크업을 하면 제목을 반드시 적어줘야 하므로 를 작성합니다. (이후 눈에 보이지 않도록 숨겨놓기) 펠트 공예 후기 카드 제목 카드 내용 카드 제목 카드 내용 카드 제목 카드 내용 02. 기본 style(css) 설정하기 : /* font */ @import url('https://webfontworl.. 2022. 8. 11.

카드 유형 (2) ⭐️ 카드 유형 02 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상하고, 어떤 정보의 내용을 담을지도 구체적으로 스케치합니다. 02. div 만들기 section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다. 큰 div 상자를 만들고, 정확한 경로에 따른 style 설정을 위해 class 로 이름을 지어줍니다. 세부 div 상자를 만들고, 정보의 내용을 입력합니다. 인테리어 둘러보기 인테리어 디자인을 위한 이미지 모음 자료 입니다. 라이프 스타일에 따라 나눠진 다양한 디자인을 살펴보세요. 💁🏽 북유럽 인테리어 북유럽 기후에 맞게 화이트 컬러를 기본으로 강한 그레이나 블랙을 포인트로 주는 것이 특징이며, 실용... 웨인스코팅 인테리어 웨인스코팅은 벽의 일정 부분을 사각 프레임 형태로 패널을 덧대는 시.. 2022. 8. 10.

카드 유형 (1) ⭐️ 카드 유형 01 ⭐️ 01. 레이아웃 구상하기 레이아웃을 구상하고, 어떤 정보의 내용을 담을지도 구체적으로 스케치합니다. 02. div 만들기 section 을 시멘틱 마크업하고, id 로 이름을 지어줍니다. 큰 div 상자를 만들고, 정확한 경로에 따른 style 설정을 위해 class 로 이름을 지어줍니다. 세부 div 상자를 만들고, 정보의 내용을 입력합니다. // class 에 card__wrap 경로이고 nexon글자 사용하며, section 🏡 우리집 강아지 🐶 반려견과 함께하는 행복한 삶에 도움이 되는 자료들을 리스트 합니다. // W3C 준수하기 : 이미지를 볼 수 없는 사용자를 위해 alt 를 꼭 작성해 주어야 함. 반려견의 다양한 표정 바로알기 간혹 강아지가 우리를 보며 입꼬리를 .. 2022. 8. 9.

레이아웃 유형 (5) ⭐️ 레이아웃 유형 (5) ⭐️ 01. '레이아웃'이란? 레이아웃(layout)이란, 각 구성요소를 특정한 공간 안에 효과적으로 배열하는 일을 말합니다. 활동 또는 앱 위젯의 UI와 같은 사용자 인터페이스의 시각적 구조를 정의합니다. 전체 영역 중 가운데 영역을 사용하는 레이아웃을 만들어봅니다. 02. 레이아웃을 만드는 방법 3가지 [1] float 활용하기 float 의 원래 기능은 글씨와 이미지를 정렬하는 것입니다. 이전에 레이아웃을 설정할 방법이 없을 때 사용하였으며, 설정한 칸을 왼쪽 또는 오른쪽 위로 띄워서 빈 공간을 채워줍니다. float 설정 이후에 aside칸과 section칸의 'height' 값을 0으로, 즉 빈 칸으로 인식하는 버그가 발생합니다. 이에 따라 footer칸이 빈 칸을 채.. 2022. 8. 5.

레이아웃 유형 (4) ⭐️ 레이아웃 유형 (4) ⭐️ 01. '레이아웃'이란? 레이아웃(layout)이란, 각 구성요소를 특정한 공간 안에 효과적으로 배열하는 일을 말합니다. 활동 또는 앱 위젯의 UI와 같은 사용자 인터페이스의 시각적 구조를 정의합니다. 전체 영역 중 가운데 영역을 사용하는 레이아웃을 만들어봅니다. 02. 레이아웃을 만드는 방법 * { margin: 0; padding: 0; } /* #wrap { width: 100%; } 기본 값 지움 - 아래도 같이 지움 */ #header { /* width: 100%; */ height: 100px; background-color: #E0F2F1; } #header .head { height: 100px; background-color: #B2DFDB; } #nav.. 2022. 8. 5.

레이아웃 유형 (3) ⭐️ 레이아웃 유형 (3) ⭐️ 01. '레이아웃'이란? 레이아웃(layout)이란, 각 구성요소를 특정한 공간 안에 효과적으로 배열하는 일을 말합니다. 활동 또는 앱 위젯의 UI와 같은 사용자 인터페이스의 시각적 구조를 정의합니다. 가운데 영역이 4칸으로 나뉜 레이아웃을 만들어봅니다. 02. 레이아웃을 만드는 방법 3가지 [1] float 활용하기 float 의 원래 기능은 글씨와 이미지를 정렬하는 것입니다. 이전에 레이아웃을 설정할 방법이 없을 때 사용하였으며, 설정한 칸을 왼쪽 또는 오른쪽 위로 띄워서 빈 공간을 채워줍니다. float 설정 이후에 aside칸과 section칸의 'height' 값을 0으로, 즉 빈 칸으로 인식하는 버그가 발생합니다. 이에 따라 footer칸이 빈 칸을 채우기 위해.. 2022. 8. 5.

레이아웃 유형 (2) ⭐️ 레이아웃 유형 (2) ⭐️ 01. '레이아웃'이란? 레이아웃(layout)이란, 각 구성요소를 특정한 공간 안에 효과적으로 배열하는 일을 말합니다. 활동 또는 앱 위젯의 UI와 같은 사용자 인터페이스의 시각적 구조를 정의합니다. 가운데 영역이 3칸으로 나뉜 레이아웃을 만들어봅니다. 02. 레이아웃을 만드는 방법 3가지 [1] float 활용하기 float 의 원래 기능은 글씨와 이미지를 정렬하는 것입니다. 이전에 레이아웃을 설정할 방법이 없을 때 사용하였으며, 설정한 칸을 왼쪽 또는 오른쪽 위로 띄워서 빈 공간을 채워줍니다. float 설정 이후에 aside칸과 section칸의 'height' 값을 0으로, 즉 빈 칸으로 인식하는 버그가 발생합니다. 이에 따라 footer칸이 빈 칸을 채우기 위해.. 2022. 8. 5.

레이아웃 유형 (1) ⭐️ 레이아웃 유형 (1) ⭐️ 01. '레이아웃'이란? 레이아웃(layout)이란, 각 구성요소를 특정한 공간 안에 효과적으로 배열하는 일을 말합니다. 활동 또는 앱 위젯의 UI와 같은 사용자 인터페이스의 시각적 구조를 정의합니다. 가운데 영역이 2칸으로 나뉜 레이아웃을 만들어봅니다. 02. 레이아웃을 만드는 방법 3가지 [1] float 활용하기 float 의 원래 기능은 글씨와 이미지를 정렬하는 것입니다. 이전에 레이아웃을 설정할 방법이 없을 때 사용하였으며, 설정한 칸을 왼쪽 또는 오른쪽 위로 띄워서 빈 공간을 채워줍니다. float 설정 이후에 aside칸과 section칸의 'height' 값을 0으로, 즉 빈 칸으로 인식하는 버그가 발생합니다. 이에 따라 footer칸이 빈 칸을 채우기 위해.. 2022. 7. 27.

이전 1 2 다음

728x90

티스토리툴바