코딩하는라민

margin auto 속성으로 정렬하기 웹디자인기능사 공부하다가 margin-left: auto 속성이 나왔다. margin: 0 auto; 만 사용하다가 margin-left: auto 속성을 보고 margin 속성에 대해 궁금해져서 이것저것 만져보면서 가지고 놀아보았다. 1. margin: 0 auto; 기존에 많이 사용하던 margin 0 auto 속성 .box{ width: 400px; height: 400px; border: 1px solid black; margin: 0 auto; } ▶ 요소를 가운데 정렬할 수 있다. ▶ margin: 0 auto; 는 위아래의 마진을 0으로, 좌우 마진을 자동으로 조정해주는 것 ▶ margin: 0 auto; ⇔ margin: 0 auto 0 auto; 2..

[웹디자인기능사 실기] html, css 유효성 검사하기 유효성 검사? ▶ 이렇게 시험지 뒤쪽에 있는 기술적 준수사항에 보면 유호성 검사에 'ERROR' 가 없도록 코딩하여야 한다고 명시되어 있다. 하지만 시험장에서는 인터넷을 사용할 수 없으므로, 이 유효성 검사를 돌려볼 수 없다. 따라서 시험 전에 코드를 연습할 때마다 돌려보고 자주 틀리는 부분을 숙지하고 시험장에 들어가야할 것. ▶ 오류가 없는 파일의 경우 No errors 라고 표시가 뜬다. ▶ 하지만 오류가 있는 경우 error 와 warnming 이라는 문구가 뜬다. ▶ 이런 경우 잘못된 line 수를 알려주므로, 찾아서 수정해준다. html 오류의 유형 1. li 의 부모가 잘못된 경우 ▶ li 를 ul, ou 안에 넣지 않은 경우. ▶ li..

[웹디자인기능사 실기] 부여 가을연꽃축제 ✅ 콘텐츠는 왼쪽정렬 ✅ 세로메뉴 ✅ 슬라이드는 서서히 나타났다 서서히 사라지게 ✅ 탭 메뉴는 없음 ✅ 푸터에 패밀리 사이트 1. 헤더 - 세로 메뉴 1-1. mark-up 축제소개 초대의 글 축제개요 축제연혁 오시는길 행사안내 셔틀버스안내 행사안내 행사일정 소공연장 홍보마당 축제소식 보도자료 음식레시피 참여마당 참가후기 연꽃갤러리 포토갤러리 ... ✅ 로고 : 포토샵 이미지 or html 텍스트 ✅ ul 안에 ul : ul.gnb li 안에 ul.sub_list li 가 들어있는 구조. ✅ 다 a로 감쌌는지 확인, a태그의 링크는 #이 들어갔는지 확인 ✅ 텍스트 또는 이미지가 a태그 안에 있는지 확인(바깥으로 빠져나가면 안 됨) 1-2. css .wrap{ wi..

