본문 바로가기

프론트엔드/HTML10

09. HTML / 전역 속성, 기타 전역 속성과 기타 class 와 id ( 별명 별칭을 지정 하는 기능 ) - css 혹은 JavaScript의 요소 선택기를 통해서 요소를 선택하거나 접근 -class는 문서에서 고유하지 않아 여러개 설정가능 (중복 가능) -> .(점) 으로 접근 가능 class="avc" .avc {} -id는 문서에서 고유한 식별자 ( 오직 한개 ) -> # 으로 접근 가능 id="avc" #avc{} style 속성 ( 요소에 적용할 css를 선언 ) -ex) title 속성 ( 요소의 설명을 지정 ) -ex) 제목 -> 제목에 마우스 커서를 대면 title이 표시된다. lang 속성 ( 요소의 언어를 지정 ) data-* 속성 ( 사용자 정의 데이터 속성을 지정 ) JavaScript에서 이용할 수 있는 데이터(.. 2021. 2. 4.
08. HTML / 요소 - 양식 양식 form 태그 ( 웹 서버에 정보를 제출하기 위한 양식 범위를 정의 ) -form태그 예시 input 태그 ( 사용자의 입력 받을 데이터 양식 ) radio 타입 label 태그 ( 라벨 가능 요소의 제목 ) button 태그 ( 선택 가능한 버튼을 지정 ) - input과 다르게 좀더 특화된 버튼 textarea 태그 ( 여러 줄의 일반 텍스트 양식 (한줄은 input 태그 ) ) 속성은 input 태그와 비슷 다른 속성은 rows 라는 속성인데 화면에 보이는 양식의 줄 수를 설정 할 수 있다. fieldset, legend 태그 ( 같은 목적의 양식을 그룹화(fieldset) 하여 제목(legend)을 지정 select, datalist, optgroup, option 태그 -select 태그 .. 2021. 2. 3.
08. HTML / 요소 - 표 콘텐츠 표 콘텐츠 08. HTML / 요소 - 양식 table 태그 ( 테이블 표를 만들 때 사용 ) -> display : table (블럭 요소와 동일) - tr 태그 ( 행 , 줄 만들 때 ) ex) 3줄을 만든다 -> 3개 만든다. - td , th 태그 ( 칸, 셀 만들 때 ) ex) 2칸을 만든다 태그 안에 2개 입력 border 설정후 table 의 css 를 설정 table { border-collapse : collapse; } th 태그 ('머리글 칸' 을 지정) -colspan 사용 ( 열 병합 ) -rowspan 사용 ( 행 병합 ) td 태그 ('일반 칸'을 지정) caption 태그 ( 표의 제목을 설정 ) - 열리는 table 태그 바로 다음에 작성해야 된다. - 당 하나의 만 가능 .. 2021. 2. 3.
07. HTML / 요소 - 멀티미디어 & 내장 콘텐츠 & 스크립트 멀티미디어 img 태그 (이미지를 삽입 , 빈태그) - 필수 속성으로는 src 속성과 alt 속성은 필수 srcset, size 속성 - (반응형 웹사이트 제작할 시 사용) -srcset (2장 이상 사용할때 사용) 은 브라우저에 제시할(사용할) 이미지들과 그 이미지들의 원본 크기를 지정한다. 1장이면 src 사용하면 된다. -sizes 는 미디어 조건과 그 조건에 해당하는 미이지의 '최적화 출력 크기'를 지정 width 속성 audio 태그 ( 소리 콘턴츠 (mp3) 를 삽입 ) video 태그 - autoplay가 지정된 경우, preload는 무시됨. figure태그, figcaption 태그 내장 콘텐츠 iframe 태그 ( 다른 HTML 페이지를 현재 페이지에 삽입 ) canvas 태그 ( Ca.. 2021. 2. 2.
06. HTML / 요소 - 인라인 텍스트 & 수정 인라인 텍스트 a 태그 ( 다른 페이지, 같은 페이지 위치 ( #, 해시 태그) , 파일, 이메일 주소 등 다른 URL로 연결할 수 있는 하이퍼 링크를 설정 , 버튼용도로 쓰이기도 한다. ) a태그를 버튼 형식으로 만들 때 a태그로 같은 페이지 이동 (같은 페이지내에서 이동) abbr 태그 ( 약어로 사용된 용어가 있다면 설명을 추가해주는 태그 ) b 태그 ( 문체가 다른 글자의 범위를 설정 ) - 특별한 의미를 기지지 않는다. (중요해서 쓰는 거 아님) - 읽기 흐름에 도움을 주는 용도로 사용. mark 태그 ( 형광팬 처럼 글자에 하이라이팅이 된다. ) em 태그 ( 단순한 의미를 강조를 표시 ) - b태그와 mark태그와 다르게 의미를 가진다. (중요 하다는) strong ( 의미의 중요성을 나타내.. 2021. 2. 2.
05. HTML / 요소 - 콘텐츠 구분 & 문자 콘텐츠 Body 내 구조 개념 (다양항 의미를 가지는 태그들) [콘텐츠 구분]header 태그 ( 소개나 탐색을 돕는것이 그룹 ) -header 태그는 후손이 될 수 없다. [콘텐츠 구분]footer 태그 ( 사이트 하단에 작성자, 데이터, 계좌등 들어가는 자리 ) - footer 태그는 후손이 될 수 없다. [콘텐츠 구분]H1~H6 태그 (제목 요소) - 숫자가 커질수록 글자가 작아진다. - 폰트를 줄이기 위해서 H숫자를 높이면 안된다. -> H1~H6은 의미있게 사용해야됨 -> H1(대주제), H2(소주제) - H1~H6 순차적으로 사용해야됨 -> (X) - H1은 한페이지의 하나만 사용 ( 대주제용으로 ) [콘텐츠 구분]main 태그 ( 사이트의 핵심 부분 ) - 하나의 문서에는 main 태그는 하나만 존.. 2021. 2. 1.
04. HTML / 개요, 요소 - 주요범위 & 메타데이터 01 . 블록, 인라인 1. 블록 요소 (레이아웃을 잡는용도) 2. 인라인 요소 ( TEXT로 쓰는 용도 ) - DIV,H1,P - SAPN, IMG - 사용 가능한 최대 가로 너비를 사용 - 필요한 만큼의 너비만 사용 - 크기를 지정할 수 있다.(가로, 세로 지정) - 크기를 지정할 수 없다. - width : 100%; height : 0; 으로 시작 - width : 0 height : 0 로 시작 - 수직으로 쌓임 - 수평으로 쌓임 - margin, padding 위, 아래, 좌, 우 사용가능 - margin, padding 위, 아래는 사용불가 인라인, 블록 요소는 display 속성으로 정의 되어있음 . 02 . 주요범위 & 메타데이터 - HTML, HEAD, BODY, TITLE -> htm.. 2021. 1. 23.
03. HTML & CSS 첫걸음 / CSS 01. 기본 문법과 선택자의 역할 - 선택자 { 속성 : 값; 속성 : 값; } div { font-size : 20px; color : red; } 선택자의 역할 - 선택자는 HTML에 스타일을 적용하기 위해 HTML의 특정한 요소를 선택하는 사인이다. 02. 속성과 값 -속성과 값은 글자색은 무엇, 너비는 얼마, 여백은 얼마 같은 스타일을 지정할 때 사용한다. CSS 의 속성 = Properties HTML의 속성 = attribute (영어 단어는 살짝 다르다.) 03. 선언 방식 1) 태그에 직접 작성하는 인라인 선언 방식 Hello 단점 : 하나의 태그에 일일이 다 넣어줘야 되는 단점이 있다. 2) HTML에 포함하는 내장 선언 방식 CSS만 따로 작성하기 때문에 선택자가 필요하다. 3) HTM.. 2021. 1. 17.
02. HTML & CSS 첫걸음 / HTML ( 02. HTML & CSS 첫걸음 / HTML 01강 ~ 08강 정리 ) 01. 기본 문법 태그는 각자의 의미를 가지고 있으며 가음과 같은 형태를 가진다. 열린태그와 닫힌태그로 구성되어있다. EX) , CONTENT 태그 = 요소 (같으나 정확히는 다르다.) EX) 토끼와 거북이 h 태그는 주제를 쓸때 사용. 숫자는 글자의 크기 02. 속성과 값 태그(요소)의 기능을 확장하기 위해 '속성'을 사용할 수 있다. src = 경로(source) , alr = 대체텍스트 img태그는 닫힌 태그가 따로 없으므로 빈태그 라고 불림 홍길동 (div태그는 의미가 없는 태그임) 03. 부모 요소, 자식 요소 ( 부모 태그 컨텐츠에 자식 태그가 들어있다.) 04. 빈 태그 HTML에는 닫히는 개념이 없는 태그들이 있다.. 2021. 1. 16.

티스토리툴바