Jin

grid layout이란 SS Grid Layout을 사용하여 웹 디자인에서 사용되는 그리드 시스템입니다. CSS Grid Layout은 웹 페이지의 레이아웃을 더욱 쉽게 조정하고 배치할 수 있도록 해주는 강력한 레이아웃 시스템입니다. Grid 레이아웃은 Flexbox와 함께 사용될 수 있습니다. Flexbox는 아이템들을 수평 또는 수직으로 배치하기 위한 것이고, Grid 레이아웃은 아이템들을 그리드 형태로 배치하기 위한 것입니다. 이러한 두 가지 레이아웃 시스템을 함께 사용하면 웹 페이지 레이아웃을 더욱 정교하고 다양하게 조정할 수 있습니다. grid의 속성 grid-template-columns / grid-template-rows: 그리드의 열과 행의 크기를 정의합니다. 이 속성은 공백으로 구분된..

flex layout 이란 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. Flex는 레이아웃 배치 전용 기능으로 고안되었습니다. 그래서 레이아웃을 만들 때 딱히 사용할게 없어서 쓰던 float나 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능들이 많아요. Flex 레이아웃을 만들기 위한 기본적인 HTML 구조는 다음과 같습니다. helloflex abc helloflex 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고, 자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다. “컨테이너가 Flex의 영향을 받는 전체 공..

font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. 표현방법 font-family: '돋움', Arial, Helvetica, sans-serif; font-size, 단위의 고찰 문자의 글자 크기를 지정한는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. css에서 유용하게 사용하는 단위에는 다음과 같은 것들이 있습니다. px : 해상동 따라 상대적으로 달라지는 기본 단위입니다. % : 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위 입니다. em : 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단..

HTML문서에 CSS로 스타일을 주기 위해서는 선택자를 통해서 해당 요소를 선택한 뒤 해당 스타일을 줘야 합니다. CSS 에서, 선택자는 스타일을 지정할 웹 페이지의 HTML 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합니다. 1. type선택자 지정된 태그명을 가지는 요소를 선택합니다. type선택자를 사용하면 특정 태그로 마크업된 모든 요소(element)를 선택할 수 있습니다. 웹페이지 상의 모든 요소의 글꼴 색을 파란색으로 스타일하기 위한 CSS 코드는 다음과 같습니다. p { color: blue; } 2. id 선택자 html 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할..

레이아웃 과 float이란 레이아웃(layout)은 웹페이지를 구성하는 요소들의 배치와 위치를 결정하는 것입니다. float는 레이아웃에서 사용되는 속성 중 하나입니다. float 속성을 사용하면 요소가 페이지의 왼쪽 또는 오른쪽에 위치하며, 주변 요소들이 그 주위를 감쌀 수 있습니다. float 속성은 CSS에서 사용되며, 값으로는 left, right가 있습니다. 이 속성을 사용하면 해당 요소는 주변 요소들과 겹칠 수 있으며, 그만큼 콘텐츠가 오버플로우(overflow)될 수 있습니다. float 속성은 예전에는 레이아웃을 구성하기 위해 많이 사용되었으나, 현재는 Flexbox, Grid 등의 새로운 레이아웃 방법이 등장하면서 float는 더 이상 권장되지 않는 방법 중 하나입니다. float 속성 ..

선택자란 우리가 html 파일을 만들었다면 각각의 태그에 다르게 css 를 설정 할 것입니다. 이 때, 어느 요소에 스타일을 적용할지 알려주는 방식이 바로 css 선택자 입니다. 선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다. id 선택자 html 문서에서는 같은 요소라도 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. html 요소에서는 id로 하나의 이름만 지정할 수 있습니다. 다른 요소라도 같은 id는 부여할 수 없습니다. css에서는 #을 붙여 이름을 지정합니다. id는 주로 영문자로 시작합니다. HTML 규정상 같은 id 값을 중복적으로 사용은 불가능합니다. 안녕 class선택자 html 문서의 여러 요소 중 같은 이름을 ..

우선 CSS언어란!! html을 통해 작성된 콘텐츠 내용에 색상, 폰트, 크기, 정렬방식, 테두리 등과 같은 스타일을 부여할 수 있는 코드들을 말합니다. 마크업언어(ex:HTML )가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있습니다. 즉, HTML구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있습니다. 1. 내부 스타일 시트 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것을 '내부 스타일 시트'라고 합니다. 모든 스타일 정보는 태그 안에서 정의해야 하고 태그 사이에 작성합니다. 2. 외부 스타일 시트 외부 스타일 시트는 말 그대로 외부 스타일 시트를 외부 파일로 저장하여 그 파일을 html 페이지로 불러오는 방법으로 많은 ..