sohinggu study sohinggu

Blend Effect 사진에 마우스를 올려보세요 See the Pen Blend Effect by sohinggu (@sohinggu) on CodePen.

HTML - 정보로서 HTML 정보로서 HTML HTML이 처음 고안됬을 때는 단지 웹페이지를 표현하기 위한 언어였고 사회적으로 중요한 의미가 없었다. 하지만 웹이 폭발적으로 성장하면서 인류의 많은 정보들이 WEB화 되었다. 즉, HTML이라는 언어를 통해서 표현된다. 따라서 HTML는 인류의 지식을 담아내는 그릇같은 역할을 한다.

HTML - form: method 데이터를 전송하는 방법: method 속성 method를 지정하지 않으면 get방식으로 동작 (기본값) get : url을 통해서 데이터를 전송 post : url이 아닌 다른 방싱으로 데이터를 숨겨서 전송 1. Get방식 URL을 통해서 데이터를 전송하는 방식 서버 쪽으로 데이터를 전송할 때 웹브라우저는 URL뒤에다가 ?id=egoine이라는 사용자가 입력한 데이터를 전송 → method.php.라는 것이 열릴 때 id=egoing이라는 url값을 인지해서 어떤 작업을 처리함 비밀번호가 url에 그대로 노출 → 정보가 어떤 경우에는 url로 전달하는 것이 필요할 때가 있 어떤 경우에는 감춰서 전달할 필요가 있음 2. Post방식 URL이 아닌 다른 방식으로 데이터를 ..

HTML - form: label label form의 입력창에 이름을 붙여주는 태그 누구의 label인지 정확하게 표현하기 위해 input의 id값과 label의 for값을 동일하게 연결시켜준다. → 시각적인 변화는 없지만 기능상 label을 클릭하면 해당 텍스트 필드로 커서가 이동한다. text : textarea : default value text : textarea : default value id를 쓰지 않는 방법으로는, label로 해당 input태그를 감싸주어도 같은 결과가 나온다. text : textarea : default value text : textarea : default value checkbox인 경우도 동일한 방법으로 텍스트를 클릭해도 체크박스가 체크되게 만들 수 있다. ..

HTML - form: hidden hidden field 서버로 데이터를 전송하는데 UI가 필요없거나 몰래 데이터를 전송해야 하는 겅우 이용하는 기능 hidden : UI는 없지만 서버로 데이터를 전송 type이 hidden인 input태그는 화면상 표시가 되지 않지만 hide라는 이름으로 egoing이라는 값을 가지고 있음 → 텍스트 필드에 아무 것도 입력하지 앉고 제출하면 "http://localhost/hidden.php"로 hide는 egoing이라는 값이 전송

HTML - form: buttom Button 버튼을 생성하는 속성 submit : 제출 버튼 생성 - value 속성: 제출 버튼에 나타내는 내용을 지정 (기본값: '제출') button : 버튼 생성(기본값이 없기 때문에 value값을 정해줘야 함) - submit은 누르면 새 창이 뜨지만 button은 아무 변화 없음. 즉, button은 submit과 다르게 버튼의 UI만 만들어지는 것. 기능을 주려면 자바 스크립트와 함께 활용해야함 reset : 재설정 버튼 생성 (reset이 속해있는 form태그 아래의 사용자가 입력한 모든 정보가 초기화)

HTML - form: 선택 Dropdown List 제한된 공간 안에서 여러 개의 선택지를 선택할 수 있도록 하는 기능 : option들을 묶어 dropdown list를 만듦 : 선택 항목 - value 속성 :실제로 컴퓨터에 전송되는 정보 붉은색 검은색 파란색 붉은색 검은색 파란색 HTML - form: radio, checkbox Radio button 사용자에게 한 개의 선택지를 선택해서 제출할 수 있도록 하는 기능 (단일 선택) : 라디오 버튼 생성 : 같은 name 값으로 묶인 radio 버튼 중 1개의 버튼만 선택 가능 붉은색 : 검은색 : 파란색 : 붉은색 : 검은색 : 파란색 : Check Box 사용자에게 여러 개의 선택지를 선택해서 제출할 수 있도록 하는 기능 (다중 선택) : 같은..

