CSS 썸네일형 리스트형 [항해 플러스 코육대 토이프로젝트] 세뱃돈 계산기 만들기 계산기를 만드는 과정 0. SPRING, HTML, CSS, JAVASCRIPT를 사용하여 세뱃돈 계산기를 만들었다. 1. 계산기 뼈대는 table 태그를 사용했다. 1x4 테이블을 7줄 만들었다. display(입력) 병합 후 input 태그를 만들어줬고, result(결과) 부분도 병합후 input 태그를 만들어줬다. 각 테이블의 데이타를 클릭하면 onclick 이벤트가 발생하고 각 데이터에 맞는 문자(char)를 입력칸에 add 한다. AC C / 7 8 9 * 4 5 6 - 1 2 3 + 0 . = 2. reset1() - AC버튼, reset2() - C버튼 , add() - 입력, calculate() - 출력에 해당하는 javascript 함수를 만들어준다. 3. 가을 느낌의 계산기로 CSS.. 더보기 [CSS] HTML 16진수 색상코드에 대해 알아보자 HTML 16진수 색상코드란? #65ffba 위 색상코드는 대제목 서식의 색상 코드입니다. HTML 16진수 색상코드는 웹 프로그래밍(프런트엔드)에서 사용합니다. CSS 코드를 작성하면 흔히 볼 수 있는 코드입니다. HTML 코드는 "#"와 6자리 숫자로 되어있습니다. 이 숫자는 16진법의 숫자 시스템입니다. 예를 들면 16진법에서 "FF"는 십진법에서의 숫자 25를 나타냅니다. HTML컬러 코드에서 처음 두 자리의 상징은 빨강의 강도를 나타냅니다. 00는 최솟값이며 FF는 최댓값을 의미합니다. 세 번째와 네 번째는 녹색의 강도를 표현하며 다섯 번째 및 여섯 번째는 파랑의 강도를 나타냅니다. 빨강, 녹색 그리고 파랑을 조합하여 희망하는 컬러를 만들 수 있습니다. ※ RGB란? RGB(적·녹·청)에 의해 .. 더보기 아이콘 무료 사이트 추천 : flaticon 아이콘 이미지가 필요한 경우 개인프로젝트로 자기소개 웹페이지를 만들고 있습니다. 세세하게 보니 수정할 게 많더라고요. 특히 사용자의 입장에서 보기 좋게 디자인을 설정하는 것이 필요했습니다. '네이버 블로그' 라는 텍스트에 링크를 거는 것보다 네이버 블로그 아이콘을 등록해두면 더 보기 좋고 가독성이 있죠. 티스토리 블로그도 마찬가지고요. 포트폴리오에 Spring, Javascript, Python에 해당하는 아이콘 이미지를 넣어두면 이해하기가 쉬워요. 기존에는 font awesome에 들어가서 링크를 복사해왔는데 무료로 사용하다보니 종류가 제한적이었어요. 그래서 더 나은 아이콘 이미지 사이트를 찾아봤습니다. flaticon(플래티콘) flaticon이라는 사이트입니다. font awesome보다 종류가 많.. 더보기 정적 페이지 완성, 미디어 쿼리 적용 1. HTML, CSS만을 이용하여 정적 페이지는 완성했다. 2. 이제는 미디어쿼리를 이용하여 동적 페이지를 만들어보자. 미디어 쿼리는 특정 영역에만 CSS를 적용할 때 사용한다. if문과 비슷하다. 반응형 웹사이트를 만들 때 주로 쓰는데 화면크기가 줄어들면 거기에 맞춰 main, section 영역이 같이 줄어든다. @media screen and (max-width: 1140px){ main .contatiner{ width:992px; } section .container{ width:600px; } section .about-self .left{ width: 100% ; } section .about-self .right{ width: 100%; padding: 0; } section .do-me.. 더보기 개인프로젝트 What I DO 영역 완성 개인프로젝트 What I DO 영역까지 완료. 내일은 배경 영역을 완료해보자. 그리고 책에 나온대로 만들어봐야겠다. 원본코드를 따라가되 약간씩 변형하는 것이 좋다. 코드 자체가 이해가 안될 때가 있는데 고쳐보면 뭐가 달라지는지 알 수 있기 때문이다. 일단 이모티콘 홈페이지는 두 번째 프로젝트로 하고, 포트폴리오 웹페이지부터 만들어보자. 내일 수정할 것. 왜 책에 나온대로 하면 가운제 정렬이 되지 않을까? 교과서에 없는 내용을 넣자 가운데 정렬이 됐다. what I DO도 마찬가지다. 하얀 박스들이 왼쪽으로 붙어가지고 옮기느라 고생했다. 더보기 헤더 영역과 메인 영역 완성. 헤더 영역과 메인 영역을 끝냈다. 아직 초안이고 대략적으로 만들었다. 앞으로 계속 수정하게 될 것이다. 이제는 각 섹셕 영역을 만들어볼 것이다. 메인 영역을 제외한 나머지 영역을 섹션영역으로 볼 수 있다. 먼저 About 영역이다. 섹션영역을 만드는데 계속 막히고 있다. 시키는대로 코드를 입력했는데도 결과물이 나오지 않는다. 본문을 이미지와 텍스트로 나누고 싶은데... float 속성으로 레이아웃을 분할하고 각각 너비의 절반씩 차지하도록 지정? 반반으로 나눠지지 않는데 아... section 태그인데 div를 써놨다. 그냥 다 지우고 다시 입력해야겠다. 그냥 다시 했다. 결과물... 교과서대로 그대로 입력하는 것도 힘들다. 2시간 동안 뭘 한건지? 코딩하면서 매번 느끼지만 하고 나면 뭘했지? 라는 질문을.. 더보기 CSS, vh은 무엇일까? px는 많이 봤지만 vh는 첨 봤다. vh는 viewport height를 의미한다. viewport는 사용자가 웹사이트를 볼 때 보이는 영역을 말한다. 뷰포트의 높이는 뷰포트의 세로길이다. vh는 뷰포트의 일정 비율을 나타내기 때문에 웹사이트를 뷰포트에 맞게 반응형으로 만들 때 유용하다. 아래는 코드 예시와 화면모습이다. Hello, World! vh가 50일 때 Hello, World! 정리하면 vh는 뷰포트의 일정 비율을 나타낸다. 100vh면 뷰포트 세로길이 전부를 말하며 50vh면 절반을 뜻한다. px과 비교해보면 어떨까? 만약 뷰포트가 100px이라면 1vh는 1px이다. 뷰포트가 650px이라면 1vh는 6.5px이다. 더보기 코딩 개인프로젝트 : 웹페이지 만들기 개인프로젝트를 시작한다. 웹페이지 만들기, 도메인 등록 및 수익화가 목표다. 일단 HTML, CSS, Javascript 부분부터 만든다. 오늘은 헤더부분을 만들었다. 1. HTML 코드 JSH About Features Portfolio Contact 2. CSS 코드 *{ margin: 0; padding: 0; box-sizing:border-box; } a, a:link, a:visited{ color:inherit; text-decoration:none; } li{ list-style:none; } .container { width:1140px; margin:0 auto; } header{ position:absolute; color:black; top:0; z-index:1; width:100.. 더보기 이전 1 2 다음
