코드 그라데이션

블록 레벨 요소, 인라인 레벨 요소 블록 레벨 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것. 한 줄을 차지 한다는 것은 해당 요소의 너비가 100%라는 뜻. 따라서 블록 레 벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. 블록 레벨 요소를 만드는 대표적인 태그로 , , 등이 있다. 예제 aaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbb cccbbbbbbbbbbbb ddddddddddddd eeeeeeeeeeeeeeeeee. 실행 결과 인라인 레벨 인라인 레벨 요소는 한 줄을 차지하지 않는다. 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다. 따라서 한 줄에 인라인 레벨 요소를 여러 개 표시할 수 있다. 인라인 레벨 요소를 만드는 태그로 , , 등이 ..

list-style-type: 불릿 모양과 번호 스타일 지정 list-style-image: 불릿 대신 이미지 파일을 사용 list-style-image: url('~~~'); // 불릿으로 사용할 이미지 list-style-position: 목록을 들여쓰기 list-style: 목록 속성을 한꺼번에 표시 - 소스를 간단하게 줄일 수 있음 예제 IT 수강생 모집 IT에 관심 있는 여러분 환영합니다 메가 IT에서 모두를 대상으로 수강생을 모집합니다. 학부나 전공에 상관없습니다. 평소 IT에 관심있었던 사람들의 지원바랍니다. 모집 기간 : 4월 2일 ~ 5월 11일 모집 분야 : 프론트, 백엔드, 게임개발 지원 방법 : 양식 작성 후 이메일 접수 지원서 양식은 메가IT 홈페이지 공지 게시판에 있습니다. 모집..

font-family 글꼴 지정 속성 텍스트 사용 요소에서 주로 사용한다. 기본형 font-family: "글꼴 이름" | 대체글꼴이름, 대체글꼴이름 기본형 기호 이해하기 font-size 글자 크기의 단위는 px（픽셀）이나 pt（포인트） 등으로 지정할 수 있고 백분율을 사용 # 글자 크기 설정 방식 1) 키워드 사용 2) 단위 사용 3) 백분율 사용 부모의 글꼴 크기가 단위로 설정되어 있어야 한다. font-style : 이텔릭체로 글자 표현 이텔릭체로 글자를 바꾸는 속성값은 italic과 oblique 가 있는데, 웹에서는 주로 italic을 사용한다. italic은 기울어진 글꼴이 처음부터 디자인되어 있는 반면 oblique는 원래 글꼴을 단지 기울어지게 표시합니다. 대부분 기울어진 형태에 맞게 글..

퀴즈 1. 코드 낚시게임 우선 랜덤 값을 받아서 물고기 3마리를 배치한다. 그리고 낚시꾼이 캐스팅을한다. 캐스팅을 할 때는 예를 들어(0이상, 4이하) 로 하여야 한다.. 그리고 나서 위 아래 왼쪽 오른쪽으로 이동을 해서 물고기를 다잡으면 됩니다.

CSS의 기본 선택자 전체 선택자 스타일을 모든 요소에 적용할 때 사용한다. * 를 사용한다. 특정 요소에 스타일을 적용하는 타입 선택자 특정 태그를 사용한 모든 요소에 스타일을 적용한다. 이런 식으로 사용한다. 특정 부분에 스타일 적용하는 클래스 선택자 특정 부분만 선택해서 스타일을 적용하고 싶을 때 .클래스명 { 스타일 규칙 } 특정 부분에 스타일을 한 번만 적용할 수 있는 id 선택 마침표(.) 대신 # 기호를 사용한다는 점만 제외하면 스타일을 정의하는 방법은 클래스 선택자와 같. 클래스 선택자가 문서에서 여러 번 적용할 수 있는 반 면, id 선택자는 문서에서 한 번만 적용할 수 있다는 것 같은 스타일 규칙을 사용하는 요소들을 묶어주는 그룹 선택 선택자를 이용해 스타일을 정의하다 보면 여러 선택자..

대표적인 스타일 시트 스타일 시트의 갈래 기본형 선택자 { 속성1 : 속성값; 속성2: 속성값2 } 맨 앞의 선택자는 스타일을 어느 태그에 적용할 것인지 알려주는 것. 중괄호 사이에는 스타일 정보를 넣는다. 속성과 같이 하나의 쌍으로 이루어진 것을 스타일 규칙 브라우저 기본 스타일 : CSS를 적용하지 않더라도 웹 브라우저에 표시할 때는 기본 스타일을 사용. 인라인 스타일 : 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시 내부 스타일 시트 : 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것. 외부 스타일 시트 : 스타일 정보를 따로 저장해 놓은 외부 스타일 시트 레드향 껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, ..

태그 이외의 태그들 1) : 여러 줄을 입력하는 텍스트 영역 태그 여러 줄을 입력하는 텍스트 영역 속성 2) , : 드롭다운 목록을 만들어 줌 사용자가 내용을 직접 입력하지 않고, 여러 옵션 중에서 선택하게 하려면 드롭다운 목록이나 데이터 목록을 사용함. 전자는 태그로 드롭다운 목록의 시작과 끝을 표시하고, 그 안에 태그를 사용하여 원하는 항목을 추가한다. 태그에는 value 속성을 이용해 서버로 넘겨주는 값을 지정한다. 2-1) 태그의 속성 태그를 사용해 만든 드롭다운 목록은 기본적으로 옵션이 하나만 표시된다. 옆에 있는 화살표를 클릭해 필요한 항목을 선택할 수 있다. 이 때 size 속성이나 multiple 속성을 이용하면 드롭다운 목록의 크기나 선택할 항목의 개수를 조절할 수 있음. 속성 2-2) ..

input 태그의 주요 속성 1) autofocus : 자동으로 입력 커서를 가져다 놓음 이제는 자바스크립트 이용할 필요 없음 기본형 2) placehorder : 힌트를 표시해 줌 텍스트 필드 앞에 제목을 사용하지 않고도 사용자에게 해당 필드에 어떤 내용을 입력해야 할 지 알려줄 수 있음. 예제 뉴진스 앨범 주문하기 배송 정보 이름 배송 주소 이메일 연락처 배송 지정 (주문일로부터 최소 3일 이후) 실행 결과 3) readonly : 읽기 전용 필드를 만들어 줌. readonly라고만 쓰거나 readonly = "readonly" 또는 readonly = "true" 로 지정한다. 4) required : 필수 입력 필드를 지정 내용을 폼에 입력한 후 submit 버튼을 클릭하면 폼을 서버로 전송하는데..