프론트엔드 개발
HTML - HTML 태그 (목록, 표)
ol (ordered list : 항목을 순서 붙여서 나열) 속성 start : 시작 번호 지정 type : 순서를 붙이는 유형 (숫자, 영어, 로마숫자 -> 1, a, A, i, I 등이 있다.) ※ li (list : 각 항목을 의미함) 항목1 항목2 항목1 항목2 ul (unorderd list : 항목을 순서없이 나열) 항목1 항목2 dl (description list : 딕셔너리(이름 : 값) 형태로 된 리스트) dt (description-term : 딕셔너리의 이름) dd (description-description : 딕셔너리의 값 하나의 dt에 여러 dd가 들어갈 수 있다. 이름 값1 값2 값2 표 표 이름 1열 2열 (1,1) (1,2) (2,1) (2,2) table : 표의 시작/..
HTML - HTML 태그 (제목, 단락, 인용구, 서식)
HTML 태그 제목(Heading) , 단락(Paragraph) 텍스트 크기/구분/위치 등에 영향주는 태그 태그명 empty tag 설명 예시 이미지 X (heading) 제목을 나타내는 태그 ~ 순서로 텍스트 크기 점점 작아진다. 위아래 자동 여백 들어간다. 검색엔진이 이 태그로 키워드 수집함. X (paragraph) 내용 구분하기 위한 문단, 단락을 나타내는 태그 텍스트 앞 뒤로 빈 줄이 생기면서 단락 만들어 진다. ※ br태그와 비슷하지만, 스타일 적용하려면 p태그 사용 O (break line) 줄을 바꿔주는 태그 웹 문서의 텍스트는 Enter, 개행(\n) 넣어도 띄워지지 않으며, 여러번의 Spacebar도 1번으로 인식된다. 줄을 바꿔주고 싶을때 br 태그 사용. X (preformatted..
HTML - 기본 구조, 태그
기본 구조 : 현재 문서는 HTML5 문서임을 명시 : HTML 문서의 root 요소를 정의 : 웹 브라우저 통해 보이는 내용 : 제목(heading) : 단락(paragraph) 태그 HTML 문서의 시작과 끝을 알린다. HTML 문서에서 사용할 언어 지정한다. 검색 사이트에서 특정 언어로 제한하여 검색할 때 이것을 참고함. : HTML 문서에서 사용할 언어 지정. 태그 이 영역의 내용은 대부분 화면에 나타나지 않음. 웹 브라우저에게 필요한 정보 알려주는 용도 태그 웹 문서와 관련된 정보 지정할 때 사용 화면에 글자 표시할 때 어떤 인코딩 사용할지 지정 웹 서버는 영어가 Default 이므로, 한국어 표시할 때 지정해주어야 함. 검색 엔진에서 참고하는 문서 키워드, 설명, 제작자 정보 등 입력가능 태그..
웹 개발 테크트리 정리
웹 개발 테크트리 정리 준비 기초상식 호스팅 도메인 DNS HTTP 개발환경 OS : Mac, Win 텍스트 에디터 : VS Code, Intellij 브라우저 : Chrome, Firefox 터미널 : Git Bash, Zsh(맥), 기본 디자인 : Adobe XD, Figma 기본언어 HTML 페이지 구조 문맥에 맞는 태그 용도에 맞는 태그 CSS 기본 스타일 포지션 정렬 (Flex, Grid) Javascript 변수 데이터타입 오브젝트 배열 함수 반복문 DOM 특성선택 프론트엔드 FE HTML 웹표준 접근성 호환성 CSS Flex box Grid 트랜지션 애니메이션 반응형 - Media query ★ (선택) SASS (CSS보다 생산성 높음) 변수 Mixin 함수 Nested (선택) CSS F..
DOM (문서 개체 모델) 이란?
DOM (Document Object Model) DOM 이란? 마크 업을 구문 분석할 때 브라우저가 생성하는 객체로, Document를 Object(Node)의 집합체로 "해석"해 놓은 것이다. 모든 사람의 요구에 맞는 새 HTML 파일을 그때마다 생성해 제공해줄 수 없기 때문에 DOM을 만들고 JS 등의 스크립팅 언어를 통해 Document 내용 변경하거나 엑세스한다. 왜 DOM이 필요한가? 옛날에는 HTML이 단지 텍스트 문서에서만 사용되었다. 브라우저가 HTML문서 다운 후 구문 분석하며 화면에 렌더링하면 그게 끝이었다. 그러나 점차 사람들이 웹용 어플리케이션을 구축하기 원하게 되었는데 "서버 측"에서 모든 상호 작용을 구현하는 것은 너무나 느렸다. 그래서 JS를 도입하게 되었다. JS는 브라우저..
MIME-Type, Content-Type 이란?
MIME MIME 이란? Internet media type as defined by Multipurpose Internet Mail Extensions 전자우편을 위한 인터넷 표준 포멧이다. 바이너리 데이터를 ASCII 텍스트 형식으로 변환(인코딩)하기 위한 방법을 정의한다. MIME 사용하는 이유? 옛날 전자우편은 ASCII파일 (ASCII 공통 표준 따르는 텍스트 파일) 전송만 가능했다. 그런데 바이너리 파일(음악,동영상,워드 파일) 전송이 필요졌고 이를 전자우편으로 전송하기 위해 개발되었다. MIME 표준에 정의된 Content-Type들은 HTTP 통신에서 전송 데이터를 표현할때도 사용된다. 어떻게 타입을 알려주는데? MIME으로 인코딩 한 파일은 데이터의 종류를 알려주는 Content-Type..
HTML 정리
HTML (Hyper Text Markup Language) 브라우저가 읽을 수 있게 태그를 이용하여 구조를 만들어 놓은 문서 (확장자가 .html) W3C (World Wide Web Consortium) 에서 웹 표준 관리함. (HTML, CSS, DOM, VG, XHTML, XML) Hyper Text : 문서(텍스트,이미지,영상)를 서로 연결해주는 링크 Markup : 표시한다. Languge : 그러한 언어 HTML 버전 버전 연도 DOCTYPE 및 설명 HTML 1.0 1991 팀 버나스리(Tim Berners-Lee)가 발표한 최초의 HTML HTML 2.0 1995 국제 표준으로 제정된 최초의 HTML HTML 3.2 1997 W3C에 의해 제정된 최초의 HTML HTML 4.01 1999..
2022년 03월 까지 웹 개발 정복하기 (21.05.26 up)
길라잡이 웹 개발 테크트리 정리 웹 개발 테크트리 정리 준비 기초상식 호스팅 도메인 DNS HTTP 개발환경 OS : Mac, Win 텍스트 에디터 : VS Code, Intellij 브라우저 : Chrome, Firefox 터미널 : Git Bash, Zsh(맥), 기본 디자인 : Adobe XD, Fig.. 11001.tistory.com Chapter 1. HTML/CSS/웹지식 기초 공부 (2021.05.26 ~ ) HTML 정리 HTML (Hyper Text Markup Language) 브라우저가 읽을 수 있게 태그를 이용하여 구조를 만들어 놓은 문서 (확장자가 .html) W3C (World Wide Web Consortium) 에서 웹 표준 관리함. (HTML, CSS, DOM, VG, X..