1. 블록 라벨 요소, 인라인 라벨 요소 1️⃣ 블록 라벨 요소 : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킨다. 즉, 너비가 100%라는 뜻!으로 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. , , 2️⃣ 인라인 라벨 요소 : 블록 라벨 요소와는 다르게 한 줄을 차지하지 않는다. 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있어, 한 줄에 인라인 레벨 요소를 여러개 표시할 수 있다. , , 2. 박스 모델⭐⭐ 박스 모델은 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩 padding, 박스의 테두리 그리고 여러 박스 모델 사이의 여백인 마진 margin 등의 요소로 구성된다. 마진과 패딩은 다른 콘텐츠 사이의 간격이나 배치 등을 고려할 때도 중요한 개..

연습문제 1 최신 웹 디자인 트렌드 반응형 웹 디자인 - 다양한 화면 크기에 최적화하다 플랫 디자인 - 입체에서 평면으로 풀스크린 배경 - 콘텐츠에 집중 원 페이지 사이트 - 한 페이지에 모든 내용을 담다 패럴랙스 스크롤링 - 동적인 효과로 강한 인상을! 웹 폰트 - 웹 타이포그래피를 받쳐주는 기술 연습문제 2 웹 개발 기초 연습문제 3 2019 국민 독서실태 구분 성인 독서자 종이책 6.1권 11.8권 전자책 1.2권 7.1권 오디오북 0.2권 5.5권 연습문제 4 확인하세요 주문 및 배송 오후 2시 이전 주문건은 당일 발송합니다 2시 이후 주문건은 다음날 발송합니다(주말 제외) 교환 및 환불 불만족시 100% 환불해 드립니다 고객센터로 전화주세요 고객센터 0000-0000 상담시간 : 오전 9시 ~ ..

1️⃣ 목록 스타일 1. list-style-type 속성 list-style-type 속성은 불릿 모양과 번호 스타일을 지정하는 속성이다. list-style-type 속성값 disc : 채운 원 모양 circle : 빈 원 모양 square : 채운 사각형 모양 decimal : 1부터 시작하는 십진수 decimal-leading-zero : 앞에 0이 붙는 10진수 lower-roman : 로마 숫자 소문자 upper-roman : 로마 숫자 대문자 lower-alpha, lower-latin : 알파벳 소문자 upper-alpha, upper-latin : 알파벳 대문자 none: 불릿이나 숫자를 없앤다. 2. list-style-image list-style-image 속성은 불릿 대신 이미지를..

1. color 웹 문서에서 문단이나 제목등의 텍스트에서 글자색을 바꿀 때는 color 속성을 사용한다. color : 1️⃣ 16진수로 표현하는 방법 : #ffff00 처럼 # 기호 다음에 6자리의 16진수로 표시하는 방법 #RRGGBB로 RR은 빨간색 GG는 초록색, BB는 파란색을 표시하고, 각 색상마다 하나도 섞이지 않으면 00, 해당 색이 가득 섞였다면 ff이다. 하얀색 #ffffff 검은색 #000000 2️⃣ hsl과 hsla로 표현하는 방법 : hsl은 hue(색상), saturation(채도), lightness(명도)의 줄임말이다. 이때 불투명도 alpha가 추가되면 hsla가 되는 것이다. 빨간색 hsl (0, 100%, 50%) 3️⃣ 색상을 영문명으로 표현하는 방법 : red, b..

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. 테이블 연습 문제 이렇게 만드시오! 답: 수습 국원 지원 양식 개인정보 이름 학과/학번 연락처 지원분야