상대 크기 em / rem em 단위는 상위 요소 크기의 몇배인지를 나타내는 크기(1.5em : 상위요소의 1.5배) rem 단위는 문서의 최상위 요소, 즉 html 요소 크기의 몇 배인지를 나타내는 크기(1.5rem : html요소의 1.5배) CSS 2D transform 이차원 좌표에서 요소를 변형시키는 속성 이동, 확대/축소, 회전, 경사 등을 만들 수 있음 translate, scale, rotate, skew 벤더 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사를 의미 아직 CSS 권고안에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때..
Front-end/CSS
플렉서블 레이아웃(flex) 대부분의 웹사이트는 수직 구성 레이아웃 구성 시 가장 많이 사용되는 요소들은 대부분 블록개념으로 표기 수직구성은 쉽게 구성할 수 있으나, 수평 구성은 구현하기 쉽지 않음 과거에는 수평구성을 , float, inline-block으로 구성 좀 더 쉽게 수평구성을 구현하기 위해서 flex를 사용한다. display:flex flex-wrap 플렉스 라인에 더이상 여유가 없을 때 플렉스 요소의 위치를 다음줄로 넘길지 여부를 설정 nowrap : 기본 설정. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 모두 배치 wrap : 플렉스 요소가 여유 공간이 없으면 다음줄로 넘어감. wrap-reverse: 플렉스 요소가 여유 공간이 없으면 다음줄로 넘어감, 위쪽으로..
CSS Position 요소의 위치를 결정하는 방식을 설정 1. 정적(static) 위치 지정방식 기본값 HTML 요소의 위치를 결정하는 기본적인 방식 top, left, right, bottom 속성들을 사용할 수 없음 단순히 웹 페이지의 흐름에 따라 차례대로 요소들의 위치를 결정하는 방식 2. 상대(relative) 위치 지정방식 HTML 요소의 기본 위치를 기준으로 위치를 재설정하는 방식 기본 위치는 정적 위치 지정방식일 때 결정되는 위치를 의미 *뷰포트 가상의 화면 화면 디스플레이 상의 표시 영역을 뜻한다. 모바일 뷰포트는 상하 좌우로 스크롤을 움직이거나 줌인, 줌아웃을 통해 뷰포트를 변경하며 사용 3. 고정(fixed) 위치 지정방식 뷰포트를 기준으로 위치를 설정하는 방식 웹 페이지가 스크롤 되..
CSS의 배경 background-attachment 위치가 설정된 배경 이미지를 원하는 위치에 고정시킬 수 있음 고정된 배경 이미지는 스크롤과 무관하게 화면의 위치에서 이동되지 않음 fixed background-size 배경 이미지 크기를 설정 px, %를 사용 크기를 하나만 지정하게 될 시에는 가로크기를 기준으로 비율을 유지한 채 크기를 설정하게 됨 cover 배경 이미지의 가로, 세로 모두 요소보다 크다는 조건하에 가능한 크기 가능한 이미지를 작게 설정 이미지의 가로, 세로 비율은 유지 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같음 contain 배경 이미지의 가로, 세로 모두 요소보다 작다는 조건하에 가능한 크기 가능한 이미지를 크게 설정 이미지의 가로, 세로 비율은 유지 배경 이미지의..
CSS 선택자 10. 속성 선택자 [속성명 ~= "속성값"] : 속성값이 완벽히 일치하는 문자를 가지고 있는 요소를 선택 = "apple" - 값이 "apple"인 것을 선택 ~= "apple" - 값이 "apple" 혹은 "apple"과 다른값이 띄어쓰기로 있는경우 ex) "apple banana" / "banana apple" [속성명 *= "속성값"] : 속성값이 포함된 문자를 가지고 있는 요소를 선택 [속성명 $= "속성값"] : 속성값이 접미사로 끝나는 문자를 가지고 있는 요소를 선택 [속성명 |= "속성값"] : 속성값이 완벽히 일치하거나, 접두사로 존재하는 -으로 연결된 문자를 가지고 있는 요소를 선택 |= "apple" - 값이 "apple"이거나 혹은 "apple-tree"인 것을 선택 ..
CSS(Cascading Style Sheets) HTML 문서를 시각적으로 꾸며주는 역할을 하는 언어 웹페이지의 디자인을 담당 CSS 문법 HTML 문서 3. 외부 스타일 웹 사이트 전체의 스타일을 하나의 파일에서 변경 태그 안에 태그를 사용해서 연결, 적용하는 방법 rel 속성은 현재 파일과 링크된 파일 사이의 연관관계를 명시 CSS 선택자 1. 전체 선택자 스타일을 모든 요소에 적용 디테일한 스타일은 전체 선택자와 body에 적용한 스타일보다 우선시 됨 * { CSS 문법 } 2. 태그 선택자, 요소 선택자 특정 태그가 쓰인 모든 요소에 스타일을 적용 태그이름 { CSS 문법 } 3. id 선택자 웹 문서 안의 특정한 부분에 스타일을 적용 # 기호를 사용해서 id 속성을 가진 요소에 스타일을 적용 ..
