고래씌

1. CSS(Cascading Style Sheets) - 마크업 언어가 실제로 화면에 표시되는 방법을 기술하는 언어(HTML 코드가 화면에 어떤 스타일로 보여질지 지정하는 언어) - W3C에서 CSS를 웹 표준으로 지정함 2. CSS select(선택자) ▶ Selector란? : 현재 HTML문서 내에서 특정한 요소를 선택하는 문자 또는 문자열. 스타일을 적용하고자하는 요소를 선택하는 방법 1) d 2) 태그 선택자 : 현재 HTML 문서 내에 같은 태그들을 선택하는 선택자 [작성법] 태그명 {css코드;} ■ 태그 ■ 태그 strong 태그에 작성한 내용 span 태그에 작성된 내용입니다. strong 태그에 작성한 내용 span 태그에 작성된 내용입니다. => 얼마나 깊게 들어가던 상관이 없다! ..

1. 하이퍼링크 관련 태그 1) 하이퍼링크? - 하이퍼링크 기능은 웹 문서에서 또다른 문서로 클릭만으로 이동될 수 있게끔 연결시켜놓은 html의 가장 핵심적인 기능 - 텍스트문구를 클릭해 이동하는 방법, 이미지를 클릭해 이동하는 방법, 현재페이지내에서도 링크를 통해 다른 요소의 위치에 접근도 가능함 2) a 태그를 이용한 하이퍼링크 테스트 ① 내가 작성했던 html파일로 이동할 수 있음 입력양식 폼 관련태그 회원가입 폼 영역관련태그 => 링크를 클릭하면 현재 페이지에서 이동한다! ② 인터넷이 연결된 상황이면 현재 서비스되고 있는 웹페이지도 링크 가능 - a herf 태그 안에 target 속성을 추가할 수 있는데 target 속성을 미작성시 _self가 기본값이다! - 만약 현재 문서에서 이동하기가 아니..

1. 영역 관련 태그 => 각각의 고유한 스타일을 부여함 ▶ 블럭 요소 : 한 줄 단위로 영역을 차지하는 요소들. 줄바꿈이 적용되어 이미 존재하는 요소의 다음줄에 출력이 된다. (h 태그들, p, pre, ..."div") h라인 태그가 영역을 차지하고 있어 무조건 줄바꿈이 일어난다. ex) 영역 관련 태그fdfd ▶ 인라인 요소 : content내용에 해당되는 부분만 영역을 차지하는 요소. 줄바꿈이 적용되지 않아 옆으로 연이어져서 출력. 다음줄로 넘기고자 할때는 br로 개행해야함 (b, s, mark, input, img, label, ... "span") ex) 영역 관련태그 => 해당부분만 영역을 차지하는 것을 확인 1) div태그와 span 태그의 차이 1 : 줄바꿈 적용 div태그 : 블럭요소 ..

회원가입 동의서 이용약간 동의(필수) 여러분을 환영합니다. 네이버 서비스 및 베품(이하 '서비스')을 이용해 주셔서 감사합니다. 동의합니다 동의하지않습니다. 개인정보 수집 및 이용동의(필수) 여러분을 환영합니다. 네이버 서비스 및 베품(이하 '서비스')을 이용해 주셔서 감사합니다. 동의합니다 동의하지않습니다. 모두 동의합니다 취소 확인 회원가입 양식 * 아이디 * 비밀번호 * 비밀번호 재확인 * 이름 * 주민등록번호 - * 성별 선택안함 여자 남자 * 생년월일 주소 우편번호 우편 수신 동의 이메일 이메일 수신 동의 휴대폰번호 010 - - 문자 수신 동의

1. 입력양식 관련 태그 1) input 태그 - 사용자가 값을 입력받을 수 있는 텍스트 상자 혹은 체크박스 등을 만들 수 있는 태그 - input은 줄바꿈을 지원안해줘서 뒤에 태그 해야함 아이디 : 비밀번호 : 성별 : 남 여 회원가입 2. ★폼 관련 태그★ ① action ▶ form 태그 내의 submit 버튼 클릭 시 해당 form 내에 작성된 사용자가 입력한 값들을 서버로 넘기면서 요청하는 역할 수행 ▶ form action="" method="" - * action 속성 : 해당 form 내에 사용자가 입력한 값들을 전달하면서 요청할 서버의 경로 제시 - * method 속성 : 요청 전송 방식을 지정하는 속성(get(기본값)/post) > get 방식 : 요청시 사용자가 입력한 값들이 url..

