본문 바로가기

Learn

 (80)
계산기 복습 실시간 세션에서 나온 내용 1. 글로벌 셋업 CSS에 공통된 스타일을 디폴트 값으로 정할 때 사용하는 방법 중 하나. 그 외에도 알아본 결과 Global CSS는 default값이다. 다른 스타일을 적용하고 싶으면 원래 하던대로 스타일을 지정하면 된다. css(cascading style sheet): 가장 최상위에서 스타일을 적용하면 자식이 덮어씌워지게 된다. 자식에 스타일을 지정하면 자식에서는 그 스타일이 우선시 된다. 2. 컨테이너 안에 마진이나 패딩을 위아래로 할 때 버튼들이 벗어나는 현상 / 박스사이징을 미리 했었는데도 불구하고 계산기 새로 만들 때 다시 한번 해보기. 3. flex box 와 flex-grow가 아닌 flex-basis를 주로 사용하여 코드를 줄임. 4. hover>ul {di..
HTML/CSS 활용 복습 와이어프레임(Wireframe) 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계 Flexbox Flex(Flexible)는 "잘 구부러지는, 유연한"이라는 뜻입니다. Flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법 부모 요소에 적용해야하는 Flexbox 속성들 1. flex-direction : 정렬 축 정하기 flex-direction 속성은 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다. 아무 설정도 해주지 않으면 기본적으로 가로 정렬을 합니다. 2. flex-wrap : 줄 바꿈 설정하기 flex-wrap 속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정합니다. 설정해 주..
계산기 2일 차 최종적으로 만든 목업 완성. 힘들게 만든 첫 목업이니 만큼 애착이 많이 갔지만, 다른 사람들과 비교를 하자니 부족한 것이 많은 목업이 였다. 첫번째로 내가 원하는 이미지를 제대로 구축해 나가지 못했다. 분명 목적지를 정해놨는데, 처음엔 잘 가고 있었으나 그 목적지가 맘에 들지 않아 자꾸 다른 목적지를 향해 가려고 하다보니 이도저도 아닌 것이 되어버렸다. 두번째는 응용력 부족이다. 단순히 계산기를 만들기에 개념은 충분히 페어를 통해 배웠다. 그리고 같이 잘 활용하여 만들었으나, 만들었음에 만족하고 더 괜찮은 계산기를 만들기에 몰입하지 않았다. 이 두가지는 앞으로의 이 길을 선택함으로서의 큰 피드백이 되어 고쳐나가야 할 점으로 계속 되새기며 살아야겠다고 생각이 들었다.
계산기 목업 1일 차 3시간에 걸쳐 만든 계산기 목업을 만들어 봤다. 사진에 맞게 만들라고 했지만 시간이 부족한 관계로 여기까지 해봤다. 페어의 많은 도움이 있었다. 개념 하나하나 알려주면서 도와주는 모습이 너무 멋있었다. 아직 요소나 속성을 다 외우지 못하여 오픈북으로 계속 보면서 하니 시간이 많이 걸리긴 했지만 만드는데 재미는 있었다. 앞으로 버튼의 명암과 숫자모양, 색깔, 숫자크기, 등등 해야 할 것은 많지만 무엇을 해야할지 정리해서 페어에게 조금이라도 도움이 되고싶다.
CSS 기초 정리 CSS (Cascading Style Sheets) CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어 HTML로 구조를 세우고, 사용자 경험(UX, user experience)을 제공하기 위해 CSS로 UI 및 레이아웃을 적절히 구성 사용자 인터페이스(UI; user interface) 사람과 사물 또는 시스템, 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있게 만들어진 매개체. 사용자 경험(UX; user experience) 제품,시스템,서비스를 사용하면서 인간이 얻게 되는 지각과 반응의 합. CSS 내용 분해하기 셀렉터(selector) : 요소 이름이나 id 또는 클래스를 선택 선언 (Declaration) : 요소에 적용할 수 있는 내용의 속성을 작성 * id와 cla..
HTML 기초 정리 HTML 이란 틀! 구조를 표현하는 언어. 그 외) CSS : 구조를 잡힌 것을 꾸미는 것. 스타일시트 Javascript : 틀 안에서 사용되는 기능. 기능 구현 HTML 기본 구조 요소 (element) : HTML 문서나 웹 페이지를 이루는 개별적인 요소. 태그(tag) : HTML을 구성하는 기본 단위. ex) , , , , 등등 속성 (attribute) : 태그의 유형을 수정, 태그의 동작을 제어하기 위해 "여는 태그" 안에 사용되는 특수 용어. HTML 속성의 이름 "class" HTML 속성의 값은 "paragraph" 콘텐츠 (contents) : 태그에 맞게 태그 사이에 들어가는 보여지는 글 많이 쓰이는 태그 종류 : division. 한 줄의 공간 가짐. : 콘텐츠 크기만큼의 공간을 ..
반복문 어려웠던 문제 피드백 makeDigits2 문제 수(num)를 입력받아 1부터 num까지의 정수로 구성된 문자열을 리턴해야 합니다. 입출력 예시 let output = makeDigits2(5); console.log(output); // --> "1-2-3-4-5" output = makeDigits2(7); console.log(output); // --> "1-2-3-4-5-6-7" --- function makeDigits2(num) { //수(num)를 입력받아 1부터 num까지의 정수로 구성된 문자열을 리턴해야 합니다. //숫자(number string) 사이를 '-'로 구분합니다. ('1-2-3-4-5') let result = '1' //string 타입을 리턴 이때 1부터 시작 let i = 2 // whil..
조건문 어려운 문제 피드백 convertScoreToGradeWithPlusAndMinus 출력 string 타입을 리턴해야 합니다. 각 등급의 최저 점수는 아래와 같습니다. ('F'의 경우 최대 점수를 표기) 90 이상 --> 'A' 80 이상 --> 'B' 70 이상 --> 'C' 60 이상 --> 'D' 60 미만 --> 'F' 주의 사항 만약 주어진 점수가 100을 초과하거나 0 미만인 경우, 문자열 'INVALID SCORE'를 리턴해야 합니다. 각 등급의 최고 점수보다 7점 이하인 경우, 등급과 함께 '-'를 리턴해야 합니다. (단, 93점의 경우에는 A를 리턴해야 합니다.) 각 등급의 최저 점수보다 8점 이상인 경우, 등급과 함께 '+'를 리턴해야 합니다. F+ 와 F- 는 존재하지 않습니다. 입출력 예시 let ou..

티스토리툴바