본문 바로가기

HTML

[CSS] 선택자(selector)의 종류 및 우선순위
HTML 2022. 10. 19. [CSS] 선택자(selector)의 종류 및 우선순위 선택자란? RuleSet의 요소 중 가장 앞단, { (왼쪽중괄호) 이전에 있는 요소 HTML의 특정 요소를 선택하여 스타일을 적용할 떄 사용 선택자는 HTML페이지 내부 특정 요소를 선택하여 선언블록 내용 적용 1.모든(전체)선택자 [표현법] * { 스타일속성 = "값"; 스타일속성 = "값"; } => 모든 요소들을 다 선택하고자 할 때 사용 2.태그선택자 [표현법] 태그명 { 스타일 속성 : 값 ; 스타일 속성 : 값 ; } ==>현재 이 문서 내에 같은 태그들을 모두 선택할 때 사용 3.아이디선택자 (#아이디명) [표현법] #아이디명 { 스타일 속성 : 값; 스타일 속성 : 값; } => 해당 문서 내에서 특정 HTML요소 하나만을 선택하고자 할 때 사용 단, 해당요소에 ID속성을 이용하여 고유한 ..
HTML 2022. 10. 19. [HTML] 하이퍼링크 관련 태그 (수정필요) 하이퍼링크란 -웹 문서에서 또다른 문서로 클릭하여 이동할 수 있게 연결시킨 (핵심적인) 기능 텍스트문구, 이미지, 현재페이지내 등등등에서 클릭하면 이동 태그 link text href 속성은 링크의 목적지 주소( https://www.w3schools.com/html/ )를 지정한다. link text 는 보이는 부분입니다. link text 에 클릭함으로써 지정된 주소로 이동 된다. Tip: "link text" 는 텍스트여야만 할 필요는 없으며, 이미지나 또 다른 HTML 요소가 될 수 있다. target 속성: 링크된 문서가 열릴 곳을 지정 아래의 예는 새 브라우저 창 또는 새 탭에 링크된 문서를 엽니다: _blank 새탭열림 _self : 현재탭에서 이동(기존 창에서 연결), 기본값 Target ..
[HTML]블럭요소와 인라인요소, div/ span / iframe
HTML 2022. 10. 19. [HTML]블럭요소와 인라인요소, div/ span / iframe 블럭요소 (block level elememt) - 한 줄 단위로 영역을 차지하는 요소 - 사이드에 다른 요소들이 붙을 수 없음 (ex: textarea, p, pre, h1~h6, div) - 요소 사용 후 자동 개행적용 인라인 요소 (in-line element) - content영역의 내용만큼한 영역을 차지하는 요소 - 요소 사용 후 자동개행 없음 - br태그로 개행하여야함 (input, Label, mark, s, img, ..."span") div태그와 span태그의 차이 div태그: 블럭요소로 영역을 지정할 수 있는 태그 (한 줄 차지) span태그: 인라인요소로 영역을 지정가능한 태그 (content영역 크기만큼만 차지) ** 영역이 더 큰 블럭요소인 , 태그는 인라인 요소인 태그 포함 가능..
[HTML] form태그 / input태그 및 타입
HTML 2022. 10. 19. [HTML] form태그 / input태그 및 타입 HTML form태그는 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 기술중 하나로 form은 웹사이트에 입력한 데이터를 서버로 전송하는 역할을 함 form태그로 사용자의 입력을 받는 태그들을 감싸줌 태그 관련 속성 태그명 속성명 설명 웹 페이지에서의 입력 양식을 의미 (회원가입 폼 등) name 폼의 이름 서버로 제출된 form data를 참조하기 위해 사용 action 폼 데이터가 전송되는 백엔드 url 해당 form태그 안에 사용자가 입력한 값들을 전달하면서 요청할 서버의 경로를 제시 form을 전송할 서버의 script파일 지정 method 폼 전송 방식 지정 (GET / POST) ->get: 요청시 사용자가 입력한 값들이 url에 노출되는 방식 (default) ->post : 요청..
HTML 2022. 10. 19. [HTML] 이미지 / 미디어 관련 태그 (img / audio /video) 이미지 관련 태그 태그 속성 사용법 (empty tag) src : 삽입하고자하는 이미지의 경로 alt: 이미지 설명 문구 (대체문구) width: 이미지 가로크기(px, %) height: 이미지 세로크기(px, %) src속성 -삽입하고자 하는 이미지의 경로 - 경로에는 상대경로와 절대경로가 있음 - 상대경로: 현재 작업중인 위치를 기준으로 경로를 찾는 방식 - 절대경로: 상위 디렉토리부터 해당 파일까지 경유한 모든 경로를 전부 기입하는 방식 alt 속성 - 사진의 경로가 없는 경로거나 이미지를 제대로 표현살 수 없는 경우 대체 텍스트의 용도 - 시각장애인들을 위한 스크린리더(화면낭독기)에서 이미지를 읽어주는 설명문구 - 웹 접근성 : 사용자의 신체적 특징, 지역, 나이, 지식수준 등을 고려하여 가능..
[HTML] table관련 태그
HTML 2022. 10. 19. [HTML] table관련 태그 태그 HTML문서에서 표(행과 열로 구성)를 만드는 태그 문서에서 다량의 데이터를 정리하여 표현하고자 할 때 사용 표를 구성하는 태그: 태그 , , , , HTML문서에서 표(행과 열로 구성)를 만드는 태그 테이블 이름 지정 기본적으로 테이블 상단 중앙에 생성 표의 제목영역 표의 본분영역 표의 행 표의 열(셀), 의 자식태그 의 하위영역 위치 일반글꼴, 정렬 없음 제목셀 td태그 대신 사용 가운데정렬 +bold가 default rowspan 태그의 속성으로 사용, 행을 확장 (행 합치기: rowspan =2) (상하) 태그의 속성으로 사용, 열을 확장 (열 합치기: colspan=3) (좌우) 기본적인 표 만들기 웹 브라우저 종류 브라우저명 제조사 홈페이지 Chrome Google http://www.g..
[HTML] 목록관련 태그: ol / ul / dt / dl /dd
HTML 2022. 10. 19. [HTML] 목록관련 태그: ol / ul / dt / dl /dd 목록관련 태그 : 순서가 있는 목록태그 태그명 속성or설명 ordered list 숫자,알파벳 등 순서가 있는 목록 태그의 속성 *type :목록에 사용될 마커 지정 - 1 숫자(default) - a 소문자 - A 대문자 - i 로마숫자 소문자 - I 로마숫자 대문자 * disc(기본값)/circle /square * start : 목록의 시작 숫자지정 * reserved 항목 역순표시 definition list 용어를 설명하는 목록 list item 의 자식요소 의 각 항목 나열에 사용 ol: 순서 있는 목록 태그 HTML CSS Javascript jQuery HTML CSS Javascript jQuery HTML CSS Javascript jQuery HTML CSS Javascript jQu..
[HTML] 글자관련 태그
HTML 2022. 10. 19. [HTML] 글자관련 태그 글자관련 태그 태그명 설명 break 개행 가로 구분선, 수평선 긋는 태그 ~ 제목을 붙일때 사용 paragraph 문단을 나누는 태그 줄바꿈영역을 별도의 태그(br)로 지정해야함 공백은 무조건 한 칸으로 인식 추가 공백을 인식시키려면 기호문구를 통해 공백을 표시 문단을 나누는 태그 여러칸 공백, 줄바꿈 인식 =>입력한 내용 그대로 표현 * &nbsp 공백을 표시하는 기호문구 bold 볼드체표기 볼드체 표기 **내용추가!! 글자 기울이기 글자 기울이기 (이텔릭체) **내용추가 취소선 형광팬 글자를 작게 글자를 크게 기본 글자에 아래첨자 표기 기본 글자에 윗첨자 표기 안녕하세요 HTML시간이예요 재미있는@ h1태그입니다 h2태그입니다 h3태그입니다 h4태그입니다 h5태그입니다 h6태그입니다 h7태그입니다 ..
[HTML] HTML이란 / HTML구성요소 / HTML문서 기본구조
HTML 2022. 10. 19. [HTML] HTML이란 / HTML구성요소 / HTML문서 기본구조 Hyper Text (=link) 글자를 뛰어넘는 (일반적 글자의 순차적 접근법을 뛰어넘는 비순차적 접근) 다른페이지 이동 or 페이지내 다른 데이터로 이동 Markup Lanuguage: 문서를 구조적으로 표기하기 위한 언어 ---> 웹브라우저에 컨텐츠 표현에 대해 명령하는 언어 HTML: Hyper Text Markup Language 하이퍼텍스트를 가장 중요한 특징으로 하는 마크업형식을 가진 언어 웹을 이루는 가장 기초적인 구성 요소이며, 웹 페이지를 만들기 위한 표준 마크업 언어 ( 웹 페이지에 표시되는 글, 이미지 외에 다양한 콘텐츠를 표시하기 위함 ) HTML의 구성요소 1. 태그 (self closing tag= opening tag+ closing tag / empty tag) - HTML..

티스토리툴바