webservice_basics

화면 크기가 달라지더라도(pc, tablet와 스마트폰의 화면은 각각 다르므로) 각 화면에 맞게 자동으로 조절해주는 설정을 하는 방법이다. Viewport Left Menu Main Content Right Content Responsive Web page 연습하기 Hello World Link 1 Link 2 Link 3 Link 4 Lorum Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. About Lorem ipsum dolor sit amet, consectetuer adipi..

Padding vs Margin Padding Margin border와 contents 사이의 여백 border를 기준으로 다른 element 사이의 간격 (Margin 크기를 늘리면 바깥에서 밀어내게 된다) 각각의 element 사이의 간격을 지정하고 싶을 때는 padding 또는 margin을 사용하는 것이 좋다 HTML Forms practice example 예를 들어서 다음과 같은 HTML form을 만들고자 할때 *Country: *First Name: *Last Name: *Email Address: label과 각각의 입력창 사이의 간격을 일정하게 하기 위해: 방법 1. 로 각 블록별로 내용을 묶은뒤, 태그를 부분에서 padding/margin을 이용해서 간격을 조절할 수 있고 또는 방법..

: 문서의 이름이다. 페이지의 탭 부분에 나타난다

id Attribute 특정 HTML element 위한 고유한 id(C언어에서 변수처럼)를 설정할 때 사용된다. id를 이용해서 style을 추가적으로 정의할 때 유용하다. id 이름은 대소문자를 구분하니 주의해서 정확하게 사용하도록 하자(id 이름에 공백이 들어가서도 안된다)! 기본 문법: #idname {} Class vs id Class는 여러개의 element에서 사용 될 수 있지만 한 HTML 페이지 내에서는 id는 오로지 하나의 element에서만 사용되어야 한다. id를 이용해서 header style 지정하는 방법 #myheading{ background-color: powderblue; color:black; font-family: Arial; padding: 40px; text-ali..

Block element 와 Inline element 모든 HTML element는 기본 값(default value)를 가지는데, 이는 2 종류로 나뉜다: block element와 inline element. 중요한 개념이니 block element와 inline element를 구분해서 잘 알아두도록 하자! Block-level element 항상 새로운 줄에서 시작하고 width는 항상 100%를 차지하는 element이다. h1 ~ h6 p div canvas dl, dt, dd table ul, ol 등이 있다 추가적으로 더 알고 싶다면: https://www.w3schools.com/html/html_blocks.asp HTML Block and Inline Elements HTML Blo..

Unordered HTML list : (default)bulletpoints를 이용해서 리스트 항목을 나타낸다 : 각각의 항목을 적을 때 사용한다 list-style-type : bulletpoint 모양을 바꾸고 싶을때 사용한다 disc, circle, square, none(bulletpoint 표시가 되지 않는다) Nested list list 안에 list를 중첩해서 사용할 수 있다 (그렇게 되면 bulletpoint는 다른 문자로 바껴서 나온다) Coffee Tea Black tea Green tea Milk Ordered HTML list : 숫자를 이용해서 리스트의 항복을 나타낸다 type 예)type="1" 종류: 1, A, a, I, i start: 번호 매기기를 어디서부터 시작할지 정..

웹 페이지에서 데이터를 행과 열로 효율적으로 정리할 수 있도록 해준다. : 하나의 행을 정의한다 : table header (보통 굵은 글씨로 가운데 정렬로 나타난다) : 왼쪽 정렬로 나타난다 Firstname Lastname Age Jill Smith 50 Eve Jackson 94 John Doe 80 border : 표 테두리 설정 예) border: 1px solid black; border-collapse: 표와 각 행과 열의 테두리가 하나로 합쳐져서 나오길 바랄 때 예) border-collapse: collapse; padding : cell 안의 내용과 각 테두리 간의 여백을 설정한다 예) padding: 15px; text-align 예) text-align: left/ right bor..

기본 문법: src alt width & height (픽셀 단위인 px를 사용하거나 상대적 크기에 따라 %로도 설정 가능하다) style 사전에 이미지 경로를 설정하는 방법 이미지가 다른 폴더 또는 하위 폴더에 있을 경우에 경로를 설정해주어야 한다. 이미지를 우리가 원하는 폴더로 옮기는 방법 중에 FileZilla를 사용하는 방법이 있다. image map: an image with clickable areas usemap #"이미지에 지정할 이름" : 클릭 가능한 부분을 정의한다 shape rect circle poly default coords rect 의 경우 처음 두 좌표는 위의 왼쪽 모서리이고, 다음 두 좌표는 아래의 오른쪽 모서리이다. circle 의 경우 처음 두 좌표가 원의 중심이고, 다..