fullstack-study

# position position 속성 - position 속성의 속성값: static, fixed, relative, absolute - 텍스트 이미지 표 등의 요소를 웹 문서에 배치할 때 사용 속성값의 특징을 확인하는 조건 - 부모 자식 간에 발생하는 마진 병합 현상 유무 - top, right, bottom, left 속성 적용 유무 - 부모가 높이를 갖고 있지 않을 때 자식의 높이가 부모의 높이에 영향을 주는지 유무 구분 속성 설명 정적 위치 설정 position:static 각종 요소를 웹 문서의 흐름에 따라 배치 상대 위치 설정 position:reletive 웹문서의 정상적인 위치에서 상대적으로 얼마나 떨어져 있는지 표시하여 배치 절대 위치 설정 position:absolute 전체 페이지..

# flex flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 문서는 근간이 되는 내용 전체를 설명합니다. flex-box 바로가기 flex 연습 사이트 바로가기 Flexbox 레이아웃은 flex item의 복수의 자식 요소와 이들을 포함하는 flex-container 부모 요소로 구성 주 축(main-axis) : 기준축 / 교차 축(cross-axis) : 교차축 # Flex Container 속성 설명 display Flex Container를 정의 flex-flow flex-direction와 flex-wrap의 단축 속성 flex-direction Flex Items의 주축를 ..

선택자 , 스크롤, 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 : 투명이미지svg : W3C가 개발한 개방형 표준으로 벡터포맷유형gif : 움짤WebP : 구글에서 개발한 이미지 포맷 - gif, png, jpg 포맷을 대체하귀 위해 개발     태그설명mdnW3Schoolsimg이미지바로가기바로가기속성설명형식src이미지 경로( 필수 )src = "./이미지명.jpg"alt이미지 대체 텍스트 ( 필수 )alt = "이미지안에글자 또는 타이틀"width너비width="100", width="100px"height높이height="100", height="100px"title툴팁title="이미지 설명" * alt 특성은 이미지의 텍스트 설명이며 필수는 아니지만 스크린..

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의 컴포넌트 기능은 디자인 시스템을 구축하고 협업하는 데 큰 도움을 주며, 특히 대규모 프로젝트에서 효율적인 디자인 작업을 가능하게 합니다.장점 재사용성: 한 번 디자인한 컴포넌트를 다른 곳에서 간편하게 재사용할 수 있습니다. 수정하거나 업데이트할 때에도 모든 인스턴스에 일괄적으로 적용됩니다.일관성: 컴포넌트를..