HTML의 태그에 대해서 id와 class 속성을 줄 수 있다. id와 class의 속성을 이용해 특정 태그 및 구역 등에 대해서 CSS 스타일이나 js를 처리할 수 있다. HTML에서 id와 class는 아래와 같이 사용가능하다. id예시 class예시 id와 class차이 1) id는 유일한 값이고 class는 여러번 중복 사용이 가능하다. class는 같은 이름으로 여러 번 중복 사용이 가능하다는 의미이다. 아이디는 페이지에서 딱 한번만 사용 가능하다. id는 여권 번호, class는 국적으로 이해하면 쉽다. ↓ id: 한가지에만 적용하여 유일한 값을 주고싶을때 class: 여러 곳을 한꺼번에 CSS 스타일을 변경하고 싶을 때 2) CSS 스타일을 이용할 때 차이가 있다. #first{ backgr..
: 서버와의 통신을 위한 필수적인 태그 : 회원가입, 로그인에 주로 사용 : action과 method 속성을 가짐 action form 태그가 가진 정보를 넘겨주는 페이지 method 넘겨줬을 때의 방식을 설정 : form의 하위 요소로 다양한 방식을 지원해 사용자에게 입력을 받을 수 있는 태그 HTML 삽입 미리보기할 수 없는 소스 : 는 을 하위 요소로 가져 option중 한 요소를 선택할 수 있도록 함. HTML 삽입 미리보기할 수 없는 소스 첫번째 선택 두번째 선택 세번째 선택
SVG란? : 벡터 기반 그래픽 : 이미지 크기에 상관없이 선명하게 유지가 가능하고 아이콘 같은 단순한 이미지에 사용 : 확대해도 깨지지않고 절대 늘어나지 않음. : 모양이 복잡하고 그림을 구성하는 포인트가 많을 수혹 용량 증가 SVG 사용해 HTML 파일에 넣는 방법 이용해 넣기 svg를 직접 HTML에 inline으로 넣기
: 페이지나 섹션의 머리말을 표현하는 태그 : 페이지 제목, 페이지 소개하는 간단한 설명 들어감. : 로고, 아이콘, 검색 양식 등을 포함 : 이나 태그 내에서도 사용 가능 : 와는 다름에 주의 : 페이지의 메누, 목차를 만들기 위해 주로 사용 : 하이퍼링크들을 모아놓을 수 있는 특별한 세션이지만 모든 하이퍼링크가 있을 필요가 없음. : 문서의 chapter 등을 구성하는 역할을 하며 주로 페이지의 주요 내용들이 담길 수 있음. : 간접적으로 문선와 관련된 내용을 나타냄. : 사이드바로 사용. : 본문과 연관되어 있지만, 독립적으로 콘텐츠를 담는 영역 ;: 게시물, 잡지, 제품 카드 등을 나타낼 때 사용 : 꼬리말 영역으로 표시하는 태그 : 주로 저자, 저작권 정보, 관련 문서에 대한 링크를 포함. : ..
, , , , , : 제목 태그 : 문서에 있어 중요한 요소로서의 웹 페이지에 대한 개요를 표현할 때 사용 : 이 가장 큰 폰트 사이즈의 제목을 나타냄. : 블록을 구성하기 위한 태그 : 텍스트 일부분에 특별한 모양을 주거나, js 코드로 텍스트 일부분을 제어하고자 할 때 사용 : 문단 태그로서 텍스트를 감싸는 태그 : 문단으로 구분하기 위한 블록 요소로 사용됨. : 형식화된 태그를 나타내는 태그 : 태그 안에 띄어쓰기, 들여쓰기, 줄바꿈 등이 그대로 웹페이지에 표시. : 줄바꿈 태그 : 화면에 수평선을 그려주는 태그 : 웹페이지 내 내용을 구분할 때 주로 사용. : 글자를 굵게 표시하는 강조 태그 : 글자를 기울게 하여 강조하는 태그 : 하이퍼링크 태그 naver로 이동 : target 속성으로 링크로..
HTML 파일은 가장 상위에 태그로 존재하고 html 태그 내부에 태그로 크게 구성된다. DOCTYPE이란? /* html5로 작성된 것을 의미 */ : 문서 형식 선언 또는 문서의 유형을 정의하기 위해 사용하는 선언문 : doctype 선언에 따라 브라우저는 렌더링 모드를 바꾸고 해당 렌더링 모드에 맞게 사용할 수 있는 태그와 속성이 변경 ※ doctype을 선언하지 않으면 각각의 브라우저들이 저마다의 기준대로 랜더링을 실시한다.(쿼크모드(비표준모드) 랜더링) 브라우저가 해당 문서의 형식을 알 수 없다. ↓ 문서형 정의를 생략하는 경우, 웹 브라우저가 표준 모드가 아닌 비표준 모드로 랜더링되어 크로스 브라우징에 어려움을 겪음. 비표준 모드로 렌더링되면 문서 제작자가 의도한 레이아웃이 깨지게 되어 사용자..
Front-End/HTML 2022. 11. 24. 15:09
HTML의 태그에 대해서 id와 class 속성을 줄 수 있다. id와 class의 속성을 이용해 특정 태그 및 구역 등에 대해서 CSS 스타일이나 js를 처리할 수 있다. HTML에서 id와 class는 아래와 같이 사용가능하다. id예시 class예시 id와 class차이 1) id는 유일한 값이고 class는 여러번 중복 사용이 가능하다. class는 같은 이름으로 여러 번 중복 사용이 가능하다는 의미이다. 아이디는 페이지에서 딱 한번만 사용 가능하다. id는 여권 번호, class는 국적으로 이해하면 쉽다. ↓ id: 한가지에만 적용하여 유일한 값을 주고싶을때 class: 여러 곳을 한꺼번에 CSS 스타일을 변경하고 싶을 때 2) CSS 스타일을 이용할 때 차이가 있다. #first{ backgr..
Front-End/HTML 2022. 11. 23. 17:19
: 서버와의 통신을 위한 필수적인 태그 : 회원가입, 로그인에 주로 사용 : action과 method 속성을 가짐 action form 태그가 가진 정보를 넘겨주는 페이지 method 넘겨줬을 때의 방식을 설정 : form의 하위 요소로 다양한 방식을 지원해 사용자에게 입력을 받을 수 있는 태그 HTML 삽입 미리보기할 수 없는 소스 : 는 을 하위 요소로 가져 option중 한 요소를 선택할 수 있도록 함. HTML 삽입 미리보기할 수 없는 소스 첫번째 선택 두번째 선택 세번째 선택
Front-End/HTML 2022. 11. 23. 17:07
SVG란? : 벡터 기반 그래픽 : 이미지 크기에 상관없이 선명하게 유지가 가능하고 아이콘 같은 단순한 이미지에 사용 : 확대해도 깨지지않고 절대 늘어나지 않음. : 모양이 복잡하고 그림을 구성하는 포인트가 많을 수혹 용량 증가 SVG 사용해 HTML 파일에 넣는 방법 이용해 넣기 svg를 직접 HTML에 inline으로 넣기
Front-End/HTML 2022. 11. 23. 16:49
: 페이지나 섹션의 머리말을 표현하는 태그 : 페이지 제목, 페이지 소개하는 간단한 설명 들어감. : 로고, 아이콘, 검색 양식 등을 포함 : 이나 태그 내에서도 사용 가능 : 와는 다름에 주의 : 페이지의 메누, 목차를 만들기 위해 주로 사용 : 하이퍼링크들을 모아놓을 수 있는 특별한 세션이지만 모든 하이퍼링크가 있을 필요가 없음. : 문서의 chapter 등을 구성하는 역할을 하며 주로 페이지의 주요 내용들이 담길 수 있음. : 간접적으로 문선와 관련된 내용을 나타냄. : 사이드바로 사용. : 본문과 연관되어 있지만, 독립적으로 콘텐츠를 담는 영역 ;: 게시물, 잡지, 제품 카드 등을 나타낼 때 사용 : 꼬리말 영역으로 표시하는 태그 : 주로 저자, 저작권 정보, 관련 문서에 대한 링크를 포함. : ..
Front-End/HTML 2022. 11. 23. 16:33
, , , , , : 제목 태그 : 문서에 있어 중요한 요소로서의 웹 페이지에 대한 개요를 표현할 때 사용 : 이 가장 큰 폰트 사이즈의 제목을 나타냄. : 블록을 구성하기 위한 태그 : 텍스트 일부분에 특별한 모양을 주거나, js 코드로 텍스트 일부분을 제어하고자 할 때 사용 : 문단 태그로서 텍스트를 감싸는 태그 : 문단으로 구분하기 위한 블록 요소로 사용됨. : 형식화된 태그를 나타내는 태그 : 태그 안에 띄어쓰기, 들여쓰기, 줄바꿈 등이 그대로 웹페이지에 표시. : 줄바꿈 태그 : 화면에 수평선을 그려주는 태그 : 웹페이지 내 내용을 구분할 때 주로 사용. : 글자를 굵게 표시하는 강조 태그 : 글자를 기울게 하여 강조하는 태그 : 하이퍼링크 태그 naver로 이동 : target 속성으로 링크로..
Front-End/HTML 2022. 11. 23. 14:05
HTML 파일은 가장 상위에 태그로 존재하고 html 태그 내부에 태그로 크게 구성된다. DOCTYPE이란? /* html5로 작성된 것을 의미 */ : 문서 형식 선언 또는 문서의 유형을 정의하기 위해 사용하는 선언문 : doctype 선언에 따라 브라우저는 렌더링 모드를 바꾸고 해당 렌더링 모드에 맞게 사용할 수 있는 태그와 속성이 변경 ※ doctype을 선언하지 않으면 각각의 브라우저들이 저마다의 기준대로 랜더링을 실시한다.(쿼크모드(비표준모드) 랜더링) 브라우저가 해당 문서의 형식을 알 수 없다. ↓ 문서형 정의를 생략하는 경우, 웹 브라우저가 표준 모드가 아닌 비표준 모드로 랜더링되어 크로스 브라우징에 어려움을 겪음. 비표준 모드로 렌더링되면 문서 제작자가 의도한 레이아웃이 깨지게 되어 사용자..