HTML9 16. CSS / 속성 - 배경 background ( 요소의 배경을 설정 단축속성 ) background-color 값으로 색상(rgb, 색상, #xxxxxx )을 입력하고 투명색인 transparent 도 사용이 가능하다. background-image 기본값은 none(이미지 없음)이 있고 이미지를 넣으여면 url("경로")를 넣어준다. 주의사항 -> 이미지를 다수 추가할 경우 나중에 삽입한 이미지가 뒤에 쌓인다(순서가 반대) ( 첫 요소의 이미지가 맨위 에서 보임). -> 백그라운드이미지의 반복여부는 기본값으로 반복으로 되어있다.해제 -> background-repeat : no-repeat; background-repeat background-position background-attachment 2021. 2. 18. 14. CSS / 속성 - 글꼴, 문자 CSS 속성 (글꼴, 문자) font ( 글자 관련 속성들을 지정 ) - 개별 속성 -단축 속성 ( font : 기울기 두께 크기 / 줄높이 글꼴; ) 크기와 글꼴은 필수로 입력해야된다. font-style ( 기본값 normal ) font-weight ( 글자의 두깨를 지정 ) font-size ( 글자의 크기를 지정 ) 기본적으로 - px,em,cm 사용 하며 기본값으로 16px로 지정이되어 있다. - % ( 부모 (상위) 요소의 비율로 지정 ) line-height ( 줄 높이를 지정 ) font-family ( 글꼴 지정 ) 색상표현법 color 속성 ( 문자의 색상을 지정 ) 기본값 rgv(0, 0, 0) text-align ( 문자 정렬 방식을 지정 ) text-decoration ( 문자의.. 2021. 2. 16. 13. CSS / 속성 - 박스 모델 CSS 의 속성 width - 요소의 가로 너비를 지정 속성값 값 auto, px, em, cm 기본값으로 auto 블럭요소는 (width)가로 100% (height)세로 0 으로 초기값이 되어있다. 인라인요소는 (width)가로크기 (height)세로크기가 0 에서 출발한다. 하지만 이 크기의 값을 설정을 해도 적용이 안되는데 그 이유는 인라인 요소는 text만을 위한 요소이기때문에 text가 없으면 크기를 가지지 않는다. max-width ( 요소의 최대 가로 너비를 지정 ) min-width ( 요소의 최소 가로 너비를 지정 ) max-height ( 요소의 최대 세로 너비를 지정 ) min-height ( 요소의 최소 세로 너비를 지정 ) margin - 요소의 '외부 여백'을 지정 (단축,개별.. 2021. 2. 16. 11. CSS / 개요, 선택자, 상속 기본 선택자와 복합 선택자 기본선택자(4가지) 1. 전체 선택자 -> * {} 2. 태그선택자 -> 태그이름으로 선택 3. 클래스 선택자 4. ID 선택자 복합선택자 1.일치 선택자 span.orange ( 오렌지 클래스인데 span에 있는 오렌지 클래스 ) 2.자식 선택자 ul>.orange ( ul의 자식중 클래스가 orange인 태그 ) 3.후손 선택자 , 자식, 자손 다 포함(띄어 쓰기가 선택자의 기호로 사용된다. ) div .orange 4. 인접 형제 선택자 ( ex) orange 클래스의 바로 하나의 다음(다음 형제) 태그를 선택 ) .orange + li orange 태그의 다음 li 를 선택 5. 일반 형제 선택자 ( orange 클래스의 모든 다음 형제 태그를 선택 ) .orange ~.. 2021. 2. 6. 09. HTML / 전역 속성, 기타 전역 속성과 기타 class 와 id ( 별명 별칭을 지정 하는 기능 ) - css 혹은 JavaScript의 요소 선택기를 통해서 요소를 선택하거나 접근 -class는 문서에서 고유하지 않아 여러개 설정가능 (중복 가능) -> .(점) 으로 접근 가능 class="avc" .avc {} -id는 문서에서 고유한 식별자 ( 오직 한개 ) -> # 으로 접근 가능 id="avc" #avc{} style 속성 ( 요소에 적용할 css를 선언 ) -ex) title 속성 ( 요소의 설명을 지정 ) -ex) 제목 -> 제목에 마우스 커서를 대면 title이 표시된다. lang 속성 ( 요소의 언어를 지정 ) data-* 속성 ( 사용자 정의 데이터 속성을 지정 ) JavaScript에서 이용할 수 있는 데이터(.. 2021. 2. 4. 08. HTML / 요소 - 양식 양식 form 태그 ( 웹 서버에 정보를 제출하기 위한 양식 범위를 정의 ) -form태그 예시 input 태그 ( 사용자의 입력 받을 데이터 양식 ) radio 타입 label 태그 ( 라벨 가능 요소의 제목 ) button 태그 ( 선택 가능한 버튼을 지정 ) - input과 다르게 좀더 특화된 버튼 textarea 태그 ( 여러 줄의 일반 텍스트 양식 (한줄은 input 태그 ) ) 속성은 input 태그와 비슷 다른 속성은 rows 라는 속성인데 화면에 보이는 양식의 줄 수를 설정 할 수 있다. fieldset, legend 태그 ( 같은 목적의 양식을 그룹화(fieldset) 하여 제목(legend)을 지정 select, datalist, optgroup, option 태그 -select 태그 .. 2021. 2. 3. 08. HTML / 요소 - 표 콘텐츠 표 콘텐츠 08. HTML / 요소 - 양식 table 태그 ( 테이블 표를 만들 때 사용 ) -> display : table (블럭 요소와 동일) - tr 태그 ( 행 , 줄 만들 때 ) ex) 3줄을 만든다 -> 3개 만든다. - td , th 태그 ( 칸, 셀 만들 때 ) ex) 2칸을 만든다 태그 안에 2개 입력 border 설정후 table 의 css 를 설정 table { border-collapse : collapse; } th 태그 ('머리글 칸' 을 지정) -colspan 사용 ( 열 병합 ) -rowspan 사용 ( 행 병합 ) td 태그 ('일반 칸'을 지정) caption 태그 ( 표의 제목을 설정 ) - 열리는 table 태그 바로 다음에 작성해야 된다. - 당 하나의 만 가능 .. 2021. 2. 3. 07. HTML / 요소 - 멀티미디어 & 내장 콘텐츠 & 스크립트 멀티미디어 img 태그 (이미지를 삽입 , 빈태그) - 필수 속성으로는 src 속성과 alt 속성은 필수 srcset, size 속성 - (반응형 웹사이트 제작할 시 사용) -srcset (2장 이상 사용할때 사용) 은 브라우저에 제시할(사용할) 이미지들과 그 이미지들의 원본 크기를 지정한다. 1장이면 src 사용하면 된다. -sizes 는 미디어 조건과 그 조건에 해당하는 미이지의 '최적화 출력 크기'를 지정 width 속성 audio 태그 ( 소리 콘턴츠 (mp3) 를 삽입 ) video 태그 - autoplay가 지정된 경우, preload는 무시됨. figure태그, figcaption 태그 내장 콘텐츠 iframe 태그 ( 다른 HTML 페이지를 현재 페이지에 삽입 ) canvas 태그 ( Ca.. 2021. 2. 2. 01. HTML & CSS 첫걸음 / 개요 (후기) 프론트엔드 개발 올인원 패키지 01. 후기 웹프론트 올인원 패키지 13만원 인가 그 정도 먼저 나는 12월 말에 백엔드 공부도 궁금하기도 하고 다음학년에 마침 JAVA가 필수전공에 있어서 백엔드도 알아보고 예습공부도 할겸 자바 웹개발 강의를 9만원에 ( 돌려주기 이벤트가 있어서 9만원 강의를 사면 1월 11일에 9만원을 쿠폰을 주는 이벤트)사고 1월12일에 9만원 쿠폰에 4만원을 더내서 웹프론트 올인원 패키지를 샀습니다. 뭐 이런게 다 상술이라 생각이 들어서 저는 그냥 강의 2개를 6만원에 사야겠다 생각하고 처음부터 결정을 하고 샀습니다. 이번 1장에는 12강으로 이루어져있는데 한 강의에 5분짜리도 있고 15분짜리 이런식으로 있는데 평균 한 강의에 10분정도 입니다. 저는 개인적으로 한강의에 40~50분.. 2021. 1. 13. 이전 1 다음
