프론트엔드 개발/HTML CSS

HTML - 이미지, 오디오, 비디오, 링크 삽입

이미지, 오디오, 비디오, 링크 삽입 이미지 삽입 태그 속성 src : 이미지 파일의 경로 (필수) alt : 이미지가 없을 경우 대체하여 나타낼 텍스트. 없으면 alt="" 입력 width : 이미지 너비 설정 height : 이미지 높이 설정 width/height 둘 중 하나만 작성하면 나머지는 비율 자동 계산됨. 단위는 퍼센트(%), 픽셀(px) 종류 설명 예시 퍼센트 (%) 웹 브라우저 창의 너비와 높이 기준으로 해당 퍼센트만큼 이미지 크기 결정 width="50%" 픽셀 (px) 웹 브라우저 창의 크기와 무관하게 이미지 크기를 해당 픽셀 크기로 표시 width="150" 이미지 속성 GIF (Graphic Interchage Format) : 최대 256가지 색상으로 표현가능. 파일의 크기가 ..

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 이므로, 한국어 표시할 때 지정해주어야 함. 검색 엔진에서 참고하는 문서 키워드, 설명, 제작자 정보 등 입력가능 태그..

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..