728x90 반응형 position11 비주얼 스튜디오 코드 19_ 연꽃축제 예제_banner, contents 넣기 _배너 배너에 이미지 넣기 h2 - 제목 넣기 img - 배너 이미지 넣기 css- 제목 위치 잡아주기 배너 html 축제소개 초대의 글 축제개요 축제연혁 오시는길 행사안내 셔틀버스 안내 행사 안내 행사 일정 소공연장 홍보마당 축제 소식 보도 자료 음식레시피 참여마당 참가후기 연꽃갤러리 포토갤러리 부여연꽃축제 공지사항 부여 연꽃 축제기간이 06월 15일부터 시작됩니다. 05-30 연꽃 축제기간 중 타지에서 오는 관광객에게 2,000원 할인 행사를 하고 있습니다. 05-25 서울 구로구에 계시는 분들은 부여와 자매구로 5,000원 할인하고 있습니다. 05-25 부여 연꽃 보러 많이 많이 오세요. 05-24 갤러리 바로가기 바로가기 바로가기 바로가기 바로가기 바로가기까지 css @charset "utf-8".. 2023. 6. 8. 비주얼 스튜디오 코드18_ 연꽃축제 예제_header 사이드 html css 헤더, 배너, 컨텐츠, 푸터에 각각 float:left 명령을 넣어줘야 header가 side에 들어가게됨 헤더부분 html css - 헤더로고 html - nav영역 넣어주기 css - nav영역 넣어주기 j-query -nav 네비게이션-아코디언 형식 네비게이션 - 사이드 형식 전체 html 축제소개 초대의 글 축제개요 축제연혁 오시는길 행사안내 셔틀버스 안내 행사 안내 행사 일정 소공연장 홍보마당 축제 소식 보도 자료 음식레시피 참여마당 참가후기 연꽃갤러리 포토갤러리 전체 css @charset "utf-8"; /*reset*/ *{ margin: 0; padding: 0; box-sizing: border-box; } li{ list-style: none; } a{ text-dec.. 2023. 6. 8. 비주얼 스튜디오 코드⑭ 피그마이용해서 이미지크기 조절 ㅣ 콘텐츠 모양을 자유롭게 변형하기_2 w1920 h500 layout grid > columns으로 변경 margin: 360으로 설정 줄자켜기 줄자로 가이드라인 넣어주기 alt+드래그+shift: 고정이동 + 복사 그리드 설정하기 사각형 10*10px / 사각형 400*200px 로 가이드라인 그려주기 아래이미지 참고 이미지 크기 설정해주기 file > place image 이미지 선택 export > 다른이름으로 저장 plugins_unsplash 생성 file > plugins > find more plugins > 검색창에 unsplash 검색 > unsplash Run 클릭 unsplash 플러그인을 통해 다양한 이미지를 사용할 수 있다. position 이미지 박스 내려가는 동작 만들기 li안에 img와 span(박스)이 동등하게.. 2023. 6. 5. 비주얼 스튜디오 코드⑧ 영역의 레이어를 바꿔주는 명령어 margin: 50px auto; 위쪽에서 50픽셀 띄워주고 auto는 좌우 자동으로 맞춰줌 01 float float: 띄워서 오른쪽이나 왼쪽으로 위치시킴 float을 하게 되면 2층으로 보내지기 때문에 가상요소로 넣어줌으로써 테두리선이 위로오게됨 가상요소 명령어 #wrap::after{ content:""; display: block; clear:both; } 반응형으로 인해 부모에 기준점을 잡아서 위치를 시켜줘야함 기준점은 부모자리에 position: realative; 으로 잡아준다. 임의지점은 자식자리에 position: absolute; 0,0의 자리를 먼저 알아두면 객체 위치시킬 때 편리하다. 02 영역의 레이어 층을 바꿔주는 명령어 z-index : 레이어 층을 바꿔준다. position:.. 2023. 5. 24. 비주얼 스튜디오 코드⑦ border 사용법 div:nth-child(1) - div 의 첫번째 div를 뜻함 = div:first-child - first도 사용가능 div:nth-child(2) - div 의 두번째 div를 뜻함 div:nth-child(3) - div 의 세번째 div를 뜻함 = div:last-child - 마지막 div를 뜻함 01 border border style : 한번에 지정 가능함 border: 10px dashed #000 / 보더크기 스타일 색 02 블럭구조와 인라인 구조 블럭요소 태그는 자동줄바꿈됨 p태그: 블럭구조 다음줄로 내려가게됨 , 한 단락씩 표시됨 span태그 : strong태그: 글자 굵게 em태그: 비스듬한 글자 span, strong, em: 인라인 구조라서 옆으로 이어지게 됨, 한 줄에 들어.. 2023. 5. 23. 이전 1 2 다음 728x90