1. 멀티미디어 관련 태그 1) 이미지 관련태그 - alt : 이미지에 대한 설명부분. alt는 이미지가 깨졌을 때 나타남. ☞ 사진의 경로가 잘못되거나, 이미지를 제대로 표현할 수 없는 경우 대체 텍스트의 용도 ☞ 시각장애인들을 위한 스크린 리더에서 이미지를 읽어주는 설명문구 이미지 관련 태그 * src 속성 alt 속성 * alt - 사진의 경로가 잘못되거나, 이미지를 제대로 표현할 수 없는 경우 대체 텍스트의 용도 - 시각장애인들을 위한 스크린 리더에서 이미지를 읽어주는 설명문구 ① width와 height 속성 - 이미지의 가로, 세로길이 조정가능 - 고정길이(px), 가변길이(%)로 지정 - 미 지정시 기본값은 px - 고정길이 (px) == 기본값 : 화면사이즈가 조정이 되어도 이미지의 크기는..

1. 표관련 태그 1) 표만들기(4행 3열) - 표 : 문서에서 다량의 데이터를 정리해서 표현하고 할 때 사용. 행과 열로 이루어져 있음 - 표를 구성하는 태그들로는 ... - table 내부들을 구성하는 모든 태그들의 최상위 태그는 태그임 ▶ : 표를 생성해주는 테이블 ▶ : 표의 한 행을 나타내는 태그 ▶ : 표의 제목 셀을 나타내는 태그 ▶ : 표의 일반 셀을 나타내는 태그 ▶ (tr>td*3)*3 하면 전체를 3개를 복사를 할 수 있음 ▶ 표의 행과 열에 행길이, 열길이를 늘리고 싶다면 width="" , height="" 을 사용하면 됨 표 만들기 (4행 3열) 웹 브라우저 종류 브라우저명 제조사 홈페이지 Internet Explore MS http://www.microsoft.com Chrom..

1. 목록관련태그 1) 순서가 없는 목록 태그 => , => 목록안에 목록을 넣을 수 있다! => ul 태그는 순서가 없는 목록 태그이다. 목록1 목록2 ul : 순서 없는 목록 태그 HTML 글자관련 목록관련 CSS jQuery React 2) 순서 있는 목록 태그 - type 속성을 이용해서 변경 가능함 - => type을 지정하면 기본값 1로 들어감. - 반드시 시작태그에만 작성할 수 있음 - start 속성을 이용하여 시작값 변경 가능 - start = 정수값 ex) => e부터 시작 역순으로 출력할 시 => 역순 출력 e. ... d. ... c. ... b. ... ol : 순서 있는 목록 태그 HTML CSS JS JQ HTML CSS JS JQ HTML CSS JS JQ 3) 설명과 관련된..

1. 글자 관련 태그 1) body 태그 : 몸통부를 나타냄. 화면에서 출력해서 보여줄 모든 정보 / 내용들을 작성하는 구분 ① br태그 => 줄바꿈 태그 공백이 몇개가 있든 하나의 공백으로 인식하기 때문에 줄바꿈을 하고 싶다면 br태그를 이용해야함! 안녕하세요 반갑습니다. h1 태그입니다. ② h 관련 태그 - h숫자에 따라서 글자 크기를 정해줌. 뒤에 공백을 알아서 추가해준다. 안녕하세요 반갑습니다. h1 태그입니다. h2 태그입니다. h3 태그입니다. h4 태그입니다. h5 태그입니다. h7 존재하냐? ${h$ 태그입니다.} *6 => 하면 아래와 같이 자동완성됨 2) 문단을 나누는 태그 ① 태그 문단 영역을 나누는 태그는 p태그와 pre태그가 있다. 단, p태그는 줄바꿈 입력을 별도의 태그로 지정..

1. HTML - 웹에서 정보를 표현할 목적으로 만든 마크업 언어. - 웹 페이지를 작성하기 위해 사용되는 언어로 웹 브라우저에게 보일 문자열과 이를 감싸는 일종의 해석 기호인 태그들로 이루어짐 - 마크업 : 문서의 논리적인 구조를 정의하고 출력장치에 어떤 형태로 보일 것인지 지시하는 역할 - 마크업 언어 : 마크업(태그)의 형식과 규칙을 정의한 언어 1) HTML 특징 및 주의사항 ① html은 ''(따옴표)와 "" (쌍따옴표) 구분하지 않음 ② == 같지만 읽기 편의상 소문자로 작성하는게 좋음 ③ 구조적 설계 지원(시멘틱) ④ 문자의 공백은 몇 개를 입력하든 한 개만 인식하므로 공백을 추가하기 위해서 특수기호 를 이용해야함 ☞ html5: 를 하면 아래와 같이 자동완성됨 2) html 태그 : htm..