공부기록169 배경 이미지만 투명하게 처리하기 배경을 반투명하게 하면 내부 요소로 같이 반투명하게 된다. 하위 영역도 같이 적용이 되기 때문에 배경을 뒤로 처리해서 사용한다. 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. 2월 27일 (2) 실습 + 반응형 웹 만들기 실습(실습기록) 이미지 슬라이더 만들기 테이블 스타일링 드룹다운 메뉴 만들기 배경이미지만 투명하게 처리하기 반응형 웹이란? 하나의 사이트 페이지로 데스크톱(컴퓨터), 스마트폰, 스마트패드 등 접속하는 장치(디스플레이 종류)에 따라 요소의 크기 및 배치, 표시 등을 자동으로 변환하도록 웹 html head 태그의 meta 태그에 viewport를 설정하여 반응형 웹 페이지를 제작 meta 태그란? 해당페이지의 정보(메타데이터)를 제공하기 위해 사용하는 태그 사용자에게 보여지는 태그는 아니다. 브라우저에게 작업을 지시하는 태그, 데이터의 데이터 속성종류) 1. name : 메타데이터의 종류를 지정하는 속성 2. content - name에 따라 분류된 메타데이터의 내용을 작성하는 속성 name 주요속성값 d.. 2023. 2. 27. 이전 1 ··· 21 22 23 24 25 26 27 ··· 29 다음
