전체 글 109

[CSS] 인라인 요소와 블록라인 요소 개념과 display 프로퍼티

HTML의 태그는 크게 인라인 요소와 블록 요소로 나눌 수 있다. 1. 인라인 요소 1) 특징: - 인라인 요소는 블록 요소안에 포함할 수 있다. 인라인 요소 안에는 또 다른 인라인 요소가 들어갈 수 있다. - 콘텐츠에게 맞추어져 있기 때문에 width와 height를 변경 해 줄 수 없다. - 따라서 인라인 요소는 line-length로 줄의 높낮이를 조절하여 콘텐츠의 크기를 변경하거나 text-align으로 좌, 우, 중앙 정렬을 할 수 있다. -인라인 요소는 줄바꿈이 없고 우측에 바로 이어져서 표기가 된다. 2) 인라인 요소: 하이퍼링크를 걸어주는 테그 이미지를 삽입하는 태그 사용자에게서 입력받을 수 있는 입력 폼을 만들어내는 기능 의미 없는 태그 ... See the Pen Untitled by ..

[CSS] margin 병합 현상과 해결법

1. margin 병합 현상(margin collapsing)이란? See the Pen margin by Hun-Se (@hun-se) on CodePen. 다음 보기와 같이 겹치는 2개의 section값에 margin을 주었을 때 섹션 1의 하단에 20px, 섹션 2의 상단에 20px이 적용돼서 40px의 여백이 생기는 게 이론 상으로 맞다. 하지만 위 예시에서는 20px로 적용이 되었다. 이는 css에서 이를 병합해줘 보기가 좋게 만들어 줌으로써 사용자가 따로 css조작을 할 필요없게 만들어 준 것이다. (참고로 곂치는 block요소에서 더 큰 margin 값이 적용된다.) - margin병합 현상의 조건 1) 인접해 있는 block요소 끼리만 일어난다. 2) 상하단에서만 마진 병합이 이루어진다. ..

[CSS] CSS 개념 정리

1. CSS 란 Cascading Style Sheetd의 약자로 스타일을 적용하는 방식이 우선순위에 따라 순차적으로 되기 때문에 Cascade라는 이름이 붙여졌다. html과 같은 문서를 꾸미기 위해 사용하는 스타일시트이며 CSS 2.1 개발이 완료되고 CSSWG(CSS Working Group)는 더 이상 CSS의 버전을 3, 4와 같은 메이저 업데이트로 가져가지 않기로 결정로 했다. 2. css 속성값 1) 선택자(Selector) 선택자는 규칙을 적용할 요소를 나타낸다. 2) 프로퍼티(property) 변경하려는 요소의 부분을 나타낸다. 3) 값(value) 선택한 프로퍼티에 사용하려는 설정을 지정한다. 4) 선언(declaration) 선택자로 지정한 요소의 스타일을 적용하는 방법을 나타낸다. ..

[HTML] Form 태그 종류 및 개념정리

1. form 폼의 뜻은 정보를 기입하는 부분이 있는 문서를 뜻한다. 따라서 HTMl에서 form은 사이트의 방문자에게 정보를 수집할 수 있는 태그들이다. HTML에서는 다양한 유형의 태그들로 사용자로부터 정보를 수집한다. form의 동작 방식 (1) 사용자가 폼을 입력한 후 submit하면 정보가 웹서버에 전송된다. (2) 웹서버는 정보를 처리하고 대부분 정보는 데이터베이스(DB)에 저장된다. (3) DB에서 CRUD 작업이 일어나고 작업 결과를 APP으로, WEB으로 전송합니다. (4) 서버는 수신한 정보를 브라우저로 보낼 새로운 페이지를 만든다. 2. - 태그에는 action 속성과 method 속성 id 속성을 쓸 수 있다. action - action="url"의 형태로 쓰이며 폼에 있는 정보를..

[HTML] Text-level Tag 모음

