분류 전체보기395 영역별로 레이아웃 만들기(이미지 포함) 똑같이 만들어 보기! 1. header header { background-color: yellow; border: 2px solid blue; margin-bottom: 10px; position: relative; } 2. nav nav { background-color: lime; border: 1px solid red; position: absolute; right: 5px; bottom: 5px; width: 300px; } 3. aside aside { float: right; width: 20%; background-color: orange; padding: 10px; } 4. section section { padding: 10px; border: 1px solid black; backgr.. 2023. 2. 28. 과제 영역별 레이아웃 똑같이 만들기 똑같이 만들어 보기! 머리말 입니다. 내비게이션 영역, 이전, 이후, 홈 광고입니다. 계란 사세요, 계란~~ 첫 번째 기사 두 번째 기사 세 번째 기사 꼬리말 입니다. 회사 연락처 등 똑같이 그림만 보고 만드는 것은 생각했던 것보다 어려웠고, 가장 쉽다고 생각했던 중간 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. 이전 1 ··· 49 50 51 52 53 54 55 ··· 66 다음
