본문 바로가기
728x90
반응형

CSS45

비주얼 스튜디오 코드⑩ 레이아웃 심화 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.
비주얼 스튜디오 코드 기초② 웹페이지 레이아웃 만들기 concept(overview, color(주조색,보조색,강조색)) > logotype(텍스트, 아이콘), 로고설명, 로고 치수 > main font(영문,한글) 두께 > wire frame(골조), 레이아웃 TOOL: 피그마/포토샵/일러스트레이션 Reference > 회사의 웹페이지를 벤치마킹 웹페이지 주제정하기: 반응형X , 팀프로젝트(개발), 반응형 헤더(Header) 배너(Banner) 컨텐츠(Contents) 푸터(Footer) 비주얼 스튜디오 코드 _확장프로그램 Live Server 설치 extensions > live server 설치 live server : 미리보기 프로그램 하단에 Go Live라고 뜨면 실행가능한 상태이다. html 5 css: css3버전, 바디의 속성을 바꿔줌 *포토.. 2023. 5. 25.
728x90

티스토리툴바