016 CSS공부(12) 이미지와 텍스트 목록 예제 실습

Daily Study/Web Dev 2021.02.09

Fixed Image+Text Row List Category 이미지의 너비가 고정폭 이어야 할 때 이미지의 너비가 고정폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지더라도 이미지 아래쪽으로 글이 흐르지 않는 것을 확인 할 수 있습니다. 이미지의 너비가 고정폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지더라도 이미지 아래쪽으로 글이 흐르지 않는 것을 확인 할 수 있습니다. 이미지의 너비가 고정폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지더라도 이미지 아래쪽으로 글이 흐르지 않는 것을 확인 할 수 있습니다. 이미지의 너비가 고정폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지더라도 이미지 아래쪽으로 글이 흐르지 않는 것을 확인 할 수 있습니다..

005 블렌더 입문(5) 커피잔 모델링

Daily Study/3D 2021.02.04

마우스 스위치가 고장나는 바람에 매직마우스 밖에 없어서 블렌더는 이번 주는 거의 못하고 마우스 고치고나마 잠깐 모델링 부분만 만져봤다. 레퍼런스 이미지를 넣고 그거에 맞게 실린더 매쉬를 추가해서 크기를 조절해준다 엣지 루프를 추가해서 손잡이랑 연결되는 부분들에 위치 시키고 이미지만큼 스케일로 조절한다. 이런 식으로 모델링이 되고 실린더 매쉬로 만든 오브젝트니까 위에 막힌 면을 지워버리고 두께를 주기 위한 Solidify 모디파이어랑 표면을 부드럽게 만들어줄 Subdivision Surface 모디파이어를 추가해준다. 마우스 고치고 시간이 그렇게 많지가 않아서 많이 못했는데 다음 주엔 블렌더 진도를 좀 더 빼야겠다.

로지텍 마우스 옴론 스위치 교체

ETC/일상 2021.02.04

마우스를 험하게 썼는지 엊그제쯤... 클릭이 헐거워져서 마우스를 분해했다. 그 전에도 몇 번 동일한 증상을 보인 적이 있어서 그때마다 열어서 스위치 안에 있는 동판을 다시 펴주고 걸어주고 잘 쓰곤 했는데 너무 여러번 펴고 휘고가 반복됐는지 마우스 클릭 스위치 안에 들어있는 동판이 부러져 버렸다. 사진에 보이는 위에 흰색 단추가 달린 검은색 박스가 마우스 클릭 스위치 부분이다. 마우스 겉면에 보이는 클릭 버튼을 누르면 내부에 있는 저 스위치의 하얀 버튼을 누르면서 클릭이 되는거고 저 스위치에 있는 하얀 버튼은 안에 있는 동판의 중앙 부분을 눌러서 잠시 휘게하고 휜 동판의 한쪽 끝 부분이 접점에 닿으면서 클릭으로 인식하게되는 원리다. 클릭 스위치 내부에 들어있는 동판 고장난 스위치는 이미 동판이 다 빠져버려..

015 CSS공부(11) 갤러리 형식의 리스트 예제 실습

Daily Study/Web Dev 2021.02.04

Fixed Image+Text Col List Category 이미지 제목 2010-12-24 Category 이미지 제목 이미지 제목 이미지 제목 2010-12-24 Category 이미지 제목 2010-12-24 Category 이미지 제목 2010-12-24 Category 이미지 제목 2010-12-24 Category 이미지 제목 2010-12-24 Category 이미지 제목 2010-12-24 Category 이미지 제목 2010-12-24 Category 이미지 제목 2010-12-24 No Images Category 이미지 제목 2010-12-24 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo repellendus blan..

014 CSS공부(10) FAQ 목록 만들기 예제 실습

Daily Study/Web Dev 2021.02.03

FAQ 답변 모두 여닫기 Q:질문과 답변 목록은 무엇으로 마크업 해야 하나요? A:비 순차 목록, 순차 목록, 정의 목록으로 마크업 할 수 있습니다. 더 나아가 각각의 항목 안에서 '질문'과 '답변'을 무엇으로 마크업 할 것인지에 대하여는 많은 고민이 필요 합니다. Q:질문과 답변 목록은 무엇으로 마크업 해야 하나요? A:비 순차 목록, 순차 목록, 정의 목록으로 마크업 할 수 있습니다. 더 나아가 각각의 항목 안에서 '질문'과 '답변'을 무엇으로 마크업 할 것인지에 대하여는 많은 고민이 필요 합니다. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi officiis nisi maxime quas explicabo officia, itaqu..

013 CSS공부(9) 페이징 부분, 탭 메뉴 예제 실습

Daily Study/Web Dev 2021.02.01

