본문 바로가기

분류 전체보기328

[HTML] 빈태그(Empty Element)란? 컨테이너 엘리먼트(Container Element) header, body, table, div, span 태그 처럼 시작태그와 종료태그가 있는 엘리먼트를 말한다 엠티 엘리먼트(Empty Element) 한국어로 빈 태그라고 불리며 img, br, input, link 처럼 종료 태그가 없는 엘리먼트를 말한다 HTML1, 2, 3, 4까지는 빈태그를 사용했지만 XHTML에서는 빈 태그에 self-closing 문법을 사용하면서 종료태그를 알려주는 심볼 슬래시(/)를 추가해주었다. HTML5에서는 닫힘기호 없이 사용하는 빈태그와 self-closing 문법을 사용한 빈 태그 모두 사용할 수 있다. 하지만 안전성을 위해 self-closing 문법을 사용한 빈태그 사용을 권장한다. 2022. 4. 22.
[HTML] HTML 요소의 구조 (HTML Syntax) HTML 요소(Element)의 구조 내용 요소(Element): 시작태그 + 요소의 내용 + 종료태그 엘리멘트의 기능 확장을 위해 속성(attribute), 값(value)을 주었다 2022. 4. 22.
[HTML/한줄정리] 라디오 버튼에 name 속성이 필요한 이유 Apple banana cherry 라디오 버튼 UI를 만들기 위해서는 input의 type을 radio로 지정해야한다. 여기서 주의해야할 것은 모든 input의 name이 동일해야한 다는 것이다. input의 name이 동일하지 않다면 같은 그룹에 있는 input 태그로 분류되지 않아 모든 라디오버튼이 선택 가능해진다. 라디오 버튼의 특성상 여러 옵션중에 하나만 선택이 가능해야하므로 name 속성을 입력해 하나만 선택될 수 있도록 한다. 2022. 4. 22.
[HTML] HTML 전역속성 5가지 정리 전역속성이란? img 태그의 src 속성은 이미지의 경로값을 가진다. 이처럼 태그마다 가질 수 있는 속성이 모두 다르고 미리 정해져 있지만 몇몇 속성은 전역적으로 사용할 수 있다. 즉, 전역속성이란 HTML body 태그 안에 있는 모든 요소가 가질 수 있는 속성을 말한다. content 1. title 요소의 정보나 설명을 지정해 해당 엘리먼트를 hover 했을때 tool tip UI가 해당 설명을 표시해준다. 2. style 요소에 적용할 스타일(CSS)을 지정해준다. 3. class 요소를 지칭하는 중복 가능한 이름을 지정해준다. 4. id 요소를 지칭하는 고유한 이름을 지정해준다. 5. data-이름 요소에 데이터를 지정해줘 자바스크립트로 해당 요소를 찾아 활용할 수 있다. 2022. 4. 22.
[CSS] div 태그와 span 태그 비교 span 대표적인 인라인 요소 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도 요소가 수평으로 쌓임 width, height로 가로, 세로 너비를 지정할 수 없다 margin, padding으로 왼쪽, 오른쪽 공백을 만들 수 있지만 위, 아래 공백을 만들 수 없다 인라인 요소이므로 안에 블록 요소를 자식 태그로 가질 수 없다 (인라인 요소는 인라인 요소만 자식 태그로 가질 수 있다) span 태그를 작성할때 한줄을 띄우면 공백이 나타난다 span 태그 사이에 공백이 나타나지 않음 AppleBanana span 태그 사이에 공백이 나타남 Apple Banana div 대표적인 블록 요소로 division의 약어 특별한 의미가 없는 구분을 위한 요소 (레이아웃의 영역을 잡을 때 사용) 요소가 .. 2022. 4. 22.
[웹개발] 웹개발에서 자주 사용하는 특수 키보드 영문이름 정리 ~ Tilde(틸드) ! Exclamation Mark(익스클레메이션 마크) @ At Sign(엣 사인) ^ Caret Key(캐럿) & Ampersand(엠퍼센드) * Asterisk(에스터리스크) - Hyphen(하이픈), Dash(대시) _ Underscore(언더스코어), Low Dash(로우 대시) = Equal Sign(이퀄 사인) " Quotation Mark(쿼테이션 마크) ' Apostrophe(아포스트로피) : Colon(콜론) ; Semi-Colon(세미 콜론) | Vertical Bar(버티컬 바) ( ) Parentheses(퍼렌떼시스), Round Brackets(라운드 브라켓) { } Braces(브레이스), Curly Brackets(컬리 브라켓) [ ] Square Brac.. 2022. 4. 22.
[웹개발] 오픈소스 라이센스 종류 오픈 소스(Open Source)란? 오픈 소스란 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것을 말한다. 오픈소스 라이센스 종류 1. Apache License 아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이센스 개인적/상업적 이용, 배포, 수정, 특허신청이 가능 2. MIT License 메사추세츠공과대학에서 소프트웨어 학생들을 위해 개발한 라이센스로 개인 소스에 이 라이센스를 사용하고 있다는 표시만 지켜주면 되며 나머지 사용에 대한 제약은 없음 3. BSD License 버클리 캘리포니아 대학에서 개발한 라이센스로 MIT 라이센스와 동일한 조건 4. Beerware 오픈소스 개발자를 만난다면 맥주를 사줘야하는 라이센스로 .. 2022. 4. 22.
[웹개발/한줄정리] 크로스 브라우징(Cross Browsing)이란? 크로스 브라우징이란 조금씩 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은 화면, 같은 동작)을 줄 수 있도록 제작하는 기술, 방법을 말한다. 2022. 4. 22.
[Visual Studio] 비주얼 스튜디오 단축키 모음 (Mac) 비주얼 스튜디오에 있는 모든 명령 접근하기 Cmd + Shift + P 사이드바 열고 닫기 Cmd + B 이름으로 파일 검색 Cmd + P 검색하고 바꾸기 Cmd + Alt + F 해당 줄에 있는 코드를 줄 위로 이동시키기 Alt + Up 해당 줄에 있는 코드를 줄 아래로 이동시키기 Alt + Down 해당 줄에 있는 코드를 복사해서 줄 위에 넣기 Alt + Shift + Up 해당 줄에 있는 코드를 복사해서 줄 아래에 넣기 Alt + Shift + Down 다음 탭으로 이동 Cmd + Shift + ] 이전 탭으로 이동 Cmd + Shift + [ 창 분할하기 Cmd + \ 2022. 4. 22.
[웹개발] 웹에서 사용하는 이미지 정리 1. 비트맵(Bitmap) 픽셀이 모여 만들어진 정보의 집합 레스터 이미지라고도 부름 정교하고 다양한 색상을 자연스럽게 표현 확대, 축소시 계단현상이 발생해 품질저하 비트맵 이미지의 종류: JPG, JPEG, PNG 1) JPG, JPEG 손실 압축 방식을 사용하기 때문에 여러번 저장할수록 이미지의 품질이 손실됨 이미지의 품질과 용량을 쉼게 조절가능 2) PNG 비손실압축 방식을 사용하기 때문에 이미지가 여러번 저장되어도 이미지의 품질이 손실되지 않음 JPG와 비교해 용량이 비교적 큼 Alpha Channel을 지원해 이미지 내부에서 투명한부분을 사용할 수 있음 투명한 배경화면에 필요한 이미지에 주로 사용 3) GIF 하나의 이미지 파일에 여러개의 이미지를 담을 수 있는 구조를 가지고 있어 움짤, 애니메.. 2022. 4. 22.
[HTML] <!DOCTYPE html> 태그의 의미 (HTML 버전) DOCTYPE(Document Type Definition)이란? DOCTYPE은 문서의 HTML 버전을 웹 브라우저에게 알려주기 위해 문서 상단에 위치시키는 선언부다. HTML5 문서임을 웹브라우저에게 알려주는 DOCTYPE 선언부는 로 표현한다. HTML5 선언시 DOCTYPE XHTML 1.1 선언시 DOCTYPE HTML문서에서 사용하는 DOCTYPE The content of the document...... 정리 DOCTYPE은 문서의 HTML 버전을 웹브라우저에게 알려주는 선언부이며 현재는 HTML5가 웹 표준이므로 를 문서 상단에 선언한다. 2022. 4. 22.
[HTML] HTML의 기본구조 (HTML, HEAD, BODY 태그의 역할) HTML의 기본구조 1. DOCTYPE 문서의 HTML 버전을 웹 브라우저에게 알려주는 선언부 2. HTML HTML 문서의 전체범위를 알려주는 태그로 HTML 문서가 어디에서 시작하고 어디에서 끝나는지 알려주는 역할 3. HEAD HTML 문서의 정보를 나타내는 범위로 웹페이지의 제목, 설명, 사용할 파일의 위치, 스타일 등 웹 페이지의 보이지 않는 정보를 작성하는 곳 4. BODY HTML 문서의 구조를 나타내는 범위로 사용자 화면을 통해 보여지는 UI가 이곳에 들어간다 2022. 4. 22.
[HTML] HTML 문서에 favicon 삽입 방법 favicon은 favorite icon의 줄임말로 웹 브라우저 탭에 위치한 아이콘을 말한다. 이 아이콘을 HTML 문서에 삽입하기 위해서는 아래와 같이 태그를 이용해 삽입한다. 이미지 파일이름은 favicon을 권장하며 파일 타입은 png 또는 ico가 주로 사용된다. ico를 사용하면 웹브라우저가 파비콘을 자동으로 인식해 파비콘으로 지정하기가 편리하다. 2022. 4. 22.
[HTML] 상대경로 vs 절대경로 용어정리 경로: 문서나 파일의 위치 루트 디렉토리: 최상위 디렉토리를 의미한다. 상대경로(Relative Path) 상대경로란 현재 디렉토리를 기준으로 상대적인 파일의 위치를 가리키는 경로를 말한다. 상대경로는 최상위 디렉토리를 포함하지 않으며 현재 디렉토리를 의미하는 점 하나(.) 또는 부모 디렉토리를 의미하는 점 두개(..)의 심볼을 이용한다. . 현재 디렉토리 .. 부모 디렉토리 ./folder 현재 디렉토리에 있는 folder 디렉토리 folder 현재 디렉토리에 있는 folder 디렉토리 (./는 생략할 수 있다) ../folder 부모 디렉토리에 있는 folder 디렉토리 절대경로(Absolute Path) 절대경로란 최상위 디렉토리부터 포함해 파일의 위치를 가리키는 경로를 말한다. 최상위 디.. 2022. 4. 22.
[HTML] 자주 사용하는 Emmet 단축키 10가지 정리 ⚠️ 이 포스팅은 드림코딩의 웹사이트 빨리 만드는 지름길 Emmet, HTML 빠르게 마크업하기을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 1. HTML 양식 작성 ! + Tab or Return 2. div 태그 작성 div + Tab or Return .className + Tab or Return #idName + Tab or Return 3. 부모 자식 관계 (>) div>ul>li 4. 동등관계 (+) div>ul+ol 5. 아이템 반복 (*) ul>li*3 6. 상위로 올리기 (^) div>ul>li^ol 7. 그룹화 ( ) div>(header>ul>li*2>a)+footer>p 8. 태그안에 텍스트 넣기 { } p{hello} hello 9. 자동번호넣기 ($) p.class${item .. 2022. 4. 21.
[웹개발/한줄정리] 레거시 코드(Legacy Code)란? 레거시 코드란 누군가 떠나면서 남겨둔 코드를 의미한다. 주로 2가지 의미로 해석된다: 1. 테스트 코드가 없어 검증이 힘들거나 불가능한 코드 2. 코드의 변경이 어려운 코드 2022. 4. 21.
[리액트/한줄정리] 라이프 사이클(Life Cycle)이란? 라이프 사이클이란 컴포넌트가 우리 눈에 보이게된 그 순간부터 사라지는 순간까지 즉, 컴포넌트의 생애주기를 말한다. 2022. 4. 21.
[웹개발/한줄정리] 비즈니스 로직(Business Logic)이란? 비즈니스 로직이란 웹사이트가 동작하는데 필요한 핵심 데이터 처리를 수행하는 알고리즘을 말한다 2022. 4. 20.
[웹개발/한줄정리] 프론트엔드 개발이란? HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고 그것으로 사용자와 상호 작용할 수 있도록 하는 것. 2022. 4. 20.
[리액트] 리덕스 정리 (전역상태관리란?) ⚠️ 이 포스팅은 스파르타코딩클럽 리액트 기초반을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 리액트 기초반 3-7 리덕스를 통한 리액트 상태관리 3-8 리덕스 살펴보기 3-9 리덕스 써보기 3-10 리덕스와 컴포넌트를 연결하자 3-11 컴포넌트에서 리덕스 데이터 사용하기 리덕스란? 리덕스란 전역 상태 저장소다. 상태란 데이터를 의미하므로 리덕스는 전역적(global)으로 관리하는 데이터 저장소를 말한다. 리덕스를 사용하지 않는 리액트 프로젝트는 컴포넌트 내부에서 상태를 설정하고 업데이트해주는 지역적(local)인 방식으로 상태관리를 해주었다. 하지만 리덕스를 사용하면 상태를 저장해주는 데이터 저장소가 따로 생겨 컴포넌트 내부에서는 상태관리를 해주지 않아도 된다... 2022. 4. 20.

티스토리툴바