HTML/CSS

HeeChan·2020년 8월 10일
0

HTML/CSS

목록 보기
1/1

HTML

웹페이지의 틀


자주 사용

div VS span

div 태그는 한 줄을 차지
span 태그는 컨텐츠 크기만큼 공간을 차지

img:이미지 삽입

<img src="logo.png">

a:링크 삽입

<a href="http://naver.com">네이버</a>
<a href="http://naver.com" target="_blank">네이버</a> --새탭 으로 

ul:unorderdlist,li:리스트

<ul>
  <li>1</li>
  <li>2
  	<ul>
      <li>2-1</li>
    </ul>
  <li>
</ul>

ol:orderdlist

<ol></ol>
앞에 수자가 매겨진다. 

text box

<div>
	<input type="text" placeholder="아이디를 입력해주세요">
</div>
<div>
    <input type="password">
</div> 

checkbox

<div>
	<input  type="checkbox" checked></div>

radio

	<input type="radio" name="g">옵션 1
    <input type="radio" name="g">옵션 2

같은 속성의 이름을 지어주어 그룹을 지어야만 둘다 체크 되지않는다.

textArea

<textarea>내용 content 를 입력하라</textarea>

button

	<button>클릭<button>

script

	.
	.
	.
<body>
  <script type="text/javascript">
    console.log('HI');
  </script>
</body>

html 외부에 작성

	//here = index.html
<script src="main.js"></script>
	//here main.js
console.log('모야');

컨텐츠 관련 태그

<iframe>
  <br>
  <table>,<thead>,<tbody>,<tr>,<th>,<td>
  <code>,<pre>  

폼 관련 태그

	<form>
     <input>
     <button>
       <textarea>
         <select>,<option>
           

CSS

Cascading Style Sheets

사용법

작성법 인라인 태그에 직접 style 을 넣는다.
내부에 StyleSheet 작성
외부에 태그 이용해서 stylesheet파일을 href='stylee' 파일 불러오기

class & Id 선택자

class
자유롭게 이름 붙이기
동일한 값을 갖는 요소 는 많음
요소가 여러 값을 가질 수 있음
스타일의 분류에 사용
"공백을 이용해 한 요소에 여러 클레스 를 지정 가능

<h1 class='impact red'>asd</h1>

.impact { asdsadsdsads}
.red {asdsadd}
 -- 이렇게 임펙트 와 레드 두개를 다가진다. 

id
자유롭게 이름 붙임
문서 내에서 단 하나의 요소가 유일한 값을 가짐
요소는 단 하나의 값을 가짐
특정 요소를 이름 붙이는 데 사용


레이아웃 & Box Model

margin, padding, border
width, height, top, left, bottom, right
position, box-sizing
레이아웃 고급:
z-index
float, flex
기본 스타일링:
font-, background-


포지셔닝

static 기본값
relative 기본값 상적적인 위치
fixed 브라우저 화면의 좌상단을 기준으로 절대적인 위치
absolut 부모 중 기준점이 있는 경우 그 기준으로 절대적인 위치
sticky 기본적으로 relative 처럼 작동하나, 스크롤영역을 벗어나 면 fixed 처럼 작동


기본 정리

기본적인 HTML 구성

HTML5 정의 루트 엘리먼트 문서에 대한 메타정보 포함 문서의 타이틀 지정 <body> 페이지의 컨텐츠 기본적인 태그의 종류

제목태그

~

단락태그

         <pre> 쓴 그대로 반영

링크태그

이미지태그대체 텍스트

줄바꿈태그
(닫는태그 없음)

수평선태그


스타일태그

HTML 속성

언어 선언 속성 필요한 응용프로그램, 검색엔진에 중요

제목 속성

title 속성 값이 툴팁으로 표시(단락 위에 마우스)

링크 속성 링크 주소

크기 속성 대체 텍스트

alt 속성 이미지를 표시할 수 없을때 대체 텍스트 지정

HTML 서식

굵게

중요 텍스트

기울임

강조

하이라이트

작은 텍스트

삭제된 텍스트

삽입된 텍스트

아랫첨자

윗첨자

HTML 인용

따옴표 삽입

인용구 삽입

약어 정의

문서의 연락처 정보 정의 (이탤릭체 표시)

작품의 제목 (이탤릭체 표시)

텍스트 방향 재정의

HTML 컴퓨터 코드

키보드 입력 정의

샘플 출력 정의

코드의 일부 정의

코드와 같이 사용

변수 정의

HTML 주석

조건부 댓글

HTML 색상

rgb(255,255,255) or 16진법 #FFFFFF

HTML 링크

링크 전체 작성 or 로컬 링크 작성

로컬링크란 동일한 웹 사이트에서 상대url 지정 ex)html_images.asp

타겟 속성

_blank 새창이나 탭에서 문서 열기

_self 같은 창/탭에 문서 열기 (기본값)

_parent 부모 프레임에서 문서 열기

_top 윈도우 전체에 열기

framename 명명된 프레임에 문서 열기

