fullstack-study

선택자 , 스크롤, root , coding Convention# 가상 클래스타입설명:link방문하지 않은 링크에 스타일을 적용합니다.:visited방문한 링크에 스타일을 적용합니다.:active요소가 활성화 상태(예: 클릭된 상태)일 때 스타일을 적용합니다.:hover마우스가 요소 위에 올라갔을 때 스타일을 적용합니다.:focus요소가 포커스를 받았을 때(예: 키보드로 선택) 스타일을 적용합니다.이 가상 클래스들을 사용하면 링크나 버튼 등의 사용자 인터페이스 요소에 동적인 스타일을 쉽게 # 구조적 가상 클래스 선택자속성설명mdn:first-child형제요소 중 첫번째바로가기:last-child형제요소 중 마지막바로가기:nth-child형제요소 중 ?번째, 홀수, 짝수바로가기:nth-last-child마..

상속, 단위, 웹폰트, 컬러,둥근 사각형, 그림자 , float , 배경 1. 상속2. 단위3. webfonts4. color5. 둥근 사각형6. 그림자7. float 8. 배경 # 상속부모가 가진 css 속성이 자식에게 영향을 미치는 것 ** 상속되지 않는 것 위치, 여백, 크기, 배경, 패딩, 마진등 상속 관련 프러퍼티font-famly, font-size, font-style, font-variant, font-weight, letter-spacing, line-height, text-align, text-indent, text-transform, word-spacing, list-style, list-style-image, list-style-position, list-style-type 단 a..

border , font , text , display 1. border 2. font 3. text 4. display * border : 테두리 속성 설명 mdn border 테두리 바로가기 border-color 바로가기 border-style 바로가기 border-width 바로가기 border-top, border-bottom, border-right, border-left 바로가기 * font : 크기, 두께, 서체, 스타일 속성 설명 mdn font-size 크기 바로가기 font-style 스타일 바로가기 font-weight 두께 바로가기 font-family 서체 바로가기 font 속기 바로가기 * text 속성 설명 mdn text-align 정렬 바로가기 text-indent 들여쓰..

스타일과 스타일 시트 스타일(style) : HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 디자인을 변경스타일 시트(style sheet) : 스타일을 관리하기 쉽도록 한 군데 모아놓은 것웹 문서의 내용과 상관없이 디자인만 바꿀 수 있음내용과 디자인의 분리디자인에 영향 없이 내용 수정하거나 내용은 건드리지 않고 디자인만 바꾸는 게 가능 다양한 기기에 맞춰 탄력적으로 바뀌는 문서를 만들 수 있습니다. 내용은 그대로 두고, 프린터나 스마트폰 브라우저 등 다양한 기기에 맞는 레이아웃을 만들 수 있습니다.캐스캐이딩 스타일 시트(Cascading Style Sheets : css )캐스캐이딩(Cascading) : ‘위에서 아래로 흐른다’는 뜻선택자에 여러 스타일이 적용될..

# 시맨틱 태그 시맨틱 태그 종류 태그설명웹페이지의 머리글 , 로고, 메뉴, 검색 , 유틸 ,  전체메뉴등메인 콘텐츠를 나타내는데 사용, 문서에 반드시 한번만 사용제목별로 나눌 수 있는 문서의 콘텐츠 영역을 구성하는 요소 ( 주제별 ) , 다음 연예, 스포츠등독립적이인 컨텐츠좌우측의 사이드 영역 , 보조 컨텐츠사이트의 바닥부분, 주로 연락처나 제작자 정보등을 기술하는 부분웹 페이지 메뉴를 만들 때 사용 ( 주요메뉴 )   문서나 섹션의 머리말을 정의합니다.예: 페이지의 제목, 로고, 내비게이션 메뉴 등이 포함됩니다.   My Website Home About Contact    내비게이션 링크를 정의합니다.예: 주요 내비게이션 메뉴 Home ..

