반응형 ○ WEB/19.03 FastCampus_CSS27 CSS 인코딩 유니코드 UTF-8로 지정 https://developer.mozilla.org/ko/docs/Web/CSS/@charset @charset @charset CSS at-규칙은 스타일 시트에 쓰이는 문자 인코딩을 지정합니다. 스타일 시트의 첫 번째 요소여야 하며 어떤 문자가 선행되지 않아야 합니다; 중첩된 문이 아니기에, 조건부 그룹 at-규칙 내에 사용될 수 없습니다. 여러 @charset at-규칙이 정의된 경우, 첫 번째 것만 사용되고 HTML 요소의 style attribute 또는 HTML 페이지의 문자 집합과 관련 있는 style 요소 내에서 사용될 수 없습니다. developer.mozilla.org @charset "utf-8"; 를 스타일 시트에 입력하면 된다. 2019. 7. 23. 테이블 테이블 태그 table : 표를 나타내는 태그 tr : 행을 나타내는 태그 (table-row) th : 제목 셀을 나타내는 태그 td : 셀을 나타내는 태그 caption : 표의 제목 나타내는 태그 thead : 제목 행 그룹화 tbody : 본문 행 그룹화 tfoot : 바닥 행 그룹화 colspan: 셀 가로방향 병합 rowspan : 셀 세로방향 병합 Monthly Savings Month Savings January $100 February $80 Sum $180 2019. 7. 23. MDN margin 출처 2019. 7. 23. css rem, em 차이 참고자료 rem 단위는 문서의 최상위 요소인 html요소의 몇 배인지로 크기 결정 em 단위는 상위 요소 크기를 기준으로 몇 배를 할지를 결정 예를들어 html > body > li 구조에서 html { font-size : 10px; } body { font-size : 1.5em; } li { font-size : 2.0rem/em; } 이면 2.0rem의 경우, li의 폰트사이즈는 = 10px(html) * 2.0(li) = 20px라는 의미 2.0em의 경우, li의 폰트사이즈는 = 10px(html) * 1.5(body) * 2.0(li) = 30px라는 의미 2019. 7. 23. [FC] BootStrap 맛보기 프레임워크란? 프로그램 개발을 도와주는 이미 작성된 각종 소스코드의 집합 ex. dgango, spring, bootstrap Bootstrap 프레임워크? 웹페이지 제작을 도와주는 프레임워크 부트스트랩을 사용하기 위한 2가지 방식은? CDN형식 파일 다운로드 스타일 적용은 어떤 속성을 통해 적용할 수 있나? class식별자 속성 2019. 6. 9. [FC] CSS 파일분리 / CSS 불러오기 CSS파일은 한 번 정해지면 바뀌지 않는 정적 파일임 CSS파일도 파일 분리 및 파일 불러오기 가능 파일분리하면 좋은점 기존 html파일에 style을 작성하면 해당 html파일에만 적용가능했으나 파일분리를 통해 다른 html파일에도 적용가능해짐. 중복사용가능 주소에 존재하는 외부 CSS 문서 불러오기 코드 type : css타입+text타입 rel : relation의 약자. 불러오는 파일과 html과의 관계를 설명. 스타일시트 관계 스타일 상속의 예시. box스타일 적용시키기 / 부모태그 / 자식태그 box모델과 관련된 속성은 상속이 되지 않는다. height적용시키면 width적용시키면 엘리먼트 단위로 작성한 CSS코드가 우선순위를 갖는다. 결론 div태그의 자식요소인 h1, p태그에는 박스모델과 .. 2019. 6. 8. [FC] CSS 스타일 / 박스모델 / margin / border / padding 박스모델이란 파란색은 컨텐츠영역 초록(padding)은 컨텐츠와 테두리 영역 간의 간격 노랑(border)은 테두리 영역 주황(margin)은 다른 태그(엘리먼트)들간의 간격 border영역이란? 블록요소인 p 태그는 자동 줄바꿈 이뤄짐 인라인 요소인 strong 태그는 옆에 붙음 이제 border영역을 나타내보자 블록요소인 p태그의 border영역은 페이지 영역 너비 전체를 차지하고 인라인요소인 strong태그의 border영역은 컨텐츠 영역 너비까지만 차지한다. padding 영역추가 margin 요소 추가 개발자 도구를 통해 값 살펴보기 입력한 box값들이 나온다. 특정방향에만 간격을 주고 싶을 때 특정방향(상,하,좌,우)의 간격만 바꿀 수 있다. 예시. padding, margin은 왼쪽에만 간격.. 2019. 6. 8. [FC] CSS 선택자 1. 웹페이지 스타일 전용 언어는 무엇인가? CSS 2. CSS 선택자란 무엇인가? 엘리먼트 관계를 이용해서 선택하는 방법 3. 선택자 종류 4가지 자손 선택자 자식 선택자 인접 형제 선택자 일반 형제 선택자 4. 자손 선택자 사용하기 5. 자식 선택자 사용하기 자손 선택자와의 구분을 위해 식별자를 사용하자 자손 선택자 식별자 id="descendant" 자식 선택자 식별자 id="child" 자손 문단 태그 자손 문단 태그의 내부 태그 자식 문단 태그 자식 문단 태그의 내부 태그 6. 인접 형제 선택자 가장 인접해 있는 하위 형제태그를 변화시킴 인접형제 1번 문단 인접형제 2번 문단, id="adj_p" 인접형제 3번 문단 인접형제 4번 문단 7. 일반 형제 선택자 첫문단 두번째문단 id="gen_p".. 2019. 6. 7. [FC] CSS 기본 정의 1. CSS의 약자는 무엇이며 무슨 의미인가? a. 약자 Cascading Style Sheets 종속적인(의존) 스타일 목록 b. 웹 페이지 스타일 지정 전용 언어 2. CSS를 지정할 때 쓰는 3가지 단위는? a. 엘리먼트 단위 b. 웹 페이지 단위 c. 웹 사이트 단위 3. css코드는 어디에 명시하는가 HTML 스타일을 적용하기 위한 코드 작성을 명시 4. css코드 기본 형태 엘리먼트 { 속성 : 값; } 예시. 5. 식별자 역할을 하는 속성 2가지는? id, class 6. id, class의 차이점은? id : 하나의 페이지의 유일한 요소의 식별자 역할 class : 하나의 페이지의 다중 요소의 식별자 역할 6-1. id, class 사용하기 6-2 id 속성으로 요소를 선택하기 위해 __기.. 2019. 6. 6. 이전 1 2 다음 반응형