링크로 이미지를 사용하는게 일반적임

하이퍼링크 밑줄 없애기 text-decoration:none 설정

책갈피 만들기

id값을 준 뒤 로 추가

HTML 이미지

대체텍스트

닫는태그 x

항상 이미지 폭,높이 지정/미지정시 이미지 로드시 페이지 깜빡임

스타일 속성을 직접 사용하는것이 좋음

태그를 사용해 이미지에 링크 사용

border:0; 속성은 IE9 이전을 위해 추가

이미지맵 태그 사용

ex)

abc

HTML 테이블

테이블 정의 테이블 헤더 정의 테이블 데이터 정의 (text,img,list 등등 HTML모든 요소 포함 가능) 캡션 추가시 사용 ,열 그룹 지정/ 뒤 전에 지정해야함 ,, 테이블을 부분화함

테두리 설정시 table, th, td 모두에 정의해야함

축소 테두리 사용시 border-collapse: collapse; 사용

간격 사용시 padding 사용

정렬시 text-align 사용

테이블 간격 사용시 border-spacing 사용

열 병합시 사용

행 병합시 사용

HTML 리스트

    정렬되지 않은 리스트 style="list-style-type:~"

    style - disc(기본값),circle,square,none

      정렬된 리스트 type="~"

      type - 1(기본값),A,a,I,i

      Description List

      목록, 용어(이름), 설명

      HTML 블록,인라인

      블록-

      ,,

      ,

      인라인-,,

      다른 element의 container로 사용, style,class가 일반적

      text의 container로 사용, style,class가 일반적

      div class는 .class명으로 스타일 설정

      HTML iframe

      웹 페이지 내에 웹 페이지를 표시하기 위해 사용

      style="border:none;" 테두리 제거

      링크사용시 iframe에 name값을주고 a태그로 target지정

      ex)

      babo

      HTML JavaScript

      JS로 HTML요소 선택시 document.getElementById(ID) 사용

      .innerHTML로 내용변경

      .style.fontSize="10px";로 스타일변경

      스크립트를 지원하지 않는 브라우저를 위한 대체 컨텐츠

      HTML

      <style> <link> <script> 포함 <meta charset="UTF-8">사용 문자 집합 정의 <meta name="정의" content="설명"> <meta http-equiv="refresh" content="30"> 30초마다 새로고침 <base> 모든 상대 url의 기본 url과 베이스 대상 지정 HTML 레이아웃

      HTML5 시맨틱 요소

      HTML

      text/한줄의 텍스트 radio/선택버튼 submit/제출버튼 name속성 생략시 데이터 전송 x

      method 속성 get,post

      get-크기제한, 짧은양 적합, 중요한정보 x

      post-크기제한x 대용량 데이터, 중요한 정보

      그룹 관련 데이터에 사용 캡션 정의

      HTML 폼 양식

      * 여러 방법으로 표현 가능

      * 선택 옵션 selected속성-미리 선택

      *

      *button 클릭버튼

      * 안에 들어가며 datalist의 id값과 input의 list 값이 같아야함

      * 사용자를 인증하는 보안방법 제공/ 클라이언트 인증서 생성시 사용가능

      * 계산결과를 보여줌

      HTML 입력 유형

      한줄의 텍스트필드

      password 별표or원으로 표시

      submit 입력처리,제출/ value를 생략하면 버튼생김

      reset 초기화

      radio 선택버튼

      checkbox 체크박스

      button 버튼 <input type="button" value="Click ME" onClick='alert('Hello World!')>

      color 색상 선택기 표시,선택

      date min,max로 날짜 설정

      datetime

      datetime-local 날짜,시간 선택

      email 이메일 형식 입력 일부 스마트폰은 키보드에 .com추가

      month 달 선택

      week 주 선택

      number min,max설정후 숫자 입력필드표시, step은 배수설정

      range min,max로 조절

      search 검색기능

      tel 전화번호포함 (사파리8지원)

      time 시간 선택

      url url입력, 일부 스마트폰은 키보드에 .com추가

      HTML 입력 특성

      value로 초기값 지정

      readonly 읽기전용,수정불가

      disabled 비활성화 필드

      size="10" 크기

      maxlength="10" 최대길이

      autocomplete="on" 자동완성 사용자가 이전에 입력한 값에 기초해 완료의에서 작동

      novalidate ??

      autofocus 자동커서

      form id값을주고 form 밖에서 같은값을 form속성으로 달면 form안의 내용으로 인식

      *제출(submit, image)에 사용

      formaction form의 action을 무시하고 formaction으로

      formenctype 인코딩 방법 지정

      formmethod 의 method무시

      formnovalidate 무시

      formtarget

      pattern 이메일,비밀번호 등 패턴을 설명

      require 필수입력사항

      step 단계속성, 숫자,범위,날짜 등 에 사용

      [출처: https://takeuu.tistory.com/8?category=758565 [워너비스페셜]](정리)

profile
생각이란걸해

0개의 댓글