기초45 <9> HTML & CSS [전역 속성] 모든 HTML 요소에서 공통적으로 사용 가능한 속성 class: 공백으로 구분된 요소의 별칭을 지정, CSS 혹은 JavaScript의 요소 선택기(CSS 선택자나 GetElementsByClassName, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근(중복 사용가능) id: 문서에서 고유한 식별자(idenifier, ID)를 정의, CSS 혹은 JavaScript의 요소 선택기(CSS 선택자나 GetElementsByClassName, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근(고유한 요소여야 함) style: 요소에 적용할 CSS를 선언 title: 요소의 정보(설명)을 지정 lang: 요소의 언어(ISO 639-1)를 지정 data-*.. 2022. 8. 3. <8> HTML & CSS [표 콘텐츠] , , , : 데이터 표()의 행(줄 / )과 열(칸, 셀(Cell) / , )을 생성 → Table Row, Table Header, Table Data : '머리글 칸'을 지정 속성 abbr: 열에 대한 간단한 설명 headers: 관련된 하나 이상의 다른 머리글 칸 id 속성 값 colspan: 확장하려는(병합) 열의 수(기본값: 1) rowspan: 확장하려는(병합) 행의 수(기본값: 1) scope: 자신이 누구의 ‘머리글 칸’인지 명시 값: col(자신의 열), colgroup(모든 열), row(자신의 행), rowgroup(모든 행), auto(기본값) : '일반 칸'을 지정 속성 headers: 관련된 하나 이상의 다른 머리글 칸 id 속성 값 colspan: 확장하려는(병.. 2022. 8. 3. <7> HTML & CSS [멀티미디어] : 이미지를 삽입 속성 - src: 이미지 URL(필수) 값: URL - alt: 이미지의 대체텍스트(필수) - width: 이미지의 가로 너비 - height: 이미지의 세로 너비 - srcset: 브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의(반응형 웹사이트를 만들때 활용) 값: w(이미지의 원본 크기 가로너비), x(이미지의 비율 의도, ex.1을 기준으로 몇배인지) - sizes: 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의(반응형 웹사이트를 만들때 활용) : 소리 콘텐츠(MP3)를 삽입, autoplay가 지정된 경우, preload는 무시됨 속성 - autoplay: 준비되면 바로 재생 값: 불린(Boolean) - controls: 제어 메뉴를.. 2022. 7. 22. <6> HTML & CSS [인라인텍스트] : 다른 페이지, 같은 페이지 위치(#, 해시 태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정 속성 - download: 이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미 값: 불린(Boolean) - href: 링크 URL 값: URL - rel: 현재 문서와 링크 URL의 관계(Link Types) 값: license, prev, next .... - target: 링크 URL의 표시(브라우저 탭) 위치 값: _self(현재 페이지, 기본값), _blank(새 페이지) - type: 링크 URL의 MIME 타입 값: text/html .... → a태그가 인라인 요소이기 때문에 block요소로 모양을 넣어야 함 : 약어를 지정(Abbrev.. 2022. 7. 19. <5> HTML & CSS [콘텐츠 구분] 예전에는 만 가지고 만들 수 있었기 때문에 태그에 의미를 두지 않았지만 html5로 넘어오면서 의미를 갖는 태그가 많이 생김. 그래서 분명한 의미를 가지고 있는 태그에 의미에 맞게 적재적소에 쓰이는 것이 중요 : 문서의 헤더를 설정(보통 로고, 제목, 검색 등을 포함) : 문서의 푸터를 설정(보통 작성자, 저작권, 관련 문서 등을 포함) , 는 후손이 될 수 없음 : 문서의 주요 콘텐츠를 설정 IE 지원 불가, 한 문서에 하나의 요소만 포함 가능 : 독립적으로 구분되거나 재사용 가능한 영역을 설정(매거진/신문 기사, 블로그 등) 일반적으로 ~를 포함하여 식별, 작성일자와 시간을 의 datetime 속성으로 작성 → ~는 전역 속성만 포함하며 문서의 목차를 만드는 것처럼 사용자 에이전에 사.. 2022. 7. 14. <4> HTML & CSS [블록레벨 요소와 인라인 요소] 블록 요소: 사용 가능한 최대 가로 넓이 사용 크기를 지정할 수 있음 기본 크기는 width:100%; height:0; 수직으로 쌓임 margin, padding 상,하,좌,우 사용 가능함 레이아웃으로 사용 ex) DIV, H1, P 인라인 요소: 필요한 만큼의 너비만 사용(즉 안에 들어있는 내용만큼의 범위만 사용할 수 있음) 크기를 지정할 수 없음 width: 0; height: 0 수평으로 쌓임 margin, padding 상, 하 사용을 할 수 없음 ex)SPAN, IMG text로 사용 [주요범위] : HTML 문서의 범위를 설정 lang을 이용하여 문서의 언어를 지정해주어야함 : HTML 문서의 정보를 설정 HTML 문서의 제목, 기타 정보, 스타일 직접입력, .. 2022. 7. 12. <3> HTML & CSS [속성과 값] 속성과 같은 글자색은 무엇, 너비는 어느정도 등 같은 스타일을 지정할 때 사용 ex)div{ color: red; width: 300px; } [CSS 선언 방식] 태그에 직접 작성하기(인라인): HTML 태그에 직접 작성하기 때문에 선택자가 필요하지 않음 코드를 찾아서 직접 작성하기 때문에 비효율적 선택자란 HTML에 CSS 적용하기 위해 HTML의 특정한 요소를 선택하는 사인 위에 예시를 예로 들자면 div는 선택자, color, width는 속성, red,300은 값 ex)빨간색 글씨로 할꺼야 HTML에 포함하기(내장): CSS만 작성하기 때문에 선택자가 필요 CSS코드가 HTML의 안에 포함되어 있음 ex) 빨간색 글씨로 할꺼야 HTML 외부에서 불러오기: CSS코드를 완전히 분리할.. 2022. 7. 10. <2> HTML & CSS [속성과 값] 태그 안에 속성과 값을 통해 기능을 확장시켜 쓸수 있음 ex) src라는 속성을 사용해서 삽입할 이미지의 경로를 지정, alt라는 속성을 이용하여 이미지를 출력하지 못하는 상황에 이미지 대신 보여질 텍스트 지정. 둘다 필수 속성이며 alt가 누락되었다면 웹 표준에 어긋남 [부모/자식 요소] 태그A가 태그B의 콘텐츠로 사용되면, 태그B는 태그A의 부모 요소, 태그A는 태그B의 자식 요소라고 함. 부모와 자식 요소는 상대적인 개념. ex) 과일 목록 사과 복숭아 [HTML 문서의 범위] HTML(전체 범위): 는 HTML 문서의 전체 범위를 ㅈ지정. 웹 브러우저가 해석해야 할 HTML 문서가 어디에서 시작하며, 어디에서 끝나는지 알려주는 역할 HEAD(정보 범위): 웹 브라우저가 해석해야 할 .. 2022. 7. 7. <1> HTML & CSS [정의] HTML(Hyper Text Markup Language)은 페이지에 제목, 문단, 표, 동영상 등을 정의하고 그 구조와 의미를 부여하는 정적 언어로 웹의 구조를 담당. 일종의 뼈대를 만드는 것 CSS(Cascading Style Sheets)는 마크업 언어(HTML, XML 등)가 실제로 표시되는 방법을 지정하여 콘텐츠 구조를 꾸며주는 정적 언어로 웹의 시각적인 표현 담당 JS(JavaScript)는 콘텐츠를 바꾸고 움직이는 등 페이지를 동적(상황에 맞게 그때그때 달라지게)으로 꾸며주는 역할을 하는 프로그래밍 언어로 웹의 동적 처리를 담당 2022. 6. 30. 이전 1 2 3 4 5 다음
