본문 바로가기
728x90
반응형

분류 전체보기303

비주얼 스튜디오 코드⑮ 트렌스폼을 이용해서 효과주기_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.
비주얼 스튜디오 코드⑭ 피그마이용해서 이미지크기 조절 ㅣ 콘텐츠 모양을 자유롭게 변형하기_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.
비주얼 스튜디오 코드⑬ 콘텐츠 모양을 자유롭게 변형하기 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.
비주얼 스튜디오 코드⑫ css 외부링크 만들기, css 링크 불러오기 비주얼 스튜디오 코드 > new file > 파일 이름: style.css 새파일 생성 > @charset "utf-8" (셋팅을 한국어로 만들어준다 index.html 파일에서 head에 style.css 링크 달아서 외부에서 불러오기 ul>li").mouseover(function(){ }); this는 한줄씩 서브메뉴가 나옴 ".nav>ul>li 은 전체 서브메뉴가 보여짐 **배너에 이미지가 들어갈 시에 서브메뉴가 안나오기 때문에 position을 .header .nav ul li를 기준점으로 relative를 넣어주고 .header .nav ul li ul.submenu li에 absolute를 넣어줌 contents 공지사항만들기 contents > notice 공지사항부분 ^ 공지사항 줄간격 .. 2023. 6. 2.
[BOOK]혼자 공부하는 얄팍한 코딩지식_Chapter 01-1 CHAPTER 01 개발자 이해하기: 개발과 개발자 용어 알기01-1 개발자는 대체 뭐하는 사람인가요?개발자가 하는 일은 작가가 하는 일과 비슷하다. 무에서 유를 창조하고 누군가를 이해할 수 있도록 작성하는 것도 비슷하다. 차이점이 있다면 작가는 사람이 이해할 수 있는 언어로 작성하지만, 개발은 컴퓨터가 이해할 수 있는 언어로 작성한다. 작가는 종류에 따라 여러종류의 작가가 있는 것처럼, 개발자도 무엇을 개발하느냐에 따라 여러분야의 직군으로 나뉜다. 개발자는 종류마다 사용하는 프로그래밍 언어도 다르고 쌓아야하는 지식도 다르다. 웹 개발자웹사이트를 만드는 개발자 웹 개발자는 윌가 PC나 스마트폰에서 웹서핑을 하며 방문하는 각종 웹사이트는 웹 개발자가 만든다. 일반 프로그램이나 모바일 앱으로 알고 사용하는 .. 2023. 5. 27.
직장인 코딩 용어 해설② 웹서비스 동작방식 어? 서버 터졌네 = 접속자 폭주 서버란? 가운데서 데이터를 저장하고 주는 것 서버를 통해 정보를 주고 받고 한다. 즉, 서버란 "컴퓨터라는 사람의 직업과 같은것 (DB,웹서핑도 가능!) 웹은 어떻게 동작하는 걸까? 브라우저의 역할? 요청을 보내고 받아서 그대로 그려줌 HTML: 뼈대 CSS: 예쁘게 꾸며주기 Javascript: 동작 웹사이트의 기초적인 구성요소 : HTML, CSS, Javascript 하지만 매번 페이지를 로딩 할 수 없고 데이터만 갈아끼우고 싶을 수도 있다. 그럴 떄는 데이터만 내려줄 수 있다. 그런데 아무렇게나 줄 수는 없으니, 줄 때도 규칙이 필요하다. 그러한 규칙이 {JSON} 제이슨 방식 키: 밸류 라고 한다~ 중괄호로 계속해서 이어지는게 제이슨방식의 특징 JASON은 앱에.. 2023. 5. 27.
728x90

티스토리툴바