Web Layouts (22) 썸네일형 리스트형 (CSS) 레이아웃 종류(Float, Flexbox, Grid) ※ 해당 글은 https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525을 참고하여 작성되었습니다. 레이아웃은 웹페이지에서 문자, 그림, 사진을 구성하고 배열하는 일을 말한다. HTML로 만들어진 웹페이지에 디자인 요소를 가미하여 보기 좋게 그리고 사용하기 좋게 제작하는 것을 말한다. 그래서 시각적인 효과와 사용목적을 고려하여 웹페이지에 CSS를 적용해야 한다. 웹페이지의 레이아웃은 현재까지 총 3가지가 만들어졌다. 역사적인 순서대로 보자면 아래와 같다. 1. Float-based layout 2. Flexbox-based layout 3. Grid-based layout 1. Float-based layout .. (CSS) font-size: 62.5%, 왜 기본 페이지의 글꼴을 이렇게 정의할까? html { font-size: 62.5%; font-family: Arial, Helvetica, sans-serif } html 페이지의 기본 font-size가 62.5%로 정의되어 있다. 대부분의 웹페이지의 기본 텍스트 크기가 16px이고 16px * 62.5% = 10px이기 때문이다. 최상위의 font-size를 10px로 지정해 놓으면 상속자들의 화면에서 텍스트 크기를 쉽게 계산할 수 있다. 1.5em은 1.5 * 10 = 15px 등 간편하게 10을 곱하게 된다. 그래서 font-size: 62.5 는 글자 비례형 레이아웃을 만들때 흔히 사용된다. 스타일을 위에서 처럼 선언을 하면 px, pt 단위를 쉽게 em 단위로 변환할 수 있다. 100px: 10em; 13pt: 13em or 15... (CSS) @media (엣 미디어) @media (max-width: 684px) { body { font-size: 1.53rem; } } @media (max-width: 382px) { body { font-size: 1.35rem; } } CSS 파일의 내용에 @(엣 혹은 엣사인) 표시가 되어 있는 경우가 있다. 엣사인은 CSS의 선택자와 속성을 표시하는 규칙인 Rule-set과는 다른 at-Rule(엣 규칙)이다. 위의 코드의 중괄호 { } 전 부분 @media 는 Rule-set의 선택자(selector)가 아니고 식별자(identifier)이다. MDN에서 at-rule에 대한 내용은 여기에 있다. 오늘 다루는 @media는 최상위 코드나 조건부 그룹안에 중첩해서 작성할 수가 있다. 엣 미디어는 코드가 실행되는 장치가 미디어 .. (CSS) 100vh, 100vw CSS 레이아웃 레퍼런스 코드를 보니 min-height: 100vh가 눈에 띄인다. CSS를 구현할 때 흔히 디스플레이 화면 사이즈에 맞게 구현하는 경우가 많다고 한다. vw 나 vh를 사용한다.(vh & vw (vertical height & vertical width) vw는 스크린 너비의 1% vh는 스크린 높이의 1%를 표시하는 거다. 그래서 min-heigth: 100vh는 현재 스크린의 화면의 100%에 CSS레이아웃을 꽉 채운다는 의미다. 특히 요츰처럼 다양한 사이즈의 기기를 사용하는 경우 반응형 웹으로 웹페이지를 많이 만들기 때문에 자주 사용된다. 예를 들어 브라우저의 높이 값이 900px면 1vh는 9px가 된다. 이외에도 너비나 길이를 나타내는 CSS unit은 아래의 사이트를 참조한.. (CSS) background 와 background-color의 차이 둘의 차이는 background-color는 background의 color 요소만 지정이 가능하고 background 는 color외에 image, attach, repeat, position 등 다양한 백그라운 옵션을 지정해 줄 수 있다. MDN에 나와 있는 구성요소 background-attachment background-clip background-color background-image background-origin background-position (en-US) background-repeat background-size MDN에 나와 있는 사용예제 /* 사용 */ background: green; /* 와 사용 */ background: url("test.jpg") repeat-y; /.. CSS - <div> ,<span> 태그 : 페이지에서 한 줄 전체의 영역을 차지한다. (블록 레벨 엘리먼트) : 페이지의 한 줄에서 정해진 영역만을 차지한다. (인라인 레벨 엘리먼트) 스스로 공부하는 CSS(Cascading Style Sheet) Cascading 폭포의 의미 브라우저에서 html을 보여줄 때 누구꺼를 기준으로 하냐의 문제 창작자>브라우저>사용자에서 콘텐츠 창작자가 1순위 폭포처럼 위에서 아래로 쏟아진다고Cascading? 각설하고 무색무취의 태그 디자인 목적을 위해 어떤 의미도 없는 태그를 사용해야 할 때 그때div가 당신의 화면에 dive한다. divison의 약자 블록 레벨 엘리먼트(한 줄 전체를 잡아 먹음) 동일한 용도 태그 but 인라인 엘리먼트(한 줄에서도 정해진 영역만 차지) 다시 정리하면 : 페이지에서 한 줄 .. 이전 1 2 3 다음
