목록HTML & CSS (22)
개발자입니다
Inflearn Egoing) 섹션 3. 서체 다루기 - font-size, color, text-align, font, web font
■ font-size : 가장 많이 사용되는 속성인 font-size 단위: px, em:, rem 사용자가 글꼴 크기를 키웠을때 px은 바뀌지 않음, rem은 바뀜 em는 상위 요소 크기의 몇 배인지, rem은 최상위 요소(html) 크기의 몇 배인지 html 요소 크기의 기본값은 웹브라우저 설정에서 정한 글자 크기입니다. 보통 16px입니다. -font-size: px or rem 에 따른 차이 웹브라우저 줌인, 줌아웃시 px, rem 둘다 바뀜 웹브라우저 세팅값 변경시 px 바뀌지 않고, rem 바뀜 PX REM 웹브라우저에서 폰트 크기 변경하는 방법 웹브라우저 - 개발자 도구 - Elements - Computed에서 모든 속성 및 변경된 속성 확인 ■ color 컬러 지정 3가지 방법: colo..
Inflearn Egoing) 섹션 2. 적용 순서 - 상속, 상속되지 않는 속성, 캐스케이딩, !important
■ 상속 상위 태그인 에 color 적용시 하위 태그에 상속되어 모두 적용 수업내용 html CSS javascript 웹브라우저 개발자 도구에 태그 선택시 상속 정보 나옴(inherited from html) ■ 상속되지 않는 속성
Inflearn Egoing) 섹션 1. 선택자 (selector) - 선택자, 가상선택자
의 특정 문구만 선택하여 CSS 설정 : id 사용 HTML CSS JavaScript 1 ul li : 태그 아래 태그인 것에 모두 스타일 지정 2 #lectur>li : id가 lecture인 태그 바로 아래있는 태그에 스타일 지정 3 ul,ol : 태그와 태그에 동시에 속성 지정 *background-attachment로 배경 이미지의 스크롤 여부를 정합니다. scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다. fixed : 움직이지 않습니다. local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. HTML CSS Ja..
Inflearn Egoing) CSS 기본부터 활용까지 - 섹션 0. 오리엔테이션 및 준비 - 소개, 단축키, Atom 사용법
■ CSS 소개 HTML 본질 = 정보 CSS 본질 = 디자인 파일 html 저장 후 웹 브라우저에서 열기(ctrl + o) 눌러서 불러들이기 구글에 css selector 검색하여 이미지로 파악 ■ Atom 단축키 ■ Atom 사용법 #small+#large 입력 후 Tab키 누르면 아래 코드 나옴 → .small+.large 에 Tap 하면 class로 지정된다. html>head>style^body 에서 tab 키 누르면 아래 코드 나옴 .container>.item{$}*5 코드 다음과 같이 변환 1 2 3 4 5