grid란 - CSS 그리드 레이아웃은 웹페이지를 위한 이차원 레이아웃 시스템입니다. - 이 기능을 통해 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 많은 기능이 있습니다. - 그리드 레이아웃은 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다. HTML 삽입 미리보기할 수 없는 소스 - 위의 예제는 그리드를 이용해 레이아웃을 만든 것 입니다. - 이제 코드를 보면서 설명을 해보겠습니다. - 일단 body에 부모요소인 wrap 하나와 그안에 각 박스를 구성할 요소들을 5개 만들어 주었습니다. - 그 후 style에 wrap을 제외한 나머지 요소들에게 색과 gird-area: 이름; 을 넣어주면 준비는 끝났습니다. #wrap { width: 1200p..

flex란 - display 속성 중 하나로써 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. - flex 레이아웃을 만들기 위해서는 부모 요소에 display: flex; 속성을 지정해주면 됩니다. display: flex; display: -webkit-flex; display: -ms-flexbox; - 위 구문은 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻입니다. flex의 속성들 - flex에는 여러가지 속성들이 있습니다. 어떠한 것들인지 한번 알아보겠습니다. flex-direction (배치 방향 설정) - 자식 요소를 나열하는 방향을 지정하는 속성입니다. 부모 요소에게 지정합니다. 속성 값 속..

- 오늘은 CSS 문자 관련 스타일에 대해 알아보겠습니다! - 이번 주에 학원 쌤이 해주시던 말씀이 생각이 나네요 페이지에서 폰트만 달라져도 사이트가 달라보인다고 하시더라구요 - 그만큼 문자의 스타일이 주는 효과가 매우 큰 것 같습니다. ㅎㅎ - 열심히 배워서 보기 좋은 사이트들을 만들어 봐요!! 내용출처 : 김광수 | 조혜경 저 Responsive Web Publishing 문자 관련 스타일 01.font-family - 폰트 종류를 설정하는 속성으로, 여러 단어이거나 한글 글꼴인 경우 따옴표("")로 감싸고 여러 개의 글꼴을 쉼표(,)로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', Arial, Helvetica, sans-serif; 02..