이미지, 링크, 엔티티 코드, 동영상 1. 이미지포맷형식특징설명용도JPG(JPEG)손실 압축 이미지- 파일 용량이 작음- 색 표현력 우수- 배경 투명 지원 안됨일반 사진, 웹 이미지PNG비손실 압축 이미지- 투명 배경 지원- 선명한 품질 유지- 용량이 다소 큼UI 아이콘, 로고, 투명 이미지GIF손실 압축 이미지- 256색 제한- 배경 투명 가능- 애니메이션(움짤) 지원간단한 움직이는 이미지SVG벡터 이미지- 확대해도 깨지지 않음- 코드로 표현됨- 색, 크기 자유롭게 조절 가능아이콘, 로고, 일러스트WebP손실/비손실 지원- 구글 개발- JPG, PNG, GIF 대체 목적- 높은 압축률 + 품질 유지웹 최적화 이미지, 썸네일, 배너 등 태그설명mdnW3Schoolsimg이미지바로가기바로가기속성설명형..

html작성법과 제목, 문단, 목록 HTML과 CSS는 웹 개발의 기본이 되는 두 가지 핵심 기술입니다.HTML은 웹 페이지의 구조를 정의하고, CSS는 그 구조의 스타일을 지정합니다. HTML (HyperText Markup Language)정의:HTML은 웹 페이지의 콘텐츠와 구조를 정의하는 마크업 언어입니다.기능:구조 정의: 웹 페이지의 제목, 단락, 목록, 링크, 이미지 등을 정의합니다.하이퍼텍스트: 다른 페이지나 리소스로의 링크를 제공합니다.기본 요소:태그: HTML 요소는 시작 태그와 종료 태그로 구성됩니다내용속성: 태그는 추가 정보를 제공하는 속성을 가질 수 있습니다. 기본예) Hello, World! This is a paragraph. Visit Example CSS (Casc..

컴포넌트 ( Component ) 개념과 등록  1. 컴포넌트 개념컴포넌트 : 단축키 :  [ ctrl ] + [ Alt ] + [ k ]  컴포넌트는 디자인 요소를 재사용하고 유지보수하기 쉽게 만드는 방법을 제공합니다.예를 들어, 웹 페이지의 헤더, 버튼, 아이콘 등과 같이 반복적으로 사용되는 디자인 요소를 컴포넌트로 정의하면 해당 컴포넌트를 다른 디자인에서도 쉽게 사용할 수 있습니다. Figma의 컴포넌트 기능은 디자인 시스템을 구축하고 협업하는 데 큰 도움을 주며, 특히 대규모 프로젝트에서 효율적인 디자인 작업을 가능하게 합니다.장점 재사용성: 한 번 디자인한 컴포넌트를 다른 곳에서 간편하게 재사용할 수 있습니다. 수정하거나 업데이트할 때에도 모든 인스턴스에 일괄적으로 적용됩니다.일관성: 컴포넌트를..

이미지 누끼 플러그인 Remove BG  1. Remove BG 검색     2. Set API Key 3.  wesite 클릭    4. 가입 ( 메일 인증받기 )https://www.remove.bg  이미지 배경 제거, 투명 배경 만들기 – remove.bg사진이나 이미지 배경을 한 번 클릭으로 5초만에 무료로 제거할 수 있습니다. 이미지 배경 투명하게 만드는 법. 누끼 따기 프로그램.www.remove.bg 구글로 가입하세요    5. Tools & API - figma 선택 For Business -  Tools & API   6. 인스톨은 안 해도 됩니다.  api key 7. API Keycopy - save changes    8. 9. 이미지 선택 실행

이미지 가져오기, 속성, 이펙트, 마스크 이미지 가져오는 방법 이미지 속성 이미지 자르기이펙트 마스크 만들기마스크 제거하기 1. 이미지 가져오기 무료 이미지 : https://pixabay.com/ 1) 메뉴, 툴- [피그마아이콘] - [file] - [place image]- 단축키 : Ctrl+Shift+k- 도형툴 - [place image] 2) 도형안에 이미지 넣기 3) 여러개의 도형 안에 이미지 넣기 2. 이미지 보정과 속성 1. 이미지 2. 이미지 또는 GIF의 섬네일 3. 불투명도 백분율 값(%) 0% ~ 100% 4. 숨기기 / 보이기 5. [-] 이미지를 제거 6. [+] 추가 7. 이미지, 단색 및 그라디언트에서 색상 스타일을 만들고. 스타일 아..