hyejeong 코딩

이전에 만들었던 슬라이드, 이미지, 이미지/텍스트, 카드, 텍스트, 푸터 영역의 페이지들과 헤더, 배너 영역의 페이지를 하나로 모아 사이트페이지를 만들었습니다. 슬라이드 유형 슬라이드 유형 페이지 만들기! Figma 피그마를 이용해 만들고자하는 슬라이드 유형의 페이지를 작업했습니다. 슬라이드 유형 페이지 안에 넣은 아이콘을 만들어 jpg파일로 저장해주었습니다. HTML 코드 메인 슬라이드 영역 event hyejeong3283.tistory.com 카드 유형 카드 유형 페이지 만들기 카드 유형 페이지 만들기 피그마를 이용하여 만들고 싶은 페이지를 작업을 해주었습니다. 코드 반려동물을 키울때 필요한 책임감 애완동물을 "제대로" 기르려면 아이를 키우는 것 만큼 돈이 나 hyejeong3283.tistory...

Figma 피그마를 이용해 만들고자 하는 푸터 유형의 페이지를 작업했습니다. HTML 코드 푸터 반려동물 사이트 반려동물 소개 기타 반려동물 입양,분양 방법 사육 기본사항 반려견 반려견 종류 미용 정보 산책 맹견 관리 반려묘 반려묘 종류 미용 정보 그루밍 반려동물 건강 기본 건강상식 예방 접종 사료 구입 요령 금지 음식 반려동물 훈련 반려동물 복지 반려견 예절 반려묘 예절 반려동물과의 외출 반려동물 정보 반려동물 보호법 반려동물 등록제 유기동물 보호소 2023 hyejoeng 반려견 사이트 Portpolio is Power All Right Reserved footer__menu 클래스명을 가진 태그영역 안에 div태그 영역을 6개 만들고 그 안에 h3, ul, li 태그를 사용해 제목과 내용을 입력해주..

Figma 피그마를 이용해 만들고자 하는 텍스트 유형의 페이지를 작업했습니다. HTML 코드 notice 반려동물을 키울때 필요한 책임감 생명과 안전 보호 동물의 소유자 등은 동물로 하여금 갈증·배고픔, 영양불량, 불편함, 통증·부상·질병, 두려움과 정상적으로 행동할 수 없는 것으로 인하여 고통을 받지 아니하도록 노력하여야 합니다. 더보기 복지 증진 동물의 소유자 등은 사육·관리하는 동물의 습성을 이해함으로써 최대한 본래의 습성에 가깝게 사육·관리하고, 동물의 보호와 복지에 책임감을 가져야 합니다. 더보기 사육 환경 사육 공간 및 사육 시설은 동물이 자연스러운 자세로 일어나거나 눕거나 움직이는 등 일상적인 동작을 하는 데에 지장이 없는 크기이어야 합니다. 더보기 예방접종 전염병 예방을 위하여 정기적으로 ..

Figma 피그마를 이용해 만들고자하는 슬라이드 유형의 페이지를 작업했습니다. 슬라이드 유형 페이지 안에 넣은 아이콘을 만들어 jpg파일로 저장해주었습니다. HTML 코드 메인 슬라이드 영역 event 반려동물 알기 반려동물과의 상호작용, 즉 교감은 반려인의 정서적 안정 뿐 아니라 사회적 소통의 창구가 될 수 있습니다. 사람과 사회적 관계망에서 생기는 스트레스를 자연적 순수함을 간직하고 있는 반려동물에게서 위안을 받습니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 html 영역별 설명 : 제목을 적어줍니다. : 내용을 담을 구역을 만들어 줍니다. 영역 안에는 , 등의 버튼태그를 만들어 줍니다. slider__arrow, slider__dot라..

Figma 피그마를 이용해서 만들고자하는 이미지텍스트 유형 페이지를 작업했습니다. HTML 코드 notice 반려동물과 외출하기 반려동물 외출 시 챙겨야 할 것들과 주의사항입니다. 인식표 부착하기 목줄 등 안전조치하기 맹견의 경우 입마개 착용하기 배설물 수거하기 입장제한 여부 확인하기 반려동물을 안은 상태에서의 운전금지 대중교통 이용시 이동가방 사용하기 body 안에 html 태그들을 사용하여 각 영역별 보여줄 정보들을 정의합니다. 영역마다 class명을 주어 보다 효과적으로 css를 적용시킬 수 있습니다. body 안에 imgtext라는 클래스명을 가진 태그의 영역을 3개 만들어주었습니다. 1번째 영역에는 텍스트를, 2,3번째 영역에는 이미지를 넣었습니다. CSS 코드 head 안에 사용할 폰트를 링크..

Figma 피그마를 사용하여 만들고자 하는 이미지 유형 페이지를 작업했습니다. HTML 코드 반려동물 귀여운 반려동물들 입니다. 반려견 강아지는 산책을 좋아합니다. 하루에 충분한 산책시간을 가져야 합니다. 자세히보기 반려묘 고양이는 높은 곳을 좋아합니다. 고양이는 야외 활동을 거의 하지 않습니다. 자세히보기 body 안에 html 태그들을 사용하여 각 영역별 보여줄 정보들을 정의합니다. 영역마다 class명을 주어 보다 효과적으로 css를 적용시킬 수 있습니다. CSS 코드 html 안에 아래와 같이 css 효과를 넣어주었습니다. head 안에 사용할 폰트를 링크 태그를 통해 호출하여 사용합니다. style을 영역을 선언 후, 그 안에 html 태그 및 class명에 따른 스타일(css)효과를 작성합니다..

카드 유형 페이지 만들기 피그마를 이용하여 만들고 싶은 페이지를 작업을 해주었습니다. 코드 반려동물을 키울때 필요한 책임감 애완동물을 "제대로" 기르려면 아이를 키우는 것 만큼 돈이 나간다. 사료, 간식, 장난감, 병원비는 물론이고, 애완동물 출입을 허가하는 주거시설과 놀이 시설에 가기 위해 많은 비용을 지불해야 한다. 먼 거리까지 가려면 자동차도 필수다. 동거인에게 허락받기 새로운 가족을 들이는 것이나 마찬가지이므로, 같이 살고 있는 사람의 동의를 얻도록 한다. 왜냐면, 동물을 키운다는 것이 사실 애정만으로는 여러 가지로 어렵기 때문이다. 자세히 보기 타인에게 피해를 주지 않기 동물은 자신이 어떤 행위를 해야 사회적, 법적으로 분쟁이 발생하는지 알 도리가 없으므로 그 주인이 예상되는 문제점을 숙지하여 ..

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

grid layout은 페이지를 여러 주요 영역으로 나누거나, 크키와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는데 탁월합니다. flex 처럼 반응형 디자인을 만들 때 사용하는 방법 중 하나입니다. flex와 grid의 큰 차이점 flex는 한 방향 레이아웃 시스템 (1차원) grid는 두 방향 (가로-세로) 레이아웃 시스템 (2차원) 따라서 flex 보다 더 복합적인 레이아웃 표현이 가능합니다. grid 속성 부모 요소인 grid container 와 자식 요소인 grid item이 있습니다. container가 grid의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 item들이 어떤 형태로 배치되는 것이라고 생각하시면 됩니다. flex와 마찬..

flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. display: flex; 위의 구문은 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻입니다. flex 속성 부모 요소인 flex container 와 자식 요소인 flex item이 있습니다. container가 flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 item들이 어떤 형태로 배치되는 것이라고 생각하시면 됩니다. flex container : 컨테이너에 적용하는 속성 display flex-direction flex-wrap flex-flow justify-content align-items align-cont..