728x90 반응형 HTML61 비주얼 스튜디오 코드 16_ header 사이드에 넣기 01 헤더 사이드로 보내기 #header, #banner, #contents, #footer 에 float: left;를 넣어 주면 헤더가 사이드에 오게 된다. html 메뉴1 서브메뉴1 서브메뉴1 서브메뉴1 서브메뉴1 메뉴2 서브메뉴2 서브메뉴2 서브메뉴2 서브메뉴2 메뉴3 서브메뉴3 서브메뉴3 서브메뉴3 서브메뉴3 메뉴4 서브메뉴4 서브메뉴4 서브메뉴4 서브메뉴4 배너영역 컨텐츠영역 푸터영역 @charset "utf-8"; /*reset*/ *{ margin: 0; padding: 0; box-sizing: border-box; } li{ list-style: none; } a{ color: #333; text-decoration: none; } img{ display: block; } .clearf.. 2023. 6. 7. 비주얼 스튜디오 코드⑮ 트렌스폼을 이용해서 효과주기_2 외부 css 사용시 html에 css 링크 꼭 걸어주기 * web font사용 시 light, normal, bold 가 다 있는 폰트를 사용해야 다양하게 사용할 수 있다. 박스 만들어주기 section으로 만들어주기 01 rotate : 회전 transform: rotate(45deg) transform: rotateX(45deg) transform: rotateY(45deg) CSS3 Transform rotate(45deg) rotateX(45deg) rotateY(45deg) @charset "utf-8"; *, *::after, *::before{ margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: #f5f3f4; t.. 2023. 6. 7. 비주얼 스튜디오 코드⑬ 콘텐츠 모양을 자유롭게 변형하기 section > article section이 article 보다 큰 덩어리지만 간혹 article안에 section이 들어갈 때도 있다. 백그라운드 컬러 투명도 주기 1. background-color: rgba(0,0,255,0.3) (r,g,n,투명도) 2. backgorund-color: blue; opacitiy: 0;(0-완전 투명) 1(완전불투명) 투명도 조절(0~1) section:nth-child(1) article{} 섹션중 첫번째 아이 중에 아티클에 적용하겠다. section:nth-of-type 는nth-child와 비슷하지만 다른형제가 있을 때 바꿀 수 있는 명령어 transform transform: scale(1.3); 배율 조정 transform: skew(30deg); 비.. 2023. 6. 5. 비주얼 스튜디오 코드⑪ 네비게이션, 이미지 넣기 #header = = = : header의 역할만 함 : div와 똑같은 역할 border: 테두리선 wrap에 높이값 넣지 않는다. 그 이유는 wrap의 높이 값이 고정되어있으면 유동적으로 수정이 불가능 01 웹디자인 참고 사이트 본문 폰트크기 : 13px -14px 눈누: 눈누 (noonnu.cc) 구글폰트: Browse Fonts - Google Fonts Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com Color - Materialize (materializecss.com) Color - Materialize To apply a background color, jus.. 2023. 5. 26. 비주얼 스튜디오 코드⑩ 레이아웃 심화 index: 홈페이지 주소 뒤에 index.html이 숨어있음, 홈페이지 창을 불러오겠다는 뜻 https://www.naver.com/index.html 네이버 네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요 www.naver.com body: 골격 css: 골격을 꾸미는 스타일 언어 스크립트: 동작하게 하는 언어 padding: 안 쪽 여백, 블럭이 패딩값만큼 늘어남 그래서 패딩값만큼 포함해서 블럭 w / h 조정해야함 box-sizing: border-box; padding 값 계산없이 w / h를 패딩값 포함하여 알아서 크키조정해줌 *{} 전체 태그에 적용해줌 margin: 바깥 쪽 여백 모두 0으로, 즉 초기화 해줘야 위치계산할 때 편리함 margin=0; padding=0; *{} 전.. 2023. 5. 26. 비주얼스튜디오코드 기초③ 웹페이지 레이아웃만들기 포토샵) 웹페이지 레이아웃 만들기 3 view > new guide > 가이드라인 설정해주기 vertical 400px vertical 640px vertical 1280px 로고/ 네비게이션/ 컨텐츠 1,2,3 레이어 추가해주기 영역별 색칠해주기(alt+delete) 푸터 비주얼 스튜디어 코드) 웹페이지 레이아웃 만들기 3 웹페이지 기본구성요소인 header/ banner/ contents/ footer 레이아웃 지정 header안에 로고, 네비게이션, contents안에 세부콘텐츠를 추가해야함 header안 자식인(로고. 네비게이션)을 넣어준다 .logo 을 치면 .nav 을 치면 자식은 . 으로 시작하고 자식은 클래스 이다. css에서는 #header .logo{} / #header .nav{} h.. 2023. 5. 25. 이전 1 ··· 7 8 9 10 11 다음 728x90
