thal11 님의 블로그

수업페이지 10월 웹디자인기능사10월 웹디자인기능사 tinyurl.com/2bq48bj5 [유용한 단축키] Ctrl + T 새 탭 열기 Ctrl + W 탭 닫기 Window + S 돋보기 열기 Window + E 파일 탐색기 열기 Ctrl + S 저장하기 Ctrl + X 잘라내기 + 복사 Ctrl + V 붙여넣기 Ctrdocs.google.com - 높이는 200px- 형태 확인 끝났으면 z-index를 제거 relative가 absolute보다 힘이 약한 건 맞지만html 구조에서 형제 관계라면 동생이 힘이 더 세기 때문에 relative인 li가 이긴다.  - 이미지 사이즈 확인 -> 정사각형    - 쇼츠컷과 동일한 min-width 적용  - max-width 적용- 패딩값 적용- 패딩이 튀어나가..

- 복사해서 그대로 사용   하단 영역1. 로고- 상단 로고와 하단 로고 같이 커스텀  2. 카피라이트  3. SNS- a 태그 까먹지 않기. 접근성 아주 중요 제이쿼리 연습 탭

수업페이지 바로가기 10월 웹디자인기능사10월 웹디자인기능사 tinyurl.com/2bq48bj5 [유용한 단축키] Ctrl + T 새 탭 열기 Ctrl + W 탭 닫기 Window + S 돋보기 열기 Window + E 파일 탐색기 열기 Ctrl + S 저장하기 Ctrl + X 잘라내기 + 복사 Ctrl + V 붙여넣기 Ctrdocs.google.com 2차 메뉴- 높이는 40px * 4 = 160px - li 크기 설정 - a 커스텀 -> 1차 메뉴의 코드를 그대로 복사하고 폰트 크기만 조정 - 눈으로 확인하기 위해 작성했던 투명도를 제거해보면 1차메뉴와 2차메뉴의 구분이 없는 것을 확인할 수 있다 - 1차메뉴의 폰트를 bold로 변경한다. 기능사 시험에서 원하는 정도가 이 정도.  탭 영역- 구조 ..

수업페이지 바로가기 10월 웹디자인기능사10월 웹디자인기능사 tinyurl.com/2bq48bj5 북마크바 단축키 Ctrl + Shift + B 웹 학과 김혜지 강사 010-4372-1301 - 질문은 카톡(잘못된 부분 서술 + 의심가는 코드 캡쳐 + 브라우저 창 캡쳐 + vsocde.zip파일) - 급docs.google.com  - 공부할 때 세팅  - 전체 선택자에 mx-auto가 적용되어 있어서 자동으로 중앙정렬 된다.- css에 container만잡아서 1200px을 적용하는 원래 방식대로 해도 되지만, 이 수업에서는 헷갈려하는 수강생들을 위해서 하나하나 따로 선택하였다.   - 문제의 와이어 프레임을 보고  header, .slide-box, .content, footer 높이 설정 컨텐츠 영..

https://www.slog.gg/p/13751#f GIT/GITHUB공개여부 제목 내용 댓글(0) GIT/GITHUB 에 대한 댓글 loading...www.slog.gg vscode로 안열림 CMD 명령어cd: change directory- 현재 작업 중인 디렉토리를 다른 디렉토리로 이동하는 역할- cd [Documents]를 입력하면 현재 디렉토리를 "Documents" 폴더로 변경- cd .. : 상위 폴더로 이동 start . - 현재 디렉토리를 파일 탐색기로 여는 명령어- 여기서 점 (.) 은 현재 디렉토리를 의미- 점 두 개(..)는 상위 폴더를 의미 mkdir: make directoryrmdir: remove directory dir- 현재 디렉토리 내에 있는 파일 및 폴더 목록을 표..