HTML - form: 문자입력 사용자로부터 텍스트를 입력받을 수 있는 속성 : 사용자로부터 텍스트를 입력받음. ID: ID: - name 속성: 서버가 사용자가 입력한 값을 알아내게 하기 위해 부여하는 이름. (어떤 정보를 서버로 전송하려면 사용자가 입력한 값에 이름을 부여해야 서버가 그 값을 알아낼 수 있음 / 모든 form태그에서 필요) - value 속성: 사용자가 웹페이지를 열었을 때 기본적으로 보여지는 값. (기본값) :사용자로부터 password를 입력받음. Password: Password: 여러 줄의 텍스트를 입력받기 위한 입력창을 설정 : 사용자로부터 여러줄의 텍스트를 입력받음. 텍스트를 입력하세요. 텍스트를 입력하세요. - cols 속성 : 텍스트 영역이 보이는 너비값을 지정. 너비값..

HTML -표1: 기본 table 태그 표를 삽입해주는 태그 table 태그 td 태그 (table data) : 각각의 항목을 작성 항목 tr 태그 (table row) : 테이블의 행을 나타낸다. 같은 행에 속하는 td 태그들을 묶어준다. border : 테두리 지정 HTML - 표2: 구조 table 구조화 아래 태그들을 사용하지 않아도 시각적인 면에서 차이는 없지만 정보를 구조화하는 태그들을 사용하여 표현하므로써 가치있는 정보를 만들어낸다. thead 태그 : table의 제목 th 태그 : 데이터의 제목 (thead 안에 작성하는 항목) tbody 태그 : table의 본문 tfoot 태그 : table의 푸터 thead는 코딩 시 tbody보다 아래에 써도 브라우저 상의 표에서는 가장 상단에 ..

HTML - 이미지: img img 태그 이미지를 삽입해주는 태그 : 닫는 태그가 필요하지 않음 src 속성 : 이미지 주소 작성 title 속성 :이미지에 마우스 오버 시 이미지 설명

HTML - 줄바꿈: br br 태그 강제로 줄바꿈을 해주는 태그 : 닫는 태그가 필요하지 않음 br 태그는 1줄 줄바꿈, p 태그는 2줄 줄바꿈 br 태그는 시각적으로 줄바꿈만 되게 표현해주는 것이지만, p 태그는 p 태그로 묶어준 내용이 하나의 단락이라는 정보를 표현해준다.

HTML - 단락: p 태그 p 태그 단락을 구분시켜 주는 태그 (줄바꿈 + 여백) 줄바꿈 방법 (1) 태그 (2) CSS를 이용한 p 태그 여백 설정

box-shadow를 이용한 Cricle만들기 원 위에 마우스를 올려보세요 See the Pen box-shadow Circle by sohinggu (@sohinggu) on CodePen.

box-shadow를 이용한 Button만들기 버튼에 마우스를 올려보세요 See the Pen box-shadow Button by Jungsohee (@sohinggu) on CodePen.

HTML - 변천사와 통계 HTML 연대기 GO HTML 통계 GO

HTML - 웹 사이트 만들기 웹 사이트 만들기 index.html 작성 index.html의 body안에 a태그로 링크 작성 (링크 먼저 작성하는 것이 효율적) 각각의 링크의 연결할 html파일 작성 index.html HTML 기술소개 기본문법 하이퍼텍스트와 속성 리스트와 태그의 중첩 선행학습 본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.

HTML - 문서의 구조 문서 구조 실제 웹 사이트 화면에 보이는 본문 내용 → 문서의 기본구조는 안에 와 로 구성된다. title 태그 : 문서(탭)의 제목을 설정하는 태그 : 글씨가 깨지는 현상을 방지해주는 코드

HTML - 태그의 중첩과 목록 목록 표현 항목1 항목2 항목3 항목1 항목2 항목3 항목1 항목2 항목3 항목1 항목2 항목3 → ul/ol 과 li 처럼 태그와 태그를 중첩해서 사용할 수 있다. li 태그 (list) ul 태그 (unordered): li 태그들을 순서가 없이 그룹화해주는 태그 ol 태그 (ordered): li 태그들을 순서가 있게 그룹화해주는 태그