1. - 같이 아무 의미 없는 태그이다. 쓸만한 태그가 없을 때 쓰는 최후의 수단. HTML 삽입 미리보기할 수 없는 소스 2. , 화학기호나 수학공식같은 첨자를 이용할때 사용 글자로 특정 글자를 작아지게 하기 위해서는 사용하지 않는다. - : 문자 하단에 첨자 - : 문자 상단에 첨자 HTML 삽입 미리보기할 수 없는 소스 3. , , , , - : 준말, 약자를 나타내고 싶을 때 사용하는 태그이다. 속성 값으로 title="원하는 단어"를 사용하고, 해당 태그로 감싸면 문자 하단에 점선이 생기고 그곳에 커서를 올려두면 title에 써놓은 단어가 표시된다. 보통 단독으로 쓰이지만, 태그에도 사용된다. - : 현재 문맥에서 정의하고 있는 용어를 나타낸다. dfn의 가장 가까운 부모가 혹은 쌍, 요소일 경..

[HTML] Grouping Content 모음

HTML 일반적인 구조 HTML Grouping Content 종류 1. , , 태그 아침 점심 간식 저녁 아침 점심 간식 저녁 결과 리스트, 메뉴 등을 나열 할때 사용 가능하다 태그는 순서가 있는 목록에 사용되며 숫자가 매겨지고 은 순서가 없는 목록에 사용되며 특수문자가 매겨진다. 는 또는 요소 안에서만 사용되어야 한다. 를 사용하면 로마자로 표기할 수 도 있다. 2. , , 한글 대한민국에서 사용하는 언어입니다. a는 b이다. 등 정의할 수 있는 정의 할 수 있는 상황에 사용 가능한 태그이다. 에는 하나 이상의 또는 가 포함되고 있어야 하고 div, dt, dd를 제외한 다른 태그를 포함하면 안 된다. 3. 레이아웃을 나눌 때 사용되지만 태그의 의미를 부여할 수 있다면 다른 태그들을 먼저 고민해보고 ..

HTML living standard 개념

HTML living standard 란? 현재는 WWW에서 콘텐츠를 구성하고 표시하는 데 사용되는 마크업 언어인 HTML의 표준 작성법이다. W3C와 WHATWG가 논의를 통해 만들어진 HTML 표준이며 2019년 부터는 HTML5대신 HTML Living Standard로 불리우며 WHATWG가 주관하게 되었다.이는 구조화된 형식과 엄격한 문법을 가지고 있기 때문에 해당 표준을 준수하여 작성해야 한다. 참고사이트: https://html.spec.whatwg.org/multipage/ HTML Standard html.spec.whatwg.org 주요 HTML 문법 1. 태그와 속성으로 구성되고 보통 여는 태그와 닫는 태그로 구성된다. 예시) hello world 2. 일부는 여는 태그로만 구성되있다..

CS 지식 2022.03.29

URL, IP, PORT 개념

1. URI url 이란 웹을 사용할때 접근 가능한 주소를 표현하는 방식이다. IP 주소에 보다 쉽게 접근 할 수 있게 이름을 지어준것. - 예시 https://naver.com:80/경로명 https : 프로토콜 naver.com : 도메인 주소 :80 포트번호 /경로명 :위치 2. IP 인터넷 상에서 사용하는 주소체계이다. CMD창에서 nslookup 명령어를 이용하여 웹 페이지의 DNS 정보중 IP를 알 수가 있다. - IPv4 현재 사용하는 네도막으로 이루어진 IP주소이다. 32비트로 이루어져있다. 예시) 127.0.0.1 - IPv6 IPv4를 대체하기 위해 만들어진 최신 세대의 IP이다. 패킷을 단편화하지 않으면서 효율적으로 라우팅 하게 해주고 지연에 민감한 패킷을 구분하는 기본적인 Qos를 ..

CS 지식 2022.03.29

[React] caver-js 오류

에러 노트 caver-js 컴파일 오류 caver-js가 컴파일이 안되는 현상 발생 코드를 재작성 해보니 import Caver from 'caver-js'; caver-js를 가져오는 코드에서 오류가 발생 오류화면 Compiled with problems:X ERROR in ./node_modules/caver-js/packages/caver-core-requestmanager/caver-providers-http/src/index.js 31:13-28 Module not found: Error: Can't resolve 'http' in 'C:\Users\User\klay-market\node_modules\caver-js\packages\caver-core-requestmanager\caver-pr..