본문 바로가기

CSS13

[CSS] SVG : 애니메이션 구현하기 CSS : SVG를 이용하여 애니메이션 만들기 이번 시간에는 SVG태그와 CSS속성을 이용하여 백터 그래픽으로 애니메이션을 구현해보겠습니다! 😄 #1. SVG란 무엇인가요!? 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. • 인터넷 익스플로러9 버전 이상부터 지원됩니다. • XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. • .. 2022. 9. 8.

[CSS] SVG : 백터 그래픽 도형 표현하기 CSS : SVG를 이용하여 백터 그래픽 만들기 이번 시간에는 SVG태그와 CSS속성을 이용하여 백터 그래픽을 표현해보겠습니다! 😄 #1. SVG란 무엇인가요!? 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. • 인터넷 익스플로러9 버전 이상부터 지원됩니다. • XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. • 벡터 방식이기.. 2022. 9. 8.

[SITE] 웹사이트 - 이미지 텍스트 유형01 ImageTextType01 웹페이지 실습을 위한 이미지/텍스트 유형을 실습해보겠습니다! 이번 이미지/텍스트 유형은 이미지와 텍스트 영역이 함께 들어있는 타입입니다. 그럼 아래의 코드를 보며 함께 실습 해보겠습니다~😆 이번 유형은 이미지/텍스트 타입으로 각 주제와 영역에 맞게 레이아웃과 디자인을 설정하시면 됩니다. 아래의 피그마를 참고하여 HTML, CSS를 설정해봅시다. 😇 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. TIP ! • 섹션, 아티클과 같은 시멘틱 태그에는 꼭 헤딩 태그를 함께 사용해주어야 웹표준을 준수하게 됩니다. • 섹션 영역에 웹표준 준수.. 2022. 9. 2.

[SITE] 웹사이트 - 텍스트유형03 TextType03 웹페이지 실습을 위한 텍스트 유형을 실습해보겠습니다! 이번 유형은 지난 유형들에 비해 조금 더 심화 버전입니다...! 그럼 아래의 코드를 보며 함께 실습 해보겠습니다 🫠 🫠 레이아웃 그리드 및 안내선을 이용하여 레이아웃 디자인을 완성합니다! 이젠 익숙해진 이미지스프라이트 기능을 위해 프레임을 추가하여 프로필 아이콘을 60px / 별점 아이콘 102px 씩 배치시켰습니다. 꼭 간격을 잘 맞춰주세요~! 😇 ! TIP ! • 구조를 먼저 꼼꼼하게 파악하여 큰 덩어리부터 마크업을 하는 것이 가장 중요합니다.(웹표준 준수 필수!) • 웹표준과 웹 접근성, 호환성을 놓치지 않도록 합니다. • 공통 선택자와 각각의 .. 2022. 9. 1.

[SITE] 웹사이트 - 텍스트유형02 TextType02 웹페이지 실습을 위한 텍스트 유형을 실습해보겠습니다! 이번 유형은 보통 텍스트로만 정보를 제공하고자 할 때 사용합니다. 그럼 아래의 코드를 보며 함께 실습 해보겠습니다 😆 이번 유형은 이미지가 들어가지 않고 대신 아이콘이 들어가게 됩니다. 텍스르로만 이루어진 만큼 더 신경써서 작업해줍니다! 지난 텍스트 유형01과 똑같이 이미지스프라이트 기능을 위하여 프레임을 하나 더 만들어 아이콘을 60px씩 배치시켰습니다 😇 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. ! TIP ! • 구조를 먼저 꼼꼼하게 파악하여 큰 덩어리부터 마크업을 하는 것이 가.. 2022. 9. 1.

[CSS] 요소를 숨기는 방법 CSS : 요소(element)를 안보이게 하는 방법 CSS 속성을 작업하다 보면 요소를 숨겨야 하는 속성들이 필요하게 됩니다. 이번 시간에는 CSS 기법 중 하나인 요소를 안보이게 하는 방법 5가지에 대해 알아보겠습니다!😄 #1. display : none; 가장 보편적으로 사용하는 속성 중 하나로 요소의 영역이 완전히 사라지게 됩니다. 또한 이 속성을 사용하게 되면 애니메이션 효과도 줄 수 없게 됩니다. 💡 코드 보기 p {display : none;} 없어집니당 뾰로롱 #2. opacity: 0; opacity는 투명도를 설정하는 속성 중 하나로 요소의 투명도를 0으로 하여 요소를 안보이게 합니다. 때문에 요소는 사라져도 영역은 남게 되며 애니메이션도 적용이 가능합니다. 💡 코드 보기 p {opac.. 2022. 8. 26.

[CSS] CSS의 색상 표현 방법 CSS : 색상 표현 방법 CSS에서는 색상을 설정하는 총 7가지의 방법이 있습니다. 먼저 기존 CSS에 있던 방법 3가지, CSS3에서 추가된 4가지 방법이 있습니다. 이번 시간에는 이러한 CSS의 색상 표현 방법에 대해 알아보겠습니다!😄 🔶 CSS 색상 표현 방법 🔶 #1. 색상 이름으로 표현 red, pink와 같이 색상의 이름을 나타내는 방법으로, 약 140가지의 색상 이름들이 브라우저에 미리 정의되어 있습니다. p {background-color: orange;} orange #2. RGB값으로 표현 rgb(red, green, blue)와 같은 형식으로 색을 표현합니다. 여기서 red, green, blue 각각의 변수에는 0에서 255사이의 정수를 입력하거나 백분율 값을 지정하여 색상을 설정.. 2022. 8. 24.

