HTML63 과제 영역별 레이아웃 똑같이 만들기 똑같이 만들어 보기! 머리말 입니다. 내비게이션 영역, 이전, 이후, 홈 광고입니다. 계란 사세요, 계란~~ 첫 번째 기사 두 번째 기사 세 번째 기사 꼬리말 입니다. 회사 연락처 등 똑같이 그림만 보고 만드는 것은 생각했던 것보다 어려웠고, 가장 쉽다고 생각했던 중간 section과 article 부분을 어떻게 처리해야 하는지 의문이 들었다. 어떤 부분에 무엇을 써야 하는지에 대해서 확실하게 개념이 잡아야 할 것 같다. 2023. 2. 28. 배경 이미지만 투명하게 처리하기 배경을 반투명하게 하면 내부 요소로 같이 반투명하게 된다. 하위 영역도 같이 적용이 되기 때문에 배경을 뒤로 처리해서 사용한다. content는 빈 내용으로 넣는다. 꼭 넣어주어야 한다! !important 꼭 적용하기 제목입니다. first second 2023. 2. 27. 드롭 다운 메뉴 만들기 hover를 사용한 드롭다운 메뉴 만들기 마우스가 올라가면 메뉴가 열립니다. Home News Dropdown Link 1 Link 2 Link 3 이런저런 내용 이런저런 내용 이런저런 내용 이런저런 내용 이런저런 내용 이런저런 내용 이런저런 내용 이런저런 내용 이런저런 내용 이런저런 내용 이런저런 내용 이런저런 내용 이런저런 내용 이런저런 내용 이런저런 내용 2023. 2. 27. 테이블 스타일링 성 이름 연락처 김 길동 010-1111-2222 나 길동 010-2222-3333 박 길동 010-3333-4444 장 길동 010-4444-5555 최 길동 010-5555-6666 2023. 2. 27. 이미지 슬라이더 만들기 적용 순서(상세 이미지) 1. html 파일 작성 후 2. margin, padding 0으로 적용 / list 목록 점 없애기 * { margin: 0; padding: 0; } .slider>ul { list-style: none; } 3. 슬라이더(div)가 들어갈 사이즈(가로, 세로) 지정 overflow: hidden;넘치는 부분은 숨김 처리, border-radius: 20px; 테두리 둥글게 .slider { position: relative; overflow: hidden; width: 600px; height: 400px; border: 1px solid salmon; border-radius: 20px; } 4. 슬라이더 화면 너비와 높이 지정, 슬라이더 화면의 개수 * 100%로 계산 .slider>ul { .. 2023. 2. 27. 이미지 슬라이더 만들기 이미지 슬라이더 만들기 슬라이더를 만드는 방법은 매우 많다. 라디오버튼, 비순서목록, 레이블을 활용하는 방법 기존템플릿 활용하는 방법 bxSlider, boostsrtap 등 CSS 파일 @charset "UTF-8"; /* 전체 페이지에 적용할 스타일- 여백제거 */ * { margin: 0; padding: 0; } /* 리스트 항목의 스타일 변경 */ .image_slider>ul { list-style: none; } /* 슬라이더가 들어갈 공간(div)에 대한 설정*/ .image_slider { position: relative; overflow: hidden; width: 600px; height: 400px; border: 1px solid; } /* 슬라이더 화면의 너비와 높이 설정 슬라.. 2023. 2. 27. 이전 1 ··· 4 5 6 7 8 9 10 11 다음
