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좌표, ..

003 블렌더 입문(3) Texture Paint

Daily Study/3D 2021.01.25

오늘은 길게는 아니고 블렌더에서 텍스쳐 페인트 모드로 도넛이 그냥 단색이 아니라 실제로 도넛을 튀기면서 생기는 밝은 부분과 어두운 부분 같은 디테일들을 더하는걸 해봤다. 텍스쳐 페인트 모드는 위에 탭에서 워크스페이스 중에서 선택해주면 되고 왼쪽 창은 오른쪽에 적용될 텍스쳐를 2D로 펼쳐놓은 이미지다. 약간 옛날에 겟앰프드 스킨 같은게 2D 이미지로 공유되던게 딱 이 개념이었다. 이런 브러쉬 창은 왼쪽 창에서 N을 누르면 나온다. 여기서 그냥 솔리드한 브러쉬로 그리면 너무 인위적이니까 아래에 Texture Mask에서 약간 에어브러쉬 같은 질감을 줄 수 있다. 오른쪽 탭에 있는 제일 아래 체스판 같은 아이콘을 클릭하면 Texture 탭이 나온다. Type 중에서 Clouds를 선택하고 이 패턴 사이즈 같은..

009 CSS공부(5) 레이아웃 관련 스타일

Daily Study/Web Dev 2021.01.25

float 스타일 float example Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint placeat, tempora fugit delectus consequatur eaque obcaecati alias mollitia at quas. Quo sint, ea, nemo reiciendis tempora pariatur ex placeat voluptatibus fuga excepturi quisquam fugit delectus natus? Optio, exercitationem tempora ipsum, unde asperiores dolorum error officia reprehenderit itaque magni quaerat ..

008 CSS 공부(4) 표 관련 스타일

Daily Study/Web Dev 2021.01.25

table caption table header cell1-1 table header cell1-2 table header cell1-3 table header cell1-4 table data cell1-1, Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem iusto quas excepturi consectetur, inventore, quia minima nobis culpa perspiciatis consequuntur illum laborum voluptas minus eveniet? Accusantium rerum cupiditate reiciendis dolorum? table data cell1-2 table data cell..