본문 바로가기
728x90
반응형

☭DEVELOPER241

비주얼스튜디오코드 기초③ 웹페이지 레이아웃만들기 포토샵) 웹페이지 레이아웃 만들기 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.
[포토샵]컨텐츠만들기 새문서 만들기 가이드라인 설정해주기 이미지넣어주기 사각형 선택 fill-투명 , stroke- white, 15px width 600px X height 400px 사각형 생성 밑에 부분 사각형 선택툴로 선택 후 지워주기 중간에 흰색 원 그려주기 원 크기 143 x 143 원 생성 모양 툴에서 고양이 발바닥 생성해주기 ctrl+j로 레이어 복사해서 발바닥 두개 만들어주기 글씨도 넣어줘서 로고 만들어 주기 2023. 5. 23.
728x90
반응형

티스토리툴바