HTML,CSS,JS 2일차

textarea 

다중라인 입력 

readonly, disabled, required(필수) 가능

innerText로 인지

시작태그와 끝태그 사이의 빈공간,enter, 띄어쓰기 전부 값으로 인지

form태그 안에서 사용하면 name 속성의 변수 값으로 전송 가능

 

select

제시된 항목 중 하나를 선택하게 하는 태그

콤보박스, 드롭다운박스 형태로 쓰이는 태그

select 태그안에  option 태그를 넣어서 목록을 구성

option value = " 전송값 " value에 값이 없으면 공백으로 전송

selected : 기본 설정값을 결정

disabled : 비활성화

 

a태그

다른 페이지로 이동하게 하는 태그

시작태그와 끝태그가 안에 글자를 입력하면 => 클릭시 이동

 href 속성

- 이동할 url, 값이 없다면 현재 페이지에서 새로고침

- url 값이 http:// 로 시작하면 url로 인식, 없으면 파일로 인식

- tel: 전화번호로 연결. 모바일용에서 사용

- mailto: 이메일로 연결

 target : _self, _blank  가장많이 쓰임.

- _self : 기본값, 현재 화면에서 페이지 교체

- _blank : 새창에서 연결

- _parent : 부모 창에서 링크를 새로 연결

결제창처럼 팝업창이 뜨고(자식창) 팝업에대한 정보를 반영하여 원래에 창에(부모창) 반영되어 변경되는경우

- _top : 최고 조상에서 링크를 연결

다중 팝업이 뜰 경우 원 메인창에서 값을 연결 할 때 사용

부모x, 조상x 이면 self 와 같음.

download 속성

- 파일을 다운로드 할 경우 사용

- href에 파일의 경로가 있고, 속성이 download인 경우 해당 파일을 다운로드   / 다운로드 파일이없으면 error

 

a싱커

기능 : 책갈피 기능

id => a태그의 href 속성으로 일치시키면 해당 id로 이동

아이디 기호: "#id"

클래스 기호: ".class"

 

img태그

src : 그림 경로

alt : 그림이 없을 때 나타나는 글자

width : 그림의 가로길이

height : 그림의 세로길이

이미지 size => pixel 표시 % 단위로도 가능.

이미지 형식

html 문서에서 사용되는 이미지 포멧 jpg(jpeg), png 대표적

jpg : 손실 압축 포멧

- 이미지의 해상도가 손상되어도 용량을 많이 줄일 수 있는 포멧

- 가장 많이 사용

png : 무손실 압축 포멧

- 해상도의 손실을 줄이고 압축, 투명 배경 이미지를 사용할 때 사용

- 용량은 크지만 화질이 뛰어남.

이미지 파일들은 헤더 영역에 image/ jpeg image / png 등의  형식을 가지고있기 때문에 파일의 확장자명과 관계없이

헤더정보를 보고 그림을 판단함.

이미지의 리소스가 잘못된 정보를 가지고있는 경우 : 엑박이 떴다 라고 표현함.

 

button 태그

input button과 같은 역할

type="button" : 일반버튼    / js 기능 줄때 주로 사용

type="reset" : 취소버튼

type="submit" : 전송버튼   / form 태그안에서 데이터를 서버로 전송

form 태그안에서 button에 타입을 주지않으면 기본값은 submit

 

list

list를 나타내는 태그 종류 3가지

1. 순서가 있는 리스트 ol  => li

2. 순서가 없는 리스트 ul => li

3. 설명, 정의 리스트 d1 / dt / dd

ol 태그의 속성

- type : 순서를 정해주는 형태

- 1, A, a, I, i

- start : 시작값 지정

ul 태그의 속성

상하위 구조를 만들때 사용

- 메뉴바 / 서브메뉴 구조 구성시 사용

리스트 중첩 가능.

 

table

표를 나타내는 태그 ( 표 전체 테두리 박스)

tr : 행 (하나의 행을 의미)

th/td : 열 (tr 안의 한칸)

