프론트엔드개발 (25) 썸네일형 리스트형 [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 .. [CSS]step.7 style 태그를 CSS파일로 따로 관리하기 [css파일] - 실전에서 가장 많이 사용하는 방법 , css를 파일로 만들어서 독립적으로 사용 그리고 원본 태그로 돌아와서 style 태그를 모두 지우고 아래와 같이 입력한다.경로가 맞는지 정확히 확인한다. 결과확인헌데 한 번 사용된 css 내용을 그대로 가져옴(쿠키값적용) 그런데 변경된 내용을 매번 적용시키고 싶다면 아래와 같이 작성한다. style.css?ver=1 의경우 ?뒤의 내용을 새로 브라우저가 읽어오기때문에 기존 css파일 이여도 새로 고침된다. 여기까지 감사합니다. ====================================================출처: IT UP, 코딩이 처음이어도 괜찮아! 진짜 입문자를 위한 웹개발과 IT 기초 지식https://itup.co.kr.. [CSS]step.6 CSS 색상 표기 방법 padding/color/color-background [padding] - contents와 border 사이의 간격을 의미함 [padding-th 수정 전]이미 td , th { } 에 대해 정의되어있는상태에서도 th만 따로 지정할수 있다.td,th{ border: 1px solid black; color:darkblue; font-size:12px; font-family:Gulim; text-align:center;}[padding- th 수정 후]td,th{ border: 1px solid black; color:darkblue; font-size:12px; font-family:Gulim; text-align:center; }th { padding: 10px } [CSS 색상] .. [CSS]step.5 html5 권장태그<thead> <tbody><th> <tfoot> [html5 태그 권장사항] 각 각의 셀을 정의하는 부분에서는 등 헤더명에는 t를 붙여준다. // thead로 표시함 연봉 // 대표가되는 항목들에는 으로 표시 월실수령액 공제액(세금) 7,400만원 //tbody안에 내용은 다시 td를 쓴다. 5,031,896 1,134,770 //총합계등 결과에 대한형식은 tfoot으로 나타냄 총 합계 7400만원 - 헤더가 될 제목을 정의 - 헤더가 될 내용을 정의.. [CSS]step.4 크롬개발자모드/css 박스모델 [css box model] - 태그 내부적으로는 아래와 같은 형태를 가지고 있으며 해당 영역으로 간격을 조정 할수 있다. [CSS box model] 1.Content - 박스모델 중심으로 padding 으로 둘러 쌓여있음 2.Padding - boder 사이 content 얼마나 떨어져있어야 되는지 설정함 3.Border - content를 둘러싼 선의 굵기를 설정함 4.Margin - 태그와 태그사이에 간격이 얼마나 있어야 하는지 설정 [크롬/개발자모드] 마우스 오른쪽 검사 또는 크롬-설정-도구 더보기-개발자도구를 실행한다. TIP. 검사할 페이지 요소를 선택할수 있습니다.[styles] 메뉴에서 font-size / font-family 등등 기능을 체크 할 수 있다.[크롬/개발자모드 bo.. [CSS]step.3 <style type><div> 실습예제 [div] - 자체적인 기능을 가진 태그는 아님, 태그에서 그룹을 구성할때 레이아웃,컨테이너 형태로 사용함 This is a heading in a div element This is some text in a div element. This is a heading in a div element This is some text in a div element." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스[실습 진행] - 오늘 만들어볼 결과물부터 확인 [1차 수정] - h1 , h2,h3 태그 사용으로 제목과 내용의 양식을 통일시킨다. 목록보기 선물하기 좋은 물건을 골라서 판매합니다. .. [CSS]step.2 <style type> font-szie / font-family / text-align 태그 적용하기 head에 h3 태그명에 해당 style 태그를 적용시켜준다. [ pixel ] - 화면을 구성하는 가장 작은 단위 , 해상도는 픽셀의 갯수를 의미한다.( 고정적)font-size:32Px; -> 32개 피셀 x 32개픽셀로 글자 크기를 키운다, 32개픽셀만큼 사용하겠다는 의미 문제는 각자 개인환경에서 PC의 해상도가 달라서 보여지는 화면과 글자크기가 다르다. [ em ] - 웹브라우저, 각자 PC환경에 따라 기본적인 해상도를 디폴트 값 기준으로 크기를 변경시킴 ( 가변적) font-size: 32em; -> 기본값은 16 px인데 기본 폰트에서 몇배를 키울것인지 결정함 [font-family] - 폰트 우선순위 변경( 1번 폰트가 없을 경우 .. [CSS]step.1 <td style=text-align:크기><h1>~<h5> [CSS] HTML문서를 꾸며주는 언어 style 1. style 속성으로 태그에 넣기 text-align:center;color:blue"> 프로퍼티 : 값 ;(구분,끝맺음) 프로퍼티: 값 항목프로퍼티 : text-align( 정렬)text-align: lefttext-align: righttext-align:center - 텍스트 크기 정하기h1 크기h1 크기 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스h2 크기 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스h3크기" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스h4크기" dat.. [HTML]step.6 table 태그 colspan / rowspan 가로 셀 병합 , // 셀 3칸까지 가로 병합시킴 세로 셀 병합, // 셀 3칸까지 세로병합 상세 정보 항목 1 2 3 4 5 6 7 8 9 " data-ke-type="htm.. [HTML]step.5 절대 경로 vs 상대경로 [절대경로] 모든 경로를 써주는 것 [상대경로] 지금 실행 하고 있는 파일을 기준으로 해당 폴더에 접근후 써주는것, -같은 폴더 일때,현재경로 "Desktop/test.txt">-해당파일이 하위 디렉토리 있을경우 "Desktop/test.txt"> -해당파일이 상위 디렉토리에 있을경우 (상대경로 ../ 갯수는 상위 폴더의갯수임) "../../../test.txt"> 여기까지 감사합니다. ====================================================출처: IT UP, 코딩이 처음이어도 괜찮아! 진짜 입문자를 위한 웹개발과 IT 기초 지식https://itup.co.kr/rv1/k-digital/main/lecture/info?course_uid=912417&educ.. 이전 1 2 3 다음