수업페이지 10월 웹디자인기능사10월 웹디자인기능사 tinyurl.com/2bq48bj5 북마크바 단축키 Ctrl + Shift + B 웹 학과 김혜지 강사 010-4372-1301 - 질문은 카톡(잘못된 부분 서술 + 의심가는 코드 캡쳐 + 브라우저 창 캡쳐 + vsocde.zip파일) - 급docs.google.com 1. 문제를 다 읽고 비번호 폴더를 만든다. 2. vscode를 실행하고 폴더를 연다. 3. 파일을 만든다. +) java script 파일부터 만들고 슬라이드 코드부터 만들어라.  - 들어가기 전에 코드 암기하기  - 잘 작동하는지 먼저 확인!    4. 화면을 세팅한다.     5. DOCTYPE 선언 및 연결- 언어설정- 웹 브라우저 탭 제목 설정  ㄴ title은 시험 문제에 나..

수업페이지 10월 웹디자인기능사10월 웹디자인기능사 웹 학과 김혜지 강사 010-4372-1301 - 질문은 카톡(잘못된 부분 서술 + 의심가는 코드 캡쳐 + 브라우저 창 캡쳐 + vsocde.zip파일) - 급한 부분은 전화가능 단, 수업중이라 못받을 수docs.google.com 이기적 웹디 실기 기본서 부록자료홈페이지 바로가기https://codepen.io/EONJENOG/pen/oNKBwxM html, css 파악하기...codepen.iohttps://codepen.io/EONJENOG/pen/JjgEJrB float과 너비 높이 속성...codepen.io - 레이아웃을 구성할 때 사용하는 태그ㄴ 레이아웃을 구현하는 태그는 한 줄에 한 개씩 배치되는 경우가 많다. (display: block..

http://www.astrion.co.kr/ 에스트리온뇌과학의 지평을 넘어, 건강한 삶의 새로운 가능성을 열다. 혁신적인 첨단 과학 연구를 기반으로 한 건강한 삶을 위한 에스트리온의 도전은 계속됩니다. SCROLL DOWN LEADING THE CHARGE FOR A HEALTHIER TOMORRwww.astrion.co.kr +) 이미지 막혀있을 때 https://postimg.cc/Lnqd3x6N  0단계https://codepen.io/EONJENOG/pen/GRbGGdg?editors=1100  1단계 레이아웃https://codepen.io/EONJENOG/pen/dyBKKqE?editors=1000  2단계 로고https://codepen.io/EONJENOG/pen/XWLYYyB?edito..

https://www.kakaomobility.com/ 카카오모빌리티카카오모빌리티는 ‘스마트모빌리티’를 통해 더 여유 있고 가치 있는 일상을 만들어가겠습니다. 이동 기술과 경험을 선보이며 모든 이동을 위한 모빌리티 서비스를 제공합니다. 승객과 드라www.kakaomobility.com  +) 로고 색상 변경https://codepen.io/EONJENOG/pen/eYwjZVe ㄴ img {  filter: invert(1); } 0단계https://codepen.io/EONJENOG/pen/qBzyboj  1단계: 레이아웃https://codepen.io/EONJENOG/pen/KKjBVeP?editors=1000  2단계: 로고- 이미지태그https://codepen.io/EONJENOG/pen/dyB..

https://www.i-nara.co.kr/ 볼 때마다 자란다 아이들나라7만여편의 청정 키즈 콘텐츠를 만나보세요. 통신사 상관없이 7일 무료!www.i-nara.co.kr 완성 코드펜https://codepen.io/EONJENOG/pen/VwJNyNg?editors=1100 아이들나라 부분모작 18단계...codepen.io  0단계https://codepen.io/EONJENOG/pen/VwJBdaB  1단계: 상단바 구조잡기https://codepen.io/EONJENOG/pen/xxoJzOP  2단계: 로고https://codepen.io/EONJENOG/pen/mdZjKrv?editors=1100  3단계: 사용자메뉴- 구조https://codepen.io/EONJENOG/pen/YzojvVR..