조반짝의 도전일지

복습 > 프로그래밍 언어는? 인간과 가장 가까운 언어로, OS에 명령을 내리는 것 인터넷 세상에서 잘 듣고 있다가 요청이 오면 응답을 줘!! ➡️ 서버를 만드는 명령 그런데!! 이 프로그래밍 언어들로 서버를 처음부터 다 만든다는 것은 아주 어려운일이다.. 프레임 워크 미리 만들어놓은 블록세트이다. 언어마다 서버를 만들 수 있는 블록세트가 정해져 있다. 서버를 만들 때 프레임워크에서 필요한 기능을 갖다가 쓴다. 스프링 프레임워크에 대한 이해와 경험도도 중요하다. 파이썬은 데이터분석으로 이용됨 장고를 다룰 수 없으면 서버를 못 만든다. 웹 프론트엔드: 우리 눈에 보이는 부분 프론트엔드 언어 자바스크립트 기반의 프레임워크들이 나왔다. 프레임워크를 사용하면 용량을 조금 적게 보낼 수 있거나, 페이지의 깜빡거림이..

.face3 html 마크업 .face3 css 편집 .pic에서 공통된 속성을 적용해주고 nth-of-type으로 각각 사진만 넣어준다. Co Company Android Apple Twitter Facebook YouTube Google What's New New n Articles What is Lorem Ipsum? Lorem: 텍스트 자동 완성 기능 Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, explicabo quia error perspiciatis eveniet deserunt assumenda corporis minima voluptas consequatur quibusdam consectetur quae numqua..

swiper 접속 use swiper from CDN에 https:// 부터 복사 브라우저 새창 열고 복사한 주소를 붙여넣는다 전체선택 후 복사 swiper.css파일 새로 만들어서 복사한 것 붙여넣기 format Document 로 정렬 정리하기 java script도 가져오기 js 주소 복사하기 java script 파일 만들고 복사한 코드 붙여넣기 swiper.css 링크걸기 java script 링크걸기 swiper html 마크업 복사해서 .slider 안에 넣기 script swiper 복사해서 붙여넣기 닷메뉴 활성 clickable: ture, 글자 삭제 후 h3, p 태그에 문구 넣기 swiper demos 원하는 디자인을 선택 후 core를 클릭하면 코드가 나온다. script 부분 복사..

html 마크업 css 편집 .container 편집 .header html 세부 마크업 .header css 편집 .nav html 세부 마크업 pc .nav css 편집 **로고와 네비를 꼭 float을 띄워야한다. 모바일 nav 만들기 햄버거 메뉴 만들기 반응형 화면 media css 만들기 ▼ .row 값을 화면 크기가 축소될 때마다 치수를 줄여준다. banner .nav 편집 media 편집 ◆ slick 슬릭을 2개 이상 사용시에 충돌이 나서 오류가 생긴다. 슬릭 여러개 사용시 슬릭 중 하나를 초기화 시키기 슬릭 초기화 코드 // $('.review').get(0).slick.setPosition() ◇ swiper https://swiperjs.com/ Swiper - The Most Mod..

스크롤 시 네비게이션 보이기 html 마크업 css reset css 편집 #nav nav position: absolute 띄워주기 nav를 숨겨놨다가 on을 만나면 나오게 되고 고정해줌 #contents @charset "utf-8"; *{ margin: 0; padding: 0; /* margin, padding 사이즈 반영이 안되서 높이, 너비값으로 직접 적용 */ box-sizing: border-box; color: #222; } li{ list-style: none; } a{ text-decoration: none; } .clearfix::before, .clearfix::after{ display: block; content: ""; clear: both; } #nav{ position: ..

컨텐츠 6개의 칸을 만들어서 바깥테두리 없이 레이아웃 진행 html 골격만들어주기 css 편집 표 위치와 영역 잡아주기 세번째 표의 보더를 없애주어야한다. .col3 오른쪽 위 끝 위치해야하기 때문에 보더, 패딩, 마진을 0으로 해주어야 올라간다. .col6도 똑같이 넣어준다. 각 표마다 아이콘 이미지 적용 img 에 아이콘 이미지를 적용했을 때 똑같은 이미지가 들어간다. .cont .colum .ico img > .cont .col1 .ico_img 부터 각각 이미지의 좌표를 지정해주면 다르게 이미지를 적용할 수 있다. 마우스 오버시 다른 이미지가 나오도록 한다. html 에서 각 col1 에 ir_pm을 적용하여 글씨를 없애준다. 다른 표에도 아이콘을 다르게 적용한다. .ico_tit 와 ico_de..

●input 태그 -text -password -date - color -checkbox : 체크박스는 중복으로 체크를 할 수 있다. -radio : 중복없이 선택함 -button ●placeholder: 박스 안에 텍스트 넣기 -테두리 만들기 border:0; 하면 input이 가지고 있는 테두리가 사라짐 하지만 input을 클릭하면 테두리가 나타남 ●outline: none 으로 클릭하면 나타나는 테두리 없애주기 -button 수정해주기 검색창과 검색버튼 위치 시켜주기 float: left / right 해주고 clearfix 해주는 대신 div에 overflow:hidden 해준다. 검색 [span으로 골격만들어서 검색창만들기] type, class, name 을 지정해 준다. -span 편집 : ..

바탕 이미지 고정시키기 ● background-attachment: fixed >> 큰 이미지를 사용해야한다. 웹표준 MENU [토탈 네비게이션 만들기] meta 설명 넣어주기 >> 웹페이지의 상세설명 viewport가 있어야 반응형이 적용이 된다. html 골격만들기 [skip 네비게이션] 아이디 컨텐츠 안에 섹션으로 나눠서 창을 100%사용할 수 있도록 한다. #wrap > #header, #footer > .container >.header, .footer #wrap > #contets > .cont_nav , .cont_tit, .cont_ban, .cont_cont > .container > .tit , .ban, .cont css 편집하기 아이디 먼저 넣어주고 각 아이디 안에 자식 넣어준다. ..

피그마에서 이미지 600 x 600 px 사이즈로 만들어서 작업할 폴더에 export하기 css reset 셋팅하기 html 바디안에 section(카드부분)이 들어가야한다. css 에서 편집하기 body: 배경색 넣어주기 ! section 태그 박스 넣어주기 width : 340px 너비값 넣어주고 높이값은 안넣어준다. 하지만 padding 값을 넣어주면 너비값이 지정되어있기 때문에 높이값이 30+30 으로 되서 60px이 지정됨 margin : 50px auto; 는 박스를 가운데 정렬을 해준다. box-shadow: 10px 10px 30px rgba(0,0,0,0.1) > 그림자 투명도 지정해준다. html에 다시 돌아가서 섹션 안에 nav 태그 넣어주기 폰트어썸에서 bar 아이콘 복사해서 nav..

● 코드 정렬 : ctrl+a > ctrl + k f ● > : 바로 밑에 있는 태그를 지정할 때 사용 ex: #wrap > div 태그 명령어 줄여서 쓰는 방법 html mosue hover 마우스 오버효과 앞면입니다. mosue hover 마우스 오버효과 뒷면입니다. mouse hover_상하회전 마우스 오버효과 앞면입니다. mouse hover_상하회전 마우스 오버효과 뒷면입니다. css @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } img{ display: block; } body{ height: 100vh; background-color: #0f2027; } #wrap{ height: 100vh; /* 정렬할 때 세로..