코다의 코딩공부 코다의 코딩공부

1. CSS Box Model Content : 이미지나 텍스트의 영역 Padding = Boreder와 Conter사이의 거리 Border = Content를 둘러싸는 선 Margin = Border와 외부 Content사이의 거리 Demonstrating the Box Model The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content. This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green..

시작하기 앞서 CSS 기능에 대해서는 다음 사이트를 이용하는 것이 좋다. https://www.w3schools.com/css/default.asp CSS Tutorial W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 1. CSS를 사용하는 이유 글자색을 바꾸는 경우 HTML태그만으로도 색상을 표현할 수 있다. My mother has blue eyes and my fa..

1. button 버튼텍스트 The button Element Click Me! onclick안에는 보통 javascript코드가 들어가서 함수와 같은 기능을 한다. 버튼텍스트에는 , , , , 의 태그들이 들어갈 수 있다. 2. input The input element First name: Last name: Click the "Submit" button and the form-data will be sent to a page on the server called "action_page.php". input도 button처럼 활용할 수 있는데 위의 예제는 이름을 입력하고 submit을 클릭하면 php서버와 연동되는 구조이다. button과는 달리 말 그대로 무언가를 input하는 용도로 쓰였다는 것을..

1. 문서타입 대부분의 웹사이트에서 F12를 눌러보면 맨 위에 이라는 것이 있다. DOC는 Document의 약자이고 DOCTYPE은 문서 타입이라는 뜻이다. 그리고 DOCTYPE html은 결국 html타입의 문서라는 표시이다. 모든 타입의 html문서는 이 반드시 포함되어있어야 한다. 2. ... 로 html타입의 문서라는 것을 표시할 수 있다. Hello Web ! 3. head title은 웹 페이지안에는 뜨지 않고 화면 상단에 탭영역에 표시된다. 그리고 헤더에는 뿐만 아니라 , , , , , 등의 정보도 활용이 된다. 4. body head 외 대부분의 내용은 body영역에 작성된다. 그 중에 body안에 자주 사용 되는 것이div라는 것이 있는데 div는 구역을 설정하는 것이다. The div..

1. Ordered List ... 집어넣은 순서대로 번호가 붙여짐. Coffee Tea Milk 50번부터 시작하게 설정가능 Coffee Tea Milk 2. Unordered List ... 정렬되지 않고 리스트 생성 Coffee Tea Milk 3. 테이블 엑셀의 표 형식으로 테이블을 만듬 ... or ... Month Savings January $100 February $80 table로 표를 생성하고 tr은 테이블의 행을 의미한다 th로 테이블의 헤더(컬럼)을 의미한다. td는 셀을 선택하고 td안의 값으로 표를 채워넣는다. 분석을해보면 tr로 한 개의 행을 생성하고 th로 헤더성격의 데이터를 채워넣는다. tr로 한 개의 행을 더 생성하고 td로 일반적인 데이터를 채워넣는다. 데이터를 채워넣기..

1. 개행처리 To force line breaks in a text, use the br element. 2. 단락구분 ... This is a paragraph. This is a paragraph. This is a paragraph. 과의 차이점은 단순한 개행처리이냐 단락이 구분되냐이다. 나중에 CSS에서 단락으로 구분하여 처리할 수 있기 때문에 구분이된다. 3. 이미지 만약에 이미지를 못찾으면 alt에 입력한 대체 텍스트가 출력이 된다. 이미지 파일은 test.html과 같은 폴더안에 있어야한다. 4. 링크 텍스트 디스플레이 Visit W3Schools.com! 새로운 창에서 띄우고 싶을 때는 target="_blank"를 추가하면 된다. Visit W3Schools.com! 이미지를 사용하여 ..

1. 확장자 .html 메모장 또는 원하는 편집기(실습의 경우에는 atom)를 사용하여 .html파일로 만들면 Crome또는 Explorer, Wale등 원하는 애플리케이션으로 실행할 수 있다. 참고로 아래 사이트를 참고하면 HTML을 학습하기 편하다. https://www.w3schools.com/tags HTML Reference W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3school..

1. 서버의 종류 - Web Server(aka. HTTP Server) - - 손님이 음식을 받아서 떠나면, 그 이후론 연락이 끊긴다. -> 손님한테 다시 데이터를 보내기가 힘들다. - 질의/응답 형태 - Game Server(aka. TCP Server, Binary Server, Stateful Server) - - 서빙 직원이 와서 손님에게 물어볼 수 있고 - 손님이 추가 주문을 하기도 하고. - 실시간 상호작용이 있다. 2. 웹 서버 프레임워크 웹 서버는 게임에 국한되지 않고 웹 서비스를 만드는데 사용된다. 따라서 이를 만드는데 지원되는 많은 프레임워크가 있다. - ASP.NET (C#) - Spring (Java) - NodeJS(Javascript) - Django, Flask(Python)..