조반짝의 도전일지

html 생성 linear-gradient(각도, 색상코드) - 직선 그라디언트 색상 코드 두가지로 사용하면 한 가지 명령어가 안 먹을 시에 둘 중 하나가 들어올 수 있도록 한다. 전에는 브라우저마다 속성이 다르기 때문에 배경색과 그라디언트색상을 두가지 사용했지만 지금은 거의 브라우저가 통일된상태이다. _가운데 정렬 3총사 flex: 자식들을 옆으로 보내주는 것이 특징 alian-items: center; - 세로 가운데 정렬, 높이값이 있어야 적용이 됨 justfy-content: center; - 가로 가운데 정렬 border-radius: __px 는 이미지위에 피규어가 있기 때문에 이미지에 명령을 줘야함 figcaption이 움직이려면 부모(figure)가 기준점(relative)이 되어야함 fi..

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..

외부 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..

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(박스)이 동등하게..

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); 비..

비주얼 스튜디오 코드 > 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 공지사항부분 ^ 공지사항 줄간격 ..

CHAPTER 01 개발자 이해하기: 개발과 개발자 용어 알기01-1 개발자는 대체 뭐하는 사람인가요?개발자가 하는 일은 작가가 하는 일과 비슷하다. 무에서 유를 창조하고 누군가를 이해할 수 있도록 작성하는 것도 비슷하다. 차이점이 있다면 작가는 사람이 이해할 수 있는 언어로 작성하지만, 개발은 컴퓨터가 이해할 수 있는 언어로 작성한다. 작가는 종류에 따라 여러종류의 작가가 있는 것처럼, 개발자도 무엇을 개발하느냐에 따라 여러분야의 직군으로 나뉜다. 개발자는 종류마다 사용하는 프로그래밍 언어도 다르고 쌓아야하는 지식도 다르다. 웹 개발자웹사이트를 만드는 개발자 웹 개발자는 윌가 PC나 스마트폰에서 웹서핑을 하며 방문하는 각종 웹사이트는 웹 개발자가 만든다. 일반 프로그램이나 모바일 앱으로 알고 사용하는 ..

어? 서버 터졌네 = 접속자 폭주 서버란? 가운데서 데이터를 저장하고 주는 것 서버를 통해 정보를 주고 받고 한다. 즉, 서버란 "컴퓨터라는 사람의 직업과 같은것 (DB,웹서핑도 가능!) 웹은 어떻게 동작하는 걸까? 브라우저의 역할? 요청을 보내고 받아서 그대로 그려줌 HTML: 뼈대 CSS: 예쁘게 꾸며주기 Javascript: 동작 웹사이트의 기초적인 구성요소 : HTML, CSS, Javascript 하지만 매번 페이지를 로딩 할 수 없고 데이터만 갈아끼우고 싶을 수도 있다. 그럴 떄는 데이터만 내려줄 수 있다. 그런데 아무렇게나 줄 수는 없으니, 줄 때도 규칙이 필요하다. 그러한 규칙이 {JSON} 제이슨 방식 키: 밸류 라고 한다~ 중괄호로 계속해서 이어지는게 제이슨방식의 특징 JASON은 앱에..

[컴퓨터와 인터넷] 컴퓨터: 기계를 모아 둔 것 하드디스크 : 적어둔다 RAM: 기억하기 CPU: IQ, 계산하기 . CPU가 좋으면 빨리 계산할 수 있다. 메인보드: 하드디스크, RAM, CPU 를 한 번에 꽂아두는 곳 컴퓨터를 어떻게 조작할까? 운영체제로 조작한다, 운영체제: 인간이 기계와 소통할 수 있게 만드는 기반 프로그램 ex) android, ios, windows, linux linux: 오픈소스로 무료로 사용가능 OS에 명령을 내리는 것이 " 코딩 " 코딩: 운영체제에 명령을 내린다. 명령을 내릴 때 어떤 언어든 상관없다. 프로그래밍 언어: 어떤 말로든 명령을 내리면 됨. ex) JAVA, PYTHON, php, c++, scala, javascript, c#, node, ruby 프로그램..

#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..