[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

[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

[CSS] Box Model과 Box Sizing

위에 보이는 CSS 프로퍼티들을 많이 보셨겠지만, 위 프로퍼티들이 어떤 요소에 영향을 주는지 또 사용하면서 원하던 크기대로 잡히지 않는 경우가 발생하기도 하는데 왜 그런지 살펴보도록 하겠습니다. 이 부분을 이해하기 위해선 먼저 박스 모델(box model)이라는 개념을 알아야 합니다. 박스 모델(Box Model)이란? HTML의 모든 요소들은 BOX 모양으로 구성되어 있는데, 이것을 박스 모델(box model)이라고 부릅니다. 박스 모델은 안쪽부터 content, padding, border, margin으로 구분합니다. content 텍스트, 이미지, Input, div 요소 등 모든 콘텐츠 가로는 width, 세로는 height로 표현 padding - content를 둘러싼 공간(border와 ..

• format_list_bulleted Web
• · 2022. 10. 17.
• textsms