1. font-family 웹 문서에 사용할 글꼴은 font-family 속성으로 지정한다. font-family : 2. font-size 글자 크기는 font-size 속성을 사용하여 조절한다. px, pt, 백분율 등 사용할 수 있다. 1️⃣ 키워드를 사용하여 글자 크기 지정하기 xx-small -> x-small -> small -> medium -> large -> x-large -> xx-large 2️⃣ 단위를 사용하여 글자 크기 지정하기 em : 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준으로 한 후 비율값을 지정한다. rem : 문서 시작 부분에서 지정한 크기를 기준으로 한 후 비율값을 지정한다. ex : 해당 글꼴의 소문자 x의 높이를 기준으로 한 후 비율값을 지정한다. px ..

1. 캐스케이딩 CSS에서 C가 cacading의 줄임말이다. 스타일 시트에서는 우선순위가 위에서 아래로 즉 계단식으로 적용된다는 의미이다. CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다. - 스타일 우선순위 : 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다. - 스타일 상속 : 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다. 1️⃣ 스타일 우선순위 적용 범위 ⭐!important : 어떤 스타일보다 우선 적용하는 스타일이다. 인라인 스타일 : 태그 안의 style 속성을 사용해 해당 태그만 스타일을 적용한다. id 스타일 : 지정한 부분에만 적용되는 ..

CSS 스타일 형식은 선택자 { 속성1 : 속성값1; 속성2: 속성값2} 이런식으로 구성된다. 세미콜론; 으로 구분해서 스타일 규칙을 여러개 지정할 수 있다. 주석 처리는 /* */ 이렇게 한다. 스타일 시트는 총 4가지로 구분할 수 있다. 일단 스타일 시트는 스타일 규칙을 한눈에 확인하고, 필요할 때 마다 수정하기 쉽도록 한군데 묶어 놓은 것을 스타일 시트라고 한다. 1️⃣ 브라우저 기본 스타일 : 웹 브라우저에 표시할 때 기본 스타일을 사용하는 것을 말한다. 2️⃣ 인라인 스타일 : 간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시하는 것을 인라인 스타일이라고 한다. 3️⃣ 내부 스타일 시트 : 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타..

1. .. : 텍스트를 여러 줄 입력하는 영역을 만든다. 속성 1️⃣ cols : 텍스트 영역의 가로 너비를 문자 단위로 지정한다. 2️⃣ rows : 텍스트 영역의 세로 길이를 줄 단위로 지정한다. 2. .., .. 사용자가 내용을 직접 입력하는 것이 아니라 여러 옵션 중 하나를 선택하는 것이다. .. 속성 1️⃣ size : 화면에 표시할 드롭다운 항목의 개수를 지정한다. 2️⃣ multiple : 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용한다. 속성 1️⃣ value : 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정한다. 2️⃣ selected : 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여줄 항목을 지정한다. * 연습 문제 1 예약 정보 이 름 휴대폰 이메일 * 연습문제 2 프런..

1. autofocus autofocus를 사용하면 페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수 있다. 2. placeholder 사용자가 텍스트를 입력할 때 입력란에 적당한 힌트 내용을 표시해서 그 필드를 클릭하면 내용이 사라지도록 만들 수 있다. 3. readonly 사용자가 입력하지 못하고, 읽게만 하는 읽기 전용 필드를 만들 때 사용하는 속성이다. 4. required 필수로 입력해야하는 필드를 지정하는 속성이다.

input type들의 속성들 1. type ="text", type = "password" password를 지정하면 *로 표시된다. 텍스트, 비밀번호 필드에서 사용하는 주요 속성 1️⃣ size : 텍스트와 비밀번호 필드의 길이를 지정한다. 2️⃣ value : 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용이다. 3️⃣ maxlength : 텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정한다. 2. type = "search", type = "url", type = "email", type ="tel" type = "search" : 웹 브라우저 화면으로 볼 때는 텍스트 필드와 똑같지만 웹 브라우저에서는 검색을 위한 텍스트 필드로 인식한다. type = "..

1. .. form은 대표적으로 아이디와 비밀번호를 입력하는 form을 예로 들수있다. form에는 다양한 속성들이 존재한다. 1️⃣ method: 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정하는것이다. -> get과 post가 있다. - get : 데이터를 256 ~ 4096 byte 까지만 서버로 넘길 수 있으며, 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 존재한다. - post : 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않는다. 2️⃣ name : 자바 스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정한다. 3️⃣ action : 태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다. 4️⃣ target : action 속서..

