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 이것은 세 번째 탭의 ..

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

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..

007 CSS 공부 (3) 박스모델

Daily Study/Web Dev 2021.01.14

Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Iusto doloremque adipisci ducimus quia quis unde ipsum laborum nisi sed. Explicabo similique nihil autem aut adipisci eum mollitia officiis non esse! Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Iusto doloremque adipisci ducimus quia quis unde ipsum laborum nisi sed. Explicabo similique nihil autem aut adipisci eum mollitia..

006 CSS 공부(2) 폰트 스타일

Daily Study/Web Dev 2021.01.14

style example sample Style Example (font-variant) Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Eius, ducimus. Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Laboriosam consequuntur ab ratione amet. Consequuntur, alias, libero! Laboriosam officia numquam saepe quidem officiis distinctio sed qui doloribus placeat! Eaque accusantium magni ea distinctio pariatur odio aspern..

005 CSS 공부(1)

Daily Study/Web Dev 2021.01.11

css basic Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse expedita accusantium incidunt, blanditiis officiis consequuntur a ducimus tempore inventore itaque neque soluta, laudantium tenetur minima perspiciatis quae eveniet. Velit, perferendis! Totam, culpa impedit temporibus, natus officiis itaque! Cupiditate rem voluptate in mollitia tempora vero, labore laboriosam. Culpa libero ..

004 HTML 공부(4)

Daily Study/Web Dev 2021.01.07

예제 웹페이지들을 만들어보는 실습시간을 가졌다. 아직은 디자인적인 면이 전혀 안들어가고 HTML 단계라서 역시 크게 와닿지 않는다. 그래도 HTML이 깔리고 CSS가 깔리고 JS가 깔려야 내가 원하는 것들을 구현할 수 있으니까 잘 알아둬야겠다는 생각.... 같은걸 구현하는 데에도 여러 방법으로 표현할 수 있다는 게 아직은 어려운 부분인 것 같다. 많이 뜯어보고 만들어봐야 감을 잡을듯하다.