HTML/기초 16

HTML 문서의 구조

안에서 사용하는 태그들은 HTML 문서의 구조를 나타낸다. DIV(막쓰는 태그) 는 division의 약자로 분할을 뜻하고 문서의 부분이나 섹션을 정의한다. 명확한 의미를 가지지 않기 때문에 정말 많은 경우 단순히 특정 범위 묶는 wrap 용도로 사용한다. 보통 이렇게 묶인 부분들에 CSS나 JS를 적용하게 된다. cf.막사용된다는것이 부정적인것보다 긍정적인 의미에 더 가깝다. 그래서 다양하게 사용할 수 있고, 의미가 없는곳 조차도 사용할 수 있기 때문에 모양을 만들어내는데 굉장히 특화되어서 사용 될 수 있다. 아무렇게나 묶고 묶음을 어떠한형태로도 만들 수 있기 때문에 JS나 CSS로 제어하는 용도로 사용이 된다. //소스코드 예시. div는 div를 감쌀수 있다. 이렇게 어떠한 형태로도 다 사용이 가능..

HTML/기초 2020.05.31

HTML 문서의 범위 및 기초 코딩방법

HTML 문서의 범위 문서의 구조 //문서의 시작이 어디고 끝이 어딘지 표현한다. //정보를 바탕으로 실제로 화면에 출력할 구조들은 (이미지, 동영상, 글자 등) 이 영역안에 넣는다. LINK(CSS 불러오기) 외부 문서(css)를 연결할 때 사용한다. 특히 HTML 외부에서 작성된 CSS 문서(xxx.css 파일)을 불러와 연결할 때 사용한다. 빈(empty) 태그이다. 속성 의미 값 rel (필수) 현재 문서와 외부 문서와의 관계를 지정 stylesheet, icon 등... href 외부 문서의 위치를 지정 경로 STYLE(CSS 작성하기) CSS를 외부 문서에서 작성하고 연결하는 것이 아니고 HTML 문서 내부에 작성할 떄 사용한다. CSS는 무조건 style라는 태그 안에 작성해야한다. SCRI..

HTML/기초 2020.05.31

태그란

태그는 각자의 의미를 가지고 있다. ex. h1 = 제목 p = paragraph 문단 img = 이미지를 삽입할 때 사용하는 태그이다. div = 분할 속성(Attributes)과 값(Value) 태그(요소)의 기능을 확장하기 위해 '속성'을 사용할 수 있다. 부모와 자식 요소 태그A가 태그B의 콘텐츠로 사용되면, 태그B는 태그A의 부모 요소, 태그A는 태그B의 자식 요소라고 한다. 과일 목록 사과 딸기 오렌지 바나나

HTML/기초 2020.05.31

JPG, PNG, GIF, WEBP, SVG

* JPG는 압축률이 훌륭해 사진이나 예술 반야에 많이 사용된다. 손실압축 (원본이 있을때 다시 jpg로 압축해서 파일을 저장하는것을 추천하지않는다. 즉 여러번 원본을 저장하는걸 피하는것이 좋다.) 그대신 용량이 적게 든다. 표현 색상도(24비트, 약 1600만개 색상) 뛰어나 고해상도 표시장치에 적합 이미지의 품질과 용량을 쉽게 조절 가능 가장 널리 쓰이는 이미지 포맷 ====> 높은 압축률(적은 용량)! * PNG는 GIF의 대체 포맷으로 개발 되었다. 비손실 압축 (손실이 없는 대신에 용량이 적게 들지는 않는 단점이 있다.) 8비트(256 색상) / 24비트(약 1600만개 색상) 컬러 이미지 처리 Alpha Channel 지원(투명도) W3C 권장 포맷 ====> 투명도 지원! * GIF는 이미지..

HTML/기초 2020.05.30

비트맵과 백터 이미지

이미지(그래픽)은 크게 비트맵과 백터로 구분이 된다. 비트맵(bitmap)은 각 픽셀이 모여 만들어진 정보의 집합으로 레스터(Raster) 이미지라고도 부른다. 픽셀단위로 화면에 렌더링한다. 우리가 일반적으로 사용하는 대부분의 이미지가 비트맵 형식이다. 그림판, 포토샵과 같은 툴로 편집할수 있다. ex) jpg, png, gif, webp 백터(Vector)는 수학적 정보의 형태(shape)들이 만들어내는 결과물이다. 이미지가 가지고 있는 점, 선, 면의 위치(좌표), 색상 등의 정보를 온전히 가지고 있으며 그를 화면에 렌더링한다. 따라서 좀더 많은 연산을 해야하지만, 대신 해상도(픽셀)에 영향을 비트맵 이미지와 달리 해상도로부터 자유롭게 렌더링할 수 있다. 쉽게 말하면 확대 및 축소를 해도 이미지가 깨..

HTML/기초 2020.05.30