코딩 성장기

모든 컨텐츠들은 자신만의 영역을 가지고 있다. 웹 페이지에서 모든 요소들은 공간을 가지고 있다. 이 영역들은 HTML의 태그로 인해 만들어지며, 각 영역들은 박스라고 부른다. 이 요소들은 직사각형 형태로 이루어져 있으며, CSS를 이용해서 크기/디자인 등을 적용시킬 수 있다. 박스 종류에 따른 특징 block inline inline-block 줄바꿈 여부 가능 불가능 불가능 박스가 차지하는 너비 화면 100% 글자수 만큼 글자수 만큼 박스 크기 설정 가능 불가능 가능 대표 태그 , - block 박스는 컨텐츠가 화면의 한 줄을 모두 차지하든 안하든, 화면의 한 줄을 모두 차지 inline 박스는 다른 요소 옆으로 붙어서 존재할 수 있음 inline 박스는 CSS를 이용하여 크기 조절을 할 수 없음. C..

HTML/CSS 박스 모델 정리 계산기 어드밴스드 일부 계산기 CSS 처리 요소수 지도 페이지 목업에 따라 HTML 코드 짜기 -HTML/CSS 박스 모델 정리 -> 나중에 웹 페이지등을 작업하면서 알게되는 새로운 개념들은 그때그때 추가한다 -계산기 CSS 처리 ->paddng 값과 margin 값을 변경하며 계산기를 꾸며보았지만 디자인이 전혀 변하지 않았다. 그 이유를 찾아야 한다. -요소수 지도 HTML 코드 짜기 ->tab UI를 이용하여 서로 다른 페이지 넘어가는것 처리했음 계획은 많이 세웠지만, 생각보다 하루에 내가 처리할 수 있는 양은 한정적인것 같다. 내가 처리 할 수 있는 양은 최대 3개 정도 인것 같으므로 무리하게 학습 계획을 세우지 않도록 해야겠다. 계산기 구현 문제를 아직 모두 완료하..

CSS 텍스트 부분 공부 코드스테이츠 계산기 구현 베어미니멈 어드벤스드 일부 진행 코드잇 로그인 페이지 실습 코드잇 여행사이트 실습 코드잇 썸머 뮤직 페스티벌 페이지 실습 파이썬으로 자동 로그인 프로그램 구현 일찍 일어나는 방법 찾기 CSS 텍스트 부분 정리 계산기 구현 베어미니멈 완료 -> 조건문을 쓸때 .textContent를 왜 쓰는지 공부 ->어드밴스드 해야함. 코드잇 로그인 페이지 실습 일찍 일어나는 방법 찾기..

