Front-end/CSS 썸네일형 리스트형 [CSS] CSS(Cascading Style Sheets)와 선택자(selector) 1. CSS란? 1) 스타일링을 위한 언어 2) Cascading(계단식)이라는 뜻으로 여러 스타일이 적용될 경우 충돌을 막기 위해 계단식으로 스타일이 적용됨 3) 하나의 스타일이 여러 개의 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러 개의 스타일이 적용될 수 있음 4) CSS는 크게 선택자(selector)와 스타일(style)로 구성되어 있음 2. 선택자(selector) 1) 정의 스타일을 어떤 엘리먼트에 적용할지 선택하게 해주는 것 2) 문법 - 선택자를 먼저 쓰고 이후에 적용할 스타일을 중괄호 안에 세미콜론(;)으로 구분하여 하나씩 기술 - 각 스타일은 CSS속성과 값으로 이뤄진 키-값 쌍이며 CSS속성의 이름과 값을 콜론(:)으로 구분 3) 선택자 유형 ① 엘리먼트 선택자(elemen.. 더보기 [CSS] 폰트(font) 관련 속성 1. font-family - 어떤 글꼴을 사용할 것인지를 결정하는 속성 - 속성 값으로 사용할 글꼴의 이름을 적어주면 됨(글꼴 이름에 띄어쓰기가 들어갈 경우 큰따옴표로 묶어줘야함) #title { font-family: "글꼴명"; } - 지정한 글꼴을 찾지 못했을 경우를 대비해서 사용할 글꼴을 순서대로 지정해 줘야 함 font-family 속성에 fallback 시스템 - 지정한 글꼴을 찾지 못했을 경우를 대비해서 사용할 글꼴을 순서대로 지정해 주는 것 - 최대한 많은 브라우저와 운영체제에서 글자가 깨지지 않고 나올수 있도록 하기 위함 #title { font-family: Arial, Verdana, Monaco, "Times New Roman"; } - 일반적인 글꼴 분류(generic font .. 더보기 [CSS] 레이아웃(Layout)과 관련된 속성 1. 레이아웃(Layout) 화면에 엘리먼트들을 어떻게 배치할 것인지 의미 2. 레이아웃 관련 속성들 1) display 엘리먼트를 어떻게 표시할 지 그 방법에 관한 속성 div { display: none | block | inline | flex; } display: none; - 엘리먼트를 화면에 숨기기 위해 사용됨 - 엘리먼트가 존재하긴 하지만 화면에 보이지 않게 함 - 주로 자바스크립트 코드를 넣을 때 사용됨, 태그의 display 속성 기본값은 display: none; display: block; - 블록 단위로 엘리먼트를 배치 - 블록 단위: 엘리먼트가 새로운 줄에서 시작하여 위차한 곳 전체의 width를 차지한다는 것 - 대표적으로 , , ~ 태그의 display 속성 기본값은 displ.. 더보기 이전 1 다음
