HTML/CSS기초 4일차 공간활용( margin, padding, border)
2022. 10. 6. 16:37
Study/HTML,CSS
block은 한줄한칸으로 공간을 차지 inline은 글자공간만 차지 none은 숨겼을때 사용한다 예제_a태그를 마우스를 올렸을 때, 그 옆에 있는 span태그의 디스플레이를 inline으로 변경 a : hover + span a태그 를 클릭했을때 그 옆에 있는 스팬태그 display : inline 디스플레이 를 인라인으로 변경! a태그를 공간활용을 위해 태그의 공간을 네모로 할당한다 ● margin=테두리 바깥쪽에 공백을 부여하는 속성 - 컨텐츠의 크기에는 변화가 없고 위치만 이동 - 10px = 상하좌우 각각 10px값을 부여 - 10px 20px = 상하10px, 좌우20px - 10px 20px 30px 40px = 상 10, 우 20, 하 30, 좌 40 (시계방향) - auto = 화면의 가운..
HTML / CSS기초 3일차 <css>
2022. 10. 5. 17:48
Study/HTML,CSS
- font-family에 복수개의 값을 입력하는 경우가 많다. 글꼴이 없을 때 뒤에 있는 다른 글꼴들로 대체하기 위해서 - font-size 는 글자의 크기 font의 기본 크기는 16xp - font-weight는 글지를 두껍게 만든다 - font-style은 폰트의 스타일로 이탤릭체가 대표적이다 ★ 선택자는 선택되는 범위가 좁으면 좁을수록 우선순위가 높다! 1. 전체 선택자(*) : html태그 모두에게 공통적으로 스타일에 부여 p태그 영역 p태그 영역 span태그 영역 span태그 영역 2. 태그 선택자(태그명) : 특정 태그에게 스타일을 부여 p태그 영역 p태그 영역 span태그 영역 span태그 영역 3. 클래스 선택자( . ) : 태그들 중에 클래스 값을 가지고 있는 요소에게 부여(중복가능)..
HTML/CSS기초 2일차 <a>,<table>,<Form>,<input>
2022. 10. 4. 14:07
Study/HTML,CSS
네이버로이동 우리가 만든 첫 페이지 출력화면 더보기 실습코드 메뉴판 번호 이름 가격 1인 1메뉴 부탁드립니다. 1 짜장면 8,000원 2 짬뽕 3 볶음밥 4 탕수육 32,000원 5 음료수 1,000원 결과화면 더보기 실습문제 실습 코드 공부리스트 번호 제목 비고 원하는 제목을 눌러주세요 1 ex01첫페이지 형쌤 2 ex02글자작성 3 ex03볼드체 4 ex04리스트태그 5 ex05a태그 병관쌤 6 ex06테이블태그 결과화면 더보기 실습 코드 이름 : 취미선택 뒹굴이 먹기 잠자기 결혼유무 미혼 기혼 이혼 사별 기타 도시선택 광주 부산 서울 대전 인천 대구 버튼 출력화면 더보기 예제) Step1: 아이디 비번입력 아이디 비밀번호 비밀번호 확인 Step2: 개인정보 성별 남 여 혈액형 A형 B형 O형 AB형..
HTML/CSS기초 1일차
2022. 10. 1. 14:12
Study/HTML,CSS
-인터넷 : 데이터를 보내는 회선/선로 -웹 : 회선/선로를 이용하는 서비스 Client : 요청(request)하는 주체 Server : 응답(response)하는 주체 * Protocol(=Rule) : 규칙 - 요청할때 정해진 규칙에 따라 요청해야 응답받는다. ■ HTML HTML - 비어있는 웹페이지에서 뼈대를 만들어주는 설계도 (레이아웃) CSS - 뼈대에 디자인을 해주는 것 ==> 정적인 페이지 Tool : Visual Studio Code 실습 코드) 안녕하세요! 제 인생의 두번째 웹페이지 입니다! 여기는 h1태그입니다! 여기는 h2태그입니다! 여기는 h3태그입니다! 출력 화면) 더보기 - P태그는 태그가 끝나면 자동으로 개행이되고 - Span태그는 태그가 끝나도 개행이 되지 않는다 실습코드..