[CSS] Selector 정리

CSS 선택자 선택자(Selector)는 스타일을 지정하고 싶은 HTML 요소를 가르키며, 세미콜론을 구분자로 하나 이상의 선언을 포함한다. 여기서 선택자(Selector)는 p이고, 2개의 선언(Declaration)으로 이루어져 있습니다. p - 선택자 color - 속성(property), red는 속성값 padding - 속성(Property), 5px는 속성값 종류 1. 전체 선택자 전체 선택자는 별표(*)를 사용하며, HTML 내부의 모든 태그에 지정된 스타일을 적용하도록 해줍니다. /* 전체 선택자 사용방법 */ * { property : property value; } /* 사용 예시 */ * { color : blue; } 2. 태그 선택자 태그 선택자는 앞에 붙여 무언갈 따로 붙여줄 필..

• format_list_bulleted Web
• · 2022. 12. 18.
• textsms

해시 함수(Hash Funtion)란?

해시 함수는 소프트웨어의 성능과 보안을 책임지는 매우 중요한 요수 중 하나이며, 데이터양이 많아져도 일관된 성능을 보장하는 구조로 설계할 수 있고 민감한 데이터의 변조를 막을 수 있기 때문입니다. 해시 함수(Hash Function)란? 알고리즘의 한 종류로써 임의의 입력값을 입력받아 항상 고정된 길이의 해시 값으로 변환하는 함수입니다. 변환 전 입력값은 문자, 숫자 등 거의 모든 형태의 입력값을 사용할 수 있습니다. 변환 후 데이터 값을 해시 값이라고 하며 바이너리 형태로 반환됩니다. 이러한 과정을 해싱(Hashing)이라고 하며 해싱에서 사용하는 함수를 해시 함수(Hash Function)라고 합니다. 특징 입력값이 동일하면 계산한 결과값도 동일합니다. 입력값의 길이와 상관없이 해시 값의 길이는 동일..

• format_list_bulleted 컴퓨터 기초 및 개념
• · 2022. 12. 11.
• textsms

[CSS] 벤더 프리픽스(Vendor Prefix)란?

웹 페이지를 제작할 때 HTML 태그나 CSS 속성이 어떤 브라우저의 어떤 버전에서 지원하는지 미리 확인해야 합니다. Can I use HTML, CSS, JS 등 각 브라우저의 지원 현황을 확인할 수 있는 웹 서비스입니다. https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com 빨간색 : 지원 X 초록색 : 지원 O 베이지색 : 현재 버전 어두운 초록색: 지원하기 위한 조건이 존재 위의 지원 조건을 보면 -(하이픈)을 볼 수 있습니다. 이는 '벤더 프리픽스(Vender Prefix)가 필요합니다' 라는 조건입니다. 벤더 프리픽스(Vender Prefix)란? 가장 많이 사용되는 웹 브라우저에는 익스플로러, 크롬,..

• format_list_bulleted Web
• · 2022. 12. 9.
• textsms

[CSS] Reset CSS - 브라우저에 따라 다르게 보이는 차이

웹 브라우저에는 많은 종류가 있으며 각 브라우저에 기본으로 적용된 독자적인 CSS가 존재합니다. 그렇기 때문에 브라우저 마다 다르게 표시되는 것이며 이를 방지하기 위해 CSS를 초기화하면 브라우저에 기본적으로 적용된 CSS를 취소해 다른 브라우저에서도 웹 페이지가 동일하게 보이는 효과를 가져옵니다. 초기화 방법 직접 CSS를 초기화해도 되지만 공개된 CSS를 사용하면 더 편하게 초기화 할 수 있다. destyle.css https://github.com/nicolas-cusan/destyle.css GitHub - nicolas-cusan/destyle.css: Opinionated reset stylesheet that provides a clean slate for styling your html. ..

• format_list_bulleted Web
• · 2022. 12. 9.
• textsms

[HTML] HTML 기본 정리

1. HTML5 기본 템플릿 코드 DOCTYPE 해당 HTML 파일이 어떤 버전으로 만들어 졌는지 나타내며, 브라우저가 다르게 렌더링 하지 않도록 하기 위해 HTML문서임을 알려준다. HTML HTML문서라는것을 나타내며 모든 코드를 감싼다. lang은 웹페이지 언어를 설정하는 속성(ko, en등) HEAD HTML 태그 안에는 페이지의 제목 설명, 외부에서 불러오는 파일링크등 페이지 정보를 적는다. META 문서 전반에 정보를 표시하기 위한 설정 charset : 문자 인코딩 설정 (utf-8, euc-kr등) name : 메타 정보의 이름 author : 저자 이름 description : HTML 문서 설명 keywords : 검색엔진을 위한 키워드 호환성 관련 태그 인터넷 익스플로러(IE)에서 최..

• format_list_bulleted Web
• · 2022. 12. 9.
• textsms

[Web] json-server를 활용하여 로컬에 JSON서버 구축하기

Prologue json-server는 REST API서버를 구축할 수 있는 npm모듈이다. 프로젝트에 네트워크 통신이 필요한 경우 백엔드로부터 데이터 통신을 위한 API를 제공 받아야 한다. 하지만 아직 백엔드에서 API작업이 완성되지 않은 상태일때, 프론트는 Mock데이터를 이용해서 작업을 하는 방법도 있겠지만 백엔드 API가 나온 후 실제 네트워크 통신작업을 추가적인 작업은 불가피하다. 이런 시간적인 낭비를 줄이기 위해 로컬에서 Mock서버를 활용하는 방법을 소개하고자 한다. 사용방법 1) 설치 npm install -g json-server 2) JSON 파일 생성 프로젝트를 진행할 폴더(test-server)를 만들고, db.json 파일을 만들겠습니다. db.json 파일에 다음과 같이 데이터..

• format_list_bulleted Web
• · 2022. 11. 23.
• textsms