kebab00's

- 저희가 계획하고 있는 사이트는 식물을 관리하는 방법을 알려주고 집에서 더욱 쉽게 식물에게 접근할 수 있도록 진입장벽을 낮춰주는 사이트를 계획하고 있습니다. - 사용한 타입들은 헤더타입, 슬라이더타입, 이미지&텍스트 타입, 이미지타입, 푸터타입 등이 있습니다. - 특히 이미지&텍스트타입을 많이 사용하였습니다. - 그리고 타입으로 분류하기 애매한 검색창이 하나 있습니다. - 설명을 살짝하자면 일단 헤더에는 메뉴창이 들어가서 네비게이션 역활을 같이 합니다. - 슬라이더에는 이번달 식물&꽃과 이벤트등의 베너가 들어갈 예정이며 - 그다음장은 이번달 식물과 약간의 설명이 같이 들어가면 이쁠 것 같아서 넣어 보았습니다. - 그리고 그다음 이미지&슬라이더타입은 식물의 기능성 종류(공기정화, 좋은향, 두통완화등등)을..

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..

선택자(selector) 1. type 선택자 - HTML 요소의 태그 이름을 이용해 스타일을 적용합니다. - 예를 들어, p 선택자는 모든 태그에 스타일을 적용합니다. 2. id 선택자 - # 기호를 사용하여 정의됩니다. - ID 선택자는 특정 요소의 ID 속성을 기반으로 스타일을 적용합니다. - 예를 들어, #wrap는 요소를 선택합니다. 3. class 선택자 - .(마침표) 기호를 사용하여 정의합니다. 4. 전체 선택자 - * 기호로 표현합니다. - 문서 내의 모든 요소를 선택하며, 다른 선택자와 함께 사용하여 특정 요소를 선택할 때 유용합니다. 5. 하위 선택자 - 하위 선택자는 부모 요소 안에 있는 자식 요소를 선택하는 선택자입니다. - 하위 선택자는 부모 요소와 자식 요소 사이에 공백을 사용..

float - float 라는 단어는 원래 ‘뜨다’ 라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. - float 속성은 원래 이미지와 텍스트 배치 용도로 등장했지만, 레이아웃용으로 많이 사용하고 있습니다. - 복잡한 형태의 레이아웃을 구성하는데 필요한 핵심 속성으로 특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성입니다. - 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것입니다. - 아래 사진의 float의 간단한 예시 사진입니다. - float 속성값은 다음과 같습니다. left : 요소를 왼쪽 방향으로 부유하게 설정 right : 요소를 오른쪽 방향으로 부유..