처음 이전 1 2 3 4 5 6 7 8 9 다음 끝 공지사항 이것은 첫 번째 탭의 공지사항 목록 입니다. 2021-02-03 이것은 첫 번째 탭의 공지사항 목록 입니다. 2021-02-02 이것은 첫 번째 탭의 공지사항 목록 입니다. 2021-02-01 공지사항 더보기 보도자료 이것은 두 번째 탭의 보도자료 목록 입니다. 2021-02-04 이것은 두 번째 탭의 보도자료 목록 입니다. 2021-02-03 이것은 두 번째 탭의 보도자료 목록 입니다. 2021-02-02 이것은 두 번째 탭의 보도자료 목록 입니다. 2021-02-01 보도자료 더보기 해명자료 이것은 세 번째 탭의 해명자료 목록 입니다. 2021-01-31 이것은 세 번째 탭의 해명자료 목록 입니다. 2021-02-01 이것은 세 번째 탭의 ..

004 블렌더 입문(4) Procedural Displacement, 도넛 마무리

Daily Study/3D 2021.01.28

지난 번에 도넛을 단색에서 둥글게 감싸는 부분이 좀 더 밝게 흰색처럼 보여지는 부분하고 더 익혀져서 진한 부분이 있는 것들을 Texture Paint로 그려줬는데 이번엔 실제로 울퉁불퉁하게 표면을 만드는 Displacement 기능을 써봤다. 워크스페이스 중에서 Shading 워크스페이스를 눌러서 밑에 노드 창에서 Shift + A를 눌러서 Noise Texture 노드를 추가해준다. 그리고 Preference에서 Add-on에 들어가서 Node Wrangler를 켜주면 노드를 단축키들로 더 쉽게 편집할 수 있다. 이번에 쓴건 Control + Shift + 좌클릭으로 노드를 클릭하면 해당 노드가 Material Output으로 바로 연결된 모습을 볼 수 있다. 밑에 에디터 창에서 Input - Tex..

012 CSS공부(8) 박스모델 수직가운데정렬, 버튼 예제 실습

Daily Study/Web Dev 2021.01.28

컨텐츠의 수직정렬이 가능한 div 박스 입니다. 텍스트와 이미지 모두 가능합니다. 동일한 크기의 박스안에 높이가 다른 사이즈의 컨텐츠를 담을때 쓰이면 안성맞춤입니다. class=“wrap”의 높이값이 있어야 합니다. 박스모델 안에서 수직가운데 정렬을 맞춰보는 예제 CSS 코드 제일 앞쪽에 rest style 코드들은 여러 변수들을 초기화시켜주는 단계 div로 나뉘어있지만 table인것처럼 속성을 바꿔서 가운데 정렬을 할 수 있음 display : table; display : table-row; display : table-cell; 순서대로 table, tr, td인 것처럼 만들어 줌 그리고 마지막으로 셀 부분인 inner 클래스에만 vertical-align : middle;을 걸어주면 수직 가운데 ..

011 CSS공부(7) 박스모델 예제 실습

Daily Study/Web Dev 2021.01.27

제목 내용 내용 월드 와이드 웹 컨소시엄(W3C: World Wide Web Consortium)웹 접근성 이니셔티브(WAI: Web Accessibility Initiative)링크와 짐 대처 (Jim. Thatcher)는 웹 접근성에 대해 매우 현실적으로 정의하고 있다. 즉, 장애를 가진 사람들이 웹 콘텐츠를 인지하고, 편리하게 사용할 수 있으며, 그 내용이 이해하기 쉬워야 하며, 견고성을 지녀야 웹 접근성이 있다고 보는 관점이다. 인터넷 전자도서관인 Wikipedia 는 웹 접근성의 개념을 웹 콘텐츠 뿐만 아니라 인터넷을 통하여 전달될 수 있는 모든 콘텐츠로 확대하고 있다. 내용 더보기 제목, 내용, 더보기 박스모델 예제 border를 한줄만 적용하기 위해서 밖에 가장 큰 영역 section 클래스..

010 CSS공부(6) 이메일, 이벤트 페이지 예제 실습

Daily Study/Web Dev 2021.01.26

요즘 대세라는 가스앱 아직도 모르시나요? 이제 가스앱으로 우리집 가스관리하세요! 실시간 요금 조회부터 요금 납부, 안전매니저 방문예약 신청까지 우리집 가스 관리에 필요한 모든 기능을 담은 가스앱! 가스앱에서 모바일 청구서 신청 시 3,000원 모바일 쿠폰 증정 이벤트도 진행하고 있으니 하단의 이미지를 꼭 참고하세요! 우리집 가스관리의 모든 것 가스앱- 서울도시가스 모바일 고객센터 이메일 내용 페이지 예제인데 이메일 내용 같은 경우에는 페이지 전체가 아니라 body 부분만 전송하는 방식으로 주로 쓰기 때문에 style 태그를 인라인으로 지정해주어야 한다. 이미지 밑에 있는 다운로드하기 버튼 링크들은 위처럼 포토샵에서 해당하는 영역의 x y 좌표값을 얻어서 왼쪽 위 모서리 x좌표, 왼쪽 위 모서리 y좌표, ..