만약 주어진 점수가 100을 초과하거나 0 미만인 경우, 문자열 'INVALID SCORE'를 리턴해야 합니다. 각 등급의 최고 점수보다 7점 이하인 경우, 등급과 함께 '-'를 리턴해야 합니다. (단, 93점의 경우에는 A를 리턴해야 합니다.) 각 등급의 최저 점수보다 8점 이상인 경우, 등급과 함께 '+'를 리턴해야 합니다. F+ 와 F- 는 존재하지 않습니다. 내가 쓴 코드 function convertScoreToGradeWithPlusAndMinus(score) { //A+ 받는경우와 F 받는경우 처리 if(score === 100){ return 'A+' } if(0

색상 속성명 : color 속성값 : 색깔 이름을 직접 영어로 입력해주거나, HEX(16진수로 된 색깔 값)를 입력한다. - 글자 색이 아닌, 박스 테두리 색/배경 색 등에도 같은 방법으로 속성값을 줄 수 있음 (속성 명만 다르게 한다. border-color/backgroud-color 등) 글꼴 속성명 : font-family 속성값 : "폰트이름" 형식으로 작성해준다. 지정한 폰트가 웹 페이지에서 사용되지 않는 경우를 대비하여 여러개를 ',(콤마)'로 구분하여 쓸 수 있다. 앞에서 부터 순서대로 적용됨. 아무리 다양한 글꼴을 적용하더라도, 해당 글꼴이 사용자의 기기에 설치가 되어있지 않으면 사용할 수 없다. 따라서 웹 폰트 기술을 적용하여 이러한 문제를 해결할 수 있다. Google Fonts 서비..

CSS란? CSS = Cascading Style Sheets 의 줄임말로써, 웹 페이지의 디자인을 담당한다. 크게 2가지 역할을 한다고 볼 수 있다. 콘텐츠의 배치(위치 설정, 레이아웃 디자인) 타이포그래피 CSS의 사용목적 CSS를 이용한 디자인을 통해 UI/UX를 만족시킨다. - UI : User Iterface의 약자. 사용자가 마주하게 되는 면(디자인)을 지칭하며, (폰트, 레이아웃, 컬러 등) 사람과 프로그램이 소통할 수 있는 요소를 제공한다.(클릭시 프로그램이 작동하는 버튼 등) -UX : User Experiennce의 약자. 사용자 입장에서 편리한 사용 및 만족도를 충족시킬 수 있는 디자인을 지칭한다.(검색버튼은 최상단에 위치시키고, 프로필은 왼쪽 상단부에 위치시키기) 사람의 만족시킬 수..

-JS 문자열 개념 정리 -CSS 개념 정리 -소수 판별 코드 리뷰 -JS 문자열 개념 정리 👉개념 글에 작성해둔, 추가 공부 부분 빼고 완료 -CSS 개념 정리 👉완료 얻고 싶은게 있다면, 잃어야 할 것들도 존재한다. 생각보다 시간은 한정적이고 하루에 소화할 수 있는 양이 내가 목표한 양보다 적다는것을 깨달았다. 시간의 소중함을 한번 더 느끼게 되었다.

-JS 문자열 개념 정리 -CSS 개념 정리 -소수 판별 코드 리뷰 할것들이 산더미 만큼 쌓여있으나 그것들을 외면하고 약속을 잡고 놀러나갔다. 사실 약속 나가기 전에도 공부 할 시간이 있었고 집에 들어와서도 공부 할 시간이 있었다. 하지만 하지 않았다. 공부 공간을 바꿔야 할 것 같다. 집 = 쉬는장소 이게 몸에 박혀서 공부가 안되는 듯 하다.

웹 페이지에서 각 언어별 역할 HTML : 웹 페이지의 구조를 만들고 웹 페이지에 들어갈 내용을 넣는다. CSS : 웹 페이지에 스타일을 적용하여 디자인을 한다. JavaScript : 웹 페이지의 동적 역할을 제어한다. 집 짓기로 보는 각 언어의 역할 HTML - 집의 어느부분에 현관문을 설치할지, 창문을 설치할지, 부엌은 어느 공간에 위치시킬지 등을 정해서 설계도를 그린다. CSS - 집의 외벽은 어느색깔로 칠할지, 창문의 크기는 어느정도로 할지 등의 디자인을 정한다. JavaScript - 언제 전등이 켜질지, 어떻게 해야 수도꼭지에서 물이 나오는지 등 동적인 부분을 처리한다. HTML 이란? HTML = Hyper Text Markup Language 마크업 언어들 중의 한 종류(XML, TEX,..

-웹퍼블리싱 개념 정리(HTML, CSS) -반복문 _무한루프 정리 -문자열 개념 정리_관련 함수들까지 -코플릿에서 헷갈렸던 코드 리뷰 하기 --웹퍼블리싱 개념 정리(HTML, CSS) 👉HTML 정리 완료 -반복문 _무한루프 정리 👉x -문자열 개념 정리_관련 함수들까지 👉x -코플릿에서 헷갈렸던 코드 리뷰 하기 👉문제만 다시 풀었음 전날 너무 늦게 잤던 탓인지, 제시간에는 일어났지만 하루종일 너무 피곤했다. 급기야 오후 3시 즈음에는 너무 잠이 몰려와서 도저히 공부에 집중할 수 없는 지경에 까지 이르렀다. 반 수면 상태로 공부를 했더니, 공부가 제대로 되지 않았다. 컨디션 조절도 공부에 중요하다는 것을 깨달았다. 같이 공부를 했던 사람들과 코드를 비교해 보며 코드 작성에는 정말 여러가지 방법이 있다는..