img5 배경 이미지만 투명하게 처리하기 배경을 반투명하게 하면 내부 요소로 같이 반투명하게 된다. 하위 영역도 같이 적용이 되기 때문에 배경을 뒤로 처리해서 사용한다. content는 빈 내용으로 넣는다. 꼭 넣어주어야 한다! !important 꼭 적용하기 제목입니다. first second 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월 14일 (1) HTML - 목록 요소의 형식 내용 [ ] 안의 내용은 생략가능하다. 쓸수도 있고 안 쓸 수도 있다. 공통 태그(List Item) : 항목을 나타낸다. 계층 구조를 가진다. 공통속성 width : 요소의 가로 길이를 지정하는 속성 단위 px 픽셀 한 점의 크기 (내장된 고정된 크기) % 백분율(기준 : 브라우저 창의 내부 화면 크기에 따라서 길이가 달라진다.) 세로보다 가로를 더 중요하여 여긴다. UX적 측면에서 보조적인 측면이 더 많이 들어가 있다. 비율을 사용하는 형태로 처리 세로를 먼저 지정하고 가로길이를 지정 태그 : 수평선 표현 주요 속성 : width 가로길이 지정 size 두께 지정(1-2px 차이 없음, 3px 정도만 사용, 그 이상을 잘 사용하지 않는다.) 목록태그 : List 화면에 목록 형태로 텍스트.. 2023. 2. 14. HTML 태그 - img, a href 1. 속성 src="이미지 파일 주소 또는 이미지 파일 이름.확장자" 컴퓨터에 저장된 이미지를 사용하려면 html 만든 폴더와 같은 폴더에 이미지 파일이 있어야 인식하고 파일을 열 수 있다. 다른 공간에 이미지 파일이 저장되어 있으면 파일이 열리지 않는다. 속성값 title / alt 차이 title: 그림에 마우스를 올렸을 때 그림에 대한 설명을 넣을 수 있다. alt: 이미지를 표시할 수 없는 경우 이미지의 대체 텍스트를 보여준다. alt 속성은 느린 네트워크 환경이나 src 속성값의 오류, 시각 장애인용 스크린 리더의 사용 등 어떤 이유로든 사용자가 이미지를 볼 수 없을 때 이미지 대신 제공할 대체 정보를 제공한다. 개념확실히 알고가기! 1. 이미지, title 태그 2. 이미지, alt 태그 둘 .. 2023. 2. 1. 이전 1 다음
