본문 바로가기

프론트엔드16

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.
01. HTML & CSS 첫걸음 / 개요 (후기) 프론트엔드 개발 올인원 패키지 01. 후기 웹프론트 올인원 패키지 13만원 인가 그 정도 먼저 나는 12월 말에 백엔드 공부도 궁금하기도 하고 다음학년에 마침 JAVA가 필수전공에 있어서 백엔드도 알아보고 예습공부도 할겸 자바 웹개발 강의를 9만원에 ( 돌려주기 이벤트가 있어서 9만원 강의를 사면 1월 11일에 9만원을 쿠폰을 주는 이벤트)사고 1월12일에 9만원 쿠폰에 4만원을 더내서 웹프론트 올인원 패키지를 샀습니다. 뭐 이런게 다 상술이라 생각이 들어서 저는 그냥 강의 2개를 6만원에 사야겠다 생각하고 처음부터 결정을 하고 샀습니다. 이번 1장에는 12강으로 이루어져있는데 한 강의에 5분짜리도 있고 15분짜리 이런식으로 있는데 평균 한 강의에 10분정도 입니다. 저는 개인적으로 한강의에 40~50분.. 2021. 1. 13.

티스토리툴바