프론트엔드개발 (24) 썸네일형 리스트형 [Bootstrap]step.2 Bootstrap 템플릿 활용하기 [템플릿 활용하기] 샘플의 아래내용을 하나씩 변경합니다. a 태그들은 모두 수정합니다. 저자권없는 무료 이미지를 찾는방법 무료이미지 사용하기 by 372 .. [Bootstrap]step.1 Bootstrap 사용 방법과 이해 [Bootstrap] 사용방법 우선 다운로드 합니다.https://getbootstrap.com/docs/5.3/getting-started/download/ 다운로드 완료후 css폴더를 열어보면 아래와같이 CSS파일들이 들어있다 열어보면 엄청 많은 클래스가 정의되어있다 bootstrap 템플릿 사이트https://shapebootstrap.net/ Home - ShapeBootstrapA web designer designs websites and applications. His visual decisions directly affect brand perception and sometimes sales. That’s why the market needs talented web designe.. [Bootstrap]step.2 Bootstrap 템플릿 활용하기 [템플릿 활용하기] 샘플의 아래내용을 하나씩 변경합니다. a 태그들은 모두 수정합니다. 저자권없는 무료 이미지를 찾는방법 무료이미지 사용하기 by 372 .. [CSS]step.14 CSS 클론 코딩(1) / CSS 쇼밍몰꾸미기 [실습예제 - 완성본] [실습예제 - 수정 전] [실습예제 - 수정 ] 상단 제목 및 소개 내용 수정수정 샘플 1차 수정 - 텍스트 입력 단계 jarry blog 상품선물하기 좋은 상품을 판매하는 블로그입니다.featuerd 2차 수정 - 해당 텍스트 내용을 가운데 정렬 시키기기존코드 확인결과 를 통해 상품들의 가운데 정렬을 해놨음 그대로 가져다가 텍스트에도 적용시킴 jarry blog 상품선물하기 좋은 상품을 판매하는 블로그입니다.featuerd 각 행마다 태그 적용하여 양식을 다르게 설정할 수 있다. 선물하기 좋은 상품을 판매하는 블로그입니다. jarry blog 상품featuerd div 마다 class를 적용하여 디자인할때 사용한다... [CSS]step.13 CSS 중급 position 이해 [position] - 특정 태그를 지정하고싶을때 사용 top / bottom / left / rightposition: fixed; // 상단에 고정 시킬때 사용함 .box2 { background: #3B9CD9; // 파란색 상자 position: fixed; // 상단에 고정 시킬때 사용함 top: 50px; // 위에서 50px left: 400px; // 왼쪽에서 400px 부터 시작함 } [플러그인 추천 beauty ] - 코드를 보기 좋게 자동으로 indetation(들여쓰기 정렬) 해주는 기능 드래그 선택후 cmd + shfit + B( 키보드) .. [CSS]step.12 HTML5 시멘틱웹 / css 적용하기 실습 [semantic web] 웹문서를 구조화 하여 의미 있는 내용을 탐색하게 만드는 태그들 사용안해도 문제 없지만 검색엔진에서 좀 더 정확한 추천기능과 크롤링에 적용될수 있다. 검색기능 순서 1.크롤러(웹페이지를 자동으로 읽는 프로그램) -> 2.HTML 문서 분석 -> 3.검색을 위한 저장 일반적인 태그만 쓰면 어떤 태그가 중요한지, 어느부분이 제목이고 내용인지 검색시 추천하기 어렵다.[시멘틱웹 실습예제 - 수정 전 ][ nav - 수정 ] - 최상단 Home Contract Home Contact "home Contact" 아래위 간격조정이 필요함(padding설정) nav{ text-align: right; font-size: 1.4em; .. [CSS]step.11 HTML 중급CSS 실습예제 [실습예제 - 최종 샘플][실습예제 - 기존] [실습예제 - display:flex 적용].flexcard{ display:flex; // 추가} .flexdesc{ display:flex; // 추가 } [실습예제 flex-direction: column 적용].flexcard{ display:flex; } .flexdesc{ display:flex; flex-direction: column; //추가 } [실습예제 justify-content: center 적용].flexcard{ display:flex; }.flexdesc{ display:flex; flex-direction: column; justify-content: center; //추.. [CSS]step.10 중급 css flex box [flex box] 웹페이지 작성시 수평정렬이 어려움상위 flex coutainer / 하위 flex item 들로 구성됨flex coutainer 안에 flex item을 넣어서 수평정렬하는 문법임 [flex box 주요 프로퍼티] display : flex(block 특성의 container를 정의)flexbox를 만들기위해 정의함 해당 속성이 적용된 요소는 flex container가 되고 자식요소는 flex item이 된다. flex-direction(정렬 방향을 결정): row( 좌우 정렬) column(위 아래 수직 정렬) jstify-content(정렬 방법 설정): flex-start(왼쪽부터,수평정렬) / center(가운데정렬) .. [CSS]step.9 중급 css block<div> , inline<span> [block 특성] h# - 항상 새로운 라인에 표시- 화면 넓이를 차지함(자동으로 width 100% height:auto 됨)- width / height / margin / padding 프로퍼티 설정 가능- block 더큰 범위로 안에 inline 특성을 포함됨 [inline 특성] - 새로운 라인으로 시작하지않음 ( 동일 라인에 다른요소와 함께 위치가능)- content 너비 만큼 가로폭 차지- width / height / margin / padding 프로퍼티 지정 🚫(불가)-inline 특성을 가지는 요소안에 block 특성을 가지는 요소를 포함 할수 없음 [실습 예제 - 수정 전] 태그와 태그의 특성 알아보기 블록레벨요소 블록레벨요소.. [CSS]step.8 나만의 style 태그 만들기 [class ][class 실습예제 - 수정 전]기존[class 실습예제 - 수정 후]html 태그에서 추가//html 페이지에서 적용 1억3400만원 8,001,246 3,165,420 css파일에서 .testname을 통해 클래스 정의하기//style.css 파일에서.testname{ font-size: 14px; background-color: #fffDE7;} ‼️‼️혹시 오타로 인해 아래와같이 적용되면 background: color으로 제대로 배경색이 변경되지않는다.오타를 꼭 확인해주세요[class 실습예제 - 수정 후] 여기까지 감사합니다. ====================================================출처: IT .. 이전 1 2 3 다음