[웹디자인기능사 실기 독학] 0. 이전 유형(A, B)과 다른점 ✅ 헤더에 세로 메뉴 바로 구성됨 1. 헤더 1-1. 메뉴 바 mark-up 이용안내 이용방법 이용시간 이용요금 이벤트정보 현장이벤트 온라인이벤트 이벤트예약 프로그램 프로그램안내 온라인예약 단체상담예약 고객센터 공지사항 자주묻는질문 자료실 1-2. 메뉴 바 css .wrap{ width: 1000px; display: flex; } header{ width: 200px; height: 650px; text-align: center; position: relative; z-index: 10; } header h1{ width: 200px; margin-top: 30px; } header nav{ width: 200px; height: 550p..

웹디자인기능사 실기 독학] 대한은행 0. 이전 유형(A-1~4)과 달라진 점 3-1. 콘텐츠 영역 mark-up ✅ 브라우저의 전체 넓이(100%)가 생김, 그에 따른 안의 콘텐츠들은 가운데 정렬 ✅ 그 이외에는 동일 1. 헤더 1-1. 헤더 mark-up 개인 조회 이체 공과금 예금/신탁 기업 조회 이체 전자결제 수표/어음 금융상품 저축상품 대출상품 투자상품 카드 카드정보 카드신청 이용내역조회 ✅ header는 100% 영역으로 설정, 아래에 header_in 추가하여 가로 영역 1200px 으로 설정 1-2. 헤더 css header{ width: 100%; height: 100px; text-align: center; position: relative; z-index: 10; background: ..

[웹디자인기능사 실기 독학] 유진건설 0. 이전 유형(A-1, A-2, A-3)과 다른점 ✅ 갤러리 이미지에 호버했을 경우 투명도 변화 ✅ 푸터 영역에 로고 없어지고, 구성 변화. 1. 헤더 회사단소개 인사말 조직구성도 오시는길 사업영역 전원주택 도시재생 인테리어 입주정보 입주단지 입주캘린더 고객센터 공지사항 건축상담 홍보자료실 header{ width: 1200px; height: 100px; text-align: center; position: relative; z-index: 10; } header h1{ width: 200; height: 40px; float: left; margin-top: 30px; } header nav{ width: 100%; float: right; margin-top:..

[웹디자인기능사 실기 독학] 강원천문대 제일 먼저 해야할 것 1. 컬러가이드 2. 와이어프레임 0. 이전 유형(A-1, A-2)과 다른 것 ✅ 이미지 슬라이드는 서서히 나타나고, 서서히 사라짐 ✅ 서브 메뉴가 하나씩 떨어진다. ✅ 푸터의 구성 1. 헤더 1-1. 메뉴 바 mark-up 강원천문대 천문대소개 인사말 오시는길 이용안내 프로그램 관람시간표 이달의 별자리 천문대예약 예약하기 예약확인 예약취소 커뮤니티 공지사항 방문후기 자유게시판 1-2. 메뉴 바 css header{ width: 1200px; height: 100px; text-align: center; position: relative; z-index: 10; } header h1{ width: 200; height: 40px; float: ..

[웹디자인기능사 실기 독학] 그린복지재단 ※ 이번에는 지난번 형태와 비슷하므로 시간 절약을 위해서 중복되는 부분은 빼고, 차이가 있는 부분만 작성 제일 먼저 해야할 것 1. 컬러 가이드 2. 와이어프레임 0. 이전 유형(A-1)과 다른점 ✅ 메인 메뉴의 위치는 조금 아래로 ✅ 서브 메뉴에 배경이 있다. ✅ 이미지 슬라이드는 좌우로 전환 ✅ 탭 메뉴가 없이 공지사항, 갤러리, 배너로 구성 ✅ 패밀라 사이트 추가 1. 헤더 ✅ A-1에 비해 헤더의 높이가 좀 더 내려왔음 ✅ 서브메뉴 너비가 전체 너비와 같다.(배경이 있음) - 지난번 A-1 JUST 쇼핑몰에서는 이러한 형태였다. 1-1. 메뉴 바 mark-up 재단소개 설립취지 연혁 찾아오시는길 후원하기 국내후원 국외후원 맞춤후원 자료실 서식자료실 사진자료..

[웹디자인기능사 독학] JUST 쇼핑몰 제일 먼저 해야할 것 1. 컬러 가이드 확인 → 따로 적어두면 편함 2. 와이어프레임 확인 브라우저 전체 넓이 각 영역 너비&높이 확인 3. 세부사항 확인 로고 사이즈 및 작업 형태 확인 호버 시 ⇒ 하이라이트 슬라이드 형태, 방향, 시간 확인 시험 볼 때 수험자 제공 파일 - 만들어져 있는 이미지를 포토샵으로 사이즈 줄여서 사용 - 제이쿼리 오픈소스 : 복사해서 js 폴더 안에 넣어야 함 기타 확인사항 - CSS, JavaScript → 별도 파일 제작 - 상호작용이 필요한 콘텐츠(로고, 메뉴, Slide, 공지사항, 갤러리 등)는 임시링크 #, Tab 키로 이동 선택할 수 있어야 함 - 전체 레이아웃은 table 태그가 아닌 CSS 를 통한 레이아웃 작업할 것 ..

렛츠기릿 자바스크립트 #5 끝말잇기 게임 만들기 책 + 저자 강의 + 추가로 모르는 내용들 필기 추가하면서 공부 책 저자 강의(제로초) 1. 순서도 그리기 §. 순서도 그리기가 왜 중요할까? - 프로그래머는 코딩을 하는 것도 중요하지만 절차를 세우고 오류를 수정하는 것. - 순서도를 통해 코드를 수정하고, 코드를 토대로 순서도를 보완해가자. §. 프로그램의 절차를 만들 때의 원칙 ① 절차의 개수는 고정 ② 절차는 항상 같은 내용 → 구체적인 내용보다는 포괄적인 내용 ex) 4명, A, B,...(x) → 다음 사람(o) ③ (최대한) 모든 가능성 고려 ④ 예시는 절차를 검증하는 데 사용 → 구체적인 예시 - 분기점 : 판단을 요구하는 절차에서 Yes/No로 화살표 순서도가 갈라지는 부분 - 거슬러 올라간..