1. html 태그 속성 연습문제 똑같이 만들기! 답: 수습 국원 모집 방송에 관심 있는 새내기 여러분 환영합니다. 교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부나 전공에 상관없습니다. 평소 방송에 관심있었던 여러 학우들의 지원바랍니다. 모집 기간: 3월 2일 ~ 3월 11일 모집 분야: 아나운서, PD, 엔지니어 지원 방법: 양식 작성 후 이메일 접수 지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다. 혜택 수습기자 활동 중 소정의 활동비 지급 정기자로 진급하면 장학금 지급 2. 테이블 연습 문제 이렇게 만드시오! 답: 수습 국원 지원 양식 개인정보 이름 학과/학번 연락처 지원분야

웹사이트에서 링크 연결은 가장 많이 사용하는 기능 중 하나이다. 이때 링크 연결은 .. 태그로 만든다. 태그에서 img 를 지정해주면 이미지 링크가 되고, 텍스트로 지정해주면 텍스트 링크가 된다. href 속성을 사용해서 경로를 지정해준다. 1. 텍스트 링크 2. 이미지 링크 이때 기본 설정은 이 하이퍼링크를 누르면 기존페이지에서 지정한 페이지로 이동하게 되는데, 원래 페이지로 돌아가고싶으면 뒤로가기 버튼을 눌러야하는 다소 불편한 점이 존재한다. 따라서 target = "_blank"를 추가해주면 새로운 페이지에서 웹 문서가 열리게 된다!

1. 태그 태그는 오디오 파일뿐만 아니라 비디오, 자바 애플릿, pdf 등 다양한 멀티미디어 파일을 삽입할 때 사용한다. 태그를 사용하면 이런식으로 pdf 도 웹 브라우저에 추가해줄 수 있다. 2. 태그 embed 태그는 대부분의 브라우저에서 적용할 수 있는 태그로 와 비슷하게 오디오, 비디오, 이미지 등 다양한 멀티 미디어 파일을 삽입할 수 있다. 3. , 태그 이 두 태그는 사용법과 속성 모두 비슷하다. 태그에서는 html에서 배경음악이나 효과음 등 오디오 파일을 삽입할 때 사용한다. 태그에서는 비디오 파일을 삽입할 때 사용한다. 이때 controls 속성을 지정해주면 삽입한 파일에 사용자가 재생을 멈출 수 있도록 해준다. * , 속성 controls : 삽입한 파일에 컨트롤 바를 표시해 사용자가 재..

웹 문서에 이미지를 추가하고 싶을때는 태그를 사용한다. 1. src 속성 태그의 src 속성은 이미지 파일의 경로를 지정하는 속성으로 반드시 지정해줘야한다. 이미지나 음악, 동영상 등을 웹 문서에 저장할 때는 경로를 주의해서 지정해줘야한다. 경로가 정확하지 않으면 웹 브라우저 화면에 이미지가 나타나지 않는다. 이미지 경로는 웹 문서의 위치를 기준으로 정한다. 2. alt 속성 는 이미지를 대신해서 읽어 줄 텍스트를 입력하는 것이다. 3. width, height 속성 태그에 별다른 속성을 지정해주지 않으면 원본 이미지 크기 그대로 나타나게 된다. width와 height 속성은 각각 이미지의 너비와 높이를 지정해주는 속성이다. 단위는 %와 px인데 기본이 px이라 px 단위는 작성하지 않아도 된다. ex..

우선 표를 만들기 위해서는 표의 시작과 끝을 알려주는 ... 태그를 표시한 후에 표와 관련된 태그를 모두 넣어준다. 1. ... 표에 제목을 추가하고 싶을 때 사용하는 태그이다. 2. .., .. 태그는 행을 만들고, 태그는 행 안에 있는 셀을 만든다. 이 두 태그는 모두 사용해야 하나의 셀을 만들 수 있다. 3. .. 표의 제목 행에 셀을 만들 때는 태그 대신 태그를 사용한다. 4. , , 표에 제목과 본문, 요약이 있는 부분으로 표의 구조를 나눌 수 있다. 5. rowspan, colspan rowspan은 행을 합칠 때 사용하는 속성이다. colspan은 열을 합칠 때 사용하는 속성이다. 6. , 특정 열에 배경색을 넣거나 너비를 바꾸려는 등 원하는 열을 선택해서 지정해줘야하는데, 이럴때 과 태그를..