본문 바로가기
728x90
반응형

전체 글301

비주얼 스튜디오 코드⑩ 레이아웃 심화 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.
비주얼 스튜디오 코드⑨ 필터효과, 박스사이징 01 filter img: 자기 영역이 있음 인라인 구조 사진과 사진사이에 여백이 있음 여백을 없애고 싶다면? 인라인 구조를 블럭구조로 바꾸면 된다. display: block; filter: blur(치수) _ 흐림효과 filter: brightness(치수) _ 밝기효과 : 0:검정색 / 1: 원본컬러 filter: contrast(치수) _대비 filter: grayscale(치수) _흑백변환 02 box-sizing box-sizing: border-box 패딩값을 포함해서 박스사이즈를 출력해줌, 즉 패딩값을 줘도 박스사이즈가 변하지않는다. 초기화할 때 사용 2023. 5. 24.
비주얼 스튜디오 코드⑧ 영역의 레이어를 바꿔주는 명령어 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.
728x90

티스토리툴바