th : 제목열 ( 가운데정렬 , 굵은글씨)

td : 일반열 ( 왼쪽정렬, 일반글씨)

- css 에서 모양, 색, 크기 ,선 지정가능.

- border : 테두리 두께

- borderColor : 테두리 색

- width : 너비

- colspan / rowspan : 셀 병합 ( 병합된 셀은 지워줘야함.)

thead / tbody / tfoot  순서를 바꾸어도 head / bodt / foot 순서대로 나열 시멘틱태그

 

iframe

또다른 창을 삽입할 때 사용.

브라우저 안에 다른 브라우저를 삽입

리소스 사용 증가

유튜브를 가져오거나 할 때 사용

 

div

영역을 만들어주는 태그 box

레이아웃을 분리하는 역할

- 컨테이너 역할을 하는 태그

- 가장 많이 쓰이는 태그 (80%~)

- 시멘틱 웹(태그) : div에 의미를 부여하는 개념

  - header => <div id="header"><div>

  - nav , aside ,section, main , article ,footer ... 

 

CSS

html 요소에 스타일을 지정할 때 사용

스타일을 지정하는 방법 3가지

1. 각 태그마다 스타일 속성을 붙여서 사용하는 방법

- 해당 태그 요소에만 적용

- 재사용성이 낮음연

- 적용되는 우선순위는 가장 높음

2. head 태그안에 style 태그를 이용하는 방법

- 해당 페이지에만 가능

- 재사용성이 중간

- 연습할 때 자주사용

3. 별도의 css 파일을 생성해서 링크로 연결하는 방법

- 실무에서 가장 많이 쓰는 방법

- 여러 페이지에 적용 가능

- 이미 만들어져 있는  css 파일을 가져와서 연결도 가능

- head 태그안에 link 태그로 연결하여 사용

 

selector

요소를 선택하게 하는 이름

선택자{ 속성:값; 속성:값; }

태그선택자(태그명) :  같은 태그명을 모두 선택

클래스선택자(.클래스명) : 같은 클래스를 가지는 모든 태그

id선택자(#id명) : 무조건 1개 / 0개

가상선택자(선택자 : 가상클래스명)

- 어떤 조건이나 상황에서 스타일을 적용하도록 만든 선택자

- 앞에 다른 선택자가 오고, 뒤에 가상클래스 선택자가 추가로 나옴

- :hover => 요소에 마우스를 올렸을 때

- :focus => 요소가 포커스를 받고있을 때

- :nth-child(a) / :nth-of-type(a) => a번째에 해당하는 요소

frist- child : 첫번째요소 , last-child : 마지막 요소

   1 : 첫번째요소 , even : 짝수요소 , odd : 홀수요소, 2n 3n 5n : 배수요소 연산도 가능(2n-1)

- :after : 요소 뒤에 가상요소를 삽입

- :before : 요소 앞에 가상요소를 삽입

 

선택자 조합

- 여러 선택자를  이용하여 요소를 선택

- 자식관계

    > : 선택자1 > 선택자2 > 선택자3

- 조상관계

    선택자1 선택자2

    선택자1은 선택자2의 바로위 조상일 수도있고, 한참 위 조상일 수도 있음.

- 본인 : 선택자를 붙여서 사용

선택자 우선순위

- 아이디 선택자 > 클래스 선택자 > 태그선택자

- 우선순위가 같다면 아래에 있는 내용이 적용

 

속성선택자

태그가 가지고 있는 속성을 선택하는 문법

input 태그에서 주로 사용

태그[속성=값]

 

color

색 속성(color 관련 속성)

- color : 글자색

- background-color : 배경색

- border-color : 테두리 색

색 지정 방법

- 이미 지정된 이름을 사용하는 방법 : black,red,blut ...

- 색상 코드를 이용하는 방법 : 16진수 코드

- rgb코드를 사용하는 방법 : rgb(0,0,64)

- rgba 코드 : a (투명도0~1)      a = 0.xxx