![]()
HTML 요소의 display 속성값 블록 새로운 라인에서 시작 해당 라인의 모든 너비를 차지 다른 HTML 요소들을 하나로 묶는 블록 요소 주로 여러 요소들의 스타일을 한 번에 적용 가상의 레이아웃을 설계 주로 CSS와 연동하여 쓰임 인라인 새로운 라인에서 시작하지 않음 해당 HTML 요소의 내용만큼 너비 차지 텍스트(text)의 특정 부분을 묶는 인라인 요소 텍스트의 특정 부분에 따로 스타일을 적용 CSS와 함께 쓰임 iframe 요소 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입 iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정 iframe 요소의 테두리 변경 기본값 - 검정색 테두리 iframe 요소의 페이지 변경하기 PHP 수업 확인하러 가기 => 태그의 t..
![]()
표 생성 , 등의 태그와 함께 작성 레이아웃 구성시 와 CSS 사용 태그 표의 행 태그 각 열의 제목, 자동으로 굵은 글씨&가운데 정렬 태그 표의 열, 태그 하위 colspan 속성 테이블의 열 합치기 rowspan 속성 테이블의 행 합치기 태그 주석, 테이블 상단에 제목이나 짧은 설명 CSS의 border 속성 border 속성 값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리 두 줄로 표현되는 테두리를 한 줄로 설정 -> border-collapse 속성값을 collapse로 설정 태그 헤더 콘텐츠(header content)들을 하나의 그룹으로 묶을 때 사용 표의 제목 영역, 하위, 상위 반드시 하나 이상의 요소를 포함 태그 표의 본문 영역, 와 같은 위치 태그 표의 아래 영역, 와 같은..
![]()
목록을 만드는 태그 단독으로 쓰이지 않으며 혹은 태그 내부에 들어감 단순히 리스트 나열 뿐만 아니라 메뉴등을 만들때도 사용 이중 리스트 가능 사과 멜론 바나나 사과 멜론 바나나 순서가 있는 리스트 포함되는 각각의 리스트 요소는 태그로 시작 모든 목록 항목은 숫자로 표시 CSS의 list-style-type 속성 - decimal : 숫자 (기본설정) - upper-alpha : 영문 대문자 - lower-alpha : 영문 소문자 - lower-roman : 로마 숫자 소문자 - upper-roman : 로마 숫자 대문자 호박 - 박과의 한해살이 덩굴성 채소 상추 - 국화과의 한해살이 또는 두해살이풀 정의 리스트 태그 : 용어의 이름 태그 : 해당 용어의 정의
![]()
src 속성 : 이미지가 저장된 주소의 URL 주소 alt 속성 : 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정 src 속성 이미지가 저장된 주소의 URL 주소를 명시 이미지 파일이 src 속성에서 지정한 경로에 없을시, 이미지는 출력되지 않거나 엑스박스 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정 가능 이미지 크기 width 속성 : 이미지 가로 크기 height 속성 : 이미지 세로 크기 이미지 테두리 border 속성 이미지 링크 이미지 맵 이미지의 일부를 클릭할 수 있도록 만들어서 버튼처럼 사용하는 기능 태그 usemap 속성과 태그의 name 속성과 연결 -> 이미지와 맵사이의 관계가 설정 태그는 하나 이상의 태그를 가짐 태그 : 버튼과 같은 역할 ..
![]()
하이퍼링크 href 속성 클릭시 연결할 페이지나 사이트의 URL 주소를 명시 HTML 링크 blank _self : 현재 프레임(frame)에서 오픈 (기본값) _blank : 새 창이나 새 탭에서 오픈. _parent : 부모 프레임(frame)에서 오픈. _top : 현재 창의 가장 상위 프레임(frame)에서 오픈. 프레임이름 : 지정된 프레임(frame)에서 오픈. 링크의 상태(state) link : 한 번도 방문한 적이 없는 상태 (기본설정), 밑줄&텍스트 색상(파란색) visited : 한 번이라도 방문한 적 있는 상태 , 밑줄&텍스트 색상(보라색) hover : 링크 위에 마우스를 올려놓은 상태 active : 링크를 마우스로 누르고 있는 상태, 밑줄&텍스트 색상(빨강색) 책갈피 책갈피를 ..
![]()
색 이름 16개의 HTML4 표준 색상 이름 대소문자를 구분하지 않음 현재는 주요 브라우저가 140개의 색상 이름을 모두 지원 https://t1.daumcdn.net/cfile/tistory/213B3A42587D25C21C 16진수 색상 코드표 t1.daumcdn.net RGB 값 rgb(빨강, 초록, 파랑) rgb(0.0.0) - 검정 rgb(255.255.255) - 흰색 RGBA 값 추가 A값을 제외하고 RGB와 동일 rgb(0,0,0,0): A 값 = 투명도 0-완전투명 / 1=단색 HEX 값 16진수 #빨강,초록,파랑 각각 00부터 FF까지의 범위
![]()
스타일 CSS 스타일을 HTML 요소에 직접 설정 오직 단 하나의 HTML 요소에만 스타일을 적용 가능 style 속성값에 사용되는 CSS 속성(property)과 속성값들은 세미콜론(;)을 이용하여 구분 CSS 속성을 하나만 사용할 때나, 여러 개의 CSS 속성 중 맨 마지막 CSS 속성은 세미콜론(;)을 생략 가능 배경색 style 속성을 이용한 배경색 변경 글자 색 style 속성을 이용한 글자색 변경 글자 크기 style 속성을 이용한 글자 크기 변경 문단 정렬 style 속성을 이용한 문단 정렬 변경 여러 스타일 style 속성을 이용하여 한 번에 스타일링 하기! https://www.tcpschool.com/html/html_basic_styles
![]()
제목 웹 페이지에 표시하려는 제목 은 하나의 페이지에서 한번만, 제일 큰 주제 , , , , , 섹션, 문단의 제목을 나타내며 숫자가 작을수록 글자의 크기가 커짐 봇(컴퓨터, 검색엔진)이 문서를 파악하기 위해 쓰임 위아래 약간의 여백(margin)이 자동 삽입 단락 문단 정의, 단락 위아래 약간의 여백(margin)이 자동 삽입 태그 내에서 작성된 여러 번의 띄어쓰기와 줄 나누기는 오직 하나의 띄어쓰기로만 표현 줄바꿈 새로운 단락을 만들지 않고도 줄을 나눌 수 있음 HTML 코드에서 작성한 텍스트 서식을 그대로 표현 줄바꿈 뿐만 아니라 띄어쓰기, 탭 등 원래 무시되던 문자들이 출력 태그 내에 작성된 텍스트의 글꼴(font)은 고정폭 글꼴(fixed-width font)로 자동 변환 미리 정의된 ..
![]()
시맨틱 태그 의미가 있는 요소 브라우저와 개발자 모두에게 의미를 명확히 설명 남발 보다는 상황에 맞게 사용하면 편리 제목, 소개 내용 하나 이상의 제목 요소 / 로고 또는 아이콘 / 저작권 정보 / 작성자 이름 등 문서 주요 콘텐츠 문서의 핵심 주제 / 앱의 핵심 기능 연결, 확장 등 문서, 페이지, 앱, 사이트 안에서 독립적으로 구분해 배포하거나 재사용 할 수 있는 구역 제목이 있는 주제 별 콘텐츠 그룹 ~장 / 소개 / 뉴스 항목 / 연락처 정보 등 mdn 사이트 참고 문서의 부분 중 현재 페이지, 다른 페이지로의 링크 구획 목차 / 메뉴 등 문서의 주요 내용과 간접적으로 연관된 부분 사이드바 / 콜 아웃 박스 등 문서, 섹션의 바닥 글 정의 저작권 정보 / 연락처 정보 / 사이트 맵 / 작성자 등 ..
![]()
태그 마크업 언어는 태그를 사용하여 데이터를 표현 HTML에서는 몇가지 태그가 미리 정의되어 있으며, 용도에 맞게 태그를 사용 가능 시작 태그(start tag, opening tag), 종료 태그(end tag, closing tag)의 한 쌍으로 구성 태그 안의 태그 태그 안에 내용 뿐만 아니라 다른 태그 또한 들어갈 수 있습니다. 단, 이때 태그는 연 순서대로 닫아야합니다. 빈 태그 시작 태그만 있고 종료 태그가 없는 태그도 존재 태그 속성 태그는, 태그 내부에 값을 넣을 수 있을 뿐만 아니라, 태그마다 속성을 부여할 수 있습니다. 태그의 속성은 의 형태로 사용하며, 태그마다 여러 속성을 부여 할 수도 있습니다. HTML에서는 태그의 속성 또한 미리 정의되어 있으며, 태그 속성에 맞는 값을 입력하면..
![]()
HTML이란? 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공 웹을 이루는 가장 기초적 구성 요소 웹페이지를 만들기 위한 표준 마크 업 언어 각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용 HTML 문서 기본 구조 문서 맨 처음에 명시 문서 버전(규격) 나타냄 필수요소 DOCTYPE을 지정하지 않을 경우 Internet Explorer 에서 문서를 하위 엔진으로 해석하는 등의 문제가 발생 문서가 HTML 로 작성 됨을 브라우저에게 알림 html문서의 루트 요소 정의 문서의 시작과 끝을 알려주는 태그 lang : 문서의 언어 문서의 머리를 나타내는 태그 브라우저 화면에 직접적으로 보이지 않으며, 숨은 데이..
