분류 전체보기569

• 나합격 [필기] 전산응용건축제도기능사 무료 인강 동영상 전체 재생 목록 나합격 책을 사고 보는데덱 건축이 전공이 아니다 보니 용어가 생소하다 다제따넨 남자라고 용어 몇개는 익숙하긴 하다만 그러기엔 전체 용어가 너무 많다 책도 과목도 분량이 얼마 안된다고 생각하고 좀 훑어ㅠ봤는데 데용어가 무지 햇갈린다 다그래서 책에서 부록으로 제공하는 영상을 카페에서 재공하는 주소 따와서 목록으로 만들었다 영상하나만 보면 되는데 네이버 까페 까지가서 공부하기 귀찮아서 ... www.youtube.com/playlist?list=PLlc3JwGocatofy6QNqsMnSNnK9jbKpcDG 나합격 2021 [필기] 전산응용건축제도기능사 www.youtube.com 직박구리 2020. 9. 23.

• 

  CSS로 background 화면 꽉 채우는 방법 100% 채우고 싶은 영역에 height: 100% 로 하더라도, 콘텐츠 영역이 없는 부분은 덮어지지 않는다. border를 하던, background를 하던 콘텐츠 있는 만큼만 보여지게 된다. 그 채우고 싶은 영역의 height를 px로 지정하게 되면 당연히 화면이 스크롤되면서 영역이 안 잡힌다. 방법은 여러가지 있을 수 있겠지만, html,body{ height:100%; overflow:hidden; } html,body{ height:100%; overflow:hidden; } 을 추가하고 그 영역에는 .somebox{ height: 100%; background: #2ecc71; } .somebox{ height: 100%; background: #2ecc71; } 와 같이 설정하면 된다. 코딩ㆍ개발 정보/HTML 연습 2020. 9. 22.

• 행복을 찾고 있나요? 행복은 남이 아닌 나로부터 행복의 근원을 찾아라. 남으로 부터 나의 행복을 찾으려 하지 말라. 살아있는 동안 행복하면 그것이 행복한 것이다. 대대 손손의 행복은 알 수 없는 것이다. 일생 다하면 그 뿐, 인생은 숨이 붙어 있는 동안만 희노애락을 느낄 수 있다. 남이 아닌 나로 부터 행복의 근원을 찾아라. 백년도 안되는 일생 동안, 남으로 부터 비교하며 스스로 고뇌하지 말라. 생활정보 2020. 9. 19.

• 

  이미지 끼리 여백없이 붙이기 위한 방법 img {display:block;} 아래 케이스 1과 2를 비교해 보면 img의 기본 display 속성이 inline일 경우는 틈이 벌어질 수 있으며, 이 display속성을 display로 변경하면 틈 없이 이미지가 배치된다. 케이스 1 케이스 2 코드 확인 1. html 2. css #product_section > #product_article > img{ display: block; } 참고 자료: 모던 웹 디자인을 위한 HTML5 + CSS3 입문, P.392 코딩ㆍ개발 정보/HTML 연습 2020. 9. 19.

• 

  태블릿 UI 만드는 스타일 팁, 동적으로 너비가 변하는 레이아웃 margin-right padding-right 이러한 모습을 만들어 줄 때 콘텐츠 영역에 대한 스타일 지정방법이다. 동적으로 너비가 변하는 레이아웃인데요. 다음 화면을 봐주세요. 1. HTML 왼쪽 서브 메뉴 오른쪽 본문 바디 ButoO ButoO ButoO ButoO ButoO Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum pariatur veritatis facilis laborum ad. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eos officiis eaque sit placeat quam aperiam molestiae magnam eum, ipsum .. 코딩ㆍ개발 정보/HTML 연습 2020. 9. 19.

• 

  텍스트가 너무 길 경우 ... 으로 말 줄임 표시하기 text ellipsis 다음과 같이 할 수 있다. 코드내용 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur possimus molestias dolor unde, neque, et quos dolorem optio ex. 포인트는 ellipsis 클래스로 설정한 부분이다. white-space, overflow, text-overflow 삼총사를 묶어서 글자 줄임표를 표시할 수 있다. 코딩ㆍ개발 정보/HTML 연습 2020. 9. 19.

• 버튼 토글로 메뉴 보이기 숨기기 하는 방법 checked 속성 사용 HTML태그 버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 CSS 값 #toggle{ display: none; } #toggle + #wrap > #toggle_gnb_wrap{ display: none; } #toggle:checked + #wrap > #toggle_gnb_wrap{ display: block; } 여기서 핵심은 CSS 선택자 중 + 활용법과, input box이 checked 상태값을 활용하는 것이다. 참고 자료 : 모든 웹 디자인을 위한 HTML5 + CSS3 입문, 개정판, 330page 발췌 코딩ㆍ개발 정보/HTML 연습 2020. 9. 19.

• ATOM 단축키 아톰 (Atom) 에디터 - 단축키 모음 "F11" : 전체 화면으로 본다, "ctrl-," : 아톰 에디터 설정 화면을 연다, "ctrl-shift-n" : 아톰 에디터를 새로 열고 새 창을 생성한다, "ctrl-shift-w" : 아톰 에디터를 닫는다, "ctrl-shift-o" : 새 프로젝트 폴더를 연다. "ctrl-o" : 파일을 연다, "ctrl-t" : 최근에 연 파일 목록을 보여준다, "ctrl-n" : 새 창을 생성한다, "ctrl-s" : 저장한다, "ctrl-shift-s" : 다른 이름으로 저장, "ctrl-w" : 창 닫기, "ctrl-z" : 실행 취소, "ctrl-y" : 재 실행, "ctrl-alt-i" : 개발 툴을 연다. "shift-delete" : 라인을 잘라낸다. 선.. 코딩ㆍ개발 정보/HTML 연습 2020. 9. 19.

• 자잘한 이미지를 뭉쳐서 스프라이트 이미지로 만들고 배경으로 지정하는 CSS 스프라이트 영역 지정 http://csssprites.com CSS Sprites Generator CSS Sprites Generator Upload your images. (Note: Please don’t upload HUGE files. That’s not the purpose of sprites technique.) www.toptal.com www.w3schools.com/css/css_image_sprites.asp CSS Image Sprites CSS Image Sprites Image Sprites An image sprite is a collection of images put into a single image. A web page with many images can take a .. 코딩ㆍ개발 정보/HTML 연습 2020. 9. 19.

• 

  emmet 단축키 정리 1. 자식 : > - 자식 구조를 만들 때 사용 nav > ul > li 2. 형제 : + - 형제 구조를 만들 때 사용 h1 + p 3. 상위로 : ^ - 자식에서 다시 부로로 올라갈 때 사용 div > h1 + p ^ footer 4. 묶기 : () - 묶어서 곱하기 같은 것을 할 때 5. 곱하기: * - 여러개 반복할 때 ul > li * 5 > a ul > li > a*5 dl > (dt + dd) *5 6. 숫자 넣기 : $ - $ 갯수 만큼 자리수가 된다. - $$$ 는 세자리수 $$$$$ 는 다섯 자리수 ul > li.item$$*5 - $ 갈라져 있으면 갈라진 부분들에 각각 수가 놓인다. ul>(li.item$>a[#]{header $})*3 - 역순으로 하고 싶으면 $@- 로 한다. ul.. 코딩ㆍ개발 정보/HTML 연습 2020. 9. 19.