[CSS] CSS 단위의 종류 CSS : 단위 이번 시간에는 CSS의 단위에 대해 알아보겠습니다!😄 #1. px(픽셀) 해상도에 따라 상대적으로 달라지는 기본 단위로 글자 크기를 지정하지 않았을 경우 보통 16px로 자동 설정됩니다. #2. %(퍼센트) 부모 요소의 크기를 100% 기준으로 계산한 % 단위 특별한 설정이 없다면 16px = 100% / 24px = 150%가 됩니다. #3. em 부모 요소의 폰트 크기를 100% 기준으로 계산한 100분의 1단위 특별한 설정이 없다면 16px = 1em / 24px(16px x 1.5 = 24px) = 1.5em가 됩니다. #4. rem em과 비슷하지만 부모 요소가 아닌 최상위 요소의 크기를 100% 기준으로 계산합니다. r은 root. 즉 html요소를 뜻하므로 html 요소에서 .. 2022. 8. 24.

[CSS] SCSS 언어란? CSS : SCSS 이번 시간에는 CSS 언어 중 하나인 SCSS에 대해 알아보겠습니다!😄 #1. SCSS란? 코딩이 복잡해지게 되면 코드의 중복 및 오류 등의 이유로 CSS는 유지보수가 어려워지고 가독성 또한 떨어지게 됩니다. 이러한 CSS의 단점을 보완하고자 등장한 문법이 SCSS라고 합니다. SCSS는 Syntactically Awesome StyleSheet의 약어로 코드의 재사용성을 높이고, 가독성을 증가시켜 개발의 효율성을 높이기 위한 전처리기 언어입니다. !! 여기서 중요한 점은 SCSS언어로 직접 구현하는 것이 아니라 Scss로 작업 후 CSS언어로 컴파일하여 웹에 구현시키는 원리라는 것 입니다! 즉 CSS의 대체 언어가 아닌 좀 더 효율적으로 CSS 코드 작업을 할 수 있는 도구의 개념이.. 2022. 8. 19.

[SITE] 웹사이트 - 카드 유형03 CardType03 웹페이지 실습을 위한 카드 유형 페이지 심화ver 제작해보기! 카드 안에 이미지, 키워드란, 텍스트 그리고 사용자 프로필까지 넣어서 제작해보자! 이번 유형에서는 심화 버전인 만큼 그리드 할 요소가 많습니다.😂 차근차근 그리드를 만들어 카드형 페이지를 디자인 해봅시다! 이번 카드형 디자인은 카드 사이에 여백이 없기 때문에 라인을 넣어 카드 영역을 구분 해줍니다. TIP ! 카드 섹션의 디자인이 동일할 경우 comtonent를 이용하면 효율적인 작업이 가능하다. comtonent를 처음 적용시킨 카드가 원본가 되며 원본 comtonent를 수정하면 복제 comtonent들도 함께 수정되어 작업이 훨씬 수월해진다! < HTML 소스 : 레아아웃 구조 파악하.. 2022. 8. 11.

[CSS] 이미지 표현 방식 : 벡터와 비트맵 벡터와 비트맵 백터와 비트맵은 이미지를 표현하는 방식으로 서로 상반된 방식으로 이미지를 표현합니다. 지금 부터 벡터와 비트맵에 대해 알아보겠습니다! #1. 비트맵(Bitmap) 방식 각 픽셀에 저장된 비트 정보가 집합된 것입니다. 비트맵은 벡터와 다르게 픽셀의 점 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다 정교한 이미지 표현이 가능합니다. ! 특징정리 ! • 비트맵 방식은 색상 정보가 담긴 픽셀 하나 하나가 모여 만들어지는 방식으로 보다 정교한 이미지 표현이 가능하다. • 디스플레이는 픽셀의 배열로 구성되어 있으며 픽셀의 배열, 숫자, 비율이 디스플레이의 해상도를 결정한다고 볼 수 있다. 예를 들어서 1920x1080디스플레이가 있다면 이는 가로 1920개 세로 1080개의 픽셀로 구성되어 있는.. 2022. 8. 10.

[SITE] 웹사이트 - 카드 유형02 CardType02 웹페이지 실습을 위한 카드타입 페이지 기초 실습하기! - 2줄 유형 피그마를 통해 원하는 카드 유형을 디자인 합니다. 디자인을 할 땐 만들고자 하는 페이지의 성격을 잘 파악하여 그리드를 만들어주는 것이 중요합니다. TIP ! 카드 섹션의 디자인이 동일한데 많을 경우 컴포넌트를 이용하면 효율적인 작업이 가능하다. 컴포넌트를 처음 적용시킨 카드가 원본가 되며 원본을 수정하면 복붙했던 카드들도 함께 수정된다. 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. 구조 파악하기 1.구조를 먼저 꼼꼼하게 파악하여 시멘틱한 마크업을 하는 것이 가장 중요하다... 2022. 8. 10.

웹사이트 - 카드 유형01 CardType01 웹페이지 실습을 위한 카드타입 페이지 기초 실습하기! 피그마를 통해 원하는 카드 유형을 디자인 합니다. 디자인을 할 땐 만들고자 하는 페이지의 성격을 잘 파악하여 그리드를 만들어주는 것이 중요합니다. 그리드 작업이 완벽해야 후에 코딩을 하는 데 있어서도 오류 및 오차가 생기지 않아 불편해지지 않습니다! 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. 구조 파악하기 1. 카드 레이아웃은 보통 웹 메인 페이지의 섹션 부분에 위치한다. 때문에 시멘틱 태그인 요소는 부모와 자식의 관계를 나타낸다. 마찬가지로 요소 + 요소는 형제 관계를 나타낸다.*/.. 2022. 8. 10.

이전 1 다음

728x90

Lucky Charms Rainbow

JAVASCRIPT

html

HTML

css

CSS

티스토리툴바