본문 바로가기

내일배움카드6

DAY7-HTML,CSS div, ul, li태그 사용해 박스 모델 만들기 1. div 사용 2. ul, li 사용 3. css -초기화 시킨 후 시작 box, .div, ul, li {margin:0px; padding:0px;} => , 꼭 찍어야함 -부모박스 width, height, border,background, margin:auto(박스 가운데 정렬) -자식박스 width, height, background, margin-rigt(오른쪽 여백), float:left(박스 왼쪽부터 정렬) -last 자식박스 margin-rihgt: 0px=> 마지막 박스 밀려서 아래쪽으로 배치되기 떄문에 ***응용 =>section, inner, wrap, left/center/right 순으로 부모 박스랑 자식 박스 관계 생각하면서 tag입력, 부모박스의 너비(높이, 여백)랑 자식.. 2023. 8. 27.
DAY6-HTML,CSS form과 관련된 태그 1. form 만들기 =>" "백앤드 개발가자 입력 ___________ => legend 는 폼 명칭/ 없어도 상관x __________ =>label은 from 요소 명칭 =>input type 어떤 형태로 정보를 받을지, placeholder는 박스 안에 고정으로 쓰여 있는 메세지 2. from 과 관련된 태그 1) input type태그 label for input type ID/ 이름/ 메일 주소/ 연락처 text PASSWORD password=> 다른 사람이 입력하는 것 못 봄 성별(남/여) radio=> 동그라미/ 하나만 체크할 때 check box=> 네모박스 파일첨부 file 예약 날짜 date 예약 시간 time 예약 날짜/ 시간 dateime-local *checked 라고 쓰여 있.. 2023. 8. 27.
DAY5- Visual studio에서 html 파일 바로 열기, HTML•CSS 표 만들기 및 응용 담주면 자바랑 제이쿼리 개강인데 게을러서 이제야 다시 복습을 시작한다…😂😂😂 🌟목표: 복습& 일주일에 세개 이상씩 포스팅🌟나의 자존감을 지켜주는 고마운 친구 👭 1. Visual Studio Code 에서 html 파일 열기 -좌측 extensions 선택 -open in browser 검색& 설치 -link real~에서 마우스 오른쪽 눌러서 Open in Default Browser 선택 or 단축키 Alt+B 2. 표만들기1) 바디 시간표 이름 -제목행 제목 행 안에 들어가는 요소 제목 행 안에 들어가는 요소 제목 행 안에 들어가는 요소 -본문 본문 안에 들어가는 요소 본문 안에 들어가는 요소 본문 안에 들어가는 요소 -요약된 행 본문과 같은 방법으로 요소 넣기 2)스타일 table{ border:.. 2023. 8. 25.
DAY4- HTML,CSS 내부하이퍼링크, 이미지맵, 리스트목록 1. 내부 하이퍼링크책갈피 기능 링크내용책갈피 걸어 놓은 곳으로 하이퍼링크***책갈피기능 자체에는 #붙이면 안됨 !!2. 이미지 맵1) tag 눈금자 사용하여 좌표 위치 찾기 이미지맵상품을 선택하세요 결합을 하시면 더더욱 저렴하게 구입하실 수 있습니다chu03125.dothome.co.kr 3. 리스트 목록1) 순서 없는 목록(요즘은 다 순서 없는 목록 사용) 안에 들어가는 목차들은 2) 순서 있는 목록 안에 들어가는 목차들은 3) 스타일 스타일 적용할 목록 {list-style:______; color:_______}lower-alpha소문자upper-alpha대문자lower-alpha로마글자decimal숫자none없앰square사각형circle뚫린 원disc닫힌 원*** 순서 잘 생각하면서 코드 입력.. 2023. 6. 18.
DAY3- HTML,CSS 이미지 삽입과 하이퍼링크 태그 이미지 삽입1. images 라는 폴더 따로 만들기(다른 이름으로 저장하는 사진들 그 안에 저장할 것) 2. 사진 마우스 오른쪽 클릭 검사- Open in new tab- 다른 이름으로 저장 3. 2023. 5. 31.
DAY2-피그마, HTML,CSS 구분선과 class 이름 선택자, 글꼴 관련 태그 피그마 Figma: the collaborative interface design tool. Build better products as a team. Design, prototype, and gather feedback all in one place with Figma. www.figma.com *new design file-ㅁ-place image/video 사진 선택 *rectangle 사용하여 가로, 세로 길이 측정 *단축키 i 사용해 색상 뽑기 HTML, CSS 1. html 홈페이지 제작 규칙 단추기 html5 누르면 한번에 완성 ! 더 빠르게 완성 2. 수평선 그리기 body에 사용, 닫는 태그 없음 3. class 이름 선택자 문단마다 스타일 다르게 적용해야 할 때 별명 붙여줄 것 .p1{.. 2023. 5. 29.