웹 프로그래밍 (181) 썸네일형 리스트형 [CSS] 박스모델 심화(#id, .class, display, float, visibility, padding, margin, border, text-align 등) 사각형-1 사각형-2 사각형-3 사각형-4 사각형-5 사각형1 사각형2 사각형3 사각형4 사각형5 [CSS] 박스모델 (padding, text-align, border-style, border-color, border-width 등) 사각형-1 [CSS] 박스모델 : margin, padding 차이점 콘텐츠의 폭과 높이 : width, height 콘텐츠와 테두리(border) 사이의 간격 : padding 테두리(border)와 테두리(border) 사이의 간격 : margin [CSS] 화면 겹치는 방법 position(static, absolute, relative, fixed), z-index 활용 아래 그림처럼, 배경 이미지 위에 검색기능을 넣고싶으면 어떻게 할까요? div 가장 위에 노출시키려면 z-index를 100 또는 큰 수를 넣으면 된다. .div01{ left : 10px; background-color: red; z-index: 1000; } .div02{ left : 50px; background-color: blue; z-index: 2; } .div03{ width : 200px; height : 200px; left : 200px; top: 200px; background-color: gray; } position에 대해 알아보자. position 속성은 레이아웃을 배치하거나 객체를 위치시킬 때 사용한다. static이 디폴트다. 위치값을 줘도 먹히지 않는다. 첫번째 사각형 두.. [CSS] CSS 적용 방법_2_(선택자 활용) class : 그룹을 짓기 위한 속성 id: 하나의 문서 내에서 유니크하다. 딱 하나의 태그를 구분하기 위한 속성 즉, 우선 순위는 id가 더 높다. + 계단식으로 우선순위를 먹는다. 같은 레벨일 경우 마지막에 쓴 속성값으로 먹힌다. 안녕하세요 안녕하세요 안녕하세요 안녕하세요2 안녕하세요2 안녕하세요2 안녕하세요3 안녕하세요3 안녕하세요3 [CSS] CSS 적용 방법(인라인 방식, embeded 방식, import 방식, link 방식) 각 태그 안에 style 속성에 CSS 문법을 적는 것을 인라인 방식이라고 한다. 그러나, 인라인 방식(한 줄 한 줄 적용)은 권장하지 않음. 내용이 많아질수록 코드량이 많아진다. 아래는 인라인 방식의 예다. hello hello hello Embeded 방식으로 CSS를 적용해보자. 이러한 방식은 선택자를 활용한다. hello hello hello 적용 우선순위 선택자로 설정한 CSS가 가장 먼저 먹히고, 가장 마지막에 인라인 방식이 먹힌다. 즉, 전체 설정을 정하고 개별적 설정을 할 수 있다는 뜻. + (태그명 선택자 > class 선택자 > id 선택자) hello hello hello wildcard 써서 전체 색상을 설정할 수 있다. 주의점 : *(와일드카드) 보다 개별 태그가 우선순위가 높기 .. [Bootstrap] 사용법 정리(~ing) (The most popular HTML, CSS, JS libray) https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 부트스트랩 사용법 정리하기! [HTML] form 태그 실습 색상 : 시간 : 날짜 : 범위 : 수량 : 검색어 : 전화번호 : 이메일 : SNS주소 : 버튼 초기화 전송 이전 1 ··· 17 18 19 20 21 